jQueryのプロパティ

8319 ワード

1.任意の属性attr()操作非ブール値のremoveAttr()prop()操作ブール値の2.操作class属性addClass()class属性removeClass()を追加class属性を除去する.操作HTMLコード/テキスト/値html()val()
<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);
    })