jQuery设置属性和数据

jQuery设置属性和数据

attr、prop、data方法

<div abc="1" id="div1" class="divs1"></div>
<div abc="2" id="div2" class="divs2"></div>
<div abc="3" id="div3" class="divs3"></div>
<div abc="4" id="div4" class="divs4"></div>
<div abc="5" id="div5" class="divs5"></div>

<input type="checkbox">
<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox" checked>
<input type="checkbox">
<button>按钮</button>

1、attr 设置标签属性

// 获取jQuery对象中第一个元素的abc标签属性值
console.log($("div").attr("abc"));
// 设置所有abc属性都是1
$("div").attr("abc","1");
// 设置jQuery对象列表中每个元素abc属性分别是不同的值
$("div").attr("abc",function(index,item){
    return "属性"+index;
})
// 设置jQuery对象列表中每个元素可以有不同属性，可以有不同的属性值
$("div").attr({
    a:"1",
    b:function(index,item){
        return index+1;
    },
    c:function(index,item){
        return "abc"+index;
    },
    d:function(index){
        if(index===0) return null;
        return index;
    }
})
// 设置jQuery对象列表中每个添加checked属性和属性值
$("input").attr("checked","checked");

// 是否被选中并不是由checked标签属性来决定，是由DOM属性决定
var bool=false;
$("button").on("click",function(){
    bool=!bool;
    $("input").attr("checked",bool);
})

// 删除属性
// 删除所有div列表中具有abc属性的元素
$("div").removeAttr("abc");

2、prop 设置DOM对象属性

DOM 对象属性
标签属性id===DOM对象属性id
标签属性class===DOM对象属性className

// abc属性是标签属性，这个标签属性是自定义的，因此DOM对象属性不能获取
console.log($("div").prop("abc"));
// 获取DOM对象属性中的id，获取的是列表中第一个元素DOM对象属性id
console.log($("div").prop("id"));
// 获取DOM对象属性中的className，获取的是列表中第一个元素DOM对象属性className
console.log($("div").prop("className"));
console.log($("div").className);// jQuery对象没有这个属性

// 给DOM对象属性增加属性值
// $("div").prop("className","divs");
// 给列表对象自定义增添属性，标签属性上面并没有添加上，但是可以获取到
$("div").prop("soft","a1");
console.log($("div").prop("soft"));

// 给DOM对象属性增加不同的属性值
$("div").prop("abcde",function(index){
    return index;
})
// 获取DOM对象属性列表中第一个元素的
console.log($("div").prop("abcde"));
// 获取列表对象中指定下标元素
console.log($("div").eq(3).prop("abcde"));

// 给DOM对象属性增加属性和属性值
$("div").prop({
    a:1,
    b:function(index){
        return index;
    }
});
console.log($("div"));


// 设置选项
$("button").on("click",function(){
    // item就是每个input的checked属性值
    $("input").prop("checked",function(index,item){
        return !item;
    })
})

3、data 设置DOM对象的数据

这个属性不是为了改变DOM对象的内容，而是为了存储数据

$("div").css({
    width:100,
    height:100,
    backgroundColor:"red"
})
// 设置css以后就对于设置对象属性style行内样式，如果prop设置style会将原来的进行修改
// $("div").prop("style",50)
// 使用data就不会将原来的值进行修改
$("div").data("style",1);
// 获取定义的style的值
console.log($("div").data("style"));

// 不同的引用关系，但是对象都是相同
$("div").abcd=1;
console.log($("div").abcd);// undefined

// 获取的DOM对象都是相同
// 每次获取都会创建一个新列表,等于两个对象
console.log($("div")===$("div"));

// 将获取的对象赋给divs,再divs设置abcd属性,引用关系相同
var divs=$("div");
divs.abcd=1;
console.log(divs.abcd);

// 设置jQuery的data属性有不同值
// 设置jQuery的data有不同的属性和不同的属性值