<!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. 点击'全不选'按钮实现全不选 */ //1. 读取第一个div的title属性 // console.log($('div:first').attr('title')) // one //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. 点击'全选'按钮实现全选 // attr(): 操作属性值为非布尔值的属性 // prop(): 专门操作属性值为布尔值的属性 var $checkboxs = $(':checkbox') $('button:first').click(function () { $checkboxs.prop('checked', true) }) //12. 点击'全不选'按钮实现全不选 $('button:last').click(function () { $checkboxs.prop('checked', false) }) </script> </body> </html>