jQuery属性操作

jQuery属性操作

1.1设置或获取元素固有属性(元素本身只带的属性)属性值prop()

1.获取属性语法
prop(“属性”)
2.设置属性语法
prop(“属性”,“属性值”)

1.2设置或获取元素自定义属性attr()

1.3数据缓存 data()

data()方法可以在指定的元素上存数据，是存放在元素的内存里面，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据将被移除

<a href="www.baidu.com" title="很好">都挺好</a>
<input type="checkbox" name= "" id = "" checked>
<div index="1">我是div</div>
<div data-index="2">我是div</div>
<span>123</span>


<script>
	$(function(){
     
		//1.element.prop(属性名)获取元素的固有属性值
		//类似原生的getAttribute()
		console.log($("a").prop("href"));
		$("a").prop("title","我们都挺好");
		$("input").change(function(){
     	
			console.log($(this).prop("checked"));//false   true	
		})	
		//2.元素自定义属性通过attr()获取和修改
		//类似原生的setAttribute()
		console.log($("div").attr("index"))
		($("div").attr("index", 4))
		//也可以获取h5的自定义属性
		console.log($("div").attr("data-index"));
		//3.数据缓存data()   把元素当变量看
		$("span").data("uname","andy");
		console.log($("span").data("uname"));		//andy
		//获取h5里面的自定义属性data-index  不用写data-  它返回的是数字类型
		console.log($("div").data("index")); 	//2
	})
</script>

1.4购物车模块–案例练习

<div class="cart-warp">
	<div class="cart-thead">
		<div class="t-checkbox"><input type="checkbox" name=""id="" class="checkall">全选</div>
	</div>
	<div class="t-goods">商品</div>
	<div class="t-goods">单价</div>
	<div class="t-goods">数量</div>
	<div class="t-goods">小计</div>
	<div class="t-goods">操作</div>
	<div class="cart-item-list">	
		<div class="cart-item check-cart-item"