2017-6-3 jQuery 事件 DOM操作

1、 jQuery 事件:

  ////hover:相当于相当于把mouseover()mouseout()合二为一
    //$("#div1").hover(function ()
    //{
    //    $(this).css("background-color","red");
    //},
    //    function ()
    //    {
    //        $(this).css("background-color", "blue");
    //    });

    //toggle:点击事件循环执行
    //$("#div1").toggle(function ()
    //{
    //    $(this).css("background-color","red");
    //}, function ()
    //{
    //    $(this).css("background-color","blue");
    //}, function ()
    //{
    //    $(this).css("background-color", "green");
    //}, function ()
    //{
    //    $(this).css("background-color", "gray");
    //});
    //未来元素live的用法:
    //$(".div2").click(function () {
    //    alert("aa");
    //});

$(".div2").live("click", function () {
          alert("aa");
      });

 
  //阻止事件冒泡:
    //$("#div1").click(function ()
    //{
    //    alert("111");
    //    return false;
    //});
    //$("#div2").click(function () {
    //    alert("222");
    //    return false;
    //});
    //$("#div3").click(function () {
    //    alert("333");
    //    return false;
    //});
    //$("#div4").click(function () {
    //    alert("444");
    //    return false;
    //});

2、DOM操作:

 // 操作属性:
    $("#div1").click(function () {
        if ($("#btn1").attr(‘disabled‘) == ‘disabled‘) {
            $("#btn1").removeAttr(‘disabled‘);
        }
        else { $("#btn1").attr(‘disabled‘,‘disabled‘);}

    });

 //操作样式表的class:
    $("#div1").click(function ()
    {
        if ($("#btn1").attr(‘class‘).indexOf(‘b2‘) == -1) {
            $("#btn1").addClass("b2");
        }
        else
        {
            $("#btn1").removeClass("b2");
        }

        $("#btn1").toggleClass(‘b2‘);
    });

 $("#div4").click(function ()
    {
        alert($(this).parent().parent().attr(‘id‘));

    });
    $("#div4").click(function () {
        alert($(this).parent().attr(‘id‘));

    });
 $("#btn1").click(function ()
    {    //新建:
        var d1 = document.createElement(‘div‘);
        d1.setAttribute("class", "div2");
        $("#div1").append(d1);
        新建:$("HTML字符串")
        $("#div1").append($("<div class=‘div2‘></div>"));
    });
   // 复制:
    $("#btn1").click(function () {
        var a = $(".div2:eq(1)").clone();
        $("#div1").append(a);
    });
时间: 2024-10-06 00:45:26

2017-6-3 jQuery 事件 DOM操作的相关文章

Jquery 事件 DOM操作

常规事件: 把JS的事件  on去掉即可 例如:js    document.getElementById("id").onclinck=function(){} Jquery  $("#id").click(function(){  事件发生的事}); 复合事件 hover(function(){}   ,   function(){})     移入移出事件 toggle(function(){} , function(){}  ....)可以有无数个funct

【jquery基础教程】jquery事件及操作大汇总

在学习Javascript语言中,有一个优秀的Javascript库是大家都会遇到的--jquery,今天小编汇总了jquery事件及操作,现在一起来看看jquery基础教程吧! 事件 bind()        向匹配元素附加一个或更多事件处理器 blur( )        触发.或将函数绑定到指定元素的 blur 事件 change()        触发.或将函数绑定到指定元素的 change 事件 click()        触发.或将函数绑定到指定元素的 click 事件 dblc

jQuery学习----------DOM操作

DOM操作之创建元素: DOM: var ele = document.createElement("element") 例子:document.createElement("div") jQuery: var $ele = $("element")    //返回的是一个jQuery对象 例子:$("<div></div>") DOM操作之输入文本: DOM: var txt = document.c

第3章 jQuery的DOM操作

一.  DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获取属性:elem.getAtrribute('title') 2.html-DOM document.div elem.src 3.CSS-DOM elem.style.color='red' 二. jQuery的DOM操作 1.查找节点 (1)元素节点 1 2 alert($('ul li:eq(

jQuery进行DOM操作记录

1.在元素内部插入DOM元素 ①插入到元素内部原有元素之后 append(content)      返回值:jQuery  参数-content:要插入的元素String,Element,jQuery 为每一个匹配的元素内添加一些元素,参数既可以是字符串也可以是jQuery对象,如下: $("#1").append("input type='button' value='确定'/>")   在1的内部元素的后面添加一个按钮 $("#1")

Jquery所有Dom操作汇总

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.1.11.1.min.js"></script> </head>

js,jQuery和DOM操作的总结(二)

jQuery的基本操作 (1)遍历键值对和数组 var arr = [9, 8, 7, 6, 5, 4]; $.map(arr, function (ele, index) { alert(ele + '===' + index); //第一个参数是数组里面的值,第二个参数是索引 }) //=========================================// var keyWord = { "name": "老牛", "age"

jQuery常用dom操作

操作属性节点(type属性不支持修改和删除) attr('name')——取值(如果jq对象是多个,则只取得第一个值,例如:$('.class').attr('name')——只获得第一个class的name属性值) attr('name','value')——赋值 如果参数是json对象,那么则会同时修改多个属性值,例如:var kv = {name:'username',value:'tom'}; $('#username').attr(kv); 还可以通过函数的返回值来修改属性值,例如:$

Jquery的dom操作与原生dom的转换

本片文章包含了 jquery常见dom操作. q与原生dom对象的区别与转换 伪数组对象的知识 如有错误,烦请指正. 增 以下方法共性:可以一次添加多个内容,内容可以是DOM对象.HTML string. jQuery对象 创建元素 var obj = $('<div class="test"><p><span>Done</span></p></div>'); 两种方法可以创建元素 直接写入html 传入一个原生d