讲述对属性的使用

1. 操作任意属性

attr()

removeAttr()

prop()

2. 操作class属性

addClass()

removeClass()

3. 操作HTML代码/文本/值

html()

 val()

// 1. 读取第一个div的title属性

      console.log($("div:first").attr("title"));

// 2. 给所有的div设置name属性(value为tom)

      console.log($("div").attr("name","tom"));

// 3. 移除所有div的title属性

      console.log($('div').removeAttr("title"));

// 4. 给所有的div设置class='cs'

       $("div").attr("class","cs")

// 5. 给所有的div添加class='abc'

      console.log($("div").addClass("abc"));

// 6. 移除所有div的cs的class

// $("div").removeAttr("class",'cs')此方法不行，虽然如此写像是移除class为cs的class但是这是错误的写法，会只认移除所有的class就是 $("div").removeAttr("class")

正确写法：

$('div').removeClass('cs') 

// 7. 得到最后一个li的标签体文本

  console.log($("ul>li:last").html())

//  8. 设置第一个li的标签体为<h1>mmm</h1>

$("li:first").html("<h1>mmm</h1>")

//  9. 得到输入框中的value值

  console.log($(":text").val())

// 10. 将输入框的值设置为cs

        $(":text").val("cs")

//  11. 点击'全选'按钮实现全选

  // attr(): 操作属性值为非布尔值的属性

  // prop(): 专门操作属性值为布尔值的属性

var $check=$(":checkbox");

$("button:first").click(function(){

//$check.attr("checked",true)

    $check.prop("checked",true)

})

$("button:last").click(function(){

//   $check.attr("checked",false)

      $check.prop("checked",false)

})