jquery选择器大全

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
一、核心:$是jquery类的一个别名,$()构造一个jquery对象,jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数,或者说都是在以某种方式使用这个函数。
 
1、 ${表达式}:根据这个表达式来查找所有匹配的元素。
 
    eg:$("div>p"); 查找所有p元素,且这些p元素都是div的子元素.
 
       $("input:radio",document.forms[0]); 查找文档第一个表单中,所有的单选按钮。
 
       $("div",xml.responseXML);在一个由ajax返回的xml文档中,查找所有的div元素。
 
2、$(html标记字符串) :根据提供的html字符串,创建jquery对象包装的dom元素。
 
     eg: $("<div><p>Hello</p></div>").appendTo("body");
 
        创建一个 <input> 元素必须同时设定 type 属性
 
        $("<input type='text'>")
 
、$(dom元素):将一个或多个dom元素转换为jquery对象。
 
    eg: $(document.body).css( "background", "black" ); 设置页面背景色
 
4、$(document).ready(function(){})==$(function(){});在页面加载完成后自动执行的代码。
 
二、jquery对象访问。eq返回的是jquery对象,只能使用jquery方法,get返回的是dom元素对象,只能使用dom方法.
 
   1、$(dom元素).each(function(){}):以每一个匹配的元素作为上下文来执行一个函数
 
   2、$(dom元素).size()==$(dom元素).length;对象中元素的个数。eg:<img src="test1.jpg"/> <img src="test2.jpg"/>,jquery代码:$("img").size(); 返回2
 
   3、context:返回传给jQuery()的原始的DOM节点内容,即jQuery()的第二个参数。如果没有指定,那么context指向当前的文档(document)。
 
   4、$(dom元素).get():取得所有匹配的dom元素的集合。如果你想要直接操作 DOM 对象而不是 jQuery 对象,这个函数非常有用。
 
   5、$(dom元素).get(index):取得其中一个匹配的元素.
 
   6、$(dom元素).index():搜索与参数表示的对象匹配的元素,并返回相应元素的索引值。
 
三、插件机制:
 
1、jQuery.fn.extend(object);扩展 jQuery 元素集来提供新的方法,针对某一个dom元素。
 
      eg:jQuery.fn.extend({
 
          check: function() { return this.each(function() { this.checked = true; });},
 
          uncheck: function() { return this.each(function() { this.checked = false; });}
 
         });
 
      调用:
 
         $("input[type=checkbox]").check();
 
         $("input[type=radio]").uncheck();
 
2、$.extend(object);用来在jQuery命名空间上增加新函数,针对所有dom元素。
 
     $.extend({
 
       min:function(a,b){return a<b?a:b;},
 
       max:function(a,b){return a>b?a;b;}
 
     });
 
    调用:$.max(10,20);
 
四、选择器
 
基本:
 
   1、$("#id"): 根据给定的ID匹配一个元素。
 
   2、$("dom元素名"):根据给定的元素名匹配所有元素
 
   3、$(".Class类名"): 根据给定的类匹配元素。
 
   4、$("*") :匹配所有元素。
 
   5、$("dom元素.class类名"):选择所有class属性为指定类名的dom元素。
 
   6、$(".stripe tr"): 获取class属性为stripe的table元素下的所有行
 
层级:
 
   1、$("ancestor descendant"):在给定的祖先元素下匹配所有的后代元素
 
   2、$("parent > child"):在给定的父元素下匹配所有的子元素
 
   3、$("prev + next"):匹配所有紧接在 prev 元素后的 next 元素
 
   4、$("prev ~ siblings"):匹配 prev 元素之后的所有 siblings(同级) 元素
 
简单:
 
1、$("tr:first") 匹配找到的第一个元素
 
2、$("tr:last") 匹配找到的最后一个元素
 
3、$("input:not(:checked)") 去除所有与给定选择器匹配的元素
 
4、$("tr:even") 匹配所有索引值为偶数的元素,从 0 开始计数
 
5、$("tr:odd") 匹配所有索引值为奇数的元素,从 0 开始计数
 
6、$("tr:eq(1)") 匹配一个给定索引值的元素
 
7、$("tr:gt(0)") 匹配所有大于给定索引值的元素
 
8、$("tr:lt(2)") 匹配所有小于给定索引值的元素
 
内容:
 
1、$("div:contains('John')") 匹配包含给定文本的元素
 
2、$("div:has(p)") 匹配所有包含 p 元素的 div 元素
 
3、$("td:empty") 查找所有不包含子元素或者文本的空元素
 
可见性:
 
1、$("tr:visible") 查找所有可见的 tr 元素
 
2、$("tr:hidden") 匹配所有的不可见元素,input 元素的 type 属性为 "hidden" 的话也会被匹配到
 
属性:
 
1、$("div[id]") 查找所有含有 id 属性的 div 元素
 
2、$("input[name='newsletter']") 查找所有 name 属性是 newsletter 的 input 元素
 
3、$("input[name!='newsletter']") 查找所有 name 属性不是 newsletter 的 input 元素
 
4、$("input[name^='news']") 查找所有 name 以 'news' 开始的 input 元素
 
5、$("input[name$='letter']") 查找所有 name 以 'letter' 结尾的 input 元素
 
6、$("input[name*='man']") 查找所有 name 包含 'man' 的 input 元素
 
7、$("input[id][name$='man']") 找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的
 
子元素:
 
1、nth-child(even)/:nth-child(odd)/:nth-child(3n)/:nth-child(2)/:nth-child(3n+1)/:nth-child(3n+2) 匹配其父元素下的第N个子或奇偶元素
 
2、$("ul li:first-child") 在每个 ul 中查找第一个 li
 
3、$("ul li:last-child")   在每个 ul 中查找最后一个 li
 
4、$("ul li:only-child")   在 ul 中查找是唯一子元素的 li
 
表单:
 
1、$(":input") 查找所有的input元素
 
2、$("text")    匹配所有的单行文本框
 
3、$(":password") 匹配所有密码框
 
4、$("radio")   匹配所有单选按钮
 
5、$("checkbox") 匹配所有复选框
 
6、$("submit")   匹配所有提交按钮
 
7、$("image")    匹配所有图像域
 
8、$("button")   匹配所有按钮
 
9、$("file")     匹配所有文件域
 
10、$("hidden") 匹配所有不可见元素,或者type为hidden的元素
 
表单对象属性:
 
1、$("input:checked") 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
 
2、$("input:enabled") 匹配所有可用元素
 
3、$("input:disabled") 匹配所有不可用元素
 
04、$("select option:selected") 匹配所有选中的option元素
 
五、属性操作
 
   操作属性:
 
    1、$("img").attr("src"); 返回文档中第一个图像的src属性值。
 
    2、$("img").attr("src","test.jpg"); 为所有匹配的元素设置一个属性值
 
    3、$("img").attr("title", function() { return this.src }); 为所有匹配的元素设置一个计算的属性值
 
    4、$("img").removeAttr("src"); 从每一个匹配的元素中删除一个属性
 
    5、$("img").attr({ src: "test.jpg", alt: "Test Image" }); 将一个“名/值”形式的对象设置为所有匹配元素的属性。
 
   操作CSS:
 
    1、$("p").addClass("selected"); 为每个匹配的元素添加指定的类名
 
    2、$("p").removeClass("selected"); 从所有匹配的元素中删除全部或者指定的类。一个或多个要删除的CSS类名,请用空格分开
 
$("p").removeClass();删除匹配元素的所有类
 
    3、$("p").toggleClass("selected"); 如果存在(不存在)就删除(添加)一个类
 
    4、 var count = 0;
 
       $("p").click(function(){
 
      $(this).toggleClass("highlight", count++ % 3 == 0);
 
}); 每点击三下加上一次 'selected'
 
HTML代码:
 
   1、$("div").html(); 取得第一个匹配元素的html内容
 
   2、$("div").html("<p>Hello Again</p>"); 设置每一个匹配元素的html内容
 
文本:
 
1、$("p").text(); 取得所有匹配元素的内容
 
2、$("p").text("<b>Some</b> new text."); 设置所有匹配元素的文本内容
 
值:
 
1、 $("#single").val() 获得第一个匹配元素的当前值。
 
2、$("input").val("hello world!"); 设置每一个匹配元素的值
 
六、筛选
 
过滤:
 
   1、$("p").eq(1) 获取第N个元素,这个元素的位置是从0算起
 
   2、 if ( $(this).hasClass("protected") ) 检查当前的元素是否含有某个特定的类,如果有,则返回true
 
   3、$("p").filter(".selected") 筛选出与指定表达式匹配的元素集合
 
   4、is(expr) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true
 
   5、$("p").not( $("#selected")[0] ) 删除与指定表达式匹配的元素
 
查找:
 
   1、$("div").children();取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
 
   2、$("p").find("span");搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
 
   3、$("p").next();取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
 
   4、$("p").prev();取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
 
   5、$("div").parent;取得一个包含着所有匹配元素的唯一父元素的元素集合。
 
   6、$("span").parents;找到每个span元素的所有祖先元素
 
   7、$("div").siblings();取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
 
七、文档处理
 
   内部插入:
 
   1、$("p").append("<b>Hello</b>"); 向每个匹配的元素内部尾部追加内容
 
   2、$("p").prepend("<b>Hello</b>"); 向每个匹配的元素内部前部追加内容
 
    2、$("p").appendTo("#foo"); 把所有段落追加到ID值为foo的元素中。
 
外部插入:
 
   1、$("p").after("<b>Hello</b>"); 在每个匹配的元素之后插入内容
 
   2、$("p").before("<b>Hello</b>"); 在每个匹配的元素之前插入内容
 
包裹
 
   1、$("p").wrap("<div class='wrap'></div>"); 把所有匹配的元素用其他元素的结构化标记包裹起来。
 
替换:
 
   1、$("p").replaceWith("<b>Paragraph. </b>"); 将所有匹配的元素替换成指定的HTML或DOM元素。
 
删除:
 
   1、$("p").empty(); 删除匹配的元素集合中所有的子节点。
 
   2、$("p").remove(); 从DOM中删除所有匹配的元素
 
八、CSS操作
 
   CSS:
 
    1、$("p").css("color"); 取得第一个段落的color样式属性的值
 
    2、$("p").css({ color: "#ff0011", background: "blue" }); 把一个“名/值对”对象设置为所有匹配元素的样式属性。
 
    3、$("p").css("color","red"); 在所有匹配的元素中,设置一个样式属性的值
 
   位置:
 
    1、var offset = p.offset();获取匹配元素在当前视口的相对偏移,返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。
 
    2、var position = p.position();获取匹配元素相对父元素的偏移
 
   尺寸:
 
    1、$("p").height(); 取得第一个匹配元素当前计算的高度值(px)。
 
    2、$("p").height(20); 为每个匹配的元素设置CSS高度(hidth)属性的值
 
    3、$("p").width(); 取得第一个匹配元素当前计算的宽度值(px)。$(window).width(); 获取当前窗口的宽
 
    4、$("p").width(20); 为每个匹配的元素设置CSS宽度(width)属性的值
 
九、效果
 
   基本:
 
    1、$("p").show() 显示隐藏的匹配元素
 
    2、$("p").hide() 隐藏显示的元素
 
    3、$("p").show("slow"); 以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。
 
      speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
 
callback (Function) : (Optional) 在动画完成时执行的函数,每个元素执行一次。
 
   用迅速的动画将隐藏的段落显示出来,历时200毫秒。并在之后执行反馈!
 
   <p style="display: none">Hello</p>
 
   jQuery 代码:
 
   $("p").show("fast",function(){
 
   $(this).text("Animation Done!");
 
   });
 
   4、$("p").hide("slow"); 以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数。
 
   5、$("p").toggle() 切换元素的可见状态
 
   6、$("p").toggle("slow"); 以优雅的动画切换所有匹配的元素,并在显示完成后可选地触发一个回调函数
 
淡入淡出:
 
1、$("p").fadeIn("slow"); 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数
 
2、$("p").fadeOut("slow"); 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。
 
3、$("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66); 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数
 
自定义:
 
   1、$("#block").animate({
 
    width: "90%",
 
    height: "100%",
 
    fontSize: "20em",
 
    borderWidth: 10
 
}, 1000 );用于创建自定义动画的函数。
 
十、事件
 
   事件处理:
 
    1、$("p").bind("click", function(){ alert( $(this).text() );}); 为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数
 
   2、$("p").one("click",function(){alert(${this}.text());}) 当所有段落被第一次点击的时候,显示所有其文本
 
   3、trigger(type,[data])在每一个匹配的元素上触发某类事件
 
事件委派:$("p").live("click", function(){$(this).after("<p>Another paragraph!</p>");});。给所有当前以及将来会匹配的元素绑定一个事件处理函数(比如click事件)。也能绑定自定义事件。与bind()不同的是,live()一次只能绑定一个事件
 
事件切换:一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法
 
   $("td").hover(
 
function () {
 
    $(this).addClass("hover");
 
},
 
function () {
 
    $(this).removeClass("hover");
 
}
 
);鼠标悬停的表格加上特定的类
 
4、每次点击后依次调用函数。
 
$("td").toggle(
 
function () {
 
    $(this).addClass("selected");
 
},
 
function () {
 
   $(this).removeClass("selected");
 
}
 
);
 
5、事件:
 
   1、$("p").blur(); 触发每一个匹配元素的blur事件
 
   2、$("p").blur( function () { alert("Hello World!"); } ); 在每一个匹配元素的blur事件中绑定一个处理函数
 
   3、change();change事件会在元素失去焦点的时候触发,也会当其值在获得焦点后改变时触
 
   4、change(fn);在每一个匹配元素的change事件中绑定一个处理函数。
 
   5、$("p").click(); 触发每一个匹配元素的click事件
 
   6、$("p").click(function(){});在每一个匹配元素的click事件中绑定一个处理函数
 
   7、dblclick();dblclick事件会在元素的同一点双击时触发。
 
   8、$("p").dblclick( function () { alert("Hello World!"); }); 在每一个匹配元素的dblclick事件中绑定一个处理函数。
 
   9、$(document).ready(function(){ $("#login").focus();}); 触发每一个匹配元素的focus事件。
 
   10、$("input[type=text]").focus(function(){this.blur();}); 在每一个匹配元素的focus事件中绑定一个处理函数。
 
   11、keydown();keydown事件会在键盘按下时触发。
 
   12、keydown(fn);在每一个匹配元素的keydown事件中绑定一个处理函数。
 
   13、keypress();触发每一个匹配元素的keypress事件
 
   14、keypress(fn);在每一个匹配元素的keypress事件中绑定一个处理函数。
 
   15、keyup();触发每一个匹配元素的keyup事件
 
   16、keyup(fn);在每一个匹配元素的keyup事件中绑定一个处理函数。
 
   17、mousedown();
 
   18、mouseup();
 
   19、mousemove();
 
   20、mouseover();
 
   21、mouseout();
 
   22、$("form:first").submit();提交本页的第一个表单。
 
   23、$("form").submit(function(){return false;});阻止页面提交。
 
十一、ajax
 
      ajax请求:
 
       1、通有方式:$.ajax(prop);prop是一个hash表,它可以传递的key/value有以下几种:
 
         (String)type:数据传递方式(get或post)。
 
         ((String)url:数据请求页面的url
 
         ((String)data:传递数据的参数字符串,只适合post方式
 
         ((String)dataType:期待数据返回的数据格式(例如 "xml", "html", "script",或 "json")
 
         ((Boolean)ifModified: 当最后一次请求的相应有变化是才成功返回,默认值是false
 
         ((Number)timeout:设置时间延迟请求的时间。可以参考$.ajaxTimeout
 
         ((Boolean)global:是否为当前请求触发ajax全局事件,默认为true
 
         ((Function)error:当请求失败时触发的函数。
 
         ((Function)success:当请求成功时触发函数
 
         ((Function)complete:当请求完成后出发函数
 
      2、$.get(url, params, callback) 用get方式向远程页面传递参数,请求完成后处理函数,除了url外,其它参数任意选择!
 
         eg:$.get(   "ajax.asp",
 
            { name: "young", age: "25" },
 
            function(data){ alert("Data Loaded: " + data); }
 
          )
 
      3、$.getJSON(url, params, callback) 用get方式向远程json对象传递参数,请求完成后处理函数callback
 
      4、$.post(url, params, callback) 用post方式向远程页面传递参数,请求完成后处理函数callback
 
十二、工具类
 
      数组和对象操作:
 
       1、$.each(obj,callback); 通用例遍方法,可用于例遍对象和数组。回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。
 
       $.each( [0,1,2], function(i, n){alert( "Item #" + i + ": " + n );});
 
     2、jQuery.grep(array,callback,[invert]);使用过滤函数过滤数组元素,此函数至少传递两个参数:待过滤数组和过滤函数
 
     3、$.map(array,callback);将一个数组中的元素转换到另一个数组中
 
     4、$.inArray(value,array);确定第一个参数在数组中的位置(如果没有找到则返回 -1 ),从0开始。
 
     5、$.merge( [0,1,2], [2,3,4] ) ;合并两个数组。返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素,不去掉重复项。
 
     6、$.unique(array);删除数组中重复元素
 
     7、$.trim(" hello, how are you? "); 去掉字符串起始和结尾的空格
 
     8、$.isArray(obj);测试对象是否为数组。
 
     9、$.isFunction(obj); 测试对象是否为函数
 
   URL:
 
   1、$.param(obj);将表单元素数组或者对象序列化。是.serialize()的核心方法。
 
     eg:var params = { width:1680, height:1050 }; var str = jQuery.param(params);
 
   2、$("form").serialize() ;序列表单内容为字符串,用于 Ajax 请求
 
十三、jquery操作单选框
 
   if($("input[type='radio']:checked")){
 
     var tt=$("input[name='chk']:checked").val();
 
}
 
十四、jquery操作复选框
 
    var chkArr="";
 
$(".cc:checked").each(function(){
 
       chkArr+=$(this).val()+"|";
 
});
 
十五、jquery实现复选框全选
 
   var checked=$("#allchk").attr("checked");
 
$(".ww").each(function(){
 
   if($(this).attr("checked")!=checked){$(this).click();}
 
});

  

posted @   大da脸  阅读(2995)  评论(0编辑  收藏  举报
编辑推荐:
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签
点击右上角即可分享
微信分享提示