jquery的内容(html,.text,val)及其属性(attr,prop,data)

jquery的内容及其属性

一.内容

1. html 4种使用方法 html()参数可以为函数

//添加内容  相当于js中的innerHTML
 $("div").html("你好");
//添加元素
 $("div").html("<span>你好</span>");
//获取列表中第一个元素的内容
console.log($("div").html());
//设置不一样的属性值或者内容  
var arr = ["http://www.163.com", "http://www.baidu.com", "http://www.qq.com", "http://www.taobao.com"]
$("div").html(function (index, item) {
    return `<a href='${arr[index]}'>${item}</a>`;
})

2.text 3种使用方法 text()参数可以为函数

//添加内容
$("div").text("你好");
//将所有列表中的元素的内容整合为一个字符串返回
console.log( $("div").text());
//设置不一样的属性值或者内容
var arr = ["北京", "上海", "深圳", "天津"];
$("div").text(function (index) {
    return arr[index];
})

3.val 输入框的内容 3种使用方法 相当于js中的input.value(); val()参数可以为函数

//添加内容(相同)
$("input").val(10);
//添加不一样的内容
$("input").val(function (index) {
    return index + 1;
})
//获取输入的值
$("input").on("input",function(){
    console.log($(this).val());
})

二.jquery的属性

1.attr 4中使用方法 参数可以是回调函数 可以为对象(对象中可以有方法)

//只能获取到列表中第一个元素的a属性值
console.log($("div").attr("a"));
//对列表设置相同属性,相同属性值
 $("div").attr("b","10");
//对列表设置相同属性,不同属性值
 $("div").attr("c",function(index,item){
       return index+1;
  })
//对列表设置多个不同属性,不同属性值
$("div").attr({
    b: "1",
    c: function (index, item) {
        return index + 1;
    }
})
//删除某个标签属性
$("div").removeAttr("a");

2.prop 设置了jQuery列表中所有DOM的对象属性

$("div").a=10;
console.log($("div").a);    //这样写是错误的    因为两次$("div)不相同,打印的$("div)没有a属性
解决这一问题:
var list = $("div");
list.a = 10;
console.log(list.a);   //这是js的方法

//prop是jquery的方法
$("div").prop("b", 10);              //设置到了div的DOM上
console.log($("div").prop("b"))  

3.data

$("div").data("abc",10);//设置在一个jQuery映射对象上
console.log($("div").data("abc"));

属性总结:

• attr 是设置在DOM标签上的属性
• prop 是设置在DOM对象上的对象属性
• data 是设置在jQuery映射对象上的属性，为了不污染DOM对象的属性