jQuery选择器整理

最新推荐文章于 2022-10-13 17:37:31 发布
最新推荐文章于 2022-10-13 17:37:31 发布
阅读量331 收藏
点赞数
分类专栏： web开发

一、基本选择器

1、ID选择器

JavaScript提供了原生方法实现在DOM中选择指定ID值得元素。用法如下：

var element=document.getElementById("id");

jQuery简化了其操作： var $element=$("#id");

实际上就是 jQuery对javaScript进行了一下包装，jQuery的ID选择方法在执行效率上要低于JavaScript的原生方法。

2、类型选择器

跟ID选择器一样，JavaScript同样提供了原生的方法用来在DOM中选择指定类型的元素。

var elements=document.getElementByTagName(tagName"");

jQuery对其包装后的简化方法是 var $elements=$("tagName");

3、类选择器

JavaScript没有提供内置的类选择方法，我们可以自己为其拓展一个，代码如下：

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. document.getElementsByClassName=function(className){  
  2.   
  3.      var el=[],  
  4.   
  5.          _el=document.getElementsByTagName("*");   //获取所有元素  
  6.   
  7.          for(var i=0;i<_el.length;i++){  
  8.   
  9.             if(_el[i]==className){  
  10.   
  11.               el[el.length]=_el[i];  
  12.   
  13.             }  
  14.   
  15.           }  
  16.   
  17.     return el;  
  18.   
  19. }  

下面举个例子，一个页面有4个div,通过JavaScript使div1和div3的前景色设置成红色，通过jQuery将div2和div4的前景色设置成蓝色

<div class="red"></div>

<div class="red">div1</div>

<div class="blue">div2</div>

<div class="red">div3</div>

<div class="blue">div4</div>

代码如下 实例2-1：

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.   <title> New Document </title>  
  5.   <meta name="Generator" content="EditPlus">  
  6.   <meta name="Author" content="">  
  7.   <meta name="Keywords" content="">  
  8.   <meta name="Description" content="">  
  9.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  10.   <script type="text/javascript">  
  11.   document.getElementsByClassName=function(className){  
  12.   
  13.      var el=[],  
  14.          _el=document.getElementsByTagName("*");   //获取所有元素  
  15.          for(var i=0;i<_el.length;i++){  
  16.             if(_el[i].className==className){  
  17.               el[el.length]=_el[i];  
  18.             }  
  19.           }  
  20.          return el;  
  21.     }  
  22.   
  23.     window.onload=function (){  
  24.         var redDiv= document.getElementsByClassName("red");  
  25.         for(var i=0;i<redDiv.length;i++){  
  26.           redDiv[i].style.color="red";  
  27.         }  
  28.     };  
  29.   
  30.     $(function(){  
  31.         $(".blue").css("color","blue");  
  32.     })  
  33.   </script>  
  34.  </head>  
  35.   
  36.  <body>  
  37.   <div id="" class="red">  
  38.     div1  
  39.   </div>  
  40.   <div id="" class="blue">  
  41.     div2  
  42.   </div>  
  43.   <div id="" class="red">  
  44.     div3  
  45.   </div>  
  46.   <div id="" class="blue">  
  47.       
  48.   </div>  
  49.   
  50.  </body>  
  51. </html>  

上述例子可以看得到jQuery的写法要相对简单一些，而且jQuery已经是一个成熟的框架了，它内部封装的类选择器方法要比咱们自定义的效率高。

4、通配选择器（"*"）

该选择器可以匹配上下文中的所有元素，下面示例将选择body下的所有元素

实例2-2：

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.   <title> New Document </title>  
  5.   <meta name="Generator" content="EditPlus">  
  6.   <meta name="Author" content="">  
  7.   <meta name="Keywords" content="">  
  8.   <meta name="Description" content="">  
  9.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  10.   <script type="text/javascript">  
  11.   <!--  
  12.     $(function(){  
  13.         $("body *").css("color","red");  
  14.         $("div *").css("color","blue");  
  15.     })  
  16.   //-->  
  17.   </script>  
  18.  </head>  
  19.   
  20.  <body>  
  21.     <div id="" class="">  
  22.         div1  
  23.         <span class="">div下的span</span>  
  24.         <table>  
  25.         <tr>  
  26.             <td>div下的table</td>  
  27.         </tr>  
  28.         </table>  
  29.     </div>  
  30.     </br>  
  31.     <span class="">span1</span>  
  32.     </br>  
  33.     <textarea name="" rows="3" cols="80">textarea1</textarea>  
  34.           
  35.     <table>  
  36.     </br>  
  37.     <tr>  
  38.         <td>table1</td>  
  39.     </tr>  
  40.     </table>  
  41.  </body>  
  42. </html>  

5、分组选择器

jQuery支持CSS的分组选择器，通过这种方式可以扩大选择器的选择范围，同时增强jQuery选择器的应用能力，选个多组元素可以通过逗号分隔符来分隔多个不同的选择器。，这些选择器可以是任意类型的，也可以是复合选择器。

实例2-3：

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.   <title> New Document </title>  
  5.   <meta name="Generator" content="EditPlus">  
  6.   <meta name="Author" content="">  
  7.   <meta name="Keywords" content="">  
  8.   <meta name="Description" content="">  
  9.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  10.   <script type="text/javascript">  
  11.     $(function(){  
  12.         $("h2,#wrap,span.red,[title='text']").css("color","red");//分别选择了元素h2、id为wrap的、span下的class为red的、title为text的  
  13.     })  
  14.   </script>  
  15.  </head>  
  16.   
  17.  <body>  
  18.     <h2>H2</h2>  
  19.     <div id="wrap" class="">  
  20.         DIV  
  21.     </div>  
  22.     <div id="" class="red">  
  23.         DIV_CLASS_RED  
  24.     </div>  
  25.     <span class="red">SPAN</span>  
  26.     <p title="text">P</p>  
  27.  </body>  
  28. </html>  

二、层级选择器

层级选择器就是根据HTML文档结构中节点之间的包含或者并列关系，决定匹配元素的一种方法。

1、关系选择器

表2-1 关系选择器
选择器说明
ancestor  descendant

      在给定祖先元素下匹配所有后代元素。ancestor，表示任何有效选择器，descendant表示用以匹配元素的选择器，并且它是第一个选择器的后代元素。例如：$("form input")可以匹配表单下的所有input元素。

parent>child

      在给定父元素下匹配所有子元素。perent表示任何有效选择器，descendant表示用以匹配元素的选择器，并且它是第一个选择器的后代元素。例如：$("table>tr")可以匹配table下的所有tr元素

prev + next                                                          

      匹配所有紧接在prev元素后的next元素。prev表示任何有效选择器，next表示一个有效选择器并且紧接着第一个选择器 。例如：$("lable + input")匹配所有跟在lable后面的input元素

prev ~ siblings

       匹配prev元素之后的所有siblings元素。prev表示任何有效选择器，siblings表示一个选择器，并且它是作为prev选择器的同辈。例如：$("form ~ input")匹配所有跟form元素同辈的input元素。

通过上面的表格我们不一定能完全明白这几个选择器的细节地方，还是写个实例演示一下。

实例2-4：

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.   <title> 关系选择器演示实例 </title>  
  5.   <meta name="Generator" content="EditPlus">  
  6.   <meta name="Author" content="">  
  7.   <meta name="Keywords" content="">  
  8.   <meta name="Description" content="">  
  9.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  10.   <script type="text/javascript">  
  11.   <!--  
  12.     $(function(){  
  13.         $("div").css("border","solid 1px red");         //控制所有div元素的边框宽度为1 颜色为红色  
  14.         $("div>div").css("margin","2em");                //控制div下属的所有子div缩进两个中文字符  
  15.         $("div div").css("background","#ff0");          //控制一级div下属的所有div元素的背景色为#ff0  
  16.         $("div div div").css("background","#f0f");      //控制第三层div背景色为#f0f  
  17.         $("div + p").css("margin","2em");               //控制与div相邻的p元素缩进两个中文字符，只匹配div后面紧接着那个p元素  
  18.         $("div:eq(1) ~ p").css("background","blue");    //控制页面第二个div（eq(1)代表取第二个)之后所有的与第二个div同辈的p元素的背景色为蓝色  
  19.     })  
  20.   //-->  
  21.   </script>  
  22.  </head>  
  23.   
  24.  <body>  
  25.      <p>段落文本10</p>  
  26.     <div id="" class="">一级div元素  
  27.         <div id="" class="">二级div元素  
  28.             <div id="" class="">三级div元素  
  29.                   
  30.             </div>  
  31.             <p>段落文本31</p>  
  32.             <p>段落文本32</p>  
  33.         </div>  
  34.         <p>段落文本21</p>  
  35.         <p>段落文本22</p>  
  36.     </div>  
  37.     <p>段落文本11</p>  
  38.     <p>段落文本12</p>     
  39.  </body>  
  40. </html>  

2、子元素选择器

这个写个实例吧。

实例2-5：

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.   <title> New Document </title>  
  5.   <meta name="Generator" content="EditPlus">  
  6.   <meta name="Author" content="">  
  7.   <meta name="Keywords" content="">  
  8.   <meta name="Description" content="">  
  9.  </head>  
  10.  <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  11.  <script type="text/javascript">  
  12.  <!--  
  13.     $(function(){  
  14.         //$("ul li:nth-child(1)").css("background","#ff6")      //匹配每个ul元素下的第一个li元素，可能匹配0个或者多个  
  15.         //$("ul li:nth-child(3n+2)").css("background","#6ff")   //匹配每个ul元素下第3n+2个li元素，n取值为0，1,2，.......  
  16.         //$("ul li:first-child").css("color","red");            //匹配每个ul元素下的第一个li元素  
  17.         //$("ul li:first").css("color","red");                  //匹配第一个ul元素下的第一个li元素 跟上面的那个是有区别的  
  18.         //$("ul li:last-child").css("color","blue");            //匹配每个ul元素下的最后一个li元素  
  19.         //$("ul li:last").css("color","red");                   //匹配最后一个ul元素下的最后一个li元素  
  20.         $("ul li:only-child").css("color","red")                //如果li元素是ul元素下的唯一子元素(只有一个li元素,没有其他元素)，  
  21.                                                                 //那么可以匹配，否则不可匹配  
  22.     })  
  23.  //-->  
  24.  </script>  
  25.  <body>  
  26.     <ul>  
  27.         <li>列表11</li>  
  28.         <li>列表12</li>  
  29.         <li>列表13</li>  
  30.         <li>列表14</li>  
  31.         <li>列表15</li>  
  32.         <li>列表16</li>  
  33.     </ul>  
  34.     <ul>  
  35.         <li>列表21</li>  
  36.         <li>列表22</li>  
  37.         <li>列表23</li>  
  38.         <li>列表24</li>  
  39.         <li>列表25</li>  
  40.         <li>列表26</li>  
  41.     </ul>  
  42.  </body>  
  43. </html>  

注意：

A、:nth-child(even) :nth-child(odd) //分别是匹配偶数位元素和奇数位元素 可以用2n和2n+1替代

B、我们用过的eq(n)选择器是从0开始计数的，而刚刚整理的那些选择器是从1开始计数的，使用的时候要注意

三、过滤选择器

过滤选择器主要通过特定的过滤表达式来筛选特殊需求的DOM元素，过滤选择器与CSS的伪类选择器语法格式相同，即以冒号作为前缀标识符。根据需求的不同，过滤选择器又可以分为定位过滤器、内容过滤器、可见过滤器。下面分别介绍：

1、定位过滤器

定位过滤器主要通过编号和排位筛选特定位置上的元素，或者过滤掉特定元素.



以上效果实现代码 实例2-6：

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.   <title> New Document </title>  
  5.   <meta name="Generator" content="EditPlus">  
  6.   <meta name="Author" content="">  
  7.   <meta name="Keywords" content="">  
  8.   <meta name="Description" content="">  
  9.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  10.   <script type="text/javascript">  
  11.   <!--  
  12.         $(function(){  
  13.             $("tr:first").css("color","red");                   //设置第一行字体为红色  
  14.             $("tr:eq(0)").css("font-size","20px");              //设置第一行字体大小为20像素 font-size:20px  
  15.             $("tr:last").css("color","blue");                   //设置最后一行字体为蓝色  
  16.             $("tr:even").css("background","#ffd");              //设置偶数行背景色为#ffd  
  17.             $("tr:odd").css("background","#dff");               //设置技术行背景色为#dff  
  18.             $("tr:gt(3)").css("font-size","14px");              //设置从第五行开始所有的字体大小为14px  
  19.             $("tr:lt(4)").css("font-size","14px");              //设置1-4行字体大小为14px  
  20.               
  21.         })  
  22.   //-->  
  23.   </script>  
  24.  </head>  
  25.   
  26.  <body>  
  27.     <table>  
  28.     <tr>  
  29.         <th>选择器</th>  
  30.         <th>说  明</th>  
  31.     </tr>  
  32.     <tr>  
  33.         <td>:first</td>  
  34.         <td>匹配找到的第一个元素，例如，$("tr:first")表示匹配表格的第一行</td>  
  35.     </tr>  
  36.     <tr>  
  37.         <td>:last</td>  
  38.         <td>匹配找到的最后一个元素，例如，$("tr:last")表示匹配表格的最后一行</td>  
  39.     </tr>  
  40.     <tr>  
  41.         <td>:not</td>  
  42.         <td>去除所有与给定选择器匹配的元素。例如，$("input:not(:checked)")可以匹配所有未选中的input元素</td>  
  43.     </tr>  
  44.     <tr>  
  45.         <td>:even</td>  
  46.         <td>匹配所有索引值为偶数的元素，从0开始计数。例如$("tr:even"),可以匹配表格的偶数行</td>  
  47.     </tr>  
  48.     <tr>  
  49.         <td>:odd</td>  
  50.         <td>上面是偶数，这个是奇数</td>  
  51.     </tr>  
  52.     <tr>  
  53.         <td>:eq</td>  
  54.         <td>匹配一个给定索引值的元素，例如，$("tr:eq(0)")可以匹配第一个tr</td>  
  55.     </tr>  
  56.     <tr>  
  57.         <td>:gt</td>  
  58.         <td>匹配所有大于给定索引值的元素，从0开始计数。例如，$("tr:gt(0)")可以匹配表格的第二行以及后面的行</td>  
  59.     </tr>  
  60.     <tr>  
  61.         <td>:lt</td>  
  62.         <td>上面是大于，这个是小于，eq就相当于等于呗</td>  
  63.     </tr>  
  64.     <tr>  
  65.         <td>:header</td>  
  66.         <td>匹配如h1\h2\h3类标题元素</td>  
  67.     </tr>  
  68.     <tr>  
  69.         <td>:animated</td>  
  70.         <td>匹配所有正在执行动画效果的元素</td>  
  71.     </tr>  
  72.     </table>  
  73.  </body>  
  74. </html>  

2、内容过滤器

内容过滤器主要根据匹配元素所包含的的子元素或者文本内容进行过滤。主要有四种方式：

表2-2 内容选择器
选择器说     明
:contains匹配包含给定文本的元素，例如，$("div:contains('图片')") 匹配所有包含文本"图片"的div元素
:has匹配含有选择器所匹配的元素的元素，例如，$("div:has(p)")匹配所有包含p元素的div元素
:empty匹配所有不包含子元素或者文本的空元素
:parent匹配含有子元素或者文本的元素，与empty相互对应

实例2-7：

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.   <title> New Document </title>  
  5.   <meta name="Generator" content="EditPlus">  
  6.   <meta name="Author" content="">  
  7.   <meta name="Keywords" content="">  
  8.   <meta name="Description" content="">  
  9.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  10.   <script type="text/javascript">  
  11.   <!--  
  12.         $(function(){  
  13.             $("li:empty").text("空内容");              //匹配空li元素  
  14.             $("div ul:parent").css("background","#ff1");//匹配div下包含的不为空的ul元素  
  15.             $("h2:contains('标题')").css("color","red");//匹配包含文本内容"标题"的h2元素  
  16.             $("p:has(span)").css("color","blue");       //包含span元素的p元素    
  17.         })  
  18.   //-->  
  19.   </script>  
  20.  </head>  
  21.   
  22.  <body>  
  23.      <div id="" class="">  
  24.         <h2>标题</h2>  
  25.         <p>段落文本1</p>  
  26.         <p><span>段落文本2</span></p>  
  27.         <ul>  
  28.             <li></li>  
  29.             <li></li>  
  30.         </ul>  
  31.      </div>  
  32.  </body>  
  33. </html>  

执行效果如下：


3、可见过滤器

可见过滤器就是根据元素的可见或者隐藏来进行匹配的

表2-3 可见过滤器
选择器说   明
:hidden匹配所有不可见元素，或者type为hidden的元素
:visible匹配所有可见元素
这个比较简单好记

实例2-8：

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.   <title> New Document </title>  
  5.   <meta name="Generator" content="EditPlus">  
  6.   <meta name="Author" content="">  
  7.   <meta name="Keywords" content="">  
  8.   <meta name="Description" content="">  
  9.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  10.   <script type="text/javascript">  
  11.   <!--  
  12.     $(function(){  
  13.         $("p:odd").hide();  
  14.         $("p:odd").css("color","red");  
  15.         $("p:visible").css("color","blue");  
  16.         $("p:hidden").show();  
  17.     })  
  18.   //-->  
  19.   </script>  
  20.  </head>  
  21.   
  22.  <body>  
  23.     <p>段落文本1</p>  
  24.     <p>段落文本2</p>  
  25.     <p>段落文本3</p>  
  26.     <p>段落文本4</p>  
  27.  </body>  
  28. </html>  

执行效果：

四、属性选择器

属性选择器一般是根据元素的属性和其值作为过滤的条件来匹配相应的DOM元素

1、七种属性选择器

表2-4 属性选择器
选择器说   明
[attribute]匹配包含给定属性的元素，例如，$("div[id]") 匹配所有包含id属性的div元素
[attridute=value]匹配属性等于特定值的元素，属性值的引号大多数是可选的，如果属性值包含"]"时，需要加引号以避免冲突。
[attridute!=value]跟上面的相对应，很好理解
[attridute^=value]匹配给定的属性是以某些值开始的元素，例如，$("input[name^='text']")表示所有name属性值是以text开始的input元素
[attridute$=value]匹配给定的属性是以某些值结尾的元素，跟上面的相对应
[attridute*=value]匹配给定的属性是包含某些值得元素
[selector1][selector2][selector3]复合属性选择器，需要同时满足多个条件时使用，例如，$(input[name*='text'][id])表示匹配所有name属性值包含text的且包含id属性的input元素。

2、使用属性选择器示例

看一个示例，在这个示例中将根据超链接文件的类型，分别为不同类型的文件添加图标。

实例2-8 

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.   <title> New Document </title>  
  5.   <meta name="Generator" content="EditPlus">  
  6.   <meta name="Author" content="">  
  7.   <meta name="Keywords" content="">  
  8.   <meta name="Description" content="">  
  9.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  10.   <script type="text/javascript">  
  11.   <!--  
  12.     $(function(){  
  13.         var $a1=$("a[href$=pdf]");  
  14.         $a1.html($a1.attr("href")+"<img src='images/pdf.jpg'/>");  
  15.         var $a2=$("a[href$=rar]");  
  16.         $a2.html($a2.attr("href")+"<img src='images/rar.jpg'/>");  
  17.         var $a3=$("a[href$=jpg],[href$=bmp]");  
  18.         $a3.html($a3.attr("href")+"<img src='images/jpg.jpg'/>");  
  19.         var $a4=$("a[href^='http']");  
  20.         $a4.html($a4.attr("href")+"<img src='images/html.jpg'/>");      
  21.           
  22.   
  23.     })  
  24.   //-->  
  25.   </script>  
  26.  </head>  
  27.   
  28.  <body>  
  29.   <a href="1.pdf">超链接</a><br>  
  30.   <a href="2.rar">超链接</a><br>  
  31.   <a href="3.jpg">超链接</a><br>  
  32.   <a href="4.bmp">超链接</a><br>  
  33.   <a href="http://www.baidu.com">超链接</a>  
  34.  </body>  
  35. </html>  

执行前后效果：


五、表单选择器

表单是页面中使用频率较高的元素之一，但是很多表单域都是使用input元素来定义的，为了方便用户能够灵活操作表单，jQuery专门定义了表单选择器，使用表单选择器可以方便地获取表单中某类表单域对象。

1、基本表单选择器

表2-5 表单选择器
选择器说   明
:input匹配所有input、textarea、select和button元素
:text匹配所有单行文本框
:password匹配所有密码框
:radio匹配所有单选按钮
:checkbox匹配所有复选框
:submit匹配所有提交按钮
:image匹配所有图像域
:reset匹配所有重置按钮
:button匹配所有普通按钮
:file匹配所有文件域
:hidden匹配所有隐藏域

下面看一个表单实例

实例2-9：

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.   <title> New Document </title>  
  5.   <meta name="Generator" content="EditPlus">  
  6.   <meta name="Author" content="">  
  7.   <meta name="Keywords" content="">  
  8.   <meta name="Description" content="">  
  9.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  10.   <script type="text/javascript">  
  11.   <!--  
  12.         $(function(){  
  13.             $("#form1 :text").val("修改后的文本域");  
  14.             $("#form1 :password").val("修改后的密码域");  
  15.             $("#form1 :checkbox").val("修改后的复选框");  
  16.             $("#form1 :radio").val("修改后的单选框");  
  17.             $("#form1 :image").val("修改后的图像域");  
  18.             $("#form1 :file").val("修改后的文件框");  
  19.             $("#form1 :hidden").val("修改后的隐藏域");  
  20.             $("#form1 :button").val("修改后的普通按钮");  
  21.             $("#form1 :submit").val("修改后的提交按钮");  
  22.             $("#form1 :reset").val("修改后的重置按钮");  
  23.         })  
  24.   //-->  
  25.   </script>  
  26.  </head>  
  27.   
  28.  <body>  
  29.     <form id="form1" method="post" >  
  30.         <input type="text" name="" value="文本域"><br>  
  31.         <input type="password" name="" value="密码域"><br>  
  32.         <input type="checkbox" name="" value="复选框">复选框<br>  
  33.         <input type="radio" name="" value="单选按钮">单选按钮<br>  
  34.         <input type="image" src="" value="图像域"><br>  
  35.         <input type="file" src="" value="文件域"><br>  
  36.         <input type="hidden" name="" value="隐藏域"><br>  
  37.         <input type="button" value="普通按钮" onclick=""><br>  
  38.         <input type="submit" value="提交按钮" onclick=""><br>  
  39.         <input type="reset"  value="重置按钮" onclick=""><br>  
  40.      </form>  
  41.  </body>  
  42. </html>  

处理前后效果图：

                                                  

注意：$("#form1 text") 在form1后面有一个空格

2、高级表单选择器

除了简单的表单域选择器外，jQuery还根据表单域中特有的属性定义了4个表单属性选择器，这些选择器与基础表单选择器不同，它们可以选择任何类型的表单域，因为它主要根据表单属性来选择。

表2-6 高级表单选择器
选择器说   明
:enabled匹配所有可用元素
:disabled匹配所有不可用元素
:checked匹配所有被选中的元素（复选框、单选按钮等，不包括select的option）
:selected匹配所有选中的option元素

实例2-10：

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3.  <head>  
  4.   <title> New Document </title>  
  5.   <meta name="Generator" content="EditPlus">  
  6.   <meta name="Author" content="">  
  7.   <meta name="Keywords" content="">  
  8.   <meta name="Description" content="">  
  9.   <script  src="jquery-2.1.0.min.js" type="text/javascript"></script>  
  10.   <script type="text/javascript">  
  11.   <!--  
  12.         $(function(){  
  13.             $("#form1 :disabled").val("不可用");  
  14.             $("#form1 :enabled").val("可用");  
  15.             $("#form1 :checked").removeAttr("checked");  
  16.             $("#form1 :selected").removeAttr("selected");  
  17.         })  
  18.   //-->  
  19.   </script>  
  20.  </head>  
  21.   
  22.  <body>  
  23.     <form id="form1" method="post" >  
  24.         <input type="text" name=""  disabled="disabled" value="文本域"><br>  
  25.         <input type="text"          disabled="disabled" value="文本域"><br>  
  26.         <input type="text"  value="文本域"><br>  
  27.         <input type="checkbox" name="" value="复选框" checked="checked">复选框<br>  
  28.         <input type="radio" name="" value="单选按钮">单选按钮<br>  
  29.         <select name="">  
  30.             <option value="1">1</option>  
  31.             <option value="2">2</option>  
  32.             <option value="3" selected>3</option>  
  33.         </select>  
  34.      </form>  
  35.  </body>  
  36. </html>  

前后效果：

zy408710468
关注
专栏目录
jquery、css 的选择器(逗号/空格/英文句号/大于号/加号/波浪号)
lzqial1987的专栏
06-24 612
jQuery、CSS常用选择器 符号 描述 示例 说明 紧接无符号 相当于”并且“关系 input.k-textbox{ ... } 选出input并且包含k-textbox类的元素 , （逗号） 选择器分格符, 选择多种元素 h1, h2{ ... } 选出h1 和 h2 的所有元素 . （圆点） 类选择器 .k-textbox{ ... } 选出包含k-te...
jQuery整理笔记二----jQuery选择器整理
曹海成的专栏
04-19 2661
一、基本选择器 1、ID选择器 JavaScript提供了原生方法实现在DOM中选择指定ID值得元素。用法如下： var element=document.getElementById("id"); jQuery简化了其操作： var $element=$("#id"); 实际上就是 jQuery对javaScript进行了一下包装，jQuery的ID选择方法在执行效率上要低于JavaS
jquery选择器 简单整理
tang1jun的博客
06-29 179
简单地总结一下常用的元素查找方法 $("A B") 查找A元素下面的所有子节点，包括非直接子节点 $("A&gt;B") 查找A元素下面的直接子节点 $("A+B") 查找A元素后面的兄弟节点，包括非直接子节点 $("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点 // 选择id值等于myElement的元素，id值不能重复，在文档中只能有一个id值是myElem...
jQuery选择器
weixin_33998125的博客
01-01 124
1.1   jQuery详细介绍 1.1.1    $问题 a)     Js命名归法：下划线、字母、$、数字 b)     但是不能以数字作为开头 jQUery的两个变量：$ 和 jQuery jQuery占用了我们两个变量：$ 和 jQuery 1.1.2    js入口函数跟jQuery入口函数的区别： Js的window.onload事件是等到所有内容，以及我们的外部图片之类的文件加载完...
Jquery 选择器整理
12-23
### Jquery 选择器整理 #### 基本选择器 **功能描述：** 基本选择器是jQuery中最常用的类型之一，它们提供了简单的DOM元素选择方式。通过这些选择器，开发者可以快速定位到页面中的特定元素。 **代码示例与...
jquery选择器整理
11-10
自己巩固学习整理的jquery相关选择器，对初学来说还是很不错的，
jQuery 选择器整理
04-24
jQuery 选择器 XMind整理, 包含基本选择器,层级选择器, 过滤选择器
jquery 选择器部分整理
10-29
jQuery选择器是jQuery库中最基本且强大的特性之一，它允许开发者快速准确地选取和操作DOM元素。在详细解读jQuery选择器之前，首先需要了解jQuery本身是一个JavaScript库，它通过简化的选择器和方法来简化HTML文档...
非常好用的jquery选择器笔记整理
萧逸才的博客
06-10 592
jQuery是我们在开发前端时最常用到的一个JavaScript框架了，使用jQuery除了最基本的语法外，我觉得最重要的就是选择器了，有时使用一个正确的选择器，可以节省你大量的时间和代码，在这里整理了一些我在写代码的过程中遇到和使用的jQuery选择器和大家分享。 $("#id")选择器根据ID来选择元素，是最常用的选择器之一。$(".class")选择器根据class来选择元素，是最常用的选择器
jQuery 选择器 整理
supreme_yes的博客
04-22 245
一、 css选择器1.查找元素的方法按照 $app1 = $("#app")/$(".app")/$("div/li/ul"); 形式来写2.支持多级查询：形式大概在：$app1 = $("#app,.app1,#app2")$app1 = $(".app&gt;app1")//子代选择器$app1 = $("#app app1")//后代选择器3.用jq给css 添加样式css(
JQuery选择器整理
益达还有么的博客
04-15 267
1 通过class选择html代码： <p >aa</p> <p class = "change" >aa</p> JQuery代码： $("p.change") 输出： <p class = "change" >aa</p>
jQuery选择器笔记
chenchun的博客
05-31 292
选择器是jQuery的根基。 jQuery中的选择器完全继承了css风格。利用jQuery选择器，可以非常便捷快速地找到特定的DOM元素，然后为他们添加相应的行为，而无需担心浏览器是否支持这一选择器。
JQuery笔记选择器
最新发布
Q53100的博客
10-13 372
我是列表项2我是列表项3我是列表项4我是列表项1我是列表项2我是列表项3我是列表项4我是列表项1我是列表项2我是列表项3我是列表项4
jQuery选择器全面整理与实例解析
"jQuery选择器的综合整理" jQuery选择器是jQuery库中的核心部分，用于高效地选取DOM元素。这篇文章将深入探讨jQuery选择器的各种类型和用法。 首先，jQuery对象提供了多种方法来访问和操作匹配的元素。例如，`each...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值