标签：
|
4* |
$("*") |
所有元素 |
|
$("#lastname") |
id="lastname" 的元素 |
|
|
$(".intro") |
所有 class="intro" 的元素 |
|
|
$("p") |
所有 <p> 元素 |
|
|
.class.class |
$(".intro.demo") |
所有 class="intro" 且 class="demo" 的元素 |
|
|
|
|
|
$("p:first") |
第一个 <p> 元素 |
|
|
$("p:last") |
最后一个 <p> 元素 |
|
|
$("tr:even") |
所有偶数 <tr> 元素 |
|
|
$("tr:odd") |
所有奇数 <tr> 元素 |
|
|
|
|
|
|
$("ul li:eq(3)") |
列表中的第四个元素（index 从 0 开始） |
|
|
$("ul li:gt(3)") |
列出 index 大于 3 的元素 |
|
|
$("ul li:lt(3)") |
列出 index 小于 3 的元素 |
|
|
:not(selector) |
$("input:not(:empty)") |
所有不为空的 input 元素 |
|
|
|
|
|
$(":header") |
所有标题元素 <h1> - <h6> |
|
|
|
所有动画元素 |
|
|
|
|
|
|
$(":contains(‘W3School‘)") |
包含指定字符串的所有元素 |
|
|
$(":empty") |
无子（元素）节点的所有元素 |
|
|
:hidden |
$("p:hidden") |
所有隐藏的 <p> 元素 |
|
$("table:visible") |
所有可见的表格 |
|
|
|
|
|
|
s1,s2,s3 |
$("th,td,.intro") |
所有带有匹配选择的元素 |
|
|
|
|
|
$("[href]") |
所有带有 href 属性的元素 |
|
|
$("[href=‘#‘]") |
所有 href 属性的值等于 "#" 的元素 |
|
|
$("[href!=‘#‘]") |
所有 href 属性的值不等于 "#" 的元素 |
|
|
$("[href$=‘.jpg‘]") |
所有 href 属性的值包含以 ".jpg" 结尾的元素 |
|
|
|
|
|
|
$(":input") |
所有 <input> 元素 |
|
|
$(":text") |
所有 type="text" 的 <input> 元素 |
|
|
$(":password") |
所有 type="password" 的 <input> 元素 |
|
|
$(":radio") |
所有 type="radio" 的 <input> 元素 |
|
|
$(":checkbox") |
所有 type="checkbox" 的 <input> 元素 |
|
|
$(":submit") |
所有 type="submit" 的 <input> 元素 |
|
|
$(":reset") |
所有 type="reset" 的 <input> 元素 |
|
|
$(":button") |
所有 type="button" 的 <input> 元素 |
|
|
$(":image") |
所有 type="image" 的 <input> 元素 |
|
|
$(":file") |
所有 type="file" 的 <input> 元素 |
|
|
|
|
|
|
$(":enabled") |
所有激活的 input 元素 |
|
|
$(":disabled") |
所有禁用的 input 元素 |
|
|
$(":selected") |
所有被选取的 input 元素 |
|
|
$(":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="选择"/><br/>
<input type="button" value="全选"/><br/>
<input type="button" value="退选"/><br/>
<input type="button" value="全退"/><br/>
<input type="button" value="置顶"/><br/>
<input type="button" value="置底"/><br/>
<input type="button" value="上移"/><br/>
<input type="button" value="下移"/><br/>
</div>
<div class="kecheng">
<h3>可选课程</h3>
<select size="12" id="sc2"></select>
</div>
<center><input type="button" value="提交"/></center>
</div>
</body>
<script src="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>
标签：
原文地址：http://www.cnblogs.com/cond/p/5868452.html
