JQuery选择器
index() 方法
获得第一个匹配元素相对于其同胞元素的 index 位置。
$uploaderFiles.find("li").eq(index).remove();
$(".weui-form-preview__btn_default").on("click", function() { if(item_show_open == 0) { $(this).text("隐藏") var card = $(this).closest('.card')//获取父类 $(card).find(".weui-form-preview__item").show() item_show_open = 1 } else if(item_show_open == 1) { $(this).text("详情") var card = $(this).closest('.card') $(card).find(".weui-form-preview__item").hide() $(card).find(".weui-form-preview__item:eq(0)").show() $(card).find(".weui-form-preview__item:eq(1)").show() item_show_open = 0 } })
转:菜鸟教程,JQuery选择器
$("#test1").parent(); // 父节点 $("#test1").parents(); // 全部父节点 $("#test1").parents(".mui-content");//返回class为mui-content的父节点 $("#test1").children(); // 全部子节点 $("#test1").children("#test1"); //返回id为test1的子节点 $("#test1").contents(); // 返回id为test里面的所有内容，包括节点和文本 $("#test1").contents("#test1"); //返回id为test里面的id为#test1的节点和文本 $("#test1").prev(); // 上一个兄弟节点 $("#test1").prevAll(); // 之前所有兄弟节点 $("#test1").next(); // 下一个兄弟节点 $("#test1").nextAll(); // 之后所有兄弟节点 $("#test1").siblings(); // 所有兄弟节点 $("#test1").siblings("#test2"); //返回id为test2的兄弟节点 $("#test").find("#test1"); 选中id为test后代中 id为test1的节点
1.基本选择器
$("#id")//ID选择器 $("div")//元素选择器 $(".classname")//类选择器 $(".classname,.classname1,#id1")//组合选择器
2.层次选择器
$("#id>.classname ")//子元素选择器 $("#id .classname ")//后代元素选择器 $("#id + .classname ")//紧邻下一个元素选择器 $("#id ~ .classname ")//兄弟元素选择器
3.过滤选择器(重点)
$("li:first")//第一个li $("li:last")//最后一个li $("li:even")//挑选下标为偶数的li $("li:odd")//挑选下标为奇数的li $("li:eq(4)")//下标等于 4 的li(第五个 li 元素) $("li:gt(2)")//下标大于 2 的li $("li:lt(2)")//下标小于 2 的li $("li:not(#runoob)")//挑选除 id="runoob" 以外的所有li
3.2内容过滤选择器
$("div:contains('Runob')")// 包含 Runob文本的元素 $("td:empty")//不包含子元素或者文本的空元素 $("div:has(selector)")//含有选择器所匹配的元素 $("td:parent")//含有子元素或者文本的元素
3.3可见性过滤选择器
$("li:hidden")//匹配所有不可见元素，或type为hidden的元素 $("li:visible")//匹配所有可见元素
3.4属性过滤选择器
$("div[id]")//所有含有 id 属性的 div 元素 $("div[id='123']")// id属性值为123的div 元素 $("div[id!='123']")// id属性值不等于123的div 元素 $("div[id^='qq']")// id属性值以qq开头的div 元素 $("div[id$='zz']")// id属性值以zz结尾的div 元素 $("div[id*='bb']")// id属性值包含bb的div 元素 $("input[id][name$='man']")//多属性选过滤，同时满足两个属性的条件的元素
3.5状态过滤选择器
$("input:enabled")// 匹配可用的 input $("input:disabled")// 匹配不可用的 input $("input:checked")// 匹配选中的 input $("option:selected")// 匹配选中的 option
4.表单选择器
$(":input")//匹配所有 input, textarea, select 和 button 元素 $(":text")//所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同 $(":password")//所有密码框 $(":radio")//所有单选按钮 $(":checkbox")//所有复选框 $(":submit")//所有提交按钮 $(":reset")//所有重置按钮 $(":button")//所有button按钮 $(":file")//所有文件域
示例
- 获取hover状态标签
- $(".sites-lib-title:hover")
- $(this)
- 获取hover状态子标签
- $(this).children(".sites-lib-main")
$(function() {
$(".sites-lib-title").hover(function() {
// $(".sites-lib-title:hover").addClass("hover-after").css({
// "background": "#f4faf4",
// "border": "1px solid #00ce41",
// "box-shadpw": "0px 2px 1px 0px rgba(0,0,0,0.12)"
// });
$(this).addClass("hover-after").css({
"background": "#f4faf4",
"border": "1px solid #00ce41",
"box-shadpw": "0px 2px 1px 0px rgba(0,0,0,0.12)"
});
$(this).children(".sites-lib-main").css({
"visibility": "visible",
"opacity": "1"
});
}, function() {
$(this).removeClass("hover-after").removeAttr("style");
$(this).children(".sites-lib-main").removeAttr("style");
})
});
| 选择器 | 实例 | 选取 |
|---|---|---|
| * | $("*") | 所有元素 |
| #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 元素 |
