讲述对属性的使用
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)
})