jquery 操作属性 attr() removeAttr() prop() addClass() removeClass() html() val()

<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="ericClass"/>

<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为eric)

   3. 移除所有div的title属性

   4. 给所有的div设置class='ericClass'

   5. 给所有的div添加class='abc'

   6. 移除所有div的ericClass的class

   7. 得到最后一个li的标签体文本

   8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"

   9. 得到输入框中的value值

   10. 将输入框的值设置为eric

   11. 点击'全选'按钮实现全选

   12. 点击'全不选'按钮实现全不选

   */

  $(function () {

//      1. 读取第一个div的title属性  

      // console.log($('div:first').attr('title'));

//      2. 给所有的div设置name属性(value为eric) 

$('div').attr('name','eric')

//      3. 移除所有div的title属性 

// $('div').removeAttr('title')

//      4. 给所有的div设置class='ericClass' 

            $('div').attr('class','ericClass')

//      5. 给所有的div添加class='abc' 

  $('div').addClass('abc')

//      6. 移除所有div的ericClass的class 

$('div').removeClass('ericClass')

//      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. 将输入框的值设置为eric 

$(':text').val('eric')

//      11. 点击'全选'按钮实现全选 

          //遍历   内置隐试遍历    读  只读第一个  写 写所有 

          $('button:first').click(function(){ 

                  $(':checkbox').prop('checked',true)  

          })

      //     var flag = true

      //    $('button:first').click(function(){

      //          if(flag){

      //             $(':checkbox').prop('checked',true)  

      //          }else{

      //             $(':checkbox').prop('checked',false)   

      //          }

      //          flag = !flag

      //    })         

//      12. 点击'全不选'按钮实现全不选

        $('button:last').click(function(){

             $(':checkbox').prop('checked',false)  

         }) 

      // attr 与prop的区别

//      attr多用于设置自定义属性

//      prop多用于设置布尔值属性

      

  })