jQuery 属性，元素
程序员文章站
2022-03-10 16:15:04
属性操作元素固定属性 prop()获取固定属性$("a").prop("href") 2. 设置属性$('a').prop("title", '我们')注意:prop 更加适用disabled / checked / selected 等。自定义属性 attr()获取自定义属性$('div').at... ......
属性操作
元素固定属性 prop()
- 获取固定属性
- $("a").prop("href")
2. 设置属性
- $('a').prop("title", '我们')
注意:
- prop 更加适用disabled / checked / selected 等。
自定义属性 attr()
- 获取自定义属性
- $('div').attr('index')
2. 设置自定义属性
- $('span').attr('index', 1)
数据缓存 data()
- 设置数据缓存
- $('span').data('uname', 'peach')
2. 获取数据缓存
- $('span').data('uname')
注意：
- data 获取html5 自定义data-index， 第一个 不用写data- , 得到的是数字型。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
<script src="jquery.min.js"></script>
</head>
<body>
<a href="http://www.itcast.cn" title="都挺好">都挺好</a>
<input type="checkbox" name="" id="" checked>
<div index="1" data-index="2">我是div</div>
<span>123</span>
</body>
<script>
$(function () {
// 1.获取固定属性名
console.log($("a").prop("href"));
console.log($("a").prop('title'));
// 1.1 设置属性
$('a').prop("title", '我们')
// 1.2 prop 更加适用disabled / checked / selected 等。
$('input').change(function () {
console.log($(this).prop("checked"));
})
// 2 自定义属性
// 2.1 获取自定义属性
console.log($('div').attr('data-index'));
console.log($('div').attr('index'));
// 2.2 设置自定义属性
$('span').attr('index', 1)
// 3 数据缓存 data() 这个里面的数据是存放在元素的内存里面
$('span').data('uname', 'peach'); // 设置缓存数据
console.log($('span').data('uname')); // 获取缓存数据
// 3.1 data 获取html5 自定义data-index， 第一个 不用写data- , 得到的是数字型。
console.log($('div').data('index'));
})
</script>
</html>
$(function () {
// 全选和 全不选
// 把全选的的状态给其他商品的状态即可
// 1. 全选
$('.checkall').change(function () {
// 1.1 设置其他商品的状态和全选按钮 的状态一致
console.log($(this).prop('checked'));
$(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
// 1.2 如果全选则 让所有的商品添加 check-cart-item 类名
if ($(this).prop("checked")) {
$('.cart-item').addclass("check-cart-item"); // 添加类名
} else {
$(".cart-item").removeclass("check-cart-item");
}
})
// 2. 如果小框里面的数值等于所有数组，则选择全选
$('.j-checkbox').change(function () {
console.log($(".j-checkbox:checked").length);
// 如果当前选择的数量等于商品数量， 则全选选中
if ($(".j-checkbox:checked").length == $(".j-checkbox").length) {
$(".checkall").prop("checked", true);
} else {
$(".checkall").prop("checked", false);
}
if ($(this).prop("checked")) {
// 让当前的商品添加 check-cart-item 类名
$(this).parents(".cart-item").addclass("check-cart-item");
} else {
// check-cart-item 移除
$(this).parents(".cart-item").removeclass("check-cart-item");
}
})
})
文本数值
上一篇： JavaScript 对象基础