jQuery使用（二）：DOM样式操作和属性操作
DOM取值与赋值
- .html()
- .text()
- .size()
1.html()方法类似原生DOM的属性innerHTML，不传入参数的时候默认为取指定元素内的HTML内容，包含前后空白文本结构，以字符串类型返回；当被指定执行html()方法的jQuery对象是一组DOM集合时，获取到的内容是集合中的第一个DOM节点的内容。（html代码在文末）
console.log($('ul').html());
console.log($('ul li').html());
2.html('参数')--带参数的html方法执行表示，向指定元素内添加HTML文档；如果指定的jQuery对象是一组DOM集合，则会执行每个元素节点做添加操作；参数还可以是一个函数，这个函数可以接收两个参数：DOM集合索引、当前元素节点。（html代码在文末）
$('ul').html('hallo!');//文本节点
$('ul').html('<li>我是一个li，我就是我</li>');//元素节点
var arr = ['苹果','橘子','梨子','香蕉','西瓜'];
$('ul li').html(function(index,ele){
return '<p style="color:orange">' + arr[index] + '</p>';
});//给元素集合中的每一个元素添加内部HTML结构内容
3.text()--用来获取，添加，修改元素文本节点。text会将空白文本节点，子节点的所有文本节点全部获取；当执行text()方法的jQuery对象是一个DOM集合时，会将每个DOM节点的文本和其后代文本节点全部返回（这里和html()方法的情况不一样）；
text('参数')--带参数的text方法执行表示，向指定元素内添加文本节点，如果调用方法的元素节点原本包含文本节点和元素节点，会被新添加的文本节点覆盖；同时，text()也可以像html()方法一样，参数可以是一个函数，规则与html非常类似。（html代码在文末）
console.log($('ul').text());
console.log($('ul li').text());
$('ul').text('aaaa');
$('ul li').text(function(index,ele){
return arr[index];
});
4.sezi()--size()--用来返回jQuery对象包含DOM节点的长度，与length属性一致。
基于Class的样式操作方法
- .addClass()
- .removeClass()
- .hasClass()
1.addClass()方法用来给指定元素添加类名，参数以字符串和方法两种形式来实现。字符串参数可以一次添加多个类名，以一个字符串中间空格间隔的方式添加；方法参数：类名作为方法的返回值（字符串形式）实现类名添加，方法可以获得两个参数：index,ele；（html代码在文末）
$('div').addClass('duyi one');//给每个div元素添加类名‘duyi’和‘ome’
$('.demo').addClass(function(index,ele){
if(index % 2 == 0){
return 'duyi';
}
return 'active';
});//给类名为demo的元素下标为偶数的添加类名‘duyi’，下标为奇数的添加类名‘active’
2.removeClass()方法用来删除指定元素的指定类名，操作方式跟addClass()一致，直接上代码。（html代码在文末）
$('div').eq(0).removeClass('active');//删除第一个div元素的类名‘active’
$('.demo').removeClass(function(index,ele){
if(index % 2 == 0){
return 'duyi';
}
return 'active';
});//将类名为demo的元素下标为偶数的删除类名‘duyi’，下标为奇数的删除类名‘active’
注意：如果removeClass()方法没有添加参数就表示删除所有类名，空字符和undefined也表示删除全部。
3.hasClass()方法用来判断jQuery对象中是否包含指定类名的元素，如果有就返回true，如果没有就返回false。（html代码在文末）
console.log($('div').hasClass('active'));//true
直接操作行间样式的css()方法
- .css()
css()方法可以将样式和值呈对象属性与值的方式直接写入行间，样式名采用小驼峰写法。
运用这个方法修改样式是绝对不推荐的：
1.行间样式的权重最高，写入后不能再通过其他方式修改样式，只能采用css。(影响维护)
2.通过css写入样式就相当于将样式写在js文件中，js的异步加载特性不利于首屏加载时的渲染树渲染页面；而且对比js文件来说，css会被浏览器缓存，而js不会，所以每一次触发css()方法都需要发送请求，造成大量数据传输资源，而且js中的css样式不具备复用性等效率问题和资源浪费问题。
3.css()方法在jQuery内部的处理比修改类名要复杂的多，而且大多都在操作DOM，会大大消耗计算机的计算资源。(html代码和css代码见文末)
$('.demo').click(function(e){
$('.demo').removeClass('active');//将所有选中的元素删除active类名（删除对应样式）
$(this).addClass('active');//将点中的元素添加上active类名（添加指定样式）
//采用css()方法实现切换（不提倡）
// $('.demo').css({backgroundColor:'orange'});
// $(this).css({backgroundColor:'red'});
});//实现样式切换
虽然css()鸡肋，处于认真负责的态度，我还是把它的操作特性做一个完整的介绍吧：
$('.demo').css('width','200px');//通过css()方法修改样式的另一种参数形式
$('.demo').css({width:'+=50px'});//在传入参数的时候还可以附加一些运算，实现复杂的逻辑处理
css()方法用来赋值是真心的鸡肋，但并不带表他就一无是处，我们可以通过css()方法来获取元素指定的样式值，以字符串类型放回该样式值：
console.log($('.demo').css('backgroundColor'));
console.log($('.demo').css('width'));
用一个小demo深入感受类名操作样式：
//css /*换肤*/ .wrapper .style1{ background-color: orange; } .wrapper .style1 li{ color: red; } .wrapper .style2{ background-color: blue; } .wrapper .style2{ color: green; } .wrapper.active .style1{ background-color: yellow; } .wrapper.active .style1 li{ color: deeppink; } .wrapper.active .style2{ background-color: saddlebrown; } .wrapper.active .style2{ color: darkcyan; } //html <div class="wrapper"> <ul class="style1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <ul class="style2"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> //jq $('.wrapper').click(function(ele,index){ if( $(this).hasClass('active')){ $(this).removeClass('active'); }else{ $(this).addClass('active'); } });
jQuery操作元素属性attr()和prop()方法
- .attr()
- .prop()
1.attr用来获取和设置元素属性。取值：不论是特性还是属性，attr都可以取值，需要注意的是checked这类特性，因为这类特性只要添加无论赋值与否，浏览器都会默认赋值，但是这种赋值所表达的是另一种特性含义，由attr取值只能取到显性的值，并不能取到特性所表达的真正的值。详细看示例；赋值：采用来个参数的方式==>（‘属性名称’，‘值’）。
2.prop用来获取和设置元素特性，prop只能用来操作元素特性，不能操作非特性属性。取值:基本操作与attr一致，但是如果对非特性属性取值会返回undefined;对于checked这类特性取值可以获取到元素的真实特性值；赋值：赋值方式与attr一致。（映射关系）
（html代码见文末）
console.log( $('.attr1').attr('cst') );//‘aa’
console.log( $('input[type="checkbox"]').eq(0).attr('checked') );//checked---真实特性值应该是true
console.log( $('input[type="checkbox"]').eq(1).attr('checked') );//checked---真实特性值应该是true
console.log( $('input[type="checkbox"]').eq(2).attr('checked') );//undefined---真实特性值应该是false
$('.attr1').attr('id','01001');//通过attr方法添加id属性并赋值
console.log( $('input[type="checkbox"]').eq(1).prop('checked') );//true
console.log( $('input[type="checkbox"]').eq(2).prop('checked') );//false
console.log( $('.attr1').prop('cst') );//undefined
console.log( $('input[type="checkbox"]').eq(0).prop('type') );//checkbox
$('input[type="checkbox"]').eq(2).prop('checked','checked');//添加特性
console.log( $('input[type="checkbox"]').eq(2).prop('checked') );//true
这篇博客的所有HTML代码：
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <div class="demo active"></div> <div class="demo"></div> <div class="demo"></div> <div class="wrapper"> <ul class="style1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <ul class="style2"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <div class="attr1" cst="aa"></div> <input type="checkbox" checked="checked"> <input type="checkbox" checked=""> <input type="checkbox">
