3_1jQuery操作属性和样式

﹏ヽ暗。殇╰゛Y 2023-09-27 15:09 112阅读 0赞

jQuery操作属性和样式

操作属性

原生js 中的通过元素.属性名或者元素.setAttribute()方式操作元素属性,jQuery给我们封装了attr() 和removeAttr(),更加便捷的操作属性

<!DOCTYPE html>
    <html>
        <head>
             <meta charset="UTF-8">
             <title></title>
             <style>
                 .a{
                      background-color: aqua;
                 }
             </style>
             <script type="text/javascript"   src="js/jquery.min.js"   ></script>
             <script>
             	/*
             	 *attr() 
             	 * 
             	 * */
                 function fun1(){
                      console.log($("#f1").attr("color"))
                      console.log($("#f1").attr("id"))
                      console.log($("#f1").attr("size"))
                 }
                 function fun2(){
                     $("#f1").attr("color","green")
                     $("#f1").attr("size","5")
                 }
                 function fun3(){
                     $("#f1").removeAttr("color") 
                 }
                 function fun4(){
                    $("#f1").attr("class","a")
                 }
             </script>
        </head>
        <body>
             <font id='f1' color="red" size="7" >牛气冲天</font>
             <hr />
             <input type="button"   value="获得属性" onclick="fun1()" />
             <input type="button"   value="修改属性" onclick="fun2()" />
             <input type="button"   value="删除属性" onclick="fun3()" />
             <input type="button"   value="添加属性" onclick="fun4()" />
        </body>
    </html>

![ce89d4e32f23cbe2063b7c2a9f6639a5.gif][]

![bfb29741d0a3e359d67daf5b12da6754.gif][]

操作样式

原生js 中的通过元素.style.样式名=’样式值’的方式操作元素样式,jQuery给我们封装了css()方法,便于我们操作样式,多数情况样式选择器使用类选择器,所以jQuery针对于这一情况,给我们封装了addClass removeClass toggleClass 三个方法

<!DOCTYPE html>
    <html>
        <head>
             <meta charset="UTF-8">
             <title></title>
             <style>
              .a{
                  width: 100px;
                  height: 100px;
                  background-color: pink;
              }  
              .b{
                  border: 10px solid green;
                  border-radius: 20px;
              }
             </style>
             <script type="text/javascript"   src="js/jquery.min.js"   ></script>
             
             <script>
                 function fun1(){
                     //获得d1的css样式
                     console.log($("#d1").css("width"));
                     console.log($("#d1").css("height"));
                     console.log($("#d1").css("background-color"));
                     //修改d1的css样式
                     
                     $("#d1").css("width","200px")
                     $("#d1").css("height","300px")
                     $("#d1").css("background-color","yellow");
                 }
                 /*
                  * CSS 样式在实际的研发中,往往通过类选择器作用到元素上
                  * jQuery就专门的封装了操作class属性值的方法
                  * */
               
                 function fun2(){
                    $("#d2").addClass("b")
                 }
                 function fun3(){
                    $("#d2").removeClass("b")
                 }
                 function fun4(){
                    $("#d2").toggleClass("b")// 原来有b 则删除,如果没有,则增加b
                 }
             </script>
        </head>
        <body>
             <div id="d1"class="a">
             </div>
             <input type="button"   value="修改样式" onclick="fun1()" />
             <div id="d2"  class="a" >
                 d2
             </div>
             <input type="button"   value="添加class值" onclick="fun2()" />
             <input type="button"   value="删除class值" onclick="fun3()" />
             <input type="button"   value="切换class值" onclick="fun4()" />
        </body>
    </html>

![a4952a8f98447738d34447d30b50a047.gif][]

![c05c195bfacdda119a9dbf6e18d8bb0f.gif][]

[ce89d4e32f23cbe2063b7c2a9f6639a5.gif]: https://img-blog.csdnimg.cn/img_convert/ce89d4e32f23cbe2063b7c2a9f6639a5.gif
[bfb29741d0a3e359d67daf5b12da6754.gif]: https://img-blog.csdnimg.cn/img_convert/bfb29741d0a3e359d67daf5b12da6754.gif
[a4952a8f98447738d34447d30b50a047.gif]: https://img-blog.csdnimg.cn/img_convert/a4952a8f98447738d34447d30b50a047.gif
[c05c195bfacdda119a9dbf6e18d8bb0f.gif]: https://img-blog.csdnimg.cn/img_convert/c05c195bfacdda119a9dbf6e18d8bb0f.gif