04-2 jQuery的attr()、css()

一、jQuery与属性有关的方法

image.png

(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,请看下面的例子

image.png

//用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>

image.png

(5) .val 获取表单input中value属性的值

console.log($("#checkedAll").val());//输出   全选,也就是value里的值
 $("#checkedAll").val("aa");//把原来的value里的值替换成aa

二、CSS

image.png

(1).css() 设置样式

image.png

(2).addClass() 添加类名,以添加样式

 $("#div1").addClass("bb");//给div1加个类bb的样式

image.png

(3) .removeClass() 移除元素的某个class

  $("#div1").removeClass("aa");

(4) .toggleClass() 有这个class的话就去掉,没有就加上


$("#div1").on("click",function(){
$("#div1").toggleClass("aa");
})

三、位置

image.png
image.png

猜你喜欢

转载自blog.csdn.net/xuehangongzi/article/details/80555977