Javascript - Jquery - 筛选

筛选（JQuery Selector）

JQuery是一个JavaScript库，它极大地简化了JavaScript编程。整个JQuery库的方法都在$这个工厂函数里，我们只需要使用$函数，而$函数会返回一个JQuery对象，使用它就可以调用JQuery提供的一整套更为简单的API来完成日常工作中复杂的对DOM元素的操作。

认识Jquery对象

$返回的是一个Jquery对象，而这个对象存储的就是由筛选器获取的Dom元素，通过类似于获取数组元素的方式可以从Jquery对象中存取这些Dom元素

$(document).ready(function () {
    var divList = $("#box"); //获取id为box的div元素，返回一个Jquery对象
    alert(divList[0].innerText); //该Jquery类似于数组，可通过索引存取Dom元素
});

迭代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;//获取索引0处的div元素，调用其dom属性innerText
    divList.each(function () {
        alert($(this).text()); //调用了Jquery的text方法
        alert(this.innerText); //调用了dom元素的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') //选择所有selector指定的那些
$('#id') //选择指定id的那些
$('.class') //选择指定class的那些
$('tag#id') //选择指定标签具有指定id的那些
$('tag,tag,tag.class') //选择多个指定标签和指定标签具有指定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]; //选择id为box的元素后的第一个兄弟元素
    var elmList=$("div+span+p");//选择所有div元素后的第一个兄弟span元素后的第一个兄弟p元素
});　　

进一步选择器

指在选择的结果集合里进行进一步的选择，:号前的选择器被视为第一次选择的结果集，:号的选择器则从该结果集合中进行第二次选择。

1.层次选择器

$('selector:first') //只要第一个
$("selector:last") //只要最后一个
$('selector:parent') //只要作为父元素的那些

2.范围选择器

$('selector:has(selector)') //只要包含了在has列表中的那些，has中可以有多个所有指定的selector，以逗号隔开
$('selector:not(selector)') //只要不在not列表中的那些，not可以有多个所有指定的selector，以逗号隔开

3.状态选择器

$('selector:empty') //只要不包含任何子元素的那些
$("selector:animated") //只要正在执行动画的那些
$('contains:contains('text')') //只要其包含了contains所指定的文本，包括后代文本也算，text大小写敏感
$('selector:visible') //只要其可见性是显示状态的那些
$('selector:hidden') //只要其可见性是隐藏状态的那些

4.索引选择器

$('selector:eq(index)')  //只要指定的索引处的那些
$('selector:odd') //只要索引是奇数的那些
$('selector:even') //只要索引是偶数的那些
$('selector:gt(number)') //只要索引<number对的那些
$('selector:gt(number)') //只要索引<number对的那些

5.属性选择器

$('selector[attri]') //只要具有指定属性的那些
$('selector[attri!=attriValue]') //只要指定属性!=指定值的那些
$('selector[attri^=key]') //只要指定属性的值是以key开头的那些
$("selector[attri$=key]") //只要指定属性的值是以key结尾的那些
$('div[class*=key]')  //只要指定属性的值包含了text的那些

6.后代元素过滤

$('selector:first-child') //只要它是父元素的第一个子元素的那些
$('selector:last-child') //只要它是父元素的最后一个子元素的那些
$('selector:nth-child(number)') //只要那些是属于父元素中的第number个子元素的那些，number从1开始
$('selector:nth-child(even)')  //只要那些是属于父元素中的索引为偶数的子元素的那些
$('selector:nth-child(odd)') //只要那些是属于父元素中的索引为奇数的子元素的那些

表单过滤

表单元素状态选择器

$('selector:enabled') //只要未被禁用的那些
$('selector:disabled') //只要已被禁用的那些
$('selector:checked') //只要被cheked的那些
$('selector:selected') //只要被selected的那些

表单元数属性选择器

$('selector:radio') //只要单选框的那些
$('selector:file') //只要上传域的那些
$('selector:reset') //只要重置按钮的那些
$('selector:text') //只要单行文本框的那些
$('selector:image') //只要图像按钮的那些
$('selector:submit') //只要提交按钮的那些
$('selector:checkbox') //只要复选框的那些。
$('selector:hidden') //只要不可见的那些
$('selector:password') //只要密码文本框的那些
$('selector:input') //只要input、textarea、select、button的那些

方法选择

可以使用Jquery提供的函数对Jquery对象中的Dom元素进行进一步选择。

filter()

filter(selector | jqueryObj | domElm | fn)
//在Jquery对象上作进一步选择，返回一个已经进一步选择的结果集，一个Jquery对象
//fun：自定义的选择处理函数，迭代自动进行，每迭代一次自动调用函数进行选择判断

示例

$('div').filter('.box') //过滤出className为box的div元素
$('div').filter(":contains('佳能') , :contains('三星')") //过滤出包含了佳能或三星文本的div元素
$('div').filter(function () {
    return $(this).text() == 'a';//筛选出含有指定文字的div
});

is()

is(selector | jqueryObj | domElm | fn)
//在Jquery对象上作判断，返回一个布尔值，注意，filter函数返回的是Jquery对象
//fun：自定义的选择处理函数，迭代自动进行，每迭代一次自动调用函数进行判断      

　　

Javascript - 学习总目录