基本选择器
网上找了相关选择器最后自己做的总结,非常全面重点是优化分类容易理解。
$("#id") //选择ID
$(".class") //选择类
$("p") //选择标签
$("*") //选择所有
$("div,p,p.myclass") //选择多个元素
$(this) //选择当前
$(".intro.demo") 选择所有class="intro" 且 class="demo" 的元素
$("p.intro") 选取所有class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
层次选择器
$("div span") 选择<div>元素里的所有的span,包含子元素
$("div>span") 选取<div>元素下名为<span>的元素,不包含子元素的子元素
$(".one+div")-->$(".one").next("div")
选取.one后的最近的一个div,同辈元素不包含子元素
$(".one~div")-->$(".one").nextAll("div")
选取one后所有的div,同辈元素不包含子元素
过滤选择器
基本过滤
$("div:first")//选取div中第一个元素。
$("div:last")//选取div中最后一个元素。
$("div:not(selector)")//不包含某元素
$("div:even")//div的索引为基数
$("div:odd")//div的索引为偶数
$("div:eq(3)") //查找div的索引值,index 从 0 开始,选择索引为3的元素
$("div:gt(3)") //索引值大于3
$("div:lt(3)") //索引值小于3
$(":header") //选取所有标题
$(":animate") //选取正在执行的动画的元素
$(":focus") //选取当前获取焦点的元素
$(":animated") //所有动画元素
内容过滤
$("div:contains("内容")")
$("div:empty") //不包含子元素的空元素
$("div:has(p)") //含有子元素的元素
$("div:parent") //含有子元素或者文本的元素
可见性过滤
$("div:hidden") //选取不可见的元素
$("div:visible") //选取可见的元素
表单对象属性过滤
$("input:enabled") //input中所有可用元素
$("input:disabled") //input中所有不可用元素
$("input:checked") //input中所有被选中元素(单选框, 复选框)
$("select option:seleced") //选取所有被选中的元素
子元素过滤
$("div:first-child") //选择div的第一个子元素
$("div:last-child") //选择div的最后一个子元素
$("div:only-child") //某个元素是div的唯一一个子元素时会被调用,否者不会。
$("div:nth-child(3))") //指定div下索引为3的元素
属性选择器
$("[href]") 所有带有 href 属性的元素
$("[href='#']") 所有 href 属性的值等于 "#" 的元素
$("[href!='#']") 所有 href 属性的值不等于 "#" 的元素
$("a[href^='web']") 选择所有以web开头的元素
$("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素
$("a[href*='i']") 选择所有包含i这个字符的元素,可以是中英文
$("a[href][title]='我']") 选择所有符号指定属性规则的元素,都符合才会被选中
$(".homeContent input[type=text]")
// .homeContent下input标签type=text的元素