jquery第三弹dom操作(上)
2015-07-12 07:57
573 查看
所谓的dom就是一棵由html节点组成的树形结构,用jquery去操作这棵dom树,可以实现添加节点,删除节点,复制节点,替换节点等等操作。
第一:查找节点 可以通过标签查找节点 ex: $("ul li") 就是通过标签找到对应的节点;也可以通过属性查找节点同时可以设置节点的属性,ex:$("ul li").attr("title");查找含有title属性的节点,通过attr()可以根据 属性查找,也可以设置属性,通过 attr("attrName","value")来设置属性。
第二:创建节点, jquery创建节点分为两大类。
a:内部添加节点
append追加节点与appendTo追加节点的区别;$("dom").append(html);是将html追加到dom节点内部的后面,
$(html).appnedTo(dom)是将前面的html追加到后的dom节点元素内部的后面
prepend()追加某个节点内部的前面与prependTo()的区别和append与appendTo类似
b:外部添加节点
before 插入到某个节点的前面
after在某个节点的后面
insertAfter insertBefore 区别和append和prepend类似
第三:删除节点
a remove方法删除节点,包含子节点事件都被删除掉了
b empty 清楚dom节点的内容,节点结构被保存,后代元素被删除掉了,后代元素的事件也被清楚掉了
c detach 和remove一样没有发现区别
第四: clone节点,可以通过clone()这个函数复制相应的节点。这个clone()函数可以传递一个参数,
true or false 当传入true的时候表示同时复制这个节点的事件,不传或者传入false表示不复制这个节点的事件。
第五:替换节点
relaceWith() 或者replaceAll()替换节点这个也只是两种表现相应实现的操作完全一样。
第一:查找节点 可以通过标签查找节点 ex: $("ul li") 就是通过标签找到对应的节点;也可以通过属性查找节点同时可以设置节点的属性,ex:$("ul li").attr("title");查找含有title属性的节点,通过attr()可以根据 属性查找,也可以设置属性,通过 attr("attrName","value")来设置属性。
第二:创建节点, jquery创建节点分为两大类。
a:内部添加节点
append追加节点与appendTo追加节点的区别;$("dom").append(html);是将html追加到dom节点内部的后面,
$(html).appnedTo(dom)是将前面的html追加到后的dom节点元素内部的后面
prepend()追加某个节点内部的前面与prependTo()的区别和append与appendTo类似
b:外部添加节点
before 插入到某个节点的前面
after在某个节点的后面
insertAfter insertBefore 区别和append和prepend类似
第三:删除节点
a remove方法删除节点,包含子节点事件都被删除掉了
b empty 清楚dom节点的内容,节点结构被保存,后代元素被删除掉了,后代元素的事件也被清楚掉了
c detach 和remove一样没有发现区别
第四: clone节点,可以通过clone()这个函数复制相应的节点。这个clone()函数可以传递一个参数,
true or false 当传入true的时候表示同时复制这个节点的事件,不传或者传入false表示不复制这个节点的事件。
第五:替换节点
relaceWith() 或者replaceAll()替换节点这个也只是两种表现相应实现的操作完全一样。
相关文章推荐
- jQuery中each的break和continue
- JQuery UI——进度条
- javascript table排序之jquery.tablesorter.js
- jQuery学习笔记
- JQuery
- Jquery的知识学习积累,内附自己做的一个网站案例
- Jquery学习
- jQuery validationEngine 使用
- 通过Jquery中Ajax获取json文件数据
- Jquery Ajax同步在mobile safari浏览器中运行异常
- jQuery Easy UI Accordion(可伸缩的面板)包
- jquery实现图片上传之前预览的方法
- 1、jquery.form附件上传
- jQuery ajax提交form表单
- jquery ajax实现省市二级联动
- 使用JQuery实现手风琴布局
- jQuery源码学习一:对jQuery对象的一点思考
- 高仿webqq做的一个webos桌面效果和web聊天工具,桌面效果完善,功能强大
- 黑马day16 jquery案例演示
- angular封装jquery插件(组件)