筛选(JQuery Selector)
JQuery是一个JavaScript库,它极大地简化了JavaScript编程。整个JQuery库的方法都在$这个工厂函数里,我们只需要使用$函数,而$函数会返回一个JQuery对象,使用它就可以调用JQuery提供的一整套更为简单的API来完成日常工作中复杂的对DOM元素的操作。
认识Jquery对象
$返回的是一个Jquery对象,而这个对象存储的就是由筛选器获取的Dom元素,通过类似于获取数组元素的方式可以从Jquery对象中存取这些Dom元素
$(document).ready(function () { var divList = $("#box"); alert(divList[0].innerText); }); 迭代Jquery对象
迭代Jquery可以使用API的each方法,应避免使用for迭代器来迭代Jquery对象,因为Jquery并不是数组。在任何可迭代的Jquery方法中都有一个this的引用指向了Dom元素,通过this获取到Dom,通过$(this)则将Dom元素封装为Jquery对象。
$(document).ready(function () { var divList = $("#box"); var text = divList[0].innerText; divList.each(function () { alert($(this).text()); alert(this.innerText); }); }); 选择器(selector)
选择器用于获取一组Dom元素的Jquery表示,选择器只能选择Html元素,不会选择属性、文本。
基本选择器
selector:tag、id、class
通过tag、id、class获取元素,可以有多个tag,每个tag以逗号隔开,tag,tag。tag可以组合id或class,tag#id、tag.class,所以有:tag#id,tag,tag.class……
$('tag') $('#id') $('.class') $('tag#id') $('tag,tag,tag.class') $('*') 示例:
<div id="box">box</div> <div class="containner">containner</div> <span>span</span> $(document).ready(function () { alert($(".containner")[0].innerText); $("div.containner,span,div#box").each(function () { alert($(this).text()); }); }); 层次选择器
通过DOM树的层次关系来选择元素。+、~、空格可以组合tag,div+span、div~span、div span。
$('selector+') $('selector~') $('selector *') 示例
$(document).ready(function () { var elmList = $("#box+")[0]; var elmList=$("div+span+p");}); 进一步选择器
指在选择的结果集合里进行进一步的选择,:号前的选择器被视为第一次选择的结果集,:号的选择器则从该结果集合中进行第二次选择。
1.层次选择器
$('selector:first') $("selector:last") $('selector:parent') 2.范围选择器
$('selector:has(selector)') $('selector:not(selector)') 3.状态选择器
$('selector:empty') $("selector:animated") $('contains:contains('text')') $('selector:visible') $('selector:hidden') 4.索引选择器
$('selector:eq(index)') $('selector:odd') $('selector:even') $('selector:gt(number)') $('selector:gt(number)') 5.属性选择器
$('selector[attri]') $('selector[attri!=attriValue]') $('selector[attri^=key]') $("selector[attri$=key]") $('div[class*=key]') 6.后代元素过滤
$('selector:first-child') $('selector:last-child') $('selector:nth-child(number)') $('selector:nth-child(even)') $('selector:nth-child(odd)') 表单过滤
表单元素状态选择器
$('selector:enabled') $('selector:disabled') $('selector:checked') $('selector:selected') 表单元数属性选择器
$('selector:radio') $('selector:file') $('selector:reset') $('selector:text') $('selector:image') $('selector:submit') $('selector:checkbox') $('selector:hidden') $('selector:password') $('selector:input')
方法选择
可以使用Jquery提供的函数对Jquery对象中的Dom元素进行进一步选择。
filter()
filter(selector | jqueryObj | domElm | fn) 示例
$('div').filter('.box') $('div').filter(":contains('佳能') , :contains('三星')") $('div').filter(function () { return $(this).text() == 'a';}); is()
is(selector | jqueryObj | domElm | fn)