text()得到文本BBBBB，html()得到标签BBBBB
attr(): 专门操作属性值为非布尔值的属性。
prop():专门操作属性值为布尔值的属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>10_属性</title>
</head>
<body>
<div id="div1" class="box" title="one">class为box的div1</div>
<div id="div2" class="box" title="two">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br/>
<ul>
<li>AAAAA</li>
<li title="hello" class="box2">BBBBB</li>
<li class="box">CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two"><span>BBBBB</span></li>
</ul>
<input type="text" name="username" value="guiguClass"/>
<br>
<input type="checkbox">
<input type="checkbox">
<br>
<button>选中</button>
<button>不选中</button>
<!--
1. 操作任意属性
attr()
removeAttr()
prop()
2. 操作class属性
addClass()
removeClass()
3. 操作HTML代码/文本/值
html()
val()
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求:
1. 读取第一个div的title属性
2. 给所有的div设置name属性(value为atguigu)
3. 移除所有div的title属性
4. 给所有的div设置class='guiguClass'
5. 给所有的div添加class='abc'
6. 移除所有div的guiguClass的class
7. 得到最后一个li的标签体文本
8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
9. 得到输入框中的value值
10. 将输入框的值设置为atguigu
11. 点击'全选'按钮实现全选
12. 点击'全不选'按钮实现全不选
*/
$(function () {
// 1. 读取第一个div的title属性
// console.log($('div:first').attr('title'))
// 2. 给所有的div设置name属性(value为atguigu)
// $('div').attr('name', 'atguigu')
// 3. 移除所有div的title属性
// $('div').removeAttr('title')
// 4. 给所有的div设置class='guiguClass'
// $('div').attr('class', 'guiguClass')
// 5. 给所有的div添加class值(abc)
// $('div').addClass('abc')
// 6. 移除所有div的guiguClass的class
// $('div').removeClass('guiguClass')
// 7. 得到最后一个li的标签体文本
// console.log($('li:last').html())
// 8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
// $('li:first').html('<h1>mmmmmmmmm</h1>')
// 9. 得到输入框中的value值
// console.log($(':text').val())
// 10. 将输入框的值设置为atguigu
// $(':text').val('atguigu')
// 11. 点击'全选'按钮实现全选
$('button:first').click(function () {
$(':checkbox').prop('checked', true)
})
// 12. 点击'全不选'按钮实现全不选
$('button:last').click(function () {
$(':checkbox').prop('checked', false)
})
})
</script>
</body>
</html>