JQuery[06] 过滤器、相对选择器

$(a,b) 第二个参数传递一个JQuery对象、则以该对象为容器查找指定元素

-

属性过滤器

-

$("div[id]") 选择有ID属性的DIV元素

$("div[name=test]")  选择name为test的div元素(效果可以做到与原生的getElementsByName效果)

$("div[name!=test]")  选择name不为test的div元素

-

表单对象选择器

$("#form1:enabled") 选择id为form1的表单内所有启用的

$("#form1:disabled") 选择id为form1的表单内所有禁用的

$("input:checked") 选择所有选中的元素(还可以是radio,checkbox)

$("select:selected") 选择所有选中的元色素

-

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>相对选择器</title>
5 <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
6 <script type="text/javascript">
7 $(function () {
8 //表格赋值
9 $("td").each(function (item) {
10 $(this).text("文本" + item);
11 });
12
13 //实现高亮鼠标指向行的单元格(是单元格、不是行高亮)
14 $("#tb1 tr").mouseenter(function () {
15 $("td", $(this)).css("background-color", "red");
16 }).mouseleave(function () {
17 $("td", $(this)).css("background-color", "white");
18 });
19
20 /*******************************************************/
21
22 $("#btn1").click(function () {
23 //选择拥有id属性的p元素
24 $("p[id]").css("background", "red");
25 });
26
27 $("#btn2").click(function () {
28 //只选择name为d3、没有对元素类型做选择
29 $("[name=d3]").css("background", "green");
30 });
31
32 $("#btn3").click(function () {
33 //选择name不为d3的p元素
34 $("p[name!=d3]").css("background", "blue");
35 });
36
37 /*************************************************/
38 $("#frm1 input[type=button]").click(function () {
39 alert("你选择了 " + $("input:checked[name=sex]").val());
40 });
41 });
42 </script>
43 </head>
44 <body>
45 <table id="tb1">
46 <tr><td></td><td></td><td></td><td></td><td></td></tr>
47 <tr><td></td><td></td><td></td><td></td><td></td></tr>
48 <tr><td></td><td></td><td></td><td></td><td></td></tr>
49 <tr><td></td><td></td><td></td><td></td><td></td></tr>
50 <tr><td></td><td></td><td></td><td></td><td></td></tr>
51 </table>
52 <br /><br />
53 <p id="d1">文本文本文本文本文本文本</p>
54 <p id="d2">字体字体字体字体字体字体</p>
55 <p name="d3">字号字号字号字号字号字号</p>
56
57 <br /><br />
58 <input id="btn1" type="button" value="选择有id属性的" />
59 <input id="btn2" type="button" value="选择指定name的" />
60 <input id="btn3" type="button" value="选择不是指定name的" />
61
62 <form id="frm1" action="">
63 <input type="radio" value="男" checked="checked" name="sex" /><br />
64 <input type="radio" value="女" name="sex" /><br />
65 <input type="button" value="提交" />
66 </form>
67 </body>
68 </html>

  

My New Blog : http://blog.fdlife.info/ The more you know, the less you believe.
原文地址:https://www.cnblogs.com/ForDream/p/2131718.html