/jQuery选择器
(Basic:基本选择器、Level:层次选择器、Filter:过滤选择器、Form:表单选择器,操作form元素)
(下面给出的例子只是列举具体的某些元素作为标记的实例)
:Basic:基本选择器
$(“#test”)= document.getElementById(“test”);// 从上往下获取单个元素,忽略后面的
$(“#test”).text();//此方法返回文本 = $(“#test”)[0].innerText 转换为dom文档的属性
$(“#test”).html();//返回= $(“#test”)[0].innerHTML
$(document).ready(function()
{
alert($("#test").text());// 获取第一个id元素
alert($("#test").html());
alert($("#test")[0].innerText);//转为document对象,用户属性表示
alert($("#test")[0].innerHTML);
});
<body>
<a id="test"href="#"><b>www.baidu.com</b></a>
<!-- html 一般不允许id重复,此处用来测试 -->
<a id="test"href="#"><b>www.google.com</b></a>
</body>
$(“.test”) 所有元素属性 class=”test”的集合
$(“p”) 选取所有<p>元素
$(“*”) 匹配所有元素集合
$(“div, p, span.test”) 选取 所有<div>、<p>、<span class=”test”>的元素集合
:Level:层次选择器
<div>
<span id=”span1”></span>
<span id=”span2”></span>
<a><spanid=”span3”></span></a>
</div>
//选中id=span1/span2/ span3 后代 :儿子、孙子等等
$(“div span”) (后代)选择div中的所有span元素
$(“div > span”) // 选中id=span1/span2;span3不会被 选中
$(“.myClass + div”)// 选中 class=”myClass”后的第一个 div; 如下选中id=”div2”的div元素
(不推荐):可以使用$(“.myClass”).next(“div”) 代替
<span id=”span1”></span>
<span id=”span2”></span>
<a><spanid=”span3”></span></a>
</div>
<divid=”div2”></div>
(不推荐)$(“#two ~ div”)// 选取 id=”two”的元素后面的兄弟元素
可以使用$(“#two”).nextAll()代替 $(“#two”).siblings(“div”);寻找同辈的元素包括前面的
如:id=”three”和 four会被选中
<divid=”two”>
<span id=”span1”></span>
<span id=”span2”></span>
<a><spanid=”span3”></span></a>
</div>
<divid=”three”>
</div>
<divclass=”four”>
</div>
Filter:过滤选择器
1.基本过滤器
$(“div:first”) // 选中所有div元素的第一个div元素
$(“div:last”) // 选中所有div元素的最后一个div元素
$(“input:not(.myClass)”) // 选中class !=”myClass”的input元素
$(“input:even”) // 选中索引为偶数的input元素
$(“input:odd”) // 选中索引为奇数的input元素
$(“input:eq(index)”) // 选中索引等于index的input元素,index从0开始
$(“input:gt(index)”) // 选中索引大于index的input元素,不包括index
$(“input:lt(index)”) // 选中索引小于index的input元素,不包括index
$(“:header”) // 选中所有标题元素,如<h1>…
$(“div:animated”) // 选中div中所有动画元素
2、内容过滤器
$(“div:contains(‘我’)”) //选中含有文本“我”的div元素
$(“div:emtpy”) // 选中不含有子元素(包括文本)的div元素
$(“div:parent”) // 选中包含子元素(包含文本)的div元素
$(“div:has(p)”) // 选中含有<p>元素的div元素
3、可见性过滤器
$(“:hidden”) // 选中所有不可见的元素 type=”hidden”,visibility=”hidden”,display=”none”,等只要是不可见的元素 $(“div:hidden”) // 选中不可见的div元素
$(:visible) // 选取可见的
4、属性过滤器
$(“div[title]”) // 选中属性含有title的div,title没有显示设置不会被选中
$(“div[title=test]”) // 选中属性title=test的所有div
$(“div[title!=test]”) // 选中属性title!=test的所有div,没有属性title的也会被选中
$(“div[title^=test]”) // 选中属性title值以test的开头的所有div
$(“div[title$=test]”) // 选中属性title值 以test的结尾的所有div
$(“div[title*=test]”) // 选中属性title值 包含test的所有div
$(“div[id][title^=te][title$=st]”) // 选中包含属性id,并且以te开头,st结尾的title的所有div
$(“div.one :nth-child(2)”)// 选中 包含class=”one”的 div元素的第2个子元素 ,nth-child(index)所有从1开始
$(div.one :first-child) // 等价于$(“div.one:nth-child(1)”)
$(div.one :last-child) // class=”one”的div元素最后一个子元素
$(div.one :only-child) // class=”one”的div元素唯一的一个子元素
5、表单对象属性过滤器
$(“#form1 :enabled”) // 选取id=”form1”的表单内的所有可用的元素
$(“#form1 :disabled”) // 选取id=”form1”的表单内的所有不可用的元素
:checked // 选中所有被选中的元素($(“input :checked”) 一般用于单选框、复选框)
:selected// 所有被选中的下拉列表 $(“select :selected”)
:input // $(“:input”) // 选中所有<input>/<>textarea>/<select>/<button>元素
:text // $(“:text”)// 选中所有type=”text”的单行文本
:password // $(“:password”)//…
:radio //所有的单选按钮
:image、:checkbox、:submit、:reset、:button、:file、:hidden、同上
注意:$(“#form1:input”) // 表单选择器,
获取form1表单中所有input>/<>textarea>/<select>/<button>元素
$(“#form1 input”) // 层次选择器 ,获取<input>
$(“.myClass:hidden”)// class=”myClass”的子元素中的隐藏元素
$(“.myClass:hidden”)// 包含所有隐藏元素中class=”myClass”的元素