jquery常用过滤选择器
- ????过滤选择器主要是通过特定的过滤规则来筛选出所需的?DOM?元素,过滤规则与?CSS?中的伪类选择器语法相同,即选择器都可以一个冒号(:)开头。按照不同的过滤规则,过滤选择器可以分为基本过滤选择器,内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器 ??1.?基本过滤选择器? ?? ??选择器? ???描述? ???返回? ???示例? ??? ??:first? ???选取第一个元素? ???单个元素? ???$(“div:first”)?选取所有?<div>?元素中第一个?<div>?元素? ??? ??:last? ???选取最后一个元素? ???单个元素? ???$(“div:last”)?选取所有?<div>?元素中最后一个?<div>?元素? ??? ??:not(selector)? ???去除所有与给定选择器匹配的元素? ???集合元素? ???$(“input:not(.myClass)”)?选取?class?不是?myClass?的?<input>?元素? ?? ? ??:even? ???选取索引是偶数的所有元素,索引从?0?开始? ?? ?集合元素? ???$(“input:even”)?选取索引是偶数的?<input>?元素? ??? ??:odd? ???选取索引是奇数的所有元素,索引从?0?开始? ?? ?集合元素? ???$(“input:odd”)?选取索引是奇数的?<input>?元素? ??? ??:eq(index)? ???选取索引等于?index?的元素(?index?从?0?开始)? ?? ?集合元素? ???$(“input:eq(1)”)?选取索引等于?1?的?<input>?元素? ?? ? ??:gt(index)? ???选取索引大于?index?的元素(?index?从?0?开始)? ?? ?集合元素? ???$(“input:gt(1)”)?选取索引大于?1?的?<input>?元素(注:大于?1?,而不包括?1?)? ?? ? ??:lt(index)? ???选取索引小于?index?的元素(?index?从?0?开始)? ?? ?集合元素? ???$(“input:lt(1)”)?选取索引小于?1?的?<input>?元素(注:小于?1?,而不包括?1?)? ?? ? ??:header? ???选取所有的标题元素,例如?h1,h2,h3?等等? ???集合元素? ???$(“:header”)?选取网页中所有的?<h1>?,?<h2>?,?<h3>?……? ??? ??:animated? ???选取当前正在执行动画的所有元素? ???集合元素? ???$(“div:animated”)?选取当前正在执行动画的?<div>?元素? ??? ?????? ????2?.内容过滤选择器? ?? ??选择器? ???描述? ???返回? ???示例? ??? ??:contains(text)? ???选取含有文本内容为“?text?”的元素? ???集合元素? ???$(“div:contains(‘?我?”)”)?选取含有文本“我”的?<div>?元素? ??? ??:empty? ???选取不包含子元素或者文本的空元素? ???元素集合? ???$(“div:empty”)?选取不包含子元素(包括文本元素)的?<div>?元素? ??? ??:has(selector)? ???选取含有选择器所匹配的元素的元素? ???元素集合? ???$(“div:has(p)”)?选取含有?<p>?元素的?<div>? ??? ??:parent? ???选取含有子元素或者文本的元素? ???元素集合? ???$(“div:parent”)?选取拥有子元素(包括文本元素)的?<div>? ??? ?????? ????3?.可见性过滤选择器? ?? ??选择器? ???描述? ???返回? ???示例? ??? ???? ?????? ?????? ????:hidden? ????? ?????? ?????? ????选取所有不可见的元素? ????? ?????? ?????? ????集合元素? ???$(“:hidden”)?选取所有不可见的元素,包括?<input?type=”hidden”/>?,?<div?style=”display:none;”>?和?<div?????style=”visibility:hidden;”>?等元素,如果只想选取?<input>?元素,可以使用?$(“input:hidden”)? ??? ??:visible? ???选取所有可见元素? ???集合元素? ???$(“div:visible”)?选取所有可见的?<div>? ??? ?????? ????4?.属性过滤选择器? ?? ??选择器? ???描述? ???返回? ???示例? ??? ??[attribute]? ???选取拥有此属性的元素? ???集合元素? ???$(“div[id]”)?选取拥有属性?id?的元素? ??? ??[attribute=value]? ???选取属性的值为?value?的元素? ???集合元素? ???$(“div[title=test]”)?选取属性?title?为“?test?”的?<div>?元素? ??? ??[attribute!=value]? ???选取属性的值不等于?value?的元素? ???集合元素? ???$(“div[title!=test]”)?选取属性?title?不等于“?test?”的?<div>?元素(注:没有属性?title?的?<div>?元素也会被选取)? ??? ??[attribute^=value]? ???选取属性的值以?value?开始的元素? ???集合元素? ???$(“div[title^=test]”)?选取属性?title?以“?test?”开头的?<div>?元素? ??? ??[attribute$=value]? ???选取属性的值以?value?结尾的元素? ???集合元素? ???$(“div[title$=test]”)?选取属性?title?以“?test?”结束的?<div>?元素? ??? ??[attribute*=value]? ???选取属性的值含有?value?的元素? ???集合元素? ???$(“div[title$=test]”)?选取属性?title?含有“?test?”的?<div>?元素? ??? ??[selector1][selector2][selector]? ???用属性选择器合并成一个复合的属性选择器,满足多个条件。没选取一次,缩小一次范围? ???集合元素? ???$(“div[id][title$=’test’]”)?选取拥有属性?id?,并且属性?title?以“?test?”结束的?<div>?元素? ??? ?????? ????5?.子元素过滤选择器? ?? ??选择器? ???描述? ???返回? ???示例? ??? ??:nth-child? ????(index/even/odd/equation)? ???选取每个父元素下的第?index?个子元素或者奇(?odd?)偶(?even?)元素,(?index?从?1?开始)? ?? ?集合元素? ???:eq(index)?只匹配一个元素,而?:nth-child?将为每一个父元素匹配子元素,并且?:nth-child(index)?的?index?是从?1?开始的,而?:eq(index)?是从?0?开始的? ?? ? ??:first-child? ???选取每个父元素的第一个子元素? ???集合元素? ???:first?只返回单个元素,而?:first-child?将为每个父元素匹配第一个子元素。? ????例如:?$(“ul?li:first-child”)?选取每个?<ul>?中第一个?<li>?元素? ??? ??:last-child? ???选取父元素的最后一个子元素? ???集合元素? ???:last?只返回单个元素,而?:last-child?将为每个父元素匹配最后一个子元素。? ????例如:?$(“ul?li:last-child”)?选取每个?<ul>?中最后一个?<li>?元素? ??? ??:only-child? ???如果某个元素的它父亲中唯一的子元素,那么将会被匹配,如果父元素中含有其他元素,则不会被匹配? ???集合元素? ???$(“ul?li:only-child”)?在?<ul>?中选取是唯一子元素的?<li>?元素? ??? ?????? ?????? ?????? ????6?.表单对象属性过滤选择器? ?? ??选择器? ???描述? ???返回? ???示例? ??? ??:enabled? ???选取所有可用元素? ???集合元素? ???$(“#form1?:enabled”)?选取?id?为“?form1”?的表单中所有可用元素? ??? ??:disabled? ???选取所有不可用元素? ???集合元素? ???$(“#form1?:disabled”)?选取?id?为“?form1”?的表单中所有不可用元素? ??? ??:checked? ???选取所有被选中的元素(单选框,复选框)? ???集合元素? ???$(“input?:checked”)?选取所有被选中的?<input>?元素? ??? ??:selected? ???选取所有被选中的选项元素(下拉列表)? ???集合元素? ???$(“select?:selected”)?选取所有被选中的选项元素? ??? ?????? ????改变表单内可用?<input>?元素的值,代码如下:? ????$(“form1?input:enabled”).val(“?这里的值改变了?”);? ????获取多选框选中的个数,代码如下:? ????$(“input?:?checked?”).length;? ????获取下拉框选中的内容,代码如下:? ????$(“select:selected”).text();? ????同理,其他对象属性选择器的操作与此类似? ?????? ?????? ????7?.表单对象属性过滤选择器? ?? ??选择器? ???描述? ???返回? ???示例? ??? ??:input? ???选取所有的?<input>,<textarea>,? ????<select>,<button>?元素? ???集合元素? ???$(“:input)?选取所有的?<input>,<textarea>,<select>,? ????<button>?元素? ??? ??:text? ???选取所有的单行文本框? ???集合元素? ???$(“:text”)?选取所有的单行文本框? ??? ??:password? ???选取所有的密码框? ???集合元素? ???$(“:password”)?选取所有的密码框? ??? ??:radio? ???选取所有的单选框? ???集合元素? ???$(“:radio”)?选取所有的单选框? ??? ??:checkbox? ???选取所有的多选框? ???集合元素? ???$(“:checkbox”)?选取所有的多选框? ??? ??:submit? ???选取所有的提交按钮? ???集合元素? ???$(“:submit”)?选取所有的提交按钮? ??? ??:image? ???选取所有的图形按钮? ???集合元素? ???$(“:image”)?选取所有的图形按钮? ??? ??:reset? ???选取所有的重置按钮? ???集合元素? ???$(“:reset”)?选取所有的重置按钮? ??? ??:button? ???选取所有的按钮? ???集合元素? ???$(“:button”)?选取所有的按钮? ??? ??:file? ???选取所有的上传域? ???集合元素? ???$(“:file”)?选取所有的上传域? ??? ??:hidden? ???选取所有的不可见元素? ???集合元素? ???$(“:hidden”)?选取所有的不可见元素? ??? ?????? ????得到表单内表单元素的个数,代码如下:? ????$(“form1?:input”).length;? ????得到表单内单行文本的个数,代码如下:? ????$(“form1?:text”).length;? ????得到表单内密码框的个数,代码如下:? ????$(“form1?:password”).length;? ????同理,其他表单选择器的操作与此类似???