jQuery减少了代码的书写量，为前端开发节省了很多时间。有关于JavaScript常用函数请看这里 JavaScript常用函数收集
一、jQuery添加移除CSS类的方法
1 . addClass() – 添加CSS类
$(“#target”).addClass(“newClass”);
//#target 指的是需要添加样式的元素的ID
//newClass 指的是CSS类的名称
2 . removeClass() – 移除CSS类
$(“#target”).removeClass(“oldClass”);
//#target 指的是需要移除CSS类的元素的ID
//oldClass 指的是CSS类的名称
3 . toggleClass() – 添加或者移除CSS类：如果CSS类已经存在，它将被移除；相反，如果CSS类不存在，它将被加上。
$(“#target”).toggleClass(“newClass”);
//如果ID为“target”的元素已经定义了CSS样式，它将被移除；
//反之，CSS类”newClass“将被赋给该ID。
jQuery还提供用来判断某个元素是否已经被赋予某个CSS类的方法，如下：
1 . hasClass()方法是用来检查被选择的元素是否包含指定的class名，其语法：
$(selector).hasClass(“className”);//其中class是必须的值，规定需要在指定元素中查找的类名。
hasClass()也可以同时写多个class但他们之前用空格隔开，如下：
$(selector).hasClass(“className1 className2″);
2 . is()方法也是用来检查被选择的元素是否包含指定的class名，其用法为：
$(selector).is(“.className”);
同样is()也可以有多个类名的写法，如下：
$(selector).is(“.className,.className”);
hasClass()方法与is()方法有同各功能，但hasClass()方法的用时较短，所以说hasClass()方法在性能上是优于is()方法的。
二、jQuery模拟鼠标点击事件
$(“#b”).click(function(){$(“#a”).trigger(“click”)})；
$(“#a”).trigger(“click”)就是执行#a的click事件
三、jQuery特殊节点的遍历方法
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<!DOCTYPE html> <html> <head> <title></title> <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //-----举例1.获取节点之前的挨着的第一个兄弟元素 //var $divs = $("#div2").prev("div"); //只获取div //ShowArraysID($divs); //-----举例2.获取节点之前的所有兄弟元素 //var $divs = $("#div2").prevAll("div"); //只获取div //var $divs = $("#div2").prevAll(); //获取所有兄弟元素 //ShowArraysID($divs); //-----举例3.获取节点之后的挨着的第一个兄弟元素 //var $divs = $("#div2").next("div"); //只获取div div2后紧挨着的是input所以返回零个元素 //ShowArraysID($divs); //-----举例4.获取节点之后的所有兄弟元素 类似prevAll 方向相反 //var $divs = $("#div2").nextAll(); //获取所有兄弟元素 //ShowArraysID($divs); //-----举例4.siblings()方法用于获取所有同辈元素(前后都拿到) //$(".menuitem").siblings("li")。siblings、next等所有能传递选择器的地方能够使用的语法都和$()语法一样。 //var $divs = $("#div2").siblings("div"); //获取id为div2前后的所有div元素 //ShowArraysID($divs); var $divs = $("#div2").siblings(); //获取id为div2前后的所有元素 ShowArraysID($divs); }); function ShowArraysID($jqueryArr) { var output = ""; for (var i = 0; i < $jqueryArr.length; i++) { if (output == "") { output = $jqueryArr.eq(i).attr("id"); } else { output += "," + $jqueryArr.eq(i).attr("id"); } } alert(output); } </script> </head> <body> <div id="div1">我是div1</div> <input id="Text3" type="text" value="我是text1" /> <div id="div2">我是div2</div> <input id="txt1" type="text" value="我是text1" /> <div id="div3">我是div3</div> <input id="Text1" type="text" value="我是text2" /> <div id="div4">我是div4</div> <input id="Text2" type="text" value="我是text3" /> <div id="div5">我是div5</div> </body> </html> |
四、监听dom变化事件（页面不刷新即可监听html的变化）
|
0 1 2 3 4 5 6 7 8 9 10 11 |
$("body").bind('DOMNodeInserted', function(e){ //bind()为被添加一个或多个事件 $(".a").prev(".b").remove(); //删除a之前的挨着的第一个b元素 alert(e.target.nodeName + " & " + e.target.nodeType); /*nodeType 属性可返回节点的类型。 最重要的节点类型是： 元素类型 节点类型 元素element 1 属性attr 2 文本text 3 注释comments 8 文档document 9 */ }); |
可用于ajax请求的返回页面，只要在每次触发这个事件获取到的event.target，判断其DOM内容是否有将要插入部分的结构特征然后进行插入就可以了。
DOM2级的变动（mutation）事件能在DOM中的某一部分发生变化时给出提示，如下：
（1）DOMSubtreeModified：在DOM结构中发生的任何变化时触发。这个事件在其他任何事件触发后都会触发。
（2）DOMNodeInserted：在一个节点作为子节点被插入到另一个节点中时触发。
（3）DOMNodeRemoved：在节点从其父节点中被移除时触发。
（4）DOMNodeInsertedIntoDocument：在一个节点被直接插入文档或通过子树间接插入到文档之后触发。这个事件在DOMNodeInserted之后触发。
（5）DOMNodeRemovedFromDocument：在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发。这个事件在DOMNodeRemoved之后触发。
（6）DOMAttrModified：在特性被修改之后触发。
（7）DOMCharacterDataModified:在文本节点的值发生变化时触发
.bind('DOMNodeInserted', function(e) {
alert('element now contains: ' + $(e.target).html());});