【Jquery-04】jq中的属性操作

jQuery的属性操作

4.1固有属性值prop()

所谓元素固有属性就是元素本身自带的属性，比如标签里自带的href

对于布尔型的属性，不要使用attr，应当使用prop

//获取属性的语法
prop("属性")
//设置属性语法
prop("属性","属性值")
	<input type="checkbox">
	<input type="checkbox">
	<input type="checkbox">

	<button>设置button>
<script>
	$(function (){
        $("button").click(function (){
            //属性checked如果为true则代表选中，如果false则没有选中
            //input中有一个禁用属性 disabled:true 表示被禁用
            $("input"),prop("checked",true);
            
            //选择第几个被禁用，可以选出被禁用的长度
            $("input:checked").ea(1).prop("checked",true);
            console.log($("input:checked").length)
            
        })
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

4.2获取设置自定义属性

//获取属性语法
attr("属性")  //类似于原生的getAttribute

//设置属性语法
attr("属性","属性值") //类似于原生setAttribute
1
2
3
4
5
6

4.3数据缓存 data()

可以在指定元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据将都会被清除

//1.附加数据语法
data("name","value") //向被选元素附加数据

//2.获取数据语法
data("name")  //向被选元素获取数据，注意在dom中是看不见的
获取自定义属性
<div index="1" data-index="2">我是divdiv>
<script>
	$(function (){
        //1.通过attr
        console.log($("div").attr("data-index"));
        //2.通过data()
        console.log($("div").data("index"));
        //data获取自定义属性，不用写data-，而且返回的是数字类型
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

jQuery的文本内容值

主要针对元素的内容还有表单值的操作

1.普通元素内容html()

相当于原生的innerHTML

html(); //获取元素内容
html(“内容”); //设置元素内容

2.普通元素文本内容 text()

相当于原生js的innerText()

text() //获取元素的文本内容
text(“文本内容”) //设置元素的文本内容

3.表单的值 val()

相当于原生js的value

val() //获取表单的值
val(“内容”) //设置表单的值