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

?

轉載于:https://www.cnblogs.com/zhengqian/p/6940016.html

總結

以上是生活随笔為你收集整理的2017-6-3 jQuery 事件 DOM操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。