JQuery 常用属性方法汇总
1 .addClass()
添加指定的类到匹配元素集合中的每一个元素。
1、.addClass(className)
类型：String
一个或多个类（用空格隔开）添加到匹配的元素的class属性。
2、.addClass(function)
类型：Function（Integer index , String currentClassName)==>String
一个函数返回一个或多个空格分隔的类名称添加到现有的类名(s)。 接收元素的索引位置的设置和现有的类名(s)作为参数。 在函数内this是指当前元素的集合。
①一次添加多个类：
1 $("p").addClass("myClass yourClass");
②切换元素的类从一个到另一个：
1 $("p").removeClass("myClass noClass").addClass("yourClass");
所有p段落中的myClass和noClass都被移除，yourClass则被加入到所有匹配的p元素中。
③接收一个function函数：
1 $("ul li").addClass(function( index ){ 2 return "item-"+index; 3 })
如果给定无序列表中的两个<li>元素，那么上面的函数的作用是将在第一个<li>中加入item-0类，第二个<li>中加入item-1类。
2 .attr()
获取匹配元素集合的属性的第一个元素的值，或者设置一个或多个属性给匹配的每个元素。
.attr(attributeName);//只获取匹配元素集合的第一个元素的属性值，想要获取多个值可以利用jQuery的.each()或.map()方法
.attr(attributeName,value);//给制定的属性设置值
①获取属性值：
1 <body> 2 <input id="check1" checked="checked" type="checkbox" /> 3 <label for="check1" >check me</label> 4 5 <script> 6 $("input").change(function(){ 7 var $input=$("input[id='check1']"); 8 $("p").html("通过.attr('checked')获取checked的值:"+$input.attr("checked")+<br> 9 "通过.prop('checked')获取checked的属性值："+$input.prop("checked")+<br> 10 "通过.is(':checked')获取checked的属性值："+$input.is(":checked")+<br> 11 } 12 </script> 13 </body> 14 15 结果： Check me 16 17 .attr( 'checked' ): checked//取值 18 .prop( 'checked' ): true//判断 19 .is( ':checked' ): true//判断
上面针对checkbox的情况，相对比较特殊，.attr()是取得属性的值，.prop()在checked, selected, disabled三个DOM元素属性取值时，返回的结果是布尔型，其他情况下都是返回属性值。
示例：
1 <style> 2 em { 3 color: blue; 4 font-weight: bold; 5 } 6 div { 7 color: red; 8 } 9 </style> 10 <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 11 </head> 12 <body> 13 <p>Once there was a <em title="huge, gigantic">large</em> dinosaur...</p> 14 The title of the emphasis is:<div></div> 15 <script> 16 var title = $( "em" ).attr( "title" ); 17 //var title=$("em").prop("title");与.attr()效果一样 18 $( "div" ).text( title ); 19 </script>
当设置checkbox的选中情况时：
1 <body> 2 3 <input type="checkbox" checked="checked"> 4 <input type="checkbox"> 5 <input type="checkbox"> 6 <input type="checkbox" checked="checked"> 7 8 <script> 9 $( "input[type='checkbox']" ).attr("checked",false); 10 $("input[type='checkbox']").prop("checked",false);//与.attr()效果一样 11 </script> 12 13 </body>
②设置属性值：
.attr(attributeName,value):这种方法设置属性值非常方便，且看：
1 <img id="greatPhoto" src="1.jsp" alt="this is a photo" /><br><script><br>$("#greatPhoto").attr("alt","come form my world!");<br></script>
设置多个属性值：
1 $( "#greatPhoto" ).attr({ 2 alt: "Beijing Brush Seller", 3 title: "photo by Kelly Clark" 4 });
用函数来设置值：
1 <scirpt> 2 $("#greatephoto").attr(function( i , val){//获取第i个id值为greatphoto的变量值val，此处的i即是id的索引值，val为其对应的id值 3 return val+"change"; 4 }) 5 </script>
设置id的div基于页面中的位置：
1 <body> 2 3 <div>Zero-th <span></span></div> 4 <div>First <span></span></div> 5 <div>Second <span></span></div> 6 7 <script> 8 $("div").attr("id".function(arr){//设置id的属性值，arr的值即是id属性的值，此处没有用变量i来对应，因为下面用了.each()来循环设置 9 return arr+"div-id"; 10 }).each(function(){//循环追加信息 11 $("span",this).html("id='<b>"+this.id+"</b>'");//this指代当前循环的"span"对象 12 }) 13 </script> 14 15 </body>
3 .hasClass()
用来判断是否有匹配的类。应用相对比较简单，看例即知：
1 <div id="mydiv" class="foo bar"></div> 2 //判断是否含有类 3 $( "#mydiv" ).hasClass( "foo" )
4 .html()
用来获取匹配的元素集合的第一个元素的文本内容。
1 <div class="demo-container"> 2 <div class="demo-box">Demonstration Box</div> 3 </div> 4 //获取div中的内容 5 $( "div.demo-container" ).html();
当.html()方法中输入内容时，则会改变对应元素的文本内容。
5 .removeAttr()
清除所有匹配的元素集合的元素。
.removeAttr()方法是从javascript中的.removeAttribute()继承过来，但是jQuery的此方法可以在不同版本的浏览器上运行。
.removeAttr(attributeName)需要的类型是String类型：
下面这个例子比较经典，略带一点逻辑：
1 <button>Change title</button> 2 <input type="text" title="hello there"> 3 <div id="log"></div> 4 5 <script> 6 (function() { 7 var inputTitle = $( "input" ).attr( "title" ); 8 $( "button" ).click(function() { 9 var input = $( this ).next();//选择同级元素的下一个元素，也就是下面那个div标签对象 10 11 if ( input.attr( "title" ) == inputTitle ) {//如果div对象的title值与input对象的title值相同就清除div对象的title属性值，不相同的情况下则添加input对象的title属性值给div对象 12 input.removeAttr( "title" ) 13 } else { 14 input.attr( "title", inputTitle ); 15 } 16 17 $( "#log" ).html( "input title is now " + input.attr( "title" ) ); 18 }); 19 })(); 20 </script>
.removeAttr()与.removeProp()的作用基本相似。
5 .val()
获取匹配元素集合的第一个元素的值。
通常用于input、select、textarea。
1 //获取下拉框的foo类中被选中的项的值 2 $( "select.foo option:selected").val(); 3 4 // 获取所有foo类的下拉框的值 5 $( "select.foo" ).val(); 6 7 // 获取被选中的复选框的值 8 $( "input:checkbox:checked" ).val(); 9 10 // 获取被选中的单选按钮的值 11 $( "input:radio[name=bar]:checked" ).val();
下面的例子实现：单选下拉框显示选项的值，多选下拉框显示选中项的值：
1 <p></p> 2 3 <select id="single"> 4 <option>Single</option> 5 <option>Single2</option> 6 </select> 7 8 <select id="multiple" multiple="multiple"> 9 <option selected="selected">Multiple</option> 10 <option>Multiple2</option> 11 <option selected="selected">Multiple3</option> 12 </select> 13 14 <script> 15 function displayVals(){ 16 var singleVal=$("#single").val(); 17 var multipleVals=$("#multiple").val()|| [];//这样写也可以：var multipleVals=$("#multiple").val(); 18 $("p").html(singleVal+" "+multipleVals.join(",")); 19 } 20 21 displayVals();//调用displayVal()方法 22 23 $("select").change(displayVals);//当select对象的选项改变时，调用change方法，调用displayVals()方法，如果不加此行，则在变换的时候，不会调用displayVal()这个方法。 24 </script>
从input对象中取值：
1 <div> 2 <input type="text" value="some words" /> 3 <p></p> 4 </div> 5 <script> 6 $("input").keyup(function(){ 7 var inputValue=$(this).val(); 8 $("p").text(inputValue); 9 }).keyup(); 10 </script>
6 .val(value)、.val(function)
给匹配元素集合的每一个元素设值。
① 点击各个button后将其文本值赋给input对象的文本域：
1 <div> 2 <button>Filed1</button> 3 <button>Filed0</button> 4 <button>Filed1</button> 5 <input type="text" /> 6 </div> 7 <script> 8 $("button").click(function(){ 9 $("input").val($(this).text()); 10 }) 11 </script>
②使用函数声明修改Input对象的值：
1 <div> 2 <input type="text" value="do something"/> 3 <input type="text" value="do something"/> 4 <input type="text" value="do something"/> 5 </div> 6 <script> 7 $("input").blur(function(){//当Input对象失去焦点的时候，函数开始 8 $(this).val(function(i,val){//取得第i个input对象的value值 9 return val.toUpperCase();//把这个值转换成大写 10 }) ; 11 }) 12 </script>
