主要内容
1. attr(name|properties|key, value|fn)函数
2. removeAttr(name)函数
3. prop(name|properties|key, value|fn)函数
4. removeProp(name)函数
5. addClass(class|fn)函数
6. removeClass([class|fn])函数
7. html([val|fn])函数
8. text([val|fn])函数
9. val([val|fn|arr])函数

1. attr(name|properties|key, value|fn)函数

函数定义
此函数实现设置或获取当前元素对象的某个属性值，返回string参数: (name|properties|key, value|fn)
name: 属性名称 string;
properties: 名称键值对对象;
key, value: 属性名称和值;
key, function(index, attr): key 属性名称，function 返回属性值的函数，第一个参数为当前元素的索引值，第二个参数为原始属性值。

示例

//获取id是username元素的value属性值
$('#username').attr('value');

//设置value的属性值
$('#username').attr('value', 'king');

//使用properties的方式
$("img").attr({src:"test.jpg", alt:"test image"});

//实现为div中的p段落设置字体颜色，偶数行为红色，奇数行为蓝色
$(function(){
    $('div p').attr('style',function(i, value){
        if(i%2 === 0)
            return 'color:red; font-size:26px';
        else
            return 'color:blue; font-size20px';
    })
});

2. removeAttr(name)函数

函数定义
函数实现根据给定的元素具有的属性名称从而从该元素上移除此属性，返回当前的jQuery对象

示例

//实现点击用户名称输入框和密码框时移除对应的value属性
function removeValueAttr(target){
    if (target instanceof $) 
        target.removeAttr('value');
    else
        $(target).removeAttr('value');
}

3. prop(name|properties|key, value|fn)函数

函数定义
获取或设置匹配的元素属性值，此函数参数与attr作用相同

示例

$(function(){
    /*$('form:first input:last').
    attr({'type':'button'}).attr('value','点击初始化用户名称');*/

    $('form:first input:last').
      prop({'type':'button','value':'点击初始化用户名称'});
});

function initUsernameVal(){
        $('#userName').prop('value','请输入名称');
}

4. removeProp(name)函数

函数定义
用来删除由jQuery对象调用prop()方法设置的属性值

示例

function removeAttrFromThis(object){
    $(object).removeProp('value');
}

5. addClass(class|fn)函数

函数定义
为每个匹配的元素添加指定的类名

参数含义
class: 字符串值，class名称
fn: function(index, class), 此函数必须返回一个或多个空格分隔的class名, index参数为对象在这个集合中的索引值, class参数为这个对象原始的class属性值

示例

$(function(){
    //为所有p段落添加class类
    $('p').addClass('color_1 font_2');
});

6. removeClass([class|fn])函数

函数定义
从所有匹配的元素中删除全部或者指定的class

示例

function remove_Class(cla){
    $('p:last').removeClass(cla);
}

function removeAllClass(){
    $('p').removeClass();
}

7. html([val|fn])函数

函数定义
设置或获取元素的html内容，类似Dom的innerHTML属性

参数含义
val: 预设html值
fn: function(index, html)处理函数, 此函数返回一个HTML字符串, index参数为元素在这个集合中的索引位置, html为原先的HTML值

示例

/*为p元素设置html内容，要求是奇数行的红色字体，否则为绿色字体*/    
$(function(){
    $('p').html(function(i,html){
    if (i %2 === 0) {
        return "<font color='red'>1</font>";
    } else {
        return "<font color='green'>2</font>"
    }
    });
})

8. text([val|fn])函数

函数定义
设置或获取元素的文本内容，类似Dom的innerHTML属性参数

参数含义
val: 预设值
fn: function(index, text), index参数为元素在这个集合中的索引位置, text为原先的HTML值

9. val([val|fn|arr])函数

函数定义
为元素设置或获取value属性值，此函数只针对元素具有value属性值特性，同于dom对象操作value属性

参数含义
val: String设置的值
fn(index, value): 此函数返回一个要设置的值，接受两个参数, index为元素在集合中的索引位置，value为原先的text值
array: Array<String>字符串数组，适用于check/select的值

示例

/*
初始Java和js被选中
*/
$(function(){
    $("input[type = 'checkbox']").val(['Java','js']);
});

function getLikeValues(){
    var likes = $("input[type = 'checkbox']");
    //alert(likes.length);

    likes.each(function(i){
        //alert($(this).is(':checked'));
        if ($(this).is(':checked')) {
            alert(this.value);
        }
    });
}

day3 - jquery属性操作