jQuery学习之属性
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery学习之属性相关的知识，希望对你有一定的参考价值。
在学习jQuery之处，我们首先要掌握的知识点就是jQuery属性的使用方法，本文整理了一些jQuery常用的属性及其相关使用，一起来看看吧。
1. attr(name|properties|key,value|fn) : 设置或返回被选元素的属性值
①获取属性
<img src="" alt="jQuery" /><script type="text/javascript">
$(function(){
console.log($("img").attr("alt"));
});</script>
结果：
②设置单个属性
<img src="" alt="Demo" /><img src="" alt="jQuery" /><script type="text/javascript">
$(function(){
$("img").attr("alt","jQueryDemo");
});</script>
结果：
③设置多个属性
<img src="" alt="Demo" /><img src="" alt="jQuery" /><script type="text/javascript">
$(function(){
$("img").attr({alt:"jQueryDemo",title:"强大的jQuery"});
});</script>
结果：
④利用回调函数，设置多个对象的属性
注意：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>
结果：
2. removeAttr(name) : 从每一个匹配的元素中删除一个属性
<img src="img1.png" alt="Demo" /><img src="img2.png" alt="jQuery" /><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>
结果：
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></p><script type="text/javascript">
$(function(){
$("p").removeClass(function(){
return $(this).attr("class");
});
});</script>
结果：
7. toggleClass(class|fn[,sw]) : 如果存在就删除一个类，如果不存在就添加一个类
<p>这里原本没有.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>
结果：
③利用回调函数设置元素值
<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()的区别，如果还看到有其他错误的，欢迎各位大神留言指点。
文章来源：博客园
以上是关于jQuery学习之属性的主要内容，如果未能解决你的问题，请参考以下文章