一、jQuery与属性有关的方法
(1) .attr() 一个参数是取值,两个参数是赋值
console.log($("#div1").attr("id"));//输出div1
$("#div1").attr("id","div2");//找到id为div1的元素并把他的id值更改为div2
(2) .removeAttr()移除属性
<div id="hhhh" class="aa">1111</div>
<script>
$(".aa").removeAttr("id");//找到class为aa的元素并移除他的id属性
</script>
(3) .prop()
嗯,如果是简单的属性如id class的话,那就用attr ,如果是特性的话,那就用prop,请看下面的例子
//用attr设置
$("#checkedAll").on("click",function(){
$(":checkbox").attr("checked",true);
})
我们会发现以上代码只是在初始化后好使,更改后再按全选就不好使了,所以attr对特性有局限性,用prop吧
//全选
$("#checkedAll").on("click",function(){
$(":checkbox").prop("checked",true);
})
//全不选
$("#checkedNo").on("click",function(){
$(":checkbox").prop("checked",false);
})
(4) jquery 循环函数each(function(index,elem){
})
//反选
$("#checkedRev").on("click",function(){
$(":checkbox").each(function(index,elem){
elem.checked = !elem.checked;
})
})
综上,小例子的代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运动</title>
<script src="jquery-3.3.1.js"></script>
</head>
<body>
<form action="">
你喜欢的运动是
<br>
<input type="checkbox" name="items" value="篮球">篮球
<input type="checkbox" name="items" value="足球">足球
<input type="checkbox" name="items" value="羽毛球">羽毛球
<input type="checkbox" name="items" value="乒乓球">乒乓球
<br>
<input type="button" id="checkedAll" value="全选">
<input type="button" id="checkedNo" value="全不选">
<input type="button" id="checkedRev" value="反选">
</form>
<script>
//反选
$("#checkedRev").on("click",function(){
$(":checkbox").each(function(index,elem){
elem.checked = !elem.checked;
})
})
//全选
$("#checkedAll").on("click",function(){
$(":checkbox").prop("checked",true);
})
//全不选
$("#checkedNo").on("click",function(){
$(":checkbox").prop("checked",false);
})
</script>
</body>
</html>
(5) .val 获取表单input中value属性的值
console.log($("#checkedAll").val());//输出 全选,也就是value里的值
$("#checkedAll").val("aa");//把原来的value里的值替换成aa
二、CSS
(1).css() 设置样式
(2).addClass() 添加类名,以添加样式
$("#div1").addClass("bb");//给div1加个类bb的样式
(3) .removeClass() 移除元素的某个class
$("#div1").removeClass("aa");
(4) .toggleClass() 有这个class的话就去掉,没有就加上
$("#div1").on("click",function(){
$("#div1").toggleClass("aa");
})
三、位置