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

最新推荐文章于 2022-04-14 19:10:35 发布

李天下xue

最新推荐文章于 2022-04-14 19:10:35 发布

阅读量189

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/xuehangongzi/article/details/80555977

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、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"); })

三、位置

李天下xue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
04-2 jQuery的attr()、css()

一、jQuery与属性有关的方法(1) .attr() 一个参数是取值，两个参数是赋值 console.log($("#div1").attr("id"));//输出div1 $("#div1").attr("id","div2");//找到id为div1的元素并把他的id值更改为div2（2） .removeAttr()移除属性&l..
复制链接

扫一扫