JQuery中的属性操作（属性，类名，文本）

1.属性操作

方法	作用
attr（）	添加属性
removeAttr（）	删除属性
prop（）	添加属性
removeProp（）	删除属性

attr和prop的callback回调函数一样，return返回的值都是要设置的值
function（index，value） 中的两个参数index，value

index：索引
value：dom元素本身含有的属性

1.1 attr和removeAttr

<div id='box'></div>
  <script>
    $(function () {
      $('#box').attr('title', 'hello world')    //设置属性
      console.log($('#box').attr('title'));     //获取属性值
      $('#box').removeAttr('title')             //删除属性
      console.log($('#box').attr('title'));     //删除后属性不存在undefined
    })
  </script>

attr设置属性时

$('#img').attr('key')			//只设置属性
$('#img').attr('key','value')	//设置属性和属性值
$('#img').attr({'key1':'value1','key2':'value2'})		//设置多组属性属性值
$('#img').attr('key',function(){ return value})			//通过回调函数形式也可以设置

1.2 prop和removeProp

<div id='box'></div>
  <script>
$(function () {
      // console.log($('#box')[0]);
      $('#box').prop('title', 'hello world')    //设置属性
      console.log($('#box').prop('title'));     //获取属性值
      $('#box').removeProp('title')             //删除属性
      console.log($('#box').prop('title'));     //删除后属性存在值为undefined
    })
     </script>

prop可以禁用和选中所有页面上的复选框

$(".ipt").prop('checked', false);		//取消选择
$(".ipt").prop('checked', true);		//选择
$(".ipt").prop("disabled", true);		//可以使用
$(".ipt").prop("disabled", false);		//禁用

2.类名操作

方法	作用
addClass（）	为每个匹配的元素添加指定的类名
removeClass（）	从所有匹配的元素中删除全部或者指定的类
toggleClass（）	如果存在（不存在）就删除（添加）一个类

addClass，removeClass，toggleClass的callback回调函数一样
return返回的值都是要操作的值
function（index，value） 中的两个参数index，value

index：索引
value：dom元素本身含有的class（一个或多个）

2.1 addClass和removeClass

<div id='box color'></div>
  <script>
    $(function () {
      $('#box').addClass('box')			//添加类名
      $('#box').removeClass('box')		//删除类名
    })
  </script>

2.2 toggleClass

用toggleClass也可以实现上面的

$(function () {
      $('#box').toggleClass('box')
      $('#box').toggleClass('box'，function(index,value){
      	console.log(index, value);
      	return 'box'
      })
    })

2.3 混合使用

//toggleClass存在删除不存在添加
// 三个参数 name,fn,boolean
//name:类名   fn(index,value)   boolean:true/false 
//fn中的形参：index参数为对象在这个集合中的索引值，value参数为这个对象原先的class属性值
//boolean：是否添加或移除 class （true添加class false 移除class）
<div id='box' class='color'></div>
  <script>
    $(function () {
      $('#box').addClass('box')				//添加box类
    })
    $(function () {
      $('#box').toggleClass(function (index, value) {
        console.log(index, value);			//返回索引和删除前拥有的类
        return 'box'				
      }, false)
    })
  </script>

3.文本操作

回调函数callback和属性类名操作一样 index和value

3.1html（和JS中的innerHtml一样）

改变html结构

<div id='box'></div>
  <script>
    $(function () {
      $('#box').html('<h1>111</h1>')
    })
  </script>

3.2text（和JS中的innerText一样）

改变text文本值

<div id='box'></div>
  <script>
    $(function () {
      $('#box').text('<p>111</p>')
    })
  </script>

3.3val

改变dom元素的value

<input type="text" id='ipt'>
  <script>
    $(function () {
      $('#ipt').val('111')
    })
  </script>