首页 > 代码库 > jQuery选择器
jQuery选择器
4* | $("*") | 所有元素 |
#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=http://www.mamicode.com/‘#‘]") | 所有 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 元素 |
上面是转载离线文档，jq选择器我一个一个介绍
1，通用选择器*
这个可以是说作为一些使用JQ去修改CSS的默认行为。
2ID选择器；
可以说ID选择器我们写JS代码都能用到它因为它的唯一性和比类的优先级高，我们去操作id可谓是非常简单迅速，想做一些选项卡，轮播盒子的时候就可以用id；
3.Class
类可谓是比标签优先级高，但它和标签不同的是类只有给定元素的，而标签只是元素仅此而已；
4，元素选择器也叫标签选择器
这个不用多说吧大家都明白，选取$(“p”)元素
5.后代选择器也叫派生选择器
也就是说 $(“#div1 p a span”)它会逐级查找直到最后一个元素精确到空元素；
7.:first查找第一个选择器；如$(“div:first”)
8.last查找最后一个选择器；如$(“div:last”)
下面说下选择器应用场景和方法
1.应用场景
应用一些在我们每次操作dom的时候都会用到选择器，这就是找，jquery 中提供了各种查找元素然而对于DOM操作特别迅速快捷我先讲下什么是DOM？
JQ中的DOM操作是基于js写出的特定属性
.get() 获得由选择器指定的 DOM 元素。
.index() 返回指定元素相对于其他指定元素的 index 位置。
.size() 返回被 jQuery 选择器匹配的元素的数量。
.toArray() 以数组的形式返回 jQuery 选择器匹配的元素。
一般操作标签的时候就会有一些查找第几个有eq()和lt它们两个不同的是：
eq()是找下标我们大家都知道下标是从0开始的然而lt是找的index它是去找几个元素而不是单个index是从1开始的。
2方法的话写一个小案例；
是一个选课系统
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*{
margin:0;
padding:0;
}
#bigbox{
width:310px;
margin:0 auto;
text-align:center;
}
h2{height:35px; line-height:35px;}
.anniu{float:left;width:60px;}
.kecheng{float:left;width:120px;height:250px;border:1px solid;}
h3{height:30px;line-height:30px;}
.kecheng select{height:220px;border:none;border-top:1px solid;width:118px;}
</style>
</head>
<body>
<div id="bigbox">
<center><h2>选课系统</h2></center>
<div class="kecheng">
<h3>可选课程</h3>
<select size="12" id="sc1">
<option>计算机基础</option>
<option>网页设计</option>
<option>C与C++系统学习</option>
<option>UI基础</option>
<option>UI进阶</option>
<option>UI实战</option>
<option>产品脚本入门</option>
<option>产品脚本提高</option>
<option>产品脚本特效</option>
<option>产品脚本实战</option>
<option>小实训1</option>
<option>小实训2</option>
<option>小实训3</option>
<option>大实训1</option>
<option>大实训2</option>
<option>大实训3</option>
</select>
</div>
<div class="anniu">
<h3></h3>
<input type="button" value="http://www.mamicode.com/选择"/><br/>
<input type="button" value="http://www.mamicode.com/全选"/><br/>
<input type="button" value="http://www.mamicode.com/退选"/><br/>
<input type="button" value="http://www.mamicode.com/全退"/><br/>
<input type="button" value="http://www.mamicode.com/置顶"/><br/>
<input type="button" value="http://www.mamicode.com/置底"/><br/>
<input type="button" value="http://www.mamicode.com/上移"/><br/>
<input type="button" value="http://www.mamicode.com/下移"/><br/>
</div>
<div class="kecheng">
<h3>可选课程</h3>
<select size="12" id="sc2"></select>
</div>
<center><input type="button" value="http://www.mamicode.com/提交"/></center>
</div>
</body>
<script src="http://www.mamicode.com/JQ.js"></script>
<script>
$(function(){
$("input:eq(0)").click(
function(){
$("#sc1>option:selected").appendTo("#sc2")
}
)
$("input:eq(1)").click(
function(){
$("#sc1>option").appendTo("#sc2")
}
)
$("input:eq(2)").click(
function(){
$("#sc2>option:selected").appendTo("#sc1")
}
)
$("input:eq(3)").click(
function(){
$("#sc2>option").appendTo("#sc1")
}
)
$("input:eq(4)").click(
function(){
$("#sc1>option:selected").prependTo("#sc1")
}
)
$("input:eq(5)").click(
function(){
$("#sc1>option:selected").appendTo("#sc1")
}
)
$("input:eq(6)").click(
function(){
$("#sc1>option:selected").prev().before($("#sc1>option:selected"))
}
)
$("input:eq(7)").click(
function(){
$("#sc1>option:selected").next().after($("#sc1>option:selected"))
}
)
$("input:eq(8)").click(
function(){
m=$("#sc2>option").length
if(m<=0){alert("你必须选课后才能提交")}
else{m=confirm("你确定要提交吗？")}
if(m){alert("你已经提交")}
else{alert("你取消了提交")}
}
)
})
</script>
</html>
jQuery选择器