JQuery的属性

柔光的暖阳◎ 2022-11-10 05:35 179阅读 0赞

1. attr(name|properties|key,value|fn) : 设置或返回被选元素的属性值

①获取属性

<pre style="margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"><img src="" alt="jQuery" />
    <script type="text/javascript"> $(function(){
           console.log($("img").attr("alt"));
       }); </script></pre>

结果：

![479999c25f6fa9b5fff832e0981d63b4.png][]

②设置单个属性

<img src="" alt="Demo" />
    <img src="" alt="jQuery" />
    <script type="text/javascript">
       $(function(){
           $("img").attr("alt","jQueryDemo");
       });
    </script>

结果：

![bb84d15195c0a0f8457baf2220caf705.png][]

③设置多个属性

<img src="" alt="Demo" />
    <img src="" alt="jQuery" />
    <script type="text/javascript">
       $(function(){
           $("img").attr({alt:"jQueryDemo",title:"强大的jQuery"});
       });
    </script>

结果：

![e6af453f5b8fbab741b9a96c67f09fcf.png][]

④利用回调函数，设置多个对象的属性

注意：index的索引从0开始，所以我例子+1了

<ul>
       <li><img src="" alt="jQuery" /></li>
       <li><img src="" alt="jQuery" /></li>
       <li><img src="" alt="jQuery" /></li>
    </ul>
    <script type="text/javascript">
       $(function(){
           $("img").attr("src",function(index){
               this.src="img"+(index+1)+".png";   //写法一
               //return "img"+(index+1)+".png";   //写法二
           });
       });
    </script>

结果：

![a3b287c360015ebbcb14bc78d44e7153.png][]

2. removeAttr(name) : 从每一个匹配的元素中删除一个属性

<img src="img1.png" alt="Demo" />
    <img src="img2.png" alt="jQuery" />
    <script type="text/javascript">
       $(function(){
           $("img").removeAttr("alt");
       });
    </script>

结果：

![64512f30a5cc90db2e12266ec0da1a8d.png][]

3. prop(name|properties|key,value|fn) : 获取在匹配的元素集中的第一个元素的属性值

<input type="checkbox" name="jq"/>basketball
    <input type="checkbox" name="jq"/>football
    <script type="text/javascript">
       $(function(){
           $("input[type='checkbox']").prop("disabled", true);
           $("input[type='checkbox']").prop("checked", true);
       });
    </script>

结果：  
basketball football

4. removeProp(name) : 用来删除由.prop()方法设置的属性集

**注意:** 不要使用此方法来删除原生的属性，比如checked,disabled,或者selected。这将完全移除该属性，一旦移除，不能再次被添加到元素上。使用`.prop()`来设置这些属性设置为`false`代替。

<p> </p>
    <script type="text/javascript">
       $(function(){
           var $para = $("p");
           $para.prop("luggageCode", 1234);
           $para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");
           $para.removeProp("luggageCode");
           $para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");
       });
    </script>

结果：

The secret luggage code is: 1234. Now the secret luggage code is: undefined.

5. addClass(class|fn) : 为匹配到的元素添加指定的类名

注意：若果要添加一个或多个类名，请用空格分开

①添加一个或多个类名

<p id="p1"></p>
    <p id="p2"></p>
    <script type="text/javascript">
       $(function(){
           $("#p1").addClass("demo");
           $("#p2").addClass("demo1 demo2");
       });
    </script>

结果：  
![63d64999f75132262161c44621eb312b.png][]

②利用回调函数，添加类名

注意：index的索引从0开始，所以我例子+1了

<ul>
       <li></li>
       <li></li>
       <li></li>
    </ul>
    <script type="text/javascript">
       $(function(){
           $("li").addClass(function(index){
               return "list"+(index+1);
           });
       });
    </script>
    <pre style="margin: 0px; padding: 0px; overflow: auto; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;"><ul>
       <li></li>
       <li></li>
       <li></li>
    </ul>
    <script type="text/javascript"> $(function(){
           $("li").addClass(function(index){ return "list"+(index+1);
           });
       }); 
    </script>

结果：

![de03d920d42bfd19532fdc61dd89cbb9.png][]

6. removeClass(\[class|fn\]) : 从匹配到的元素中删除全部或者指定的类

注意：若果要删除一个或多个类名，请用空格分开

①删除匹配元素的指定的一个类

<p class="demo1 demo2 demo3"></p>
    <script type="text/javascript">
       $(function(){
           $("p").removeClass("demo1");
       });
    </script>

结果：

![496accb93b59a198d2ec02a651e16eb2.png][]

②删除匹配元素的所有类

<p class="demo1 demo2 demo3"></p>
    <script type="text/javascript">
       $(function(){
           $("p").removeClass();
       });
    </script>

结果：

![b347c17fe033d50667a55dcd7d9159c1.png][]

③用回调函数删除类

<p class="demo1"></p>
    <script type="text/javascript">
       $(function(){
           $("p").removeClass(function(){
               return $(this).attr("class");
           });
       });
    </script>

结果：

![a0b86da10d6c921257690fd4ebe61a94.png][]

7. toggleClass(class|fn\[,sw\]) : 如果存在就删除一个类，如果不存在就添加一个类

<p class="demo1">这里原本没有.demo2</p>
    <p class="demo1 demo2">这里原本就有.demo2</p>
    <script type="text/javascript">
       $(function(){
           $("p").toggleClass("demo2");
       });
    </script>

结果：

![5156eb7d3bf1f61a6d0fdac64fc63a6a.png][]

8. html(\[val|fn\]) : 取得匹配元素的html内容

①获取元素的内容

<p>Hello world!</p>
    <script type="text/javascript">
       $(function(){
           console.log($("p").html());
       });
    </script>

结果：

![13a110c8bb40b5ae66e175673e3735c5.png][]

②设置元素的内容

<p></p>
    <p></p>
    <script type="text/javascript">
       $(function(){
           $("p").html("Hello world!");
       });
    </script>

结果：

![e2efc1b02a43d841569756b3d62357fd.png][]

③利用回调函数设置元素内容

<p></p>
    <p></p>
    <p></p>
    <script type="text/javascript">
       $(function(){
           $("p").html(function(index){
               return "这是第"+(index+1)+"个p标签";
           });
       });
    </script>

结果：

![4329e465733382c0fecd5d6111096488.png][]

9. text(\[val|fn\]) : 取得所有匹配元素的内容

text()与html()的用法类似

10. val(\[val|fn|arr\]) : 获得匹配元素的当前值

①获取元素的值

<input type="text" value="write less,do more!"/>
    <script type="text/javascript">
       $(function(){
           console.log($("input").val());
       });
    </script>

结果：

![fe0bb5fa7658ac10796856eb64065678.png][]

②设置元素的值

<input type="text"/>
    <script type="text/javascript">
       $(function(){
           $("input").val("write less,do more!");
       });
    </script>

结果：

write less,do more!

③利用回调函数设置元素值

<input type="radio"/>
    <input type="radio"/>
    <input type="radio"/>
    <script type="text/javascript">
       $(function(){
           $("input").val(function(index){
               return "radio"+(index+1);
           });
       });
    </script>

结果：

![fa66495f07bd285c4218e85ed5285792.png][]

在jQuery属性这部分的知识点中，我遇到了不少的困惑，百试不厌，却百试不灵，比如说removeProp()的用法、html()和text()的区别，如果还看到有其他错误的，欢迎各位大神留言指点。

[479999c25f6fa9b5fff832e0981d63b4.png]: /images/20221023/6eb6c16e660b4dbb918a321baadd2c34.png
[bb84d15195c0a0f8457baf2220caf705.png]: /images/20221023/b839c66bd5f044b79c63826d8cd867a9.png
[e6af453f5b8fbab741b9a96c67f09fcf.png]: /images/20221023/895e1a917bef4862924d6050ab3fe02a.png
[a3b287c360015ebbcb14bc78d44e7153.png]: /images/20221023/84271ee910d14a96882da27427347d0f.png
[64512f30a5cc90db2e12266ec0da1a8d.png]: /images/20221023/7f801ca3c65049e9a050e0ebe61409da.png
[63d64999f75132262161c44621eb312b.png]: /images/20221023/61931a875f1a4c379678f3d102fb54fd.png
[de03d920d42bfd19532fdc61dd89cbb9.png]: /images/20221023/bc5ef0891e734115b86e363d0942d5d4.png
[496accb93b59a198d2ec02a651e16eb2.png]: /images/20221023/510f056ecbbb4a038c54fa1191b13ef3.png
[b347c17fe033d50667a55dcd7d9159c1.png]: /images/20221023/5eb739a6f33747b09d12bb3b2a48eebf.png
[a0b86da10d6c921257690fd4ebe61a94.png]: /images/20221023/a70946ff4afe4170a041362182c8b0e5.png
[5156eb7d3bf1f61a6d0fdac64fc63a6a.png]: /images/20221023/7f201db05bab4c2fb8f96f822855907e.png
[13a110c8bb40b5ae66e175673e3735c5.png]: /images/20221023/3a367a1c030b4dbdb7ffe676ec373a9a.png
[e2efc1b02a43d841569756b3d62357fd.png]: /images/20221023/8049e5ea097840ac846545e5c28f90b3.png
[4329e465733382c0fecd5d6111096488.png]: /images/20221023/6f6c8a5d69f8431782e9e88a4a1f96b9.png
[fe0bb5fa7658ac10796856eb64065678.png]: /images/20221023/d567d5aa9a5d41d9918a1133edaea69e.png
[fa66495f07bd285c4218e85ed5285792.png]: /images/20221023/8e695cee3f764000a6a20caa68b19b3b.png