Javascript - Jquery选择器

Posted 2020-09-21

筛选（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 - 学习总目录