JQuery DOM

来源：互联网发布：1998鹿鼎记 gotv源码编辑：程序博客网时间：2024/04/27 10:18

1.JavaScript创建节点及节点属性

使用JavaScript创建div节点元素

var body = document.querySelector('body');//返回文档中匹配指定 CSS 选择器的一个元素        document.addEventListener('click',function(){        //创建2个div元素    var rightdiv = document.createElement('div')    var rightaaron = document.createElement("div");    //给2个div设置不同的属性    rightdiv.setAttribute('class', 'right')    rightaaron.className = 'aaron'    rightaaron.innerHTML = "动态创建DIV元素节点";    //2个div合并成包含关系    rightdiv.appendChild(rightaaron)      //绘制到页面body   body.appendChild(rightdiv)    },false)

2.jQuery节点创建与属性的处理

var $body = $('body');    $body.on('click', function() {        //通过jQuery生成div元素节点        var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")        $body.append(div)    })

3.内部插入append()与appendTo()

动态创建的元素只是临时存放在内存中，最终我们需要放到页面文档并呈现出来。

append()前面是要选择的对象，后面是要在对象内插入的元素内容

appendTo()前面是要插入的元素内容，而后面是要选择的对象

$(".content").append('<div class="append">通过append方法添加的元素</div>')

$('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))

4.外部插入after()与before()

注意点：

after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入

before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插

$(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')

5.内部插入prepend()与prependTo()

.prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append()).

$('.aaron1').prepend('<p>prepend增加的p元素</p>')

6.外部插入insertAfter()与insertBefore()

.before()和.insertBefore()实现同样的功能。主要的区别是语法——内容和目标的位置。

$('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))

7.empty()的基本用法

empty 清空方法，它只移除了指定元素中的所有子节点（包括文本元素）。

<div class="hello"><p>慕课网</p></div>//通过empty处理$('.hello').empty()//结果：<p>慕课网</p>被移除<div class="hello"></div>

8.remove()的有参用法和无参用法

remove移除元素，会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。

<div class="hello"><p>慕课网</p></div>$('.hello').on("click",fn)//通过remove处理$('.hello').remove()//结果：<div class="hello"><p>慕课网</p></div> 全部被移除//节点不存在了,同时事件也会被销毁

带参数：

$("p").remove(":contains('3')")

9.保留数据的删除操作detach()

detach从当前页面中移除该元素，但保留这个元素的内存模型对象。

这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

$("div").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

<body>    <p>P元素1，默认给绑定一个点击事件</p>    <p>P元素2，默认给绑定一个点击事件</p>    <button id="bt1">点击删除 p 元素</button>    <button id="bt2">点击移动 p 元素</button>    <script type="text/javascript">    $('p').click(function(e) {        alert(e.target.innerHTML)    })    var p;    $("#bt1").click(function() {        if (!$("p").length) return; //去重        //通过detach方法删除元素        //只是页面不可见，但是这个节点还是保存在内存中        //数据与事件都不会丢失        p = $("p").detach()    });    $("#bt2").click(function() {        //把p元素在添加到页面中        //事件还是存在        $("body").append(p);    });    </script></body>

10.DOM拷贝clone()

.clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。

HTML部分<div></div>JavaScript部分$("div").on('click', function() {//执行操作})//clone处理一$("div").clone()   //只克隆了结构，事件丢失//clone处理二$("div").clone(true) //结构、事件与数据都克隆

11.DOM替换replaceWith()和replaceAll()

<div>    <p>第一段</p>    <p>第二段</p>    <p>第三段</p></div>$("p:eq(1)").replaceWith('<a style="color:red">替换第二段的内容</a>')

<div>    <p>第一段</p>    <a style="color:red">替换第二段的内容</a>'    <p>第三段</p></div>$('<a style="color:red">替换第二段的内容</a>').replaceAll('p:eq(1)')

.replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序

.replaceWith()方法，和大部分其他jQuery方法一样，返回jQuery对象，所以可以和其他方法链接使用

返回的jQuery对象引用的是被删除的节点，而不是通过replaceWith/replaceAll方法替换的节点

12.DOM包裹wrap()方法

.wrap( wrappingElement )：在集合中匹配的每个元素周围包裹一个HTML结构

<p>p元素</p>$('p').wrap('<div></div>')

.wrap( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

$('p').wrap(function() {    return '<div><div/>';   //与第一种类似，只是写法不一样})

13.DOM包裹unwrap()方法

unwarp()方法，将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

14.DOM包裹wrapAll()方法

.wrapAll( wrappingElement )：给集合中匹配的元素增加一个外面包裹HTML结构

<p>p元素</p><p>p元素</p>$('p').wrapAll('<div></div>')

.wrapAll( function ) ：一个回调函数，返回用于包裹匹配元素的 HTML 内容或 jQuery 对象

$('p').wrapAll(function() {    return '<div><div/>'; })

15.DOM包裹wrapInner()方法

.wrapInner( wrappingElement )：给集合中匹配的元素的内部，增加包裹的HTML结构

<p>p元素</p><p>p元素</p>$('p').wrapInner('<div></div>')

→

<p>    <div>p元素</div></p><p>    <div>p元素</div></p>

16.children()方法

.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）

$("div").children(".selected")

17.find()方法

children是父子关系查找，find是后代关系（包含父子关系）

find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。

与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 '*'。

find只在后代中遍历，不包括自己。

$("div").find("li")

18.parent()方法

快速查找合集里面的每一个元素的父元素,只会向上查找一级

jQuery是一个合集对象，所以通过parent是匹配合集中每一给元素的父元素

$(ul).parent()

19.parents()方法

快速查找合集里面的每一个元素的所有祖辈元素,会往上一直查到查找到祖先节点

parents()无参数

返回的元素秩序是从离他们最近的父级元素开始的

注意事项：

1 .parents()和.parent()方法是相似的，但后者只是进行了一个单级的DOM树查找
2 $( "html" ).parent()方法返回一个包含document的集合，而$( "html" ).parents()返回一个空集合。

20.closest()方法

从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素

$("div").closest("li')

closest()与parents():

起始位置不同：.closest开始于当前元素 .parents开始于父元素

遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，知道找到一个匹配就停止查找，parents一直查找到根元素，并将匹配的元素加入集合

结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

21.next()方法

快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合

22.prev()方法

快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合

23.siblings()

快速查找指定元集合中每一个元素紧邻的前面后面同辈元素

24.add()方法

用来创建一个新的jQuery对象，元素添加到匹配的元素集合中

处理一：传递选择器

<ul>    <li>list item 1</li>    <li>list item 3</li></ul><p>新的p元素</p>$('li').add('p')

处理二：传递dom元素

$('li').add(document.getElementsByTagName('p')[0])

动态创建P标签加入到合集

 $('li').add('<p>新的p元素</p>').appendTo(目标位置)

25.each()

for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数

each是一个for循环的包装迭代器

each通过回调的方式处理，并且会有2个固定的实参，索引与元素

each回调方法中的this指向当前迭代的dom元素

 $("button:first").click(function() {        //遍历所有的li        //修改每个li内的字体颜色        $("li").each(function(index, element) {            $(this).css('color','red')        })    })

转自：慕课网

0 0