乐趣区

关于前端:JQuery的属性

jiezi

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

①获取属性

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

后果：

②设置单个属性

![]()
![]()
<script type="text/javascript">
   $(function(){$("img").attr("alt","jQueryDemo");
   });
</script>

后果：

③设置多个属性

![]()
![]()
<script type="text/javascript">
   $(function(){$("img").attr({alt:"jQueryDemo",title:"弱小的 jQuery"});
   });
</script>

后果：

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

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

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

后果：

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

![](img1.png)
![](img2.png)
<script type="text/javascript">
   $(function(){$("img").removeAttr("alt");
   });
</script>

后果：

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>

  后果：

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

留神：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: &quot;Courier New&quot; !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>

  后果：

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

留神：若果要删除一个或多个类名，请用空格离开

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

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

  后果：

②删除匹配元素的所有类

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

  后果：

③用回调函数删除类

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

后果：

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>

后果：

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

①获取元素的内容

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

后果：

②设置元素的内容

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

后果：

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

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

  后果：

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>

后果：

②设置元素的值

<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>

  后果：

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

退出移动版