目录
一.jQuery属性操作
1.prop()
这个方法对应着原生JS的setAttribute()方法
prop()是用来设置或者获取元素固有属性值的,比如超链接标签的href属性,input标签的type属性,我们还可以获取并设置单复选按钮的的checked属性
a.获取属性值
prop('属性')
b.设置属性值
prop('属性','属性值')
<body>
<input type="checkbox" name="" id="">
</body>
<script>
$("input").on('change',function(){
console.log($(this).prop("checked"))
})
</script>
<!--我们还可以使用':checked'选择器来做出更多的操作-->
c.自定义属性值获取
不过有一种情况我们是不能使用prop()方法的:
那就是自定义属性,比如index,这个自定义属性我们使用prop()方法无法获取
自定义属性我们可以使用attr()方法:
attr('属性')
//对标原生JSgetAttribute()
<body>
<input type="checkbox" name="" id="" index="1">
</body>
<script>
$("input").attr("index","2")
</script>
2.数据缓存
element.data()
data里面的数据会直接存放到元素内存中(把元素当成一个对象)
$("input").data('username','小蜗')
console.log($('input'))
我们发现这条数据在DOM中是看不到的,但是却存放在了这个元素中,可以输出
3.jQuery内容文本值
a.普通元素内容
//获取
html()
//修改设置
html("内容")
//对标原生JS:innerHtml()
<body>
<div>hello-jQuery</div>
</body>
<script>
$("div").html("你好-jQuery")
console.log($("div").html())
</script>
b.普通元素文本内容
text()
//对标原生JS:innerText()
<body>
<div>hello-jQuery</div>
</body>
<script>
$("div").text("你好-jQuery")
console.log($("div").text())
</script>
c.获取设置表单值
val()
//获取
$(input").val()
//修改设置
$("input").val("内容")
d.截取字符串
substr(数字型)
//从第几个开始截取
<body>
<div>hello-jQuery</div>
</body>
<script>
$("div").text("你好-jQuery")
console.log($("div").text().substr(3))
</script>
e.返回指定祖先元素
parents("选择器")
<body>
<header>hello-hello-hello
<div>hello-jQuery</div>
</header>
</body>
<script>
console.log($("div").parents("header")[0])
</script>
f.保留小数位
let num1 = 1.3471837498134
let num2 = 0.437413274713284
console.log((num1 - num2).toFixed(2))
g.删除数组元素
splice(从哪个位置开始删除,删除几个元素)
const arr = [1,3,4134,413143,414,43,5875,8678,8576,57567]
arr.splice(1,9)
console.log(arr);