jquery中attr属性设置每一个匹配元素的一个或多个属性

时间:2021-06-25 06:14:37

   .attr()方法返回undefined 。若要检索和更改Dom属性、 比如元素的checked 、selected 或disabled状态、请使用.prop()方

    <img src="test.jpg" />

jquery 代码:

   参数name 描述

   $("img").attr("src");   返回文档中所有图像的src属性

  参数properties 描述

   $("img").attr({src:"test.jpg",alt:"Test Image"}); 为所有图像设置src和alt属性

    参数key/ value描述

   $("img").attr("src","test.jpg");

    参数key/回调title属性的值

    $("img").attr("title",function(){

      return this.src;

   })


2、  removeAttr(name) 属性

      从每一个匹配的元素中删除一个属性

      $("img").removeAttr("src");


  JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false);


  <form>

    <input type="checbox" name="checkbox" checked="checked" />

    <input type="checbox" name="checkbox" />

  </form>

3、property  获取匹配的元素集中第一个元素的属性(property)值或设置每一个匹配元素的一个或多个属性

     参数name描述

    jquery代码:   $("inpu[type='checkbox']").prop("checked");  选中复选框为true 、没选中为false

    $("input[type=‘checkkbox’]").prop({     //禁用页面上的所有复选框

     disabled:true

 });

   jquery代码: 禁用和选中所有页面上的复选框。

     $("input[type='checkbox']").prop("disabled",false);

     $("input[type='checkbox']").prop("checked",true);


通过函数来设置所有页面上的复选框被选中

  $("input[type='checkbox']").prop("checked",function(i,val){

     return !val;

});


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

    <p></p>

      var $par=$("p");

     $par.prop("luggageCode","1234');

     $par.append("The secret luggage code is:",String($par.prop(luggageCode)),".");

     $par.removeProp("luggageCode");


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

      class一个或者多个要添加到元素的css类名,请用空格分开

   jquery 代码:

     $("p").addClass("selected");   为匹配的元素加上selected类

     $("p").addClass("selecteld1   selected2");


   回调函数描述

     <ul>

       <li></li>

       <li></li>

    </ul>

  $(ul li:last).addClass(function(){

      return 'itme-'+$(this).index();

})

 removeClass从所有匹配的元素中删除指定的类

 $("p").removeClass("selected");

 $("p").removeClass() ; 删除所有的

 $("li:last").removeClass(function(){    //删除最后一个元素上与前面重复的class

    return $(this).prev().attr('class');

})



toggleClass(class|fn[,sw])

如果存在(不存在)就删除(添加)一个类。

  jquery代码:   $("p").toggleClass("selected");  为匹配的元素切换 selected 类

 var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar') {
return 'happy';
} else {
return 'sad';
}
});