Jquery的部分函数介绍及使用

最新推荐文章于 2021-01-18 10:14:43 发布

HzZyYYY

最新推荐文章于 2021-01-18 10:14:43 发布

阅读量85

点赞数

本文链接：https://blog.csdn.net/qq_44820039/article/details/106151427

版权

1.jQuery DOM 操作
（1）text() 获取元素的文本内容
（2）html() 获取元素的内容（包括HTML元素）
虽然两个都是获取元素文本内容，不同之处在于 text() 只获取文本内容，html() 能将标签和文本一起获取到
例：

<div class="box1">
        <span>使用text()获取</span>
</div>
<div class="box2">
        <span>使用html()获取</span>
</div>

运行结果：
在这里插入图片描述
（3）addClass(className) 给选中的元素添加class类名

也可以传function函数
注意： addClass()不会替换之前的类名，直接添加到元素上面，还有一点就是带的参数前面不需要加 ‘.’,小细节一定要注意
示例：
给一个元素先设好自己的样式，再用addClass()添加一个类名

 .box1{
           width: 100px;
           height: 100px;
           background-color: #ff0;
       }
       .active{
        width: 100px;
           height: 100px;
           background-color: #0ff;
       }

<div class="box1"></div>

<script>
        $(".box1").addClass("active")
</script>

运行结果：
在这里插入图片描述
原有的样式已经被替换了，但是它的类名还在元素上

（4）removeClass(className) 把选中元素的class类名删除
注意：带类名参数的时候会匹配所有相同类名的的元素删除，如果没有参数会删除所有的样式
示例：

<style>
       .box1{
           width: 100px;
           height: 100px;
           background-color: #ff0;
       }
       .active{
           font-weight: bold;
           color: #fff;
       }
</style>
<body>
    <div class="box1 active">使用removeClass()操作 </div>
    <script>
       //添加参数时
        $(".box1").removeClass('active');
    </script>

在这里插入图片描述
active样式被移除

<scrpit>
//不加参数
 $(".box1").removeClass();
</scrpit>

在这里插入图片描述
没有任何样式类名了

（4）.attr() 设置或返回被选元素的属性

（5） .prop() 设置或返回被选元素的属性
看这个解释他们都是一样的，他们的区别在于，attr()主要用于我们自定义的属性， prop()主要用于HTML本身就带有的属性
示例：

<input type="checkbox" id="ckb1">多选框checkbox1
<input type="checkbox" id="ckb2" checked='checked'>多选框checkbox2

 <script>
        console.log($("#ckb1").prop("checked"));
        console.log($("#ckb2").prop("checked"));
</script>

运行结果：
在这里插入图片描述
在使用attr()

 <script>
        console.log($("#ckb1").attr("checked"));
        console.log($("#ckb2").attr("checked"));
    </script>

运行结果：
在这里插入图片描述
因为第一个checkbox没有定义checked属性，attr() 返回了undefined，所以在一些固有属性上就使用prop()

（5）parent() 查找父元素，往上一级寻找且只找一个

 <div class="container">
         <div class="row">
             <div class="col-12">
                 <p class="p1">在最里面的p标签</p>
             </div>
         </div> 
     </div>
    <script>
       console.log($(".p1").parent());
    </script>

示例：
在这里插入图片描述
（6）parents()找所有祖先元素

    <script>
     console.log($(".p1").parents());
    </script>

运行结果：
在这里插入图片描述
body html都可以获取到，parents()可以带参数，需要获取到哪一级的祖先元素，将类名或Id名带进去查找
示例：

<script>
        console.log($(".p1").parents(".row"));
        console.log($(".p1").parents(".col-12"));
        console.log($(".p1").parents(".container"));
    </script>
</body>

运行结果
在这里插入图片描述

.closest() 也是找祖先元素

<div class="container">
         <div class="row">
             <div class="col-12">
                 <p class="p1">在最里面的p标签</p>
             </div>
         </div> 
     </div>
    
    <script>
     console.log($(".p1").closest('.row'));
    </script>

运行结果
在这里插入图片描述
三个都是找祖先元素他们的全部别在哪呢
parent是找当前元素的第一个父节点，不管匹不匹配都不继续往下找

parents是找当前元素的所有父节点

closest是找当前元素的所有父节点，直到找到第一个匹配的父节点
举个例子详细说明下

<ul id="menu" style="width:100px;">
      <li>
        <ul>
          <li><p>Home</p></li>
        </ul>
      </li>
      <li>End</li>
</ul>

<script>
        $(" p").click(function() {
        $(this).parent("ul").css("background": "yellow"); //1
     
        });
</script>

这个时候点击p标签不会有任何效果

<script>
 $(" p").click(function() {
        $(this).parent("li").parent("ul").css("background", "yellow"); //2
        });
</script>

这个时候会将p标签一整行的ul li 背景颜色都改变
在这里插入图片描述
再来看看 parents

    <script>
        $(" p").click(function() {
         $(this).parents("ul").css("background", "yellow"); //3
        });
    </script>

这个时候找到所有的父级将整个ul的颜色都改变在这里插入图片描述

closest()的时候

   <script>
        $(" p").click(function() {
        $(this).closest("ul").css("background", "yellow"); //4
        });
    </script>

closest()方法查找时从包含自身的节点找起，它同parents()很类似，和parent()实现的效果一样。但是他的代码量减小，所以closest()是比较好用的。
在这里插入图片描述

HzZyYYY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery的部分函数介绍及使用

1.jQuery DOM 操作（1）text() 获取元素的文本内容（2）html() 获取元素的内容（包括HTML元素）虽然两个都是获取元素文本内容，不同之处在于 text() 只获取文本内容，html() 能将标签和文本一起获取到例：<div class="box1"> <span>使用text()获取</span></div><div class="box2"> <span>使用ht
复制链接

扫一扫