选择器和过滤器

经过一个晚上的搜索和整理,终于有了一套最全面的jQuery选择过滤方法。

第一个HTML代码

复制代码代码如下所示:

HTML代码













































































选项

选择2

选择3















你好世界!







JS代码

1.dom对象和jQuery包装集

1、DOM对象或DOM对象集是通过document.getelementbyid(),document.getelementsbyname()等。前者接受对象,后者获取DOM对象集。

复制代码代码如下所示:

无功text11_dom = document.getelementbyid(文本11 );

无功text11_dom = document.getelementsbyname(文本11){ 0 };

无功text11_dom = document.all.text11; / /这里文本11可以名称值是ID值

无功text11_dom =文件。所有{ 10 };



2。如果jQuery提供的函数首先由jQuery包装器构造,则jQuery包装器由$()返回。

复制代码代码如下所示:

无功text11_jquery = $(#文本11 );



2.jquery包装集和DOM对象彼此交谈

1.dom不能使用jQuery对象的属性的方法,但是DOM对象可以被转换成一个jQuery包装(美元)

复制代码代码如下所示:

无功text11_dom = document.getelementbyid(文本11 );

无功text11_jquery = $(text11_dom);



2.jquery包装可以使用一些属性方法的DOM对象,例如,长度,但也有一些个人属性的方法,不能用,这样的as.value。通过在jQuery包装集上添加括号和索引值,可以获得相应的DOM对象。

复制代码代码如下所示:

无功text11_dom = $(#文本11){ 0 };



三.这也是每个循环或触发事件时的DOM对象。

复制代码代码如下所示:

$(#文本11)。Click(function(){)

无功text11_dom_value = this.value;

警报(text11_dom_value);

});



$ 3符号表示jQuery中对jQuery对象的引用,jQuery的核心方法有四

1.jquery(html {,ownerdocument }):动态创建基于原始的HTML字符串的DOM元素

复制代码代码如下所示:

$()hello!)。AppendTo(体);



2.jquery(元素):封装了一个或多个DOM对象作为一个jQuery包装,即上述的DOM对象转换为jQuery包装集

3.jquery(回调):$(document)的速记法。Ready()

复制代码代码如下所示:

$(函数(){())

警告(你好)!;

});



4.jquery(选择器{,上下文}):找到合格的jQuery包装在指定的范围内,背景是查找的范围,语境可以DOM对象集合,或者jQuery包装集。

找到设置的ID标签在所有TR标签文本11元jQuery包装

复制代码代码如下所示:

text11_query = $(var#文本11



=================== =================== jQuery选择器

1。基本选择器的基础

1。选择标签名称

复制代码代码如下所示:

无功input_query = $(输入);



2。根据id值选择

复制代码代码如下所示:

无功text11_query = $(#文本11 );



三.according to the class value

复制代码代码如下所示:

无功text11_query = $(。文字11 );



4。同时,选择多个符合jQuery包集、数字分离条件

复制代码代码如下所示:

无功text_query = $(#文本11,。文字12 );



5。选择所有DOM元素

复制代码代码如下所示:

无功all_query = $(*);



2。选择层次水平

1。把以下所有tr标签文本11 ID值

复制代码代码如下所示:

无功text11_query = $(TR #文本11 );



2。把所有的子元素都TD标签下直接输入

复制代码代码如下所示:

无功input_query = $(TD >输入);



三.ID为文本11元为button11元后得到的类,只得到一个合格的element.text11和button11在地位相同的水平

复制代码代码如下所示:

无功button11_query = $(#文本11 +。button11 );



4。把所有的元素后面的元素的ID是button11文本11

复制代码代码如下所示:

无功button11_query = $(#文本11 ~。button11 );



三.基本滤波器

1。获取第一个输入元素

复制代码代码如下所示:

无功input_query = $(输入:第一);



2。获取最后一个输入元素

复制代码代码如下所示:

无功input_query = $(输入:最后的);



三.获取所有未选定的输入元素

复制代码代码如下所示:

无功input_query = $(输入:不(:检查));



4。第一个输入元素是一个,查找所有奇数个输入元素。

复制代码代码如下所示:

无功input_query = $(输入:即使);



5。从第二个输入中,查找所有输入元素的偶数。

复制代码代码如下所示:

无功input_query = $(输入:奇);



6。查找输入元素,索引为1,索引值为0。

复制代码代码如下所示:

无功input_query = $(输入:情商(1));



7。查找具有大于0的索引的所有输入元素

复制代码代码如下所示:

无功input_query = $(输入:GT(0));



8。查找索引小于2的所有输入元素

复制代码代码如下所示:

无功input_query = $(输入:LT(2));



9。获取页面的所有标题元素

复制代码代码如下所示:

无功h_query = $(:头);



10。获取所有执行动画效果的元素。

复制代码代码如下所示:

无功animated_query = $(:动画);



4。内容过滤内容过滤器

1。查找所有包含Hello World的HTML内容!H1元素

复制代码代码如下所示:

h1_query = $(varH1:包含('Hello World!);



2。让所有的td元素不包含sublabels或HTML内容是空的

复制代码代码如下所示:

无功td_query = $(TD:空);



三.找到所有的td元素输入的子元素

复制代码代码如下所示:

无功td_query = $(TD:有(输入));



4。找到所有的td元素与sublabels或HTML内容

复制代码代码如下所示:

无功td_query = $(TD:父);



5。可见性过滤器

1。查找所有隐藏的输入元素

复制代码代码如下所示:

无功input_query = $(输入:隐藏);



2。查找所有可见的输入元素

复制代码代码如下所示:

无功input_query = $(输入:可见);



6。属性过滤器属性过滤器

1。用id属性查找所有输入元素

复制代码代码如下所示:

无功input_query = $(输入{id} );



2。发现输入元素和文本11名值

复制代码代码如下所示:

无功input_query = $(输入{名称= 'text11});



三.找到这个名字的价值并不等于所有文本11输入元素

复制代码代码如下所示:

input_query = $(var输入{姓名!= 'text11});



4。在文本值的开头用name值查找输入元素。

复制代码代码如下所示:

无功input_query = $(输入{名称中^ =});



5。查找所有以11结束name值的输入元素。

复制代码代码如下所示:

无功input_query = $(输入{名称=});



6。在名称值中查找所有的输入元素

复制代码代码如下所示:

无功input_query = $(输入{姓名* = 'ext});



7。查找包含id属性的所有输入元素,并在名称值中包含扩展名。

复制代码代码如下所示:

无功input_query = $(输入{id} {姓名* = 'ext});



7。子元素过滤子滤波器

1。查找父元素中所有子元素中的所有第二个输入元素。

第n个子()的参数是可选的。甚至计算这里的偶数。奇数这里是奇数。n是任意数。那就是选择所有带有父元素的输入元素。在输入的前几个元素中直接选择数字,并计算第一个输入元素。

复制代码代码如下所示:

无功input_query = $(输入:nth-child(2));



2。在父元素中查找所有子元素中的所有第一个输入元素

复制代码代码如下所示:

无功input_query = $(输入:第一个孩子);



三.在父元素中查找所有子元素中的所有最后输入元素

复制代码代码如下所示:

无功input_query = $(输入:最后一个孩子);



4。查找父元素中唯一的子元素的所有输入元素。

复制代码代码如下所示:

无功input_query = $(输入:唯一的孩子);



8。形式的选择形式

1。查找所有输入元素

复制代码代码如下所示:

无功input_query = $(:输入);



2。查找所有文本框元素

复制代码代码如下所示:

无功text_query = $(:文本);



三.查找所有密码框元素

复制代码代码如下所示:

无功password_query = $(:密码);



4。找到所有的复选框

复制代码代码如下所示:

无功checkbox_query = $(:复选框);



5。查找所有提交按钮元素

复制代码代码如下所示:

无功submit_query = $(:提交);



6。找到所有的图像域元素

复制代码代码如下所示:

无功image_query = $(:图像);



7。查找所有重置按钮元素

复制代码代码如下所示:

无功reset_query = $(:复位);



8。查找所有按钮元素

复制代码代码如下所示:

无功button_query = $(:按钮);



9。查找所有文件域元素

复制代码代码如下所示:

无功file_query = $(:文件);



9。表单筛选器表单筛选器

1。查找所有可用的输入元素

复制代码代码如下所示:

无功input_query = $(输入:启用);



2。查找所有不可用的输入元素

复制代码代码如下所示:

无功input_query = $(输入:禁用);



三.查找所有选中的单选复选框

复制代码代码如下所示:

无功input_query = $(输入:检查);



4。查找所有选定的下拉框

复制代码代码如下所示:

无功option_query = $(选项:选择);