jQuery基本选择器 (实例及表单域 value 的获取)

jQuery基本选择器包括 CSS选择器、层级选择器和、表单域选择器。

1.CSS选择器

(1)标签选择器

  $("div")  $("p")  $("table") 等一系列 HTML 标签

(2)ID选择器

  <input id="user" type="text">

  获取该标记的值:$("#user").val();

(3)类选择器

  <input type="text" class="t">

  给该文本框添加样式:$(".t").css("border","2px solid blue");

(4)通用选择器

  $("*").css("color","red"); //给所有元素设置样式

(5)群组选择器

  $("div,span,p .styleClass").css("border","1px solid red"); //对所有div、span 及应用 styleClass 类的 p 元素设置边框属性

2.层级选择器

(1)子元素选择器

  $("parent > child");

  查找父元素下面的所有子元素,不包括孙元素等。

(2)后代元素选择器

  $("ancestor descedant");

  查找 ancestor 元素的所有子元素、孙元素、重孙元素等。

(3)紧邻同辈元素选择器

  $("prev+next");

  同辈,且紧跟在 prev 元素后面的元素 next 元素

(4)相邻同辈元素选择器

  $("prev~siblings");

  跟在 prev 后且同辈的所有 siblings 元素

3.表单域选择器

(1) :input 选择器

  $(":input");

  选择所有 input, textarea, select, button 元素。

(2) :text 选择器

  $(":text");

  选择所有单行文本框 (<input type="text"/>).

(3) :password 选择器

  $(":password");

  选择所有密码框 (<input type="password"/>).

(4) :radio 选择器

  $(":radio");

  选择所有单选按钮 (<input type="radio"/>).

(5) :checkbox 选择器

  $(":checkbox");

  选择所有复选框 (<input type="checkbox"/>).

(6) :file 选择器

  $(":file");

  选择所有文件域 (<input type="file"/>).

(7) :iamge 选择器

  $(":iamge");

  选择所有图像域 (<input type="iamge"/>).

(8) :hidden 选择器

  $(":hidden");

  选择所有隐藏域 (<input type="hidden"/>) 及 所有不可见元素(CSS display 属性值为 none)。

(9) :button 选择器

  $(":button");

  选择所有按钮 (<input type="button"/>) 和 <button>...</button>

(10) :submit 选择器

  $(":submit");

  选择所有提交按钮 (<input type="submit"/>) 和 <button>...</button>

(11) :reset 选择器

  $(":reset");

  选择所有重置按钮 (<input type="reset"/>) 和 <button>...</button>

对于表单域选择器,上述均为获取所有某一类型的元素。获取其中某个元素的值,在下面的实例中体现。该实例的运行效果图和代码如下:

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <script src="../js/jquery-1.7.2.js" type="text/javascript"></script>
 6     <title>表单域选择器应用示例</title>
 7     <script language="javascript" type="text/javascript">
 8         $(document).ready(function(){
 9                $(":text").attr("value","文本框");     //给文本框添加文本
10                $(":password").attr("value","密码框"); //给密码框添加文本
11                $(":radio:eq(1)").attr("checked","true");    //将第2个单选按钮设置为选中
12                $(":checkbox").attr("checked","true");       //将复选框全部选中
13               $(":image").attr("src","wedding.jpg"); //给图像指定路径
14               $(":file").css("width","200px");             //给文件域设置宽度
15                $(":hidden").attr("value","已保存的值");      //给隐藏域添加文本
16                $("select").css("background","#FCF");          //给下拉列表设置背景色
17                $(":submit").attr("id","btn1");                //给提交按钮添加id属性
18                $(":reset").attr("name","btn");                //给重置按钮添加name属性
19                $("textarea").attr("value","文本区域");         //给文本区域添加文字 
20            });
21            function submitBtn(){
22                //下面两个语句用来获取复选框选中的所有值
23                var checkbox = "";
24                $(":checkbox[name='hate'][checked]").each(function(){
25                    checkbox += $(this).val() + " ";
26                });
27                alert($(":text").val()+"\n"
28                 +$(":password").val()+"\n"
29                 +$(":radio[name='habbit'][checked]").val()+"\n"
30                 +checkbox+"\n"
31                 +$(":file").val()+"\n"    //获得所选文件的绝对路径
32                 +$(":hidden[name='hiddenarea']").val()+"\n"
33                 +$("select[name='selectlist'] option[selected]").text()+"\n"
34                 +$("textarea").val()+"\n"
35             );
36            }
37 
38     </script>
39 </head>
40 
41 <body>
42 <table width="730" height="145" border="1">
43   <tr>
44     <td width="113" height="23">文本框</td>
45     <td width="209"><input type="text"/></td>
46     <td width="93">密码框</td>
47     <td width="287"><input type="password" /></td>
48   </tr>
49   <tr>
50     <td height="24">单选按钮</td>
51     <td>
52         <input type="radio" name="habbit" value="是"/>53         <input type="radio" name="habbit" value="否"/>54     </td>
55     <td>复选框</td>
56     <td>
57         <input type="checkbox" name="hate" value="水果"/>水果
58         <input type="checkbox" name="hate" value="蔬菜"/>蔬菜
59     </td>
60   </tr>
61   <tr>
62     <td height="50">图像</td>
63     <td><input type="image" width="50" height="50"/></td>
64     <td>文件域</td>
65     <td><input type="file" /></td>
66   </tr>
67   <tr>
68     <td height="23">隐藏域</td>
69     <td><input type="hidden" name="hiddenarea"/>(不可见)</td>
70     <td>下拉列表</td>
71     <td>
72         <select name="selectlist">
73             <option value="选项一">选项一</option>
74             <option value="选项二" >选项二</option>
75             <option value="选项三">选项三</option>
76         </select>
77     </td>
78   </tr>
79   <tr>
80     <td height="25">提交按钮</td>
81     <td><input type="submit" onclick="submitBtn()"/></td>
82     <td>重置按钮</td>
83     <td><input type="reset" /></td>
84   </tr>
85   <tr>
86      <td valign="top">文本区域:</td>
87      <td colspan="3"><textarea cols="70" rows="3"></textarea></td>
88   </tr>
89 </table>
90 
91 </body>
92 </html>

点击【提交】按钮之后弹出的对话框如下:

原文地址:https://www.cnblogs.com/lihuiyy/p/2577754.html