jQuery选择器全解-基础选择器
Id选择：
根据元素Id选择,$(“layer1”) 选择ID为layer1的元素
<div id="layer1" style="width: 300px;height: 300px;border: 1px solid red"></div>
alert($("#layer1").height());element
element选择器是一个用于搜索的元素。指向DOM节点的标签名
<a href=""></a>
<a href=""></a>
<a href=""></a>
alert($("a").length);
.class选择器
.class选择器根据给定的类匹配元素，是一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到
<input type="text" id="ID" value="根据ID选择" />
<a>根据元素名称选择</a>
<input type="text" class="classname" value="根据元素css类名选择" />
alert($("#ID").val() + " " + $("a").text() + " " + $(".classname").val());
selector1,selector2,selectorN选择器
这类选择器选择器即将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内
<h2 class="title">并集选择器 的h2</h2>
<dl>
<dt>并集选择器</dt>
</dl>
<input type="button" value="设置所有h2 dt class 为title 的背景颜色" id="4" /><br />
$("#4").click(function (){
$("h2,dt,.title").css("background","pink");
});
层级选择器
ancestor descendant选择器
其指在给定的祖先元素下匹配所有的后代元素，作为参数的ancestor代表任何有效的选择器，而descendant则用以匹配元素的选择器，并且它是第一个选择器的后代
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
alert($("form input").length)
parent>child选择器
parent>child选择器代表在给定的父元素下匹配所有的子元素。两个参数分别代表的意思如下：parent代表任何有效选择器；child用以匹配元素的选择器，并且它是第一个选择器的子元素。
<div id="n1">
<p id="n2" class="test">
<span id="n3" class="a">Hello</span>
</p>
<p id="n4" class="detail">
<span id="n5" class="b codeplayer">World
<span id="n6" class="c">365mini.com</span>
</span>
</p>
</div>
alert($("p > span ").length + " " + $("p > span > span").length);
prev+next选择器
这类选择器的作用是匹配所有紧接在prev元素后的next元素。两个参数分别代表的意思如下：prev代表任何有效选择器；next代表一个有效选择器并且紧接着第一个选择器。
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
alert($("label + input").length)
prev ~ siblings选择器
prev ~ siblings选择器代表匹配prev元素之后的所有siblings元素。两个参数分别代表的意思如下：prev代表任何有效选择器；siblings代表一个选择器，并且它作为第一个选择器的同辈。
<div id="divTest">
<input type="text" value="投资" />
<input id="next" type="text" />
<input type="text" value="担当" />
<input type="text" title="学习" value="学习" />
<a>1</a>
<a>2</a>
</div>
alert(jQuery("#next~[title]").val());
jQuery选择器全解-基本过滤器
<div id="divTest">
<ul>
<li>基本过滤选择器</li>
<li>基本过滤选择器</li>
<li>基本过滤选择器</li>
<li>基本过滤选择器</li>
<li>基本过滤选择器</li>
<li>基本过滤选择器</li>
<input type="radio" value="学习" checked="checked" />
<input type="radio" value="不学习" />
</ul>
</div>
<input type="button" value="li_first" id="one"/>
<input type="button" value="li_last" id="two"/>
<input type="button" value="not(selector)" id="three"/>
<input type="button" value="li_even" id="four"/>
<input type="button" value="li_odd" id="five"/>
<input type="button" value="li_eq(index)" id="six"/>
<input type="button" value="li_gt(2)" id="seven"/>
<input type="button" value="li_:lt(1)" id="leng"/>
first
匹配找到的第一个元素
$("#one").click(function (){
$("li:first").css("background","pink");
});
last
匹配找到的最后一个元素
$("#two").click(function (){
$("li:last").css("background","pink");
});
not(selector)
去除所有与给定选择器匹配的元素
$("#three").click(function (){
alert($("input:not(:checked)").val())
});
even
匹配所有索引值为偶数的元素，从 0 开始计数
$("#two").click(function (){
$("li:even").css("background","pink");
});odd
匹配所有索引值为奇数的元素，从 0 开始计数
$("#two").click(function (){
$("li:odd").css("background","pink");
});eq(index)
匹配一个给定索引值的元素 注:index从 0 开始计数
$("#two").click(function (){
$("li:eq(3)").css("background","pink");
});
gt(index)
匹配所有大于给定索引值的元素 注:index从 0 开始计数
$("#two").click(function (){
$("li:gt(3)").css("background","pink");
});
lt(index)
选择结果集中索引小于 N 的 elements 注:index从 0 开始计数
$("#two").click(function (){
$("li:lt(3)").css("background","pink");
});
jQuery选择器全解-内容过滤器
<div id="divTest">
<ul>
<li>hyip投资</li>
<li>hyip</li>
<li><a href=""></a></li>
<li>内容过滤器</li>
<li>hyip内容过滤器</li>
</ul>
</div>
<input type="button" value="li_contains(text)" id="one"/>
<input type="button" value="li_empty+li" id="two"/>
<input type="button" value="li_has(selector)" id="three"/>
contains(text)
匹配包含给定文本的元素
$("#one").click(function (){
$("li:contains('hyip')").css("background","pink");
});
empty
匹配所有不包含子元素或者文本的空元素
$("#one").click(function (){
$("li:empty+li").css("background","pink");
});
:has(selector)
匹配含有选择器所匹配的元素的元素
$("#one").click(function (){
$("li:has(a)").css("background","pink");
});
可见性过滤器 Visibility Filters
<ul>
<li>可见1</li>
<li style="display:none;">不可见2</li>
<li style="display:none;">不可见<3/li>
<li>可见4</li>
</ul>
hidden
匹配自身或者父类在文档中不占用空间的元素.如果使用CSS visibility属性让其不显示但是占位,则不输入hidden
$("#one").click(function (){
alert($("li:hidden").length);
});
visible
匹配所有的可见元素
$("#one").click(function (){
alert($("li:visible").length);
});
jQuery选择器全解-属性过滤器
<input type="text" id="yi" name="hyipinvest" value="hyip投资" />
<input type="text" name="investhyip" value="投资hyip" />
<input type="text" name="google" value="HYIP" />
<button id="one">点击</button>
[attribute]
查找所有input标签中含有 id 属性的 div 元素
$("#one").click(function (){
$("input[id]").css("background","pink");
});
[attribute=value]
查找所有 name为hyipinvest的值
$("#one").click(function (){
$("input[name='hyipinvest']").css("background","pink");
});
[attribute!=value]
查找所有input中name不为hyipinvest的值
$("#one").click(function (){
$("input[name!='investhyip']").css("background","pink");
});
[attribute^=value]
查找所有input中name以hyip开头的值
$("#one").click(function (){
$("input[name^='hyip']").css("background","pink");
});
[attribute$=value]
查找所有input中name以hyip结束的值
$("#one").click(function (){
$("input[name$='hyip']").css("background","pink");
});
[attribute=value]
查找所有input中name包含oo的值
$("#one").click(function (){
$("input[name*='oo']").css("background","pink");
});jQuery选择器全解-子元素过滤器
html由层层嵌套在一起的标签组成，由于一些标签需要进行单独处理，如何选取一个或者一些特定的嵌套标签在程序中就成为了一个问题。jQuery提供了子元素过滤选择器解决了这个问题。它包括4个选择器，具体内容将在下面详细讲解。
（1）:nth-child选择器。
（2）:first-child、:last-child选择器（两种）。
（3）:only-child选择器。
子元素过滤器和上面基本过滤器相差不多，这里我就不一一举例了。
jQuery选择器全解-表单选择器——表单过滤器
<form id="form1" action="#">
<input type="button" value="Button"/><br/>
<input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/>
<input type="file" /><br/>
<input type="hidden" /><div style="display:none">test</div><br/>
<input type="image" /><br/>
<input type="password" /><br/>
<input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/>
<input type="reset" /><br/>
<input type="submit" value="提交"/><br/>
<input type="text" /><br/>
<select><option>Option</option></select><br/>
<textarea rows="5" cols="20"></textarea><br/>
<button>Button</button><br/>
</form>
$(document).ready(function(){
var $alltext = $("#form1 :text");
var $allpassword= $("#form1 :password");
var $allradio= $("#form1 :radio");
var $allcheckbox= $("#form1 :checkbox");
var $allsubmit= $("#form1 :submit");
var $allimage= $("#form1 :image");
var $allreset= $("#form1 :reset");
var $allbutton= $("#form1 :button"); // <input type=button /> 和 <button ></button>都可以匹配
var $allfile= $("#form1 :file");
var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
var $allselect = $("#form1 select");
var $alltextarea = $("#form1 textarea");
var $AllInputs = $("#form1 :input");
var $inputs = $("#form1 input");
$("div").append(" 有" + $alltext.length + " 个（ :text 元素）<br/>")
.append(" 有" + $allpassword.length + " 个（ :password 元素）<br/>")
.append(" 有" + $allradio.length + " 个（ :radio 元素）<br/>")
.append(" 有" + $allcheckbox.length + " 个（ :checkbox 元素）<br/>")
.append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>")
.append(" 有" + $allimage.length + " 个（ :image 元素）<br/>")
.append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>")
.append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>")
.append(" 有" + $allfile.length + " 个（ :file 元素）<br/>")
.append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>")
.append(" 有" + $allselect.length + " 个（ select 元素）<br/>")
.append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>")
.append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>")
.append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>")
.css("color", "red")
$("form").submit(function () { return false; }); // return false;不能提交.
});
