2017-6-3 jQuery 事件 DOM操作

標籤：setattr   move   tee   ble   冒泡   cli   class   cti   seo   

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);    });

 

2017-6-3 jQuery 事件 DOM操作