<ul>
    <li>可见</li>
    <li style="display:none;">不可见</li>
</ul>
//不可见的li的内容 结果为不可见
jQuery("li:hidden").text();
//可见的li的内容 结果为可见
jQuery("li:visible").text();

jQuery拔取器使得拿到页面成分变得尤为便于、越发灵活,从而大大减轻了开发人士的压力

举例:

壹 、基本采用器
主导选用器包蕴5种选取器:#id、element、.class、*和selectorl,selector2.selectorN,上边将合营实例分别介绍每一种选拔器的功效及利用方法。
1.#id选择器(id选择器)
#id拔取器依照给定的ID匹配一个要素。假设选用器中富含特殊字符,可以用多少个斜杠转义。
2.element接纳器(标签接纳器)
element采用器是3个用来搜索的成分。指向DOM节点的标签名。相当于大家所说的价签选拔器
3.class选拔器(类拔取器)
.class接纳器按照给定的类匹配成分,是1个用以搜索的类。壹个因素得以有八个类,只要有三个相符就能被匹配到

 

4.属性过滤采用器
属性过滤选拔器是用来匹配包罗给定属性的成分,当然也可以匹配不包涵此属性的要素等。属性过滤采用器共包括以下7种选取器。
(1) [attribute]选择器。
(2)[attribute=value]、[attribute!=value]选用器(此处包括三种)。
(3)[attribute^=value]、[attribute$=value]、[attribute*=value]采用器(此处包涵三种)。
(4)[selector][selector2]选择器。
举例:

<input type="text" id="ID" value="根据ID选择" />
<a>根据元素名称选择</a>
<input type="text" class="classname" value="根据元素css类名选择" />
jQuery("#ID").val();
jQuery("a").text();
jQuery(".classname").val();

 

<div id="divTest">
    <ul>
        <li>投资</li>
        <li>理财</li>
        <li>成熟</li>
        <li>担当</li>
        <input type="radio" value="学习" checked="checked" />
        <input type="radio" value="不学习" />
    </ul>
</div>
//第一个li内容 结果为投资
jQuery("li:first").text();
//最后一个li内容 结果为担当
jQuery("li:last").text();
//input未被选中的值 结果为不学习
jQuery("li input:not(:checked)").val();
//索引为偶数的li 结果为投资 成熟
jQuery("li:even").text();
//索引为奇数的li 结果为理财 担当
jQuery("li:odd").text();
//索引大于2的li的内容 结果为担当
jQuery("li:gt(2)").text();
//索引小于1的li的内容 结果为投资
jQuery("li:lt(1)").text();
<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>
//得到div中的a标签内容 结果为12
jQuery("#divTest a").text();
//输出div直接子节点 结果为投资
jQuery("#divTest>input").val();
//输出id为next的后一个同级别元素 结果为担当
jQuery("#next+input").val();
//同上,并且是有title的元素 结果为学习
jQuery("#next~[title]").val();

 

举例:

 

4.*选用器(全局采用器)
*选料器多用于结合上下文来搜索,匹配全体因素的接纳器。
5.selector1,selector2,selectorN采取器(并集采取器)
这类采取器采纳器即将每3个抉择器匹配到的要素合并后壹只重返。你可以指定任意多个采纳器,并将匹配到的要素合并到三个结实内,相当于我们所说的并集采纳器

例如:

jQuery接纳器具有如下特征:
1.简化代码的编制
2.隐式迭代
3.不要判断目的是或不是留存

2.故事情节过滤拔取器 情节过滤采取着主要回顾:contains、:empty、:has、:parent
4种过滤器,这一部分过滤器是对上面介绍中央过滤采用器的贰个补偿,对于页面选拔、设置成分展现等方面宣布着至关紧要的效应。下边将对各选拔器举行详细的介绍。
(1):contains选择器。
(2):empty选择器。
(3):has选择器。
(4):parent选择器。

jQuery选用器就总括到那里,还有部分表单元素采纳器,那下面会在一而再再给我们补上!

3.可见性过滤选用器 可知性过滤拔取器相比不难,其含有二种选用器,重假诺用来合营全体可知成分和不可知元素。下边将会对那二种采用器进行详细介绍。
(1):hidden选择器。

<input type="text" name="hyipinvest" value="hyip投资" />
<input type="text" name="investhyip" value="投资hyip" />
<input type="text" name="google" value="HYIP" />
//name为hyipinvest的值 结果为hyip投资
alert(jQuery("input[name='hyipinvest']").val());
//name以hyip开始的值 结果为hyip投资
alert(jQuery("input[name^='hyip']").val());
//name以hyip结束的值 结果为投资hyip
alert(jQuery("input[name$='hyip']").val());
//name包含oo的值 结果为HYIP
alert(jQuery("input[name*='oo']").val());

(2):visible选择器。

<div id="Test">
    <ul>
        <li>hyip投资</li>
        <li>hyip</li>
        <li></li>
        <li>理财</li>
        <li><a>投资</a></li>
    </ul>
</div>   
//包含hyip的li的内容 结果为hyip投资 hyip
jQuery("li:contains('hyip')").text();
//内容为空的li的后一个li内容 结果为理财
jQuery("li:empty+li").text();
//包含a标签的li的内容 结果为投资
jQuery("li:has(a)").text();

③ 、过滤采用器
过滤采纳注主要通过特定的过滤规则来筛选出所急需的DOM成分,过滤规则与CSS中的伪类选用器语法相同,即选用器都是三个冒号开首。

1.中坚过滤采纳器 骨干过滤采纳器是过滤拔取器中最常用的一种,其利害攸关不外乎以下二种格局,在此做详细表明:
(1):first/:last选择器。
(2):not选择器。
(3):even和:odd选择器。
(4):eq:gt、:lt、选择器。
(5):header选择器。
(6):animated选择器。

 在jQuery中 $符号是相等于 jQuery的  所以
,大家为了方便一般都会一向写成 $()的款型

贰 、层级选取器 层级采纳器包涵5种方式:ancestor、descendant、parent
> child、prev + next和prev ~
siblings。上面合作实例分别详细介绍每个拔取器的意义及使用方法。
1.ancestor
descendant采取器(后代拔取器)

其指在给定的祖辈成分下匹配全体的后人成分,作为参数的ancestor代表任何有效的接纳器,而descendant则用于匹配元素的拔取器,并且它是率先个采用器的子孙。
2.parent>child采纳器(子集采纳器)
parent>child拔取器代表在给定的父成分下匹配全体的子成分。七个参数分别表示的意思如下:parent代表任何有效选拔器;child用以匹配元素的拔取器,并且它是率先个采纳器的子成分。
3.prev+next采用器(相邻成分选取器) 那类选拔器的效用是非常全数紧接在prev成分后的next成分。多个参数分别表示的意味如下:prev代表任何有效选拔器;next代表多少个使得采用器并且随着第3个选拔器。
4.prev ~
siblings采取器(同辈成分选拔器)

prev ~
siblings选取器代表匹配prev成分之后的全部siblings成分。多个参数分别表示的意趣如下:prev代表任何有效选拔器;siblings代表三个采纳器,并且它看做第1个选取器的同辈。

例如:

举例:

相关文章

网站地图xml地图