Jquery屬性操作、添加類


<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>Document</title>

    <script type="text/javascript" src="jquery.1.11.1.min.js"></script>

   <style type="text/css">

      .red{

         color: red;

      }

      .box3{

         width: 100px;

         height: 100px;

         background: red;

      }

   </style>

</head>

<body>

  

   addClass()  添加類名

   removeClass() 移除類名

   toggleClass() 添加或移除類名,這個方法很靈活,很舒服

   html()   無參數時獲取內部html或者有參數設置內部html

   text() 無參數時獲取內部文本或者有參數設置內部文本

   val()  獲取或者設置表單元素的value

   css()  獲取或者設置css樣式

   一個字符串參數  獲取

   一個對象       設置

   兩個參數       設置

   attr()         給普通標簽設置或者獲取屬性

   removeAttr()    移除屬性

   prop() 給表單元素設置和獲取屬性

   data() 給JQ對象設置屬性

   offset  偏移值

 

   <div id="box">box</div>

   <div id="box1">

      <span>span1</span><span>span2</span>

   </div>

   <div id="box2">111</div>

   <div id="box100"></div>

  

   <input type="text" name="" id="t">

   <div class="box3"></div>

   

   <script type="text/javascript">

      //開始這樣<div id="box100"></div>

      //添加屬性后變成<div id="box100" name="zhangsan"></div>

      $("#box100").attr("name","zhangsan");  

      $("[name=zhangsan]").html("123")        //因為有屬性了,所有可以賦值

 

 

      $("#box").addClass("red").click(function(){

         // $(this).removeClass("red");

         //this指id名為box對應的標簽,  toggleClass()這個方法有類就刪除類,沒類就添加類,很靈活,很舒服

         $(this).toggleClass("red");      

      });

 

      $("#box1").html("<span>hello</span>");  //設了參數就替換了原來的值

      $("#box2").text("<span>hello</span>");  //設了參數就替換了原來的值,標簽名也會寫上去

 

      $("#t").val("happy");               //給表單賦值的

      $("#t").change(function(){           //輸入框內容發生改變時,鼠標一移開馬上觸發

         alert(123)     

      })

      $(".box3").css("background","#FFFF00");   //2個值設置寬度

     

      $("#box").attr("index",0);           //添加屬性,2個參數添加屬性,一個參數獲得屬性

      $("#box").removeAttr("index");       //移除屬性

 

   </script>

</body>

</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM