jQuery之标签属性与文本
属性/文本
操作任意属性：
attr(name)/attr(name,value)：读写非布尔值的标签属性。
prop(name)/prop(name,value)：读写布尔值的标签属性。
removeAttr(name)/removeProp(name)：删除属性。
操作class属性：
addClass(classValue)：添加class。
removeClass(classValue)：移除指定class。
操作HTML代码/文本/值：
val()/val(value)：读写标签的value。
html()/html(htmlString)：读写标签体文本。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性/文本</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> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript"> $(function (){ /* * 需求： * 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')); //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>
