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