jQueryのプロパティ
8319 ワード
1.任意の属性attr()操作非ブール値のremoveAttr()prop()操作ブール値の2.操作class属性addClass()class属性removeClass()を追加class属性を除去する.操作HTMLコード/テキスト/値html()val()
需要と実現は以下の通りである.
1.最初のdivのtitle属性を読み出す2.すべてのdivにname属性を設定する(valueはatguigu).すべてのdivのtitle属性4を除去する.すべてのdivにclass='guiguClass'5を設定します.すべてのdivにclass='abc'6を追加します.すべてのdivのguiguClassのclass 7を除去する.最後のliのラベル体テキスト8を得る.最初のliのラベル体を「mmmmmmmmm」9に設定.入力ボックスのvalue値10が得る.入力ボックスの値をatguigu 11に設定.「全選択」ボタンをクリックして全選択12を実現する.「すべて選択しない」ボタンをクリックしてすべて選択しない
<div id="div1" class="box" title="one">class box div1div>
<div id="div2" class="box" title="two">class box div2div>
<div id="div3">div3div>
<span class="box">class box spanspan>
<br/>
<ul>
<li>AAAAAli>
<li title="hello" class="box2">BBBBBli>
<li class="box">CCCCCli>
<li title="hello">DDDDDDli>
<li title="two"><span>BBBBBspan>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).すべてのdivのtitle属性4を除去する.すべてのdivにclass='guiguClass'5を設定します.すべてのdivにclass='abc'6を追加します.すべてのdivのguiguClassのclass 7を除去する.最後のliのラベル体テキスト8を得る.最初のliのラベル体を「mmmmmmmmm」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>mmmmmmmmmh1>"
$("li:first").html("<h1>mmmmmmmmmh1>")
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);
})