3_1jQuery操作属性和样式

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>

操作样式

原生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>
         <!--
         	元素.style.样式名=
         	css()
         -->
         <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>