jquery选择基础
2017-03-02 22:16
155 查看
1 元素选择器
之前不熟悉的是如：
$("input.cls1");
这种用法
2 属性选择器
包含name属性的input元素，
如 $("input[name]");
name属性以xx结尾的input元素
$("input[name$=xx]");
之前不熟悉的是如：
$("input.cls1");
这种用法
2 属性选择器
包含name属性的input元素，
如 $("input[name]");
name属性以xx结尾的input元素
$("input[name$=xx]");
1 <!DOCTYPE html>
2
3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <meta charset="utf-8" />
6 <title></title>
7 <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
8 <script type="text/javascript">
9 //选择器总结
10 //jquery中选择器编写均可以以元素名为开头 后跟id,class或则属性选择器来组成。
11 //$("input[name$='3']") input为元素名,[]中包含属性name,name的值以3结尾
12 //$("input#none5") 不能有空格
13 //$("input.cls1") 不能有空格
14 //$("input:first")
15 //$("input[class][name^='none']") 复合选择器，返回含有class属性且name属性的值以none值开头
16 //$("input.cls1[name^='none']") 返回class为.cls1且name属性的值以none值开头
17
18
19 //form所有后代input元素
20 var Init1 = function () {
21 $("form input").each(function () {
22 alert($(this).attr("name"));
23 })
24 };
25 //form所有input子元素
26 var Init2 = function () {
27 $("form > input").each(function () {
28 alert($(this).attr("name"));
29 })
30 };
31 //紧接form后的所有input同辈元素
32 var Init3 = function () {
33 $("form ~ input").each(function () {
34 alert($(this).attr("name"));
35 })
36
37 //$("input[name='none2'] ~ input").each(function () {
38 // alert($(this).attr("name"));
39 //})
40 };
41 //紧接form的第一个input同辈元素
42 var Init4 = function () {
43 $("form + input").each(function () {
44 alert($(this).attr("name"));
45 })
46 };
47 //返回属性name包含none的所有input元素
48 var Init5 = function () {
49 $("input[name*='none']").each(function () {
50 alert($(this).attr("name"));
51 })
52 }
53 //返回class为cls1的所有input元素
54 var Init6 = function () {
55 //alert($("input.cls1").attr("name"));
56 $("input.cls1").each(function () {
57 alert($(this).attr("name"));
58 })
59 }
60 //返回id为none5的所有input元素
61 var Init7 = function () {
62 //alert($("input.cls1").attr("name"));
63 $("input#none5").each(function () {
64 alert($(this).attr("name"));
65 })
66 }
67 //返回第一个input元素
68 var Init8 = function () {
69 $("input:first").each(function () {
70 alert($(this).attr("name"));
71 })
72 }
73
74 var log = function(para){
75 console.log(para);
76 }
77
78 //返回第一个input元素
79 var Init9 = function () {
80 //$("input[class][name^='none']").each(function () {
81 // alert($(this).attr("name"));
82 //})
83 // alert('xxxxxxxxxxxxxx');
84 $("input.cls1[name^='none']").each(function () {
85 alert($(this).attr("name"));
86 });
87
88 var len = $("input.cls1").length;
89 console.log('input.cls1 的len:'+len);
90 //基本选择器 id选择器，实际上也可以加上元素名称，与$("input.cls1")这种形式做对比
91 var len2 = $("input#cls1").length;
92 console.log('input#cls1 的len2:'+len2);
93 //基本选择器 class选择，
94 //var len3 = $("button.cls1").length;
95 //console.log('button.cls1 的len3:'+len3);
96
97 // 属性选择器 查找所有含有 id 属性的 div 元素
98 var divid = $("div[id]");
99 log('divid:'+divid);
100 divid.css('background','pink').attr('display','block').html('div[id]的元素一共有'+divid.length+"个");
101
102 // 属性选择器 匹配给定的属性是以某些值开始的元素
103 var divid2 = $("div[id^=test2]");
104 log('div[id^=test2]的个数:'+divid2.length);
105
106 // 属性选择器 匹配给定的属性是以某些值结尾的元素
107 var divid3 = $("div[id$=test2]");
108 log('div[id$=test2]的个数:'+divid3.length);
109
110 // 属性选择器 复合属性选择器，需要同时满足多个条件时使用。
111 // 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的 input
112 var lenA = $('input[id][name$=man]').length;
113 var lenB = $("input[id][name$='man']").length;
114 //以上这两种写法都可以，推荐使用第二种
115 log('lenA:'+lenA);
116 log('lenB:'+lenB);
117 }
118 $(Init9);
119 </script>
120 </head>
121 <body>
122 <input name="none2" />
123 <form>
124 <label>Name:</label>
125 <input name="name" />
126 <fieldset>
127 <label>Newsletter:</label>
128 <input name="newsletter" />
129 </fieldset>
130 </form>
131 <input class="cls1" name="none" />
132 <input class="cls1" name="none5" />
133 <input type="button" class="cls1" name="none5" value="xxx"/>
134 <input class="cls1" name="none44" id="cls1" />
135 <input id="none6" class="cls1" name="none6" />
136 <input name="none3" />
137 <br>
138 属性选择器
139 <div>
140 <p>Hello!</p>
141 </div>
142 <div id="test2">test....</div>
143 <div id="test2ABC">test....</div>
144 <div id="BCDtest2">test....</div>
145 <div id="test3xx">test....</div>
146
147 属性选择器之 复合属性选择器
148 <input id="man-news" name="man-news" />
149 <input name="milkman" />
150 <input id="letterman" name="new-letterman" />
151 <input name="newmilk" />
152 </body>
153 </html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery基础教程--选择符
- 【jQuery】选择符基础和使用示例
- jQuery记录--基础选择器
- jQuery基础-选择图片并赋值
- jQuery编程基础精华02（属性、表单过滤器，元素的each，表单选择器，子元素过滤器(*)，追加方法，节点，样式操作）
- jQuery基础 -- 处理多个选择结果(each迭代方法)
- 第 2 章 jQuery 基础选择器
- JQuery基础选择器及过滤选择器的用法，今天刚学，写一下加深印象
- jQuery 基础选择器
- jQuery-基础选择器
- 【读书笔记】【jQuery基础教程】【第二章--选择符】
- jQuery基础---常规选择器
- jQuery基础----选择器，过滤器
- jquery基础学习之--选择器
- JQuery基础教程：选择元素（中）
- jQuery基础之二 -- 选择器
- 【练习向】jQuery基础教程第四版课后练习——Book02_jQuery_选择元素
- jquery基础教程 - 第二章 选择元素
- 三、jQuery--jQuery基础--jQuery基础课程--第2章 jQuery 基础选择器
- jQuery编程基础精华（属性、表单过滤器，元素的each，表单选择器，子元素过滤器(*)，追加方法，节点，样式操作）