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">

View Code