一、基本选择器
1、id选择器
语法:$(" #id值 ")
根据给定的ID匹配一个元素
2、class选择器
语法:$(" .class值 ")
根据给定的类匹配元素。
3、标签选择器
语法:$(" 标签名 ")
根据给定的元素名匹配所有元素
4、通配符选择器
语法:$(" * ")
匹配所有元素
5、并集选择器
语法:$(" selector1,selector2,selectorN ")
将每一个选择器匹配到的元素合并后一起返回。
6、交集选择器
语法:$(" selector1selector2 ")
注意选择器1和选择器2之间没有空格,注意区分后代选择器。
二、层级选择器
1、后代选择器
语法::$(" E F ")
说明:E与F之间用空格分开,注意:E必须包含F
功能描述:在给定的祖先元素下匹配所有的后代元素(
不一定是直系
)
2、子选择器
语法::$(" E> F ")
说明:E必须包含F
功能描述:选择匹配的F元素,F必须是E的直系子元素
3、相邻兄弟选择器
语法::$("E+ F ") 等价于 $(“E”).next(“F”)
说明:E,F元有一个相同的父级元素,换句话说E和F是同辈元素
功能描述:选择匹配的F元素,注意E和F必须
相邻
且F在E的下面
4、通用兄弟选择器**
语法::$("E~ F ") 等价于 $(“E”).nextAll(“F”)
说明:E,F元有一个相同的父级元素,换句话说E和F是同辈元素
功能描述:选择匹配的F元素,注意选择E后面的元素F
三、过滤选择器
1、获取第一个元素**
语法: $(":first")
<ul>
<li id="li1">1</li>
<li id="li2">2</li>
<li id="li3">3</li>
<li id="li4">4</li>
</ul>
<script>
$(function(){
var $li = $("li:first");
console.log($li.text()); //1
})
</script>
2、获取最后个元素**
语法: $(":last ")
<ul>
<li id="li1">1</li>
<li id="li2">2</li>
<li id="li3">3</li>
<li id="li4">4</li>
</ul>
<script>
$(function(){
var $li = $("last");
console.log($li.text()); //4
})
</script>
3、去除所有与给定选择器匹配的元素**
语法: $(":not(selector)")
4、索引获取-等于**
语法: $(" :eq(index)")
获取到的li元素中,选择索引号为2的元素,索引号index从0开始。
<ul>
<li id="li1">1</li>
<li id="li2">2</li>
<li id="li3">3</li>
<li id="li4">4</li>
</ul>
<script>
$(function(){
var $li = $("li:eq(1)");
console.log($li.text());//2
})
</script>
5、索引获取-大于**
语法: $(":gt(index) ")
匹配所有大于给定索引值的元素,不包括索引值的元素
<ul>
<li id="li1">1</li>
<li id="li2">2</li>
<li id="li3">3</li>
<li id="li4">4</li>
</ul>
<script>
$(function(){
var $li = $("li:gt(1)");
console.log($li.text());//34
})
</script>
6、索引获取-大于**
语法: $(":lt(index) ")
匹配所有小于给定索引值的元素,不包括索引值的元素
<ul>
<li id="li1">1</li>
<li id="li2">2</li>
<li id="li3">3</li>
<li id="li4">4</li>
</ul>
<script>
$(function(){
var $li = $("li:lt(1)");
console.log($li.text());//1
})
</script>
7、选择索引号为奇数的元素(从0开始)**
语法: $(" :odd")
<ul>
<li id="li1">1</li>
<li id="li2">2</li>
<li id="li3">3</li>
<li id="li4">4</li>
</ul>
<script>
$(function(){
var $li = $("li:odd");
console.log($li.text());//24
})
</script>
8、选择索引号为偶数的元素**
语法: $(":even ")
<ul>
<li id="li1">1</li>
<li id="li2">2</li>
<li id="li3">3</li>
<li id="li4">4</li>
</ul>
<script>
$(function(){
var $li = $("li:even");
console.log($li.text());//13
})
</script>
9、匹配如 h1, h2, h3之类的标题元素
语法: $(" :header")
<h1>1</h1>
<h6>6</h6>
<p></p>
<script>
$(function(){
var $header = $(":header");
console.log($header.text());//16
})
</script>
10、匹配所有正在执行动画效果的元素
语法: $(":animated ")
11、匹配当前获取焦点的元素
语法: $(":focus ")
四、表单选择器
1、匹配所有 input, textarea, select 和 button 元素
语法:$(":input")
<form>
<input type="button" value="Input Button" id="button1"/>
<input type="checkbox" id="checkbox1"/>
<input type="file" id="file1"/>
<input type="hidden" id="hidden1"/>
<input type="image" id="image1"/>
<input type="password" id="password1"/>
<input type="radio" id="radio1"/>
<input type="reset" id="reset1"/>
<input type="submit" id="submit1"/>
<input type="text" id="text1"/>
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
<script>
$(function(){
console.log($(":input"));
})
</script>
2、匹配所有的单行文本框
语法:$(":text")
<form>
<input type="button" value="Input Button" id="button1"/>
<input type="checkbox" id="checkbox1"/>
<input type="file" id="file1"/>
<input type="hidden" id="hidden1"/>
<input type="image" id="image1"/>
<input type="password" id="password1"/>
<input type="radio" id="radio1"/>
<input type="reset" id="reset1"/>
<input type="submit" id="submit1"/>
<input type="text" id="text1"/>
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
<script>
$(function(){
console.log($(":text"));
})
</script>
3、匹配所有密码框
语法:$(":password")
<form>
<input type="button" value="Input Button" id="button1"/>
<input type="checkbox" id="checkbox1"/>
<input type="file" id="file1"/>
<input type="hidden" id="hidden1"/>
<input type="image" id="image1"/>
<input type="password" id="password1"/>
<input type="radio" id="radio1"/>
<input type="reset" id="reset1"/>
<input type="submit" id="submit1"/>
<input type="text" id="text1"/>
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
<script>
$(function(){
console.log($(":password"));
})
</script>
4、匹配所有单选按钮
语法:$(":radio")
<form>
<input type="button" value="Input Button" id="button1"/>
<input type="checkbox" id="checkbox1"/>
<input type="file" id="file1"/>
<input type="hidden" id="hidden1"/>
<input type="image" id="image1"/>
<input type="password" id="password1"/>
<input type="radio" id="radio1"/>
<input type="reset" id="reset1"/>
<input type="submit" id="submit1"/>
<input type="text" id="text1"/>
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
<script>
$(function(){
console.log($(":radio"));
})
</script>
5、匹配所有复选框
语法:$(":checkbox")
<form>
<input type="button" value="Input Button" id="button1"/>
<input type="checkbox" id="checkbox1"/>
<input type="file" id="file1"/>
<input type="hidden" id="hidden1"/>
<input type="image" id="image1"/>
<input type="password" id="password1"/>
<input type="radio" id="radio1"/>
<input type="reset" id="reset1"/>
<input type="submit" id="submit1"/>
<input type="text" id="text1"/>
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
<script>
$(function(){
console.log($(":checkbox"));
})
</script>
6、匹配所有提交按钮
语法:$(":submit") 理论上只匹配 type=“submit”
的input或者button,但是现在的很多浏览器,button元素默认的type即为submit,所以很多情况下,不设置type的button也会成为筛选结果。为了防止歧义或者误操作,建议所有的button在使用时都添加type属性。
<form>
<input type="button" value="Input Button" id="button1"/>
<input type="checkbox" id="checkbox1"/>
<input type="file" id="file1"/>
<input type="hidden" id="hidden1"/>
<input type="image" id="image1"/>
<input type="password" id="password1"/>
<input type="radio" id="radio1"/>
<input type="reset" id="reset1"/>
<input type="submit" id="submit1"/>
<input type="text" id="text1"/>
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
</form>
<script>
$(function(){
console.log($(":submit"));
})
</script>
7、匹配所有图像域
语法:$(":image")
<form>
<input type="button" value="Input Button" id="button1"/>
<input type="checkbox" id="checkbox1"/>
<input type="file" id="file1"/>
<input type="hidden" id="hidden1"/>
<input type="image" id="image1"/>
<input type="password" id="password1"/>
<input type="radio" id="radio1"/>
<input type="reset" id="reset1"/>
<input type="submit" id="submit1"/>
<input type="text" id="text1"/>
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
<img src="" />
</form>
<script>
$(function(){
console.log($(":image"));
})
</script>
8、匹配所有重置按钮
语法:$(":reset")
<form>
<input type="button" value="Input Button" id="button1"/>
<input type="checkbox" id="checkbox1"/>
<input type="file" id="file1"/>
<input type="hidden" id="hidden1"/>
<input type="image" id="image1"/>
<input type="password" id="password1"/>
<input type="radio" id="radio1"/>
<input type="reset" id="reset1"/>
<input type="submit" id="submit1"/>
<input type="text" id="text1"/>
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
<img src="" />
</form>
<script>
$(function(){
console.log($(":reset"));
})
</script>
9、匹配所有按钮
语法:$(":button")
<form>
<input type="button" value="Input Button" id="button1"/>
<input type="checkbox" id="checkbox1"/>
<input type="file" id="file1"/>
<input type="hidden" id="hidden1"/>
<input type="image" id="image1"/>
<input type="password" id="password1"/>
<input type="radio" id="radio1"/>
<input type="reset" id="reset1"/>
<input type="submit" id="submit1"/>
<input type="text" id="text1"/>
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
<img src="" />
</form>
<script>
$(function(){
console.log($(":button"));
})
</script>
10、匹配所有文件域
语法:$(":file")
<form>
<input type="button" value="Input Button" id="button1"/>
<input type="checkbox" id="checkbox1"/>
<input type="file" id="file1"/>
<input type="hidden" id="hidden1"/>
<input type="image" id="image1"/>
<input type="password" id="password1"/>
<input type="radio" id="radio1"/>
<input type="reset" id="reset1"/>
<input type="submit" id="submit1"/>
<input type="text" id="text1"/>
<select><option>Option</option></select>
<textarea></textarea>
<button>Button</button>
<img src="" />
</form>
<script>
$(function(){
console.log($(":file"));
})
</script>
五、表单对象属性选择器
:enabled匹配所有可用元素
:disabled匹配所有不可用元素
:checked匹配所有选中的被选中元素(复选框、单选框等)
:selected匹配所有选中的option元素(下拉列表)
六、可见性选择器
1、匹配所有不可见元素
语法:$(":hidden")
匹配所有不可见元素,或者type为hidden的元素
以下几种情况的元素是隐藏元素:注释:该选择器对 visibility:hidden 和 opacity: 0 的元素不起作用。
设置为 display:none
带有 type=“hidden” 的表单元素
width 和 height 设置为 0
隐藏的父元素(这也会隐藏子元素
2、匹配所有的可见元素
语法:$(":visible")
七、子元素选择器
1、先位置,在元素
语法:$(" :first-child") 匹配第一个子元素
语法: $(":last-child")
<ul>
<p id="p1"></p>
<li id="li1"><span></span></li>
<li id="li2"></li>
<li id="li3"></li>
</ul>
<script>
$(function(){
console.log($("ul li:first-child")); //没有匹配到,因为ul到第一个子元素不是li
})
</script>
2、先元素,在位置
语法:$(“E:first-of-type”)
语法:$(“E:last-of-type”)
<ul>
<p id="p1"></p>
<li id="li1"><span></span></li>
<li id="li2"></li>
<li id="li3"></li>
</ul>
<script>
$(function(){
console.log($("ul li:first-of-type"));
})
</script>
八、属性选择器
1、匹配包含给定属性的元素
语法:$(" [attribute] ")
2、匹配给定的属性是某个特定值的元素
语法:$("[attribute=value] ")
3、匹配给定的属性不是某个特定值的元素
语法:$("attribute!=value] ")
4、匹配给定的属性是以某些值开始的元素
语法:$(" [attribute^=value]")
<p class="fooof">第一个p</p>
<p class="foww">第二个p</p>
<p class="fooof">第三个p</p>
<div id="box1">第一个div</div>
<div id="box2">第二个div</div>
<div id="box3">第三个div</div>
<script>
$(function(){
console.log($("[class^='f']"));
})
</script>
5、匹配给定的属性是以某些值结尾的元素
语法: ( " [ a t t r i b u t e ("[attribute ("[attribute=value] ")
6、匹配给定的属性是以包含某些值的元素
语法:$(" [attribute*=value]")
7、复合属性选择器,需要同时满足多个条件时使用。
语法:$("[attrSel1][attrSel2][attrSelN]")
<p class="fooof">第一个p</p>
<p class="foww">第二个p</p>
<p class="fooof">第三个p</p>
<div id="box1">第一个div</div>
<div id="box2">第二个div</div>
<div id="box3" class="box">第三个div</div>
<script>
$(function(){
console.log($("[class][id]"));
})
</script>
九、内容选择器
1、匹配包含给定文本的元素
语法:$(":contains(string)")
<p class="fooof">第一个p</p>
<p class="foww">第二个p</p>
<p class="fooof">第三个p</p>
<div id="box1">第一个div</div>
<div id="box2">第二个div</div>
<div id="box3" class="box">第三个div</div>
<script>
$(function(){
console.log($("body :contains('二')"));
})
</script>
2、匹配所有不包含子元素或者文本为空元素
语法:$(":empty")
3、匹配含有选择器所匹配的元素的元素,参数selector是一个标签选择器
语法:$(":has(selector)")
<p class="fooof">第一个p</p>
<p class="foww"><span></span></p>
<p class="fooof">第三个p</p>
<div id="box1">第一个div</div>
<div id="box2"></div>
<div id="box3" class="box">第三个div</div>
<script>
$(function(){
console.log($("p:has(span)"));
})
</script>
4、匹配含有子元素或者文本的元素
语法:$(":parent")
<p class="fooof">第一个p</p>
<p class="foww"></p>
<p class="fooof">第三个p</p>
<div id="box1">第一个div</div>
<div id="box2"></div>
<div id="box3" class="box">第三个div</div>
<script>
$(function(){
console.log($("body :parent"));
})
</script>