jQuery技术

DOM节点的操作

字号+ 作者:H5之家 来源:H5之家 2017-02-04 08:00 我要评论( )

JQuery学习--DOM节点的操作

Jquery中DOM节点的创建:直接将所需节点代码写入$(“html节点代码”)中即可,返回一个变量,然后将该变量添加到现有DOM元素中即可。

已有对象.append(要添加的对象)

作为最后一个子元素添加

要添加的对象.appendTo(已有对象)

prepend()/prependTo()

作为第一个子元素添加

已有元素.before(要添加的元素)/after()

在对象前面/后面添加新的元素,可用逗号分割添加多个元素

 

要添加的元素.insertBefore(已有元素)/insertAfter()

 

.empty()

删除元素所有子节点

.remove(“selector”)

删除自身整个元素,可以添加筛选参数

.detach()

删除节点,并将其保存在返回对象中,之后可以再次调用添加

.clone()

克隆节点结构,选填参数true后会同时克隆节点的事件

old.replaceWith(new)

new.replaceAll(old)

用旧元素替换新的元素

.wrap(parent)

将每个元素包裹一个父元素

.unwrap()

去除外层包裹

.wrapAll()

将所有元素包裹一个父元素

.wrapInner()

将每个元素内部包裹一个子元素

JQuery元素遍历

.children()

选中直接子节点,括号内可填选择器

.parent()

选中直接父节点,括号内可填选择器

.parents()

选中所有的祖先节点

.closest(selector)

向上查找最近的满足条件的祖辈元素

.find(selector)

选中所有满足条件的后代元素

.next()

选中紧邻下一个同辈节点,可选填选择器

.prev()

选中紧邻前一个同辈节点,括号内可选填

.siblings()

选中所有同辈元素,括号内参数可选

.add()

添加新的选择

.each(function(index,element){this})

对每个进行函数操作,提供三个参数

 

 

注:选择器返回多个结果的可以通过括号内的选择器进行筛选,例如$('.item-2').next(':first'),选中多个类名为item-2的下一个节点,但:first只筛选了第一个。若括号内不填选择器,则默认选中所有的结果。

贴一个
使用each的例子:<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> .left { width: auto; height: 150px; } .left div { width: 150px; height: 120px; padding: 5px; margin: 5px; float: left; background: #bbffaa; border: 1px solid #ccc; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <h2>each方法</h2> <div> <div> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> </ul> </div> <div> <ul> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li> </ul> </div> </div> <br/> <button>点击:each方法遍历元素</button> <button>点击:each方法回调判断</button> <script type="text/javascript"> $("button:first").click(function() { //遍历所有的li //修改每个li内的字体颜色 $("li").each(function(index, element) { $(this).css('color','red') }) }) </script> <script type="text/javascript"> $("button:last").click(function() { //遍历所有的li //修改偶数li内的字体颜色 $("li").each(function(index, element) { if (index % 2) {//使用index参数 $(this).css('color','blue')//this形参指的是正在遍历的节点 } }) }) </script> </body> </html>

Tags:jquery   JQuery学习  

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • jQuery学习笔记之2个小技巧

    jQuery学习笔记之2个小技巧

    2017-02-04 08:00

  • 不要过度依赖JQuery(三)

    不要过度依赖JQuery(三)

    2017-02-03 18:09

  • jQuery学习笔记(四):attr()与prop()的区别,jqueryattr

    jQuery学习笔记(四):attr()与prop()的区别,jqueryattr

    2017-02-03 17:03

  • JQuery UI accordion学习笔记

    JQuery UI accordion学习笔记

    2017-02-03 17:01

网友点评
r