jQUery中捕獲和設置HTML元素的方法

一、jQuery中捕獲HTML元素的方法——選擇器

1、實際上jQuery中的選擇器是基於CSS選擇器的，只要CSS選擇器中支持的，jQuery都支持

     可以從這個鏈接中獲得基本上所有形式實例：jQuery選擇器   CSS選擇器

2、接下來我們要說明的一個重要的問題是，不論是CSS選擇器、jQuery選擇器、JavaScript選擇方法

     都能夠逐層的向下進行選擇，看看下面的實例就會非常的明白這一點：

     1⃣️ jQuery選擇器的逐級篩選

     $('#envForm input[name="name"]')
     解釋——envForm標簽下的，name="name"的input標簽
 

     $('.edit-env-modal select[name="type"]'）
     解釋——edit-env-modal類下的，name="type"的select標簽

    

      2⃣️ JavaScript中的逐級篩選

      var x=document.getElementById("main");
      var y=x.getElementsByTagName("p");

 

二、jQuery中設置HTML元素的方法

 1、獲取並設置HTML對象的內容

      text()  - 設置或返回所選元素的文本內容

      html() - 設置或返回所選元素的內容（包括 HTML 標記）

      val()   - 設置或返回表單字段的值

      1⃣️ $("#p1").val()  //獲取Id=p1的HTLM元素的value值

      2⃣️ $("#p1").val("Dolly Duck");  //將Id=p1的HTLM元素的value值設為 Dolly Duck

      3⃣️ $("#test2").html("<b>Hello world!</b>");

      4⃣️ 上面的三個 jQuery 方法：text()、html() 以及 val()，同樣擁有回調函數。回調函數

          由兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。然后以函數新值

          返回您希望使用的字符串。下面的例子演示帶有回調函數的 text() 和 html()：

          $("#btn1").click(function(){
            $("#test1").text(function(i,origText){
              return "Old text: " + origText + " New text: Hello world!
              (index: " + i + ")"; 
            });
          });

         $("#btn2").click(function(){
            $("#test2").html(function(i,origText){
              return "Old html: " + origText + " New html: Hello <b>world!</b>
              (index: " + i + ")"; 
            });
          });

 

2、獲取並設置HTML對象的屬性

     attr() 方法用於獲取屬性值

     1⃣️ $("#w3s").attr("href")  //獲取href屬性的值

     2⃣️ $("#w3s").attr("href","http://www.w3cschool.cc/jquery"); //將href屬性設為http://www.w3cschool.cc/jquery

     3⃣️ attr() 方法也允許同時設置多個屬性

         $("button").click(function(){
           $("#w3s").attr({
             "href" : "http://www.w3cschool.cc/jquery",
             "title" : "W3Schools jQuery Tutorial"
           });
         });

     4⃣️   attr()，也提供回調函數。回調函數由兩個參數：被選元素列表中當前元素的下標，

          以及原始（舊的）值。然后以函數新值返回您希望使用的字符串。

          下面的例子演示帶有回調函數的 attr() 方法：

          $("button").click(function(){

            $("#w3s").attr("href", function(i,origValue){
              return origValue + "/jquery"; 
            });
          });

 

3、獲取並設置HTML對象的CSS樣式

     addClass() - 向被選元素添加一個或多個類

     removeClass() - 從被選元素刪除一個或多個類

     toggleClass() - 對被選元素進行添加/刪除類的切換操作

     css() - 設置或返回樣式屬性

     1⃣️ addClass()/removeClass()/toggleClass()這幾個方法都不再解釋，非常簡單，可參見：

         http://www.runoob.com/jquery/jquery-css-classes.html

     具體在介紹一下css()方法的使用

     2⃣️ $("#p1").css("background-color"); //返回#p1的背景顏色值

     3⃣️ $("p").css("background-color","yellow"); //設置p標簽的背景顏色值為黃色

     4⃣️ 如需設置多個 CSS 屬性，請使用如下語法：

         css({"propertyname":"value","propertyname":"value",...});

         $("p").css({"background-color":"yellow","font-size":"200%"});