JQuery操作DOM

最新推荐文章于 2022-07-29 11:36:13 发布

这是一条海鱼

最新推荐文章于 2022-07-29 11:36:13 发布

阅读量362

点赞数

分类专栏：前端基础

本文链接：https://blog.csdn.net/qq_41071876/article/details/107303432

版权

前端基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、插入节点

1、内部尾部插入，返回父节点对象

jQuery append( )：

作用：向每个匹配的元素内部追加尾部内容，返回的是一个包装父节点的jQuery 对象（$(selector).）

语法：$(selector).append(content | fn)

content 是一个String, Element, jQuery，表示要追加到目标中的内容，能是现有元素 fn
function(index, html)返回一个HTML字符串，用于追加到每一个匹配元素的里边。
接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。 selector
是一个选择器，匹配现有的元素上

<ul></ul>
<script>
   $(function(){
        var $li_1 = $("<li>1</li>");
        var $li_2 = $("<li>2</li>");
        var ul = $("ul");
        var ul_temp =  ul.append($li_1).append($li_2);
        console.log(ul===ul_temp);//true
   })
</script>

在这里插入图片描述

2、内部头部插入，返回父节点对象

jQuery prepend()：内部头部插入

作用：向每个匹配的元素内部前置内容。返回的是一个包装父节点的jQuery 对象 $(s e l e c t o r) 语法：$ (selector).prepend(content|fn)

$(selector) 父节点 content 是一个String, Element,
jQuery，要插入到目标元素内部前端的内容，不能是现有元素 fn function(index, html)FunctionV1.4
返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值

<ul></ul>
<script>
   $(function(){
        var $li_1 = $("<li>1</li>");
        var $li_2 = $("<li>2</li>");
        var ul = $("ul");
        var ul_temp =  ul. prepend($li_1).prepend($li_2);
        console.log(ul===ul_temp);//true
   })
</script>

在这里插入图片描述

3、内部尾部插入

jQuery appendTo( )：

作用：将所有匹配的元素追加到指定元素的尾部，返回的是一个包装子节点的jQuery 对象（不是 $(c o n t e n t) ） a p p e n d 与 a p p e n d T o 的区别？不同： 1 .$ (A).append(B)执行后B是A的子节点，而$(A).appendTo(B)执行后A是B的子节点
2.appendTo可以移动现有元素，append不可以相同：父节点都必须是现有的

语法：$(content).appendTo(selector)

参数content 可以是一个字符串或者选择器（如果DOM能匹配到，就节点移动）规定要插入的内容（可包含 HTML 标签）
参数selector 是一个选择器，jQuery，匹配内容追加到所有的元素，他必须是现有的

<ul></ul>
<script>
       $(function(){
            var $li_1 = $("<li>1</li>");
            var $li_2 = $("<li>2</li>");
            var ul = $("ul");
            $li_1.appendTo(ul);
            $li_2.appendTo(ul);
        
       })
</script>

在这里插入图片描述

4、内部头部插入

jQuery prependTo(content)：内部头部插入

作用：把所有匹配的元素前置到另一个、指定的元素元素集合中。返回的是一个包装子节点的jQuery 对象（不是 $(s e l e c t o r) ）语法：$ (selector).prependTo(content)

content String或者是 jQuery ，用于匹配元素的jQuery表达式

<ul></ul>
<script>
       $(function(){
            var $li_1 = $("<li>1</li>");
            var $li_2 = $("<li>2</li>");
            var ul = $("ul");
            $li_1.prependTo(ul);
            $li_2.prependTo(ul);
        
       })
</script>

在这里插入图片描述

5、后近追加，返回目标对象

jQuery after()：后近追加

作用：在每个匹配的元素之后插入内容。返回 $(s e l e c t o r) 语法：$ (selector).after(content|fn)

参数content 是一个String, Element或者jQuery，表示插入到每个目标后的内容，可以匹配现有元素，如何是，那就移动他
fn 是一个function，函数必须返回一个html字符串。

<p>1</p>
<hr/>
<p>1</p>
<hr/>
<h1>33</h1>
</body>
<script>
     $(function(){
           var p = $("p");
           var h1 = $("h1");
           var p_temp = p.after(h1).after("<p>2</p>");
           console.log(p===p_temp );//true
     })
</script>

在这里插入图片描述

6、前近追加，返回目标对象

jQuery before()：前近追加

作用：在每个匹配的元素之前插入内容。返回 $(s e l e c t o r) 语法：$ (selector).beforer(content|fn)

参数content 是一个String, Element或者jQuery，表示插入到每个目标后的内容，可以匹配现有元素，如何是，那就移动他
参数fn 函数必须返回一个html字符串。

<p>1</p>
<hr/>
<p>1</p>
<hr/>
<h1>33</h1>
</body>
<script>
     $(function(){
           var p = $("p");
           var h1 = $("h1");
           var p_temp = p.before(h1).before("<p>2</p>");
           console.log(p===p_temp );//true
     })
</script>

在这里插入图片描述

7、后近追加

jQuery insertAfter(content)

作用：把所有匹配的元素插入到另一个、指定的元素元素集合的后面。返回的是一个类似与 $(s e l e c t o r) 的对象语法：$ (selector).insertAfter(content)

content 是一个String, 或者jQuery，用于匹配元素的jQuery表达式
实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。

<p>1</p>
<hr/>
<p>1</p>
<hr/>
<h1>33</h1>
</body>
<script>
     $(function(){
           var p = $("p");
           var h1 = $("h1");
           var h1_temp = h1.insertAfter(p);
           var p1_temp = $("<p>11<p>").insertAfter(p);
           console.log(h1===h1_temp );//false
     })
</script>

在这里插入图片描述

8、前近追加

jQuery insertBefore(content）

作用：把所有匹配的元素插入到另一个、指定的元素元素集合的后面。返回的是一个类似与 $(s e l e c t o r) 的对象语法：$ (selector).insertBefore（content)

content 是一个String, 或者jQuery，用于匹配元素的jQuery表达式

实际上，使用这个方法是颠倒了常规的$(A).Before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。

<p>1</p>
<hr/>
<p>1</p>
<hr/>
<h1>33</h1>
</body>
<script>
     $(function(){
           var p = $("p");
           var h1 = $("h1");
           var h1_temp = h1.insertBefore(p);
           var p1_temp = $("<p>11<p>").insertBefore(p);
           console.log(h1===h1_temp );//false
                
     })
</script>

在这里插入图片描述

二、删除节点

1、删除匹配的元素集合中所有的子节点，返回匹配节点

jQuery empty()

作用：删除匹配的元素集合中所有的子节点。返回匹配节点

语法：$(selector).empty()

<ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
</ul>
<script>
   $(function(){    
        var ul = $("ul");
        var ul_temp =  ul.empty()
        console.log(ul===ul_temp);//true
   })
</script>

2、删除所有匹配的元素。返回被删除节点的引用

jQuery remove([expr])

作用：从DOM中删除所有匹配的元素。返回被删除节点的引用语法：$(selector).remove([expr])

参数expr 用于筛选元素的jQuery表达式
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

<ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
</ul>
<script>
   $(function(){    
        var ul = $("ul");
        var ul_temp = ul.remove()
        console.log(ul===ul_temp);//true
   })
</script>

3、删除所有匹配的元素。返回被删除节点的引用

jQuery detach([expr])

从DOM中删除所有匹配的元素。返回被删除节点的引用语法：$(selector).detach([expr])

参数expr 用于筛选元素的jQuery表达

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

<p class="p1">4</p>
<ul>
     <li >1</li>
     <li class="p1" onclick="console.log()">2</li>
     <li>3</li>
</ul>
<script>
   $(function(){    
        var li = $("li");
        var li_temp =  li.detach(".p1");
        console.log(li===li_temp);//true
        $("ul").append(li_temp);
       
   })
</script>

三、获取DOM值

1、val( [val|fn|arr] )

注意：val() 方法通常与 HTML 表单元素一起使用。

无参时：获得匹配元素第一个元素的当前值

<form>
     <input type="text"  value="第1个" />
     <input type="text"  value="第2个" />
     <input type="text"  value="第3个" />
     <input type="text"  value="第4个" />
</form>    
<script>
       $(function() {
           console.log($("input").val());//第1个
        })
</script>

有参时：val是要设置的值。设置所有元素的值，调用此方法的JQuery对象

<form>
     <input type="text"  value="第1个" />
     <input type="text"  value="第2个" />
     <input type="text"  value="第3个" />
     <input type="text"  value="第4个" />
</form>    
     
           
<script>
        $(function() {
            console.log($("input").val("123"));//jQuery.fn.init(4)
         })
</script>

有参时：fn是一个function(index,
text)，此函数返回一个字符串。接受两个参数，index为元素在集合中的索引位置，text为原先的text值。调用此方法的JQuery对象

<form>
     <input type="text"  value="第1个" />
     <input type="text"  value="第2个" />
     <input type="text"  value="第3个" />
     <input type="text"  value="第4个" />
</form>    
     
           
<script>
        $(function() {
          console.log($("input").val(function(index,txt){
             return "我是第"+index+":"+txt;
         }));//jQuery.fn.init(4)
         })
</script>

2、text([val|fn])

无参：取得所有匹配元素的内容。返回值：String

<div>
     <p id="p1">第一个p<span></span></p>
     <p id="p2">第二个p<span></span></p>
</div>          
<script>
     $(function() {
          console.log($("p").text());//第一个p第二个p
     })
</script>

有参时：val：用于设置元素内容的文本

<div>
     <p id="p1">第一个p<span></span></p>
     <p id="p2">第二个p<span></span></p>
</div>          
     
           
<script>
       $(function() {
         console.log($("p").text("new"));//jQuery.fn.init(2)
       })
</script>

有参时：fn是一个function(index,
text)，此函数返回一个字符串。接受两个参数，index为元素在集合中的索引位置，text为原先的text值

<div>
     <p id="p1">第一个p<span></span></p>
     <p id="p2">第二个p<span></span></p>
</div>          
     
           
<script>
        $(function() {
           console.log($("p").text(function(index,txt){
              return "我是第："+index+" 个"+"："+txt;
        }));//jQuery.fn.init(2)
       })
</script>

3、html( [val|fn] )

无参时：表示取得第一个匹配元素的html内容，这个函数不能用于XML文档。但可以用于XHTML文档。返回值是：String

<div>
     <p id="p1">第一个p<span></span></p>
     <p id="p2">第二个p<span></span></p>
</div>          
<script>
   $(function() {
        console.log($("p").html());//第一个p<span></span>
   })
</script>

有参val时，表示设定HTML内容的值，返回值是：调用此方法的JQuery对象

参数va：用于设定HTML内容的值

<div>
     <p id="p1">第一个p<span></span></p>
     <p id="p2">第二个p<span></span></p>
</div>          
     
           
<script>
       $(function() {
            console.log($("p").html("新设置的"));//jQuery.fn.init(2)
       })
</script>

有参数 fn是一个function(index,
html)，此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值。返回值是
：调用此方法的JQuery对象

<div>
     <p id="p1">第一个p<span></span></p>
     <p id="p2">第二个p<span></span></p>
</div>          
<script>
     $(function() {
          console.log($("p").html(function(index,html){
                     return "我是第："+index+" 个"+"："+html;
          }));//jQuery.fn.init(2)
     })
</script>

4、css()

作用：可以访问和设置元素的样式属性

jQuery 1.8中，当你使用CSS属性在css()或animate()中，jQuery将根据浏览器自动加上前缀(在适当的时候)，比如(“user-select”, “none”); 在Chrome/Safari浏览器中jQuery将设置为"-webkit-user-select", Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".

访问匹配的所有元素的第一个元素的样式
语法：
css(“属性名”)

设置匹配的所有元素的样式
语法
css(“属性名”,“属性值”)//设置一个CSS样式
css({“属性名1”：“属性值1”,“属性名2”：“属性值2”})//设置多个CSS样式

这是一条海鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery操作DOM

一、插入节点1、内部尾部插入，返回父节点对象jQuery append( )：作用：向每个匹配的元素内部追加尾部内容，返回的是一个包装父节点的jQuery 对象（$(selector).）语法：$(selector).append(content | fn)content 是一个String, Element, jQuery，表示要追加到目标中的内容，能是现有元素 fnfunction(index, html)返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参
复制链接

扫一扫