jQuery 属性操作attr().prop().text().html().val()

这些方法用于获取和设置 DOM 元素的属性。

一.attr():

<!--样式：在style里面写的，用css来操作。-->

<!--属性：在元素里面写的，用attr方法操作。-->

　　　　//设置单个属性
      //attr(name, value)
      $("img").attr("alt", "图破了");
      $("img").attr("title", "错错错错");

      //设置多个属性
      $("img").attr({
        alt: "图破了",
        title: "错错错",
        aa: "bb"
      })
      //$('img').attr('width', function (i, v)
      //'width'要设置的值 i是索引 v是获取到属性值
      $('input').click(function () {
        $('img').attr('width', function (i, v) {
          v = parseInt(v);
          v += 10;
          return v;
        });
      })
      
      //获取属性值
      console.log($('input').attr('value'))
      console.log($('input').attr('type'))

      //删除某个属性用removeAttr
      $('input:eq(1)').click(function () {
        $('img').removeAttr('title')
      })

 

 二.prop():

//对于布尔类型的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样。
  $(function () {
    $("input").eq(0).click(function () {
      $("#ck").prop("checked", true);
    });
  
    $("input").eq(1).click(function () {
      $("#ck").prop("checked", false);
    });
  });

 

三.text()：

//获取内容
$("p").text()

//设置内容
$('P').text('新设置的内容')

text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

 

四.html()

//获取内容
$("p").html()

//设置内容
$('P').html('新设置的内容')

 

五.val()

 //返回 value 属性：
 $(selector).val()

 //设置 value 属性：
 $(selector).val(value)

 //通过函数设置 value 属性：
 $(selector).val(function (index, currentvalue){})
 //value 必需。规定 value 属性的值。
 //index - 返回集合中元素的 index 位置。
 //currentvalue - 返回被选元素的当前 value。