jQuery操作dom对象
Posted www-yang-com
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery操作dom对象相关的知识,希望对你有一定的参考价值。
SlideToggle()的滑入的介绍:
只是改变高度的方法
事件bind和on 和live和delegate的用法以及他们相应的取消使事件。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src = "js/jquery-migrate-1.2.0.js"></script> <script type="text/javascript" src = "js/jQuery1.11.1.js"></script> <style type="text/css"> ul>li{ list-style:none; } </style> <script type="text/javascript"> $(function(){ /* on(events,[selector],[data],fn) 参数:events,[selector],[data],fn)* events:一个或多个用空格分隔的事件类型和可选的命名空间,如”click”或”keydown.myPlugin” 。 selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略,当它> 到达选定的元素,事件总是触发。 data:当一个事件被触发时要传递event.data给事件处理函数。 fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。 */ on事件 /* $("li").on("click",function(){ alert("我是on的触发事件"); }); //与on相对应的是off的事件:取消事件 $(function(){ $("li").off("click"); }); //bind的事件: $("button").bind("click",function(){ $("ul").toggle(); }); //bind的事件相反的是unbind事件 $(function(){ $("button").unbind("click"); }); */ Live事件 //----------------live-------------- //live与bind区别于live只实现一个事件 /* $("button").live("click",function(){ $("ul").slideToggle(); }); $(function(){ $("button").die("click"); }); */ //delegate $("button").delegate("button","click",function(){ $("ul").slideToggle(); }) /* $(function(){ $("button").undelegate("button","click"); }); */ }); </script> </head> <body> <div> <button>求点点我吧</button> <ul id = "myul"> <li>hello</li> <li>word</li> <li>你好</li> <li>世界</li> </ul> </div> </body> </html> 删除,替换,克隆节点。 //删除节点 //$("ul li:first").remove(); //替换节点 /* var myfirst = $("<li>(????)??嗨</li>"); $("#myul li:first").replaceWith(myfirst); */ //hover()的光棒效果 $("li").hover(function(){ $(this).css("background","pink"); }, function(){ $(this).css("background",""); }); //克隆节点 var myclone = $("#myul li:first").clone(); $("ul").append(myclone); ToggleClass()的介绍: 如果存在(不存在)就删除(添加)一个类。
以上是关于jQuery操作dom对象的主要内容,如果未能解决你的问题,请参考以下文章
jQuery学习笔记--jQuery对象与DOM对象相互转换