选择器: ref: http://www.w3school.com.cn/jquery/jquery_selectors.asp
| $(this) | 当前 HTML 元素 |
| $("p") | 所有 <p> 元素 |
| $("p.intro") | 所有 class="intro" 的 <p> 元素 |
| $(".intro") | 所有 class="intro" 的元素 |
| $("#intro") | id="intro" 的元素 |
| $("ul li:first") | 每个 <ul> 的第一个 <li> 元素 |
| $("[href$='.jpg']") | 所有带有以 ".jpg" 结尾的属性值的 href 属性 |
| $("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
$("input[name='ifvlanstatus']:checked").val();
获取 input name='ifvlanstatus' checked 这种控件的值
if ($(this).children(".td-ip, .td-mac").text().indexOf(val) == -1)
$(this).attr("style", "display:none");
获取 class=".td-ip" 或 class=".td-mac"的标签, 判断text()是否包含值val, 不包含就设置style隐藏
jQuery 选择器
| 选择器 | 实例 | 选取 |
|---|---|---|
| * | $("*") | 所有元素 |
| #id | $("#lastname") | id="lastname" 的元素 |
| .class | $(".intro") | 所有 class="intro" 的元素 |
| element | $("p") | 所有 <p> 元素 |
| .class.class | $(".intro.demo") | 所有 class="intro" 且 class="demo" 的元素 |
| :first | $("p:first") | 第一个 <p> 元素 |
| :last | $("p:last") | 最后一个 <p> 元素 |
| :even | $("tr:even") | 所有偶数 <tr> 元素 |
| :odd | $("tr:odd") | 所有奇数 <tr> 元素 |
| :eq(index) | $("ul li:eq(3)") | 列表中的第四个元素（index 从 0 开始） |
| :gt(no) | $("ul li:gt(3)") | 列出 index 大于 3 的元素 |
| :lt(no) | $("ul li:lt(3)") | 列出 index 小于 3 的元素 |
| :not(selector) | $("input:not(:empty)") | 所有不为空的 input 元素 |
| :header | $(":header") | 所有标题元素 <h1> - <h6> |
| :animated | 所有动画元素 | |
| :contains(text) | $(":contains('W3School')") | 包含指定字符串的所有元素 |
| :empty | $(":empty") | 无子（元素）节点的所有元素 |
| :hidden | $("p:hidden") | 所有隐藏的 <p> 元素 |
| :visible | $("table:visible") | 所有可见的表格 |
| s1,s2,s3 | $("th,td,.intro") | 所有带有匹配选择的元素 |
| [attribute] | $("[href]") | 所有带有 href 属性的元素 |
| [attribute=value] | $("[href='#']") | 所有 href 属性的值等于 "#" 的元素 |
| [attribute!=value] | $("[href!='#']") | 所有 href 属性的值不等于 "#" 的元素 |
| [attribute$=value] | $("[href$='.jpg']") | 所有 href 属性的值包含以 ".jpg" 结尾的元素 |
| :input | $(":input") | 所有 <input> 元素 |
| :text | $(":text") | 所有 type="text" 的 <input> 元素 |
| :password | $(":password") | 所有 type="password" 的 <input> 元素 |
| :radio | $(":radio") | 所有 type="radio" 的 <input> 元素 |
| :checkbox | $(":checkbox") | 所有 type="checkbox" 的 <input> 元素 |
| :submit | $(":submit") | 所有 type="submit" 的 <input> 元素 |
| :reset | $(":reset") | 所有 type="reset" 的 <input> 元素 |
| :button | $(":button") | 所有 type="button" 的 <input> 元素 |
| :image | $(":image") | 所有 type="image" 的 <input> 元素 |
| :file | $(":file") | 所有 type="file" 的 <input> 元素 |
| :enabled | $(":enabled") | 所有激活的 input 元素 |
| :disabled | $(":disabled") | 所有禁用的 input 元素 |
| :selected | $(":selected") | 所有被选取的 input 元素 |
| :checked | $(":checked") | 所有被选中的 input 元素 |
jQuery 选择器使用
// 模糊选择器, 选择id为 tbl_iface_connect_ 开头的元素 $("[id^=tbl_iface_connect_]").hide();
1 $("#interface_list li").each(function () { 2 if ($(this).find("span").text() == ifclick) { 3 $(this).click(); 4 return false; 5 } 6 }); 7 8 $("#interface_list li").each(); 9 // #interface_list id 为interface_list 10 // li interface_list的子元素li 11 // 遍历id为 interface_list 的所有子元素li
1 if ($(this).find("span").text() == ifclick) { 2 $(this).click(); 3 return false; 4 } 5 // 从遍历结果 this 中, 查找子元素 span 并获取 text内容, 比较跟ifclick相等, 触发li的click单击事件, 并跳出这次遍历
1 $("#interface_list").mouseover(function () { 2 $(this).addClass("over"); 3 }); 4 // id=interface_list 的 未来/现在 的子元素li 增加鼠标移动事件, 鼠标经过时, 添加class over 动态添加li 时会自动生效
4. 获取form 需要提交的值
1 $("#ifsub-form").serialize(); 2 // 适用: url传值 3 // 将ifsub-form 里面的值组合为 url结构字符串: ifsub-parent=eth0&ifsubid=2
1 $("#ifsub-form").serializeArray() 2 // 适用: 元素ID 含有特殊符号的传值 3 // ID作为value, 将ifsub-form 里面的值组合为 json数组结构字符串: 4 // [{name: "ifsubparent", value: "eth0"}, {name: "ifsubid", value: "2"}, {...}]
1 // jQuery注册函数 2 $.fn.serializeJSON = function() 3 { 4 var o = {}; 5 var a = $(this).serializeArray(); 6 $.each(a, function() { 7 if (o[this.name] !== undefined) { 8 if (!o[this.name].push) { 9 o[this.name] = [o[this.name]]; 10 } 11 o[this.name].push(this.value || ''); 12 } else { 13 o[this.name] = this.value || ''; 14 } 15 }); 16 return o; 17 }; 18 19 $("#ifsub-form").serializeJSON () 20 // 适用: 元素ID没有特殊符号的传值, 有特殊符号会破坏json格式 21 // ID作为name, 输出为JSON格式字符串对象 22 // {ifsubparent: "eth0", ifsubid: "2", ifsubstatus: "0"}
5.多条件选择器
1 1、多条件选择器 2 用途：使用多个条件同时选择多个标签 3 用法：$('条件1，条件2，条件3，, 条件n'); 4 特征：多个条件在''内用逗号隔开； 5 用例：$("div#id,span.tip,p"); //同时选择id为' id ' 的div标签,class为'tip'的span标签和p标签； 6 7 2、相对选择器 8 用途：使用第二个参数选出相对元素，从而不影响其他具有相同条件的元素 9 用法：$('条件1',条件2)； 10 特征：两个参数 11 用例： 12 $("td",(this)).css('background','red'); 13 //当前td元素背景变红，其他tr中的td不变； 14 15 3、层次选择器 16 17 用途：选择后代节点 18 用法：$('条件1 条件2 条件3'); 19 特征：双引号之内，条件之间用空格隔开； 20 21 用例：$('#com ul li'); 22 //选择Id为com的元素中的UL里面的所有li节点； 23 24 jQuery 选择同时包含两个class的元素的实现方法 25 <element class="a b"> 26 27 交集选择： $(".a.b") --选择同时包含a和b的元素。 28 并集选择：$(".a, .b") --选择包含a或者包含b的元素。 29 30 根据多个属性选择E[attr=val][attr=val] 31 $("div[title='ttt'][class='aaaa']").click() 32 // 所有div元素下所有属性title值是等于ttt并且属性class等于aaaa的元素