jQuery之屬性
阿新 • • 發佈:2018-07-27
bow rain 代碼 log username button 一個 style function
1. 操作任意屬性
attr() 操作非布爾值的
removeAttr()
prop() 操作布爾值的
2. 操作class屬性
addClass() 添加class屬性
removeClass() 移除class屬性
3. 操作HTML代碼/文本/值
html()
val()
<div id="div1" class="box" title="one">class為box的div1</div> <div id="div2" class="box" title="two">class為box的div2</div> <divid="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. 讀取第一個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) console.log($("div:first").attr("name",‘rainbow‘)) // 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>") console.log($("li:first").html()) // 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); })
jQuery之屬性