jQuery选择器和对DOM的操作

￡神魔★判官ぃ 2022-01-23 00:01 299阅读 0赞

#### 一、jQuery选择器 ####

**1.基本选择器**

*  元素选择器，语法`$("html标签名")`，例：查找所有div下span元素的个数 `$("div,span").size();`
 *  id选择器，语法 `$("#id的属性值")`，例：查找Id为"div1"的元素个数 `$("#div1").size();`
 *  类选择器，语法 `$(".class的属性值")`，例：查找所有样式是"class1"的元素的个数 `$(".class1").size();`

**2.层次选择器**

<table> 
 <thead> 
  <tr> 
   <th>选择器名称</th> 
   <th>语法</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>后代选择器</td> 
   <td><code>$("A B")</code></td> 
   <td>选择A元素内部的所有B元素</td> 
  </tr> 
  <tr> 
   <td>子选择器</td> 
   <td><code>$("A &gt; B")</code></td> 
   <td>选择A元素内部的所有子B元素</td> 
  </tr> 
 </tbody> 
</table>

*  改变`<body>`内所有`<div>`的背景色为红色：`$("body div").css("background-color","red");`
 *  改变`<body>`内子`<div>`的背景色为红色：`$("body > div").css("background-color","red");`
 *  改变id为one的下一个`<div>`的背景色为红色：`$("#one + div").css("background-color","red");`

**3. 属性选择器**

<table> 
 <thead> 
  <tr> 
   <th>选择器名称</th> 
   <th>语法</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>属性选择器</td> 
   <td><code>$("A[属性名]")</code></td> 
   <td>包含指定属性的选择器</td> 
  </tr> 
  <tr> 
   <td>属性选择器</td> 
   <td><code>$("A[属性名=值]")</code></td> 
   <td>包含指定属性等于指定值的选择器</td> 
  </tr> 
  <tr> 
   <td>复合属性选择器</td> 
   <td><code>$("A[属性名=值] [属性名=值]...")</code></td> 
   <td>包含多个属性条件的选择器</td> 
  </tr> 
 </tbody> 
</table>

*  查找所有含有id属性的div元素个数：`$("div[id]").size();`
 *  查找所有name属性是newsletter的input元素，并将其选中：`$("input[name='newsletter']").attr("checked","checked");`
 *  查找所有含有属性id且属性title值包含"es"的div元素，并将背景色改为红色：`$("div[id][title*='es']").css("background-color","red");`

**4. 基本过滤选择器**

<table> 
 <thead> 
  <tr> 
   <th>选择器名称</th> 
   <th>语法</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>首元素选择器</td> 
   <td><code>:first</code></td> 
   <td>获得选择的元素中的第一个元素</td> 
  </tr> 
  <tr> 
   <td>尾元素选择器</td> 
   <td><code>:last</code></td> 
   <td>获得选择的元素中的最后一个元素</td> 
  </tr> 
  <tr> 
   <td>非元素选择器</td> 
   <td><code>:not(selecter)</code></td> 
   <td>不包括指定内容的元素</td> 
  </tr> 
  <tr> 
   <td>等于索引选择器</td> 
   <td><code>:eq(index)</code></td> 
   <td>指定索引元素</td> 
  </tr> 
  <tr> 
   <td>偶数选择器</td> 
   <td><code>:even</code></td> 
   <td>偶数，从0开始计数</td> 
  </tr> 
  <tr> 
   <td>奇数素选择器</td> 
   <td><code>:odd</code></td> 
   <td>奇数，从1开始计数</td> 
  </tr> 
 </tbody> 
</table>

1)查找UL中第一个元素li和最后一个元素li的内容  
    	$("ul li:first").text(); 
    	$("ul li:last").text();     
    
    2)查找所有选中未选中的input元素个数  
    	$(":checkbox:not(:checked)").size();  //未选中 
         
    3)查找表格中第二行的内容，从索引号0开始  
        $("table tr:eq(1)").text();  
        //html()强调的是标签中的内容，如果标签中有子标签，则会显示出来，而text()强调的是标签
        //中的文本内容，不会显示子标签
    
    4)点击表格第二列
    	$("#table1 td:eq(1)").click();  
    
    5)改变索引值为偶数的 div 元素的背景色为红色
        $("div:even").css("background-color","red");
    
    6)改变索引值为奇数的 div 元素的背景色为 红色
        $("div:odd").css("background-color","red");

**5. 表单属性过滤选择器**

<table> 
 <thead> 
  <tr> 
   <th>选择器名称</th> 
   <th>语法</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>可用元素选择器</td> 
   <td><code>:enabled</code></td> 
   <td>获得可用元素</td> 
  </tr> 
  <tr> 
   <td>不可用元素选择器</td> 
   <td><code>:disabled</code></td> 
   <td>获得不可用元素</td> 
  </tr> 
  <tr> 
   <td>选中选择器</td> 
   <td><code>:checked</code></td> 
   <td>获得 单选/复选框 选中的元素</td> 
  </tr> 
  <tr> 
   <td>选中索引选择器</td> 
   <td><code>:selected</code></td> 
   <td>获得下拉框选中的元素</td> 
  </tr> 
 </tbody> 
</table>

#### 二、jQuery的DOM操作 ####

**1. jQuery对DOM树中的文本和值进行操作**

<table> 
 <thead> 
  <tr> 
   <th>API方法</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>text([value])</code></td> 
   <td>获得/设置元素的文本内容</td> 
  </tr> 
  <tr> 
   <td><code>html([value])</code></td> 
   <td>获得/设置元素的标签体的所有内容</td> 
  </tr> 
  <tr> 
   <td><code>val([value])</code></td> 
   <td>获得/设置表单元素value属性相应的值</td> 
  </tr> 
 </tbody> 
</table>

**2. jQuery对DOM树中的属性进行操作**

<table> 
 <thead> 
  <tr> 
   <th>API方法</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>attr(name[,value])</code></td> 
   <td>获得/设置属性的值</td> 
  </tr> 
  <tr> 
   <td><code>prop(name[,value])</code></td> 
   <td>获得/设置属性的值(checked，selected)</td> 
  </tr> 
  <tr> 
   <td><code>removeAttr(name)</code></td> 
   <td>删除指定的属性</td> 
  </tr> 
 </tbody> 
</table>

<ul>
       <li id="bj" name="beijing" xxx="yyy">北京</li>
       <li id="tj" name="tianjin">天津</li>
    </ul>
    <input type="checkbox" id="hobby"/>
    
    //获取北京节点的name属性值
    alert($("#bj").attr("name"));
    
    //设置北京节点的name属性的值为dabeijing
    $("#bj").attr("name","dabeijing");
    
    //新增北京节点的description属性 属性值是didu
    $("#bj").attr("description","didu");
    
    //删除北京节点的name属性并检验name属性是否存在
    $("#bj").removeAttr("name");
    
    //获得hobby的的选中状态
    //alert($("#hobby").attr("checked"));//不行
    alert($("#hobby").prop("checked"));//false，代表没有选中
    
    //attr适合操作一般大多数属性，prop适合获取操作属性值为boolean的属性
    //设置复选框选中
    $("#hobby").prop("checked",true);
    $("#hobby").attr("checked",true);

**3. jQuery对class进行操作**

<table> 
 <thead> 
  <tr> 
   <th>API方法</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>css("样式名","样式值"])</code></td> 
   <td>获取/设置指定的CSS样式</td> 
  </tr> 
  <tr> 
   <td><code>addClass(类样式名)</code></td> 
   <td>给指定的对象添加新的类样式，指定类样式名字即可</td> 
  </tr> 
  <tr> 
   <td><code>removeClass(类样式名)</code></td> 
   <td>删除指定的类样式</td> 
  </tr> 
  <tr> 
   <td><code>toggleClass(类样式名)</code></td> 
   <td>切换样式，如果没有类样式，则添加，如果有类样式，则删除</td> 
  </tr> 
  <tr> 
   <td><code>hasClass (类样式名)</code></td> 
   <td>判断是否有类样式名</td> 
  </tr> 
 </tbody> 
</table>

// <input type="button" value="给id为one设置属性class的值为second" id="button1"/>
    $("#button1").click(function () { 
        //设置样式
        $("#one").attr("class","second");
        $("#one").addClass("second");
        //移除样式
        $("#one").removeClass("second");
        //切换样式
        $("#one").toggleClass("second");
    });
    
    // <input type="button" value=" 通过css()获得id为one背景颜色" id="button2"/>
    $("#button2").click(function () { 
       alert($("#one").css("background-color"));
    });
    // <input type="button" value=" 通过css()设置id为one背景颜色为绿色" id="button3"/>
    $("#button3").click(function () { 
       $("#one").css("background-color","green");
    });

**4. jQuery创建插入对象**

<table> 
 <thead> 
  <tr> 
   <th>API方法</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>$("&lt;A&gt;&lt;/A&gt;")</code></td> 
   <td>创建A元素对象</td> 
  </tr> 
  <tr> 
   <td><code>append(element)</code></td> 
   <td>父标签.append(最后一个子标签)，添加成最后一个子元素，两者之间是父子关系</td> 
  </tr> 
  <tr> 
   <td><code>prepend(element)</code></td> 
   <td>父标签.prepend(第一个子标签)，添加成第一个子元素，两者之间是父子关系</td> 
  </tr> 
  <tr> 
   <td><code>before(element)</code></td> 
   <td>当前标签.before(兄弟标签)，添加到当前元素的前面，两者之间是兄弟关系</td> 
  </tr> 
  <tr> 
   <td><code>after(element)</code></td> 
   <td>当前标签.after(兄弟标签)，添加到当前元素的后面，两者之间是兄弟关系</td> 
  </tr> 
 </tbody> 
</table>

**5. jQuery删除对象**

<table> 
 <thead> 
  <tr> 
   <th>API方法</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>remove()</code></td> 
   <td>删除指定元素</td> 
  </tr> 
  <tr> 
   <td><code>empty()</code></td> 
   <td>清空指定元素的所有子元素</td> 
  </tr> 
 </tbody> 
</table>

/*删除标签2种方式 * jq对象.remove() 自杀，将自己干掉删除 * jq对象.empty() 清空子元素 * */
    
    //删除<li id="bj" name="beijing">北京</li>
    $("#bj").remove();
    //删除所有的子节点 清空元素中的所有后代节点(不包含属性节点)
    $("#city").empty();

**6. jQuery效果**

1.隐藏显示HTML元素
    	$("p").hide()
    	$("p").show()    style="display:none;"
    			display:block是将对象块状化;display:none是不显示
    
      切换隐藏显示
    	$("p").toggle()
    
    2.淡入淡出HTML元素
    淡入:
    	$("#div1").fadeIn();
        $("#div1").fadeIn("slow");
        $("#div1").fadeIn(3000);
    
    淡出:
        $("#div1").fadeOut();
        $("#div1").fadeOut("slow");
        $("#div1").fadeOut(3000);

#### 三、jQuery遍历函数 ####

**1. jQuery祖先**

*  `parent()`：返回被选元素的直接父元素
 *  `parents()`：返回被选元素的所有祖先元素，一路向上直到文档的根元素 (`<html>`)
 *  `parentsUntil()`：返回介于两个给定元素之间的所有祖先元素

$("span").parent();  //返回每个 <span> 元素的的直接父元素
    $("span").parents("ul");   //返回所有 <span> 元素的所有祖先<ul>元素
    $("span").parentsUntil("div"); //返回介于<span>与<div>元素之间的所有祖先元素

**2. jQuery后代**

*  `children()`：返回被选元素的所有直接子元素
 *  `find()`：返回被选元素的后代元素，一路向下直到最后一个后代

$("div").children();    //返回每个 <div> 元素的所有直接子元素
    $("div").find("span");  //返回属于 <div> 后代的所有 <span> 元素

**3. jQuery同胞**

*  `siblings()`：返回被选元素的所有同胞元素
 *  `next()`：获得匹配元素集合中每个元素紧邻的同辈元素
 *  `nextAll()`：获得匹配元素集合中每个元素之后的所有同辈元素
 *  `prev()`：获得匹配元素集合中每个元素紧邻的前一个同辈元素
 *  `prevAll()`：获得匹配元素集合中每个元素之前的所有同辈元素

$("h2").siblings();  //返回 <h2> 的所有同胞元素
    
    $("#div1").next();  //返回 <div> 的下一个同胞元素(只返回一个元素)
    $("div2").nextAll();  //返回 <div> 的所有跟随的同胞元素
    $("h1").nextUntil("h3");  //返回介于 <h1> 与 <h3> 元素之间的所有同胞元素
    
    prev(),prevAll()以及prevUntil()方法的工作方式与next()方法类似,只不过方向相反而已,它们返回的是前面的同胞元素

**4. jQuery遍历(过滤)**

*  `first()`：返回被选元素集合的第一个元素
 *  `last()`：返回被选元素集合的最后一个元素
 *  `eq()`：返回被选元素中带有指定索引号的元素(索引号从0开始)

$("div p").first();  //获得 <div> 元素内部的第一个 <p> 元素
    $("div p").last();   //选择 <div> 元素中的最后一个 <p> 元素
    $("p").eq(1);        //选取第二个 <p> 元素

[参考：jQuery遍历函数参考手册][jQuery]

[jQuery]: http://www.w3school.com.cn/jquery/jquery_ref_traversing.asp