JQ基础之选择器
JQ选择器与CSS/CSS3选择器非常类似，对于学过CSS/CSS3的朋友来说可以是快速上手,下面总结了比较常用的选择器。
| ID选择器 | $('#one') ( '#'代表ID ) |
| CLASS选择器 | $('.two') ( '.'代表类 ) |
| 元素选择器 | $('ul') ( 选取'ul'标签 ) $('#one>span') |
| 属性选择器 | $('[class]') ( 所有具有'class'属性的元素 ) $('li[class]') ( 选中'li'下的具有'class'属性的元素 ) $('li[class="aaa"]') ( 选中'li'下'class'为'aaa'的元素 ) $('h3[class^="n"]') ( 选中'class'属性以"n"开头的 ) $('h3[class$="e"]') ( 选中class属性以"e"结尾的 ) |
| 查找匹配的元素 | $('li:first') ( 选取第一个出现的li元素 ) $('li:last') ( 选取最后一个出现的li元素 ) $(':header') ( 查找所有标题元素h1~h6 ) $('li:contains(小三)') ( 查找li中文本有'小三'的元素 ) $('li:first-child') ( 选取所有的第一个li 注:与:first不同 ) $('li:last-child') ( 选取所有的最后一个li 注:与:last不同 ) $('li:nth-child(n)') ( 选取第n个li元素 注: n>=1 ) $('ul li:only-child') ( 选取ul中只有一个li子元素的这个li元素 ) $(':input') ( 匹配所有的 input/textarea/select/button ) $result = $('li').hasClass('adsasa'); ( 检查当前的元素是否含有某个特定的类，如果有，则返回true ) $('ul li').filter('.three,.seven') ( 找出有类.three,.seven的元素 注:筛选出与指定表达式匹配的元素集合 ) $('li').is('.five122313') ( 检测有无指定的元素 返回布尔 注:不可用is检测给元素添加样式 ) $('p').has('span') ( 检测p元素里有无指定元素 注:可以给其添加样式 ) $('li').not('li:contains(上)') ( not检测 选择li元素里除了文本包含'上'的元素 ) slice(n,m) ( n和m为下标，选择下标为0开始 到 m之前结束(不包括m)的元素 ) $('#one').children('li:first').css( ) ( 给元素的指定子元素添加样式 ) $('.one').parent( ).css( ) ( 给元素的父元素添加样式 ) $('.one').parents( ).css( ) ( 给元素所有祖先元素添加样式 ) $('.one').parents('ul').css( ) ( 给元素指定的父元素添加样式 ) $('.five').siblings( ).css() ( 同级相邻兄弟节点 siblings( ) ) var $res = $('li').map(function(){ $('#one').find('li[class$=e]').css( ) ( 查找指定元素下匹配的元素 返回找到的元素 ) |
| 排除选择器 | $('li:not(.b)') ( 选择除了类名为b的元素 ) $('li:not(#one,#two,.aaa)') ( 同时排除多个 ) |
| 奇偶选择器 | $('li:even') ( 选取偶数 注:下标为0开始 ) $('li:odd') ( 选取奇数 ) |
| 大于小于等于 | $('li:gt(0)') ( 选取下标大于0的li元素 ) $('li:lt(3)') ( 选取下标小于0的li元素 ) $('li:eq(0)') ( 选取下标等于0的li元素 ) 注:不包括本身。 |
| 可见选择器 | $(':visible') ( 选取所有可见的元素 ) $('input:hidden') ( 选取input表单为hidden的元素 ) |
| 关系选择器 | $('.two').next( ) ( 选中下面一个相邻元素 ) $('.two').nextAll( ) ( 选中元素下面的所有相邻元素 ) $('.five').prev( ) ( 选取元素上一个相邻元素 ) $('.five').prevAll( ) ( 选取元素上面全部相邻元素 ) $('.five').prevUntil('.two') ( 选取.five上面(不包括.five)到.two(不包括.two)的元素 ) |
| 伪类选择器 | $('*:focus') ( 获取所有聚焦的元素 ) $(':selected') ( 获取下拉列表选中的元素 ) $(':checked+span') ( 获取选中的元素 ) |
| 表单选择器 | $(':input') ( 匹配所有的input textarea select button ) $(':text') ( 匹配单行文本框 ) $(':password') ( 密码匹配器 ) $(':radio') ( 单选框选择器 ) $(':checkbox+span') ( 复选框选择器 ) $(':button') ( 按钮选择器 ) |
JQ选择器与CSS/CSS3选择器非常类似，对于学过CSS/CSS3的朋友来说可以是快速上手,下面总结了比较常用的选择器。
| ID选择器 | $('#one') ( '#'代表ID ) |
| CLASS选择器 | $('.two') ( '.'代表类 ) |
| 元素选择器 | $('ul') ( 选取'ul'标签 ) $('#one>span') |
| 属性选择器 | $('[class]') ( 所有具有'class'属性的元素 ) $('li[class]') ( 选中'li'下的具有'class'属性的元素 ) $('li[class="aaa"]') ( 选中'li'下'class'为'aaa'的元素 ) $('h3[class^="n"]') ( 选中'class'属性以"n"开头的 ) $('h3[class$="e"]') ( 选中class属性以"e"结尾的 ) |
| 查找匹配的元素 | $('li:first') ( 选取第一个出现的li元素 ) $('li:last') ( 选取最后一个出现的li元素 ) $(':header') ( 查找所有标题元素h1~h6 ) $('li:contains(小三)') ( 查找li中文本有'小三'的元素 ) $('li:first-child') ( 选取所有的第一个li 注:与:first不同 ) $('li:last-child') ( 选取所有的最后一个li 注:与:last不同 ) $('li:nth-child(n)') ( 选取第n个li元素 注: n>=1 ) $('ul li:only-child') ( 选取ul中只有一个li子元素的这个li元素 ) $(':input') ( 匹配所有的 input/textarea/select/button ) $result = $('li').hasClass('adsasa'); ( 检查当前的元素是否含有某个特定的类，如果有，则返回true ) $('ul li').filter('.three,.seven') ( 找出有类.three,.seven的元素 注:筛选出与指定表达式匹配的元素集合 ) $('li').is('.five122313') ( 检测有无指定的元素 返回布尔 注:不可用is检测给元素添加样式 ) $('p').has('span') ( 检测p元素里有无指定元素 注:可以给其添加样式 ) $('li').not('li:contains(上)') ( not检测 选择li元素里除了文本包含'上'的元素 ) slice(n,m) ( n和m为下标，选择下标为0开始 到 m之前结束(不包括m)的元素 ) $('#one').children('li:first').css( ) ( 给元素的指定子元素添加样式 ) $('.one').parent( ).css( ) ( 给元素的父元素添加样式 ) $('.one').parents( ).css( ) ( 给元素所有祖先元素添加样式 ) $('.one').parents('ul').css( ) ( 给元素指定的父元素添加样式 ) $('.five').siblings( ).css() ( 同级相邻兄弟节点 siblings( ) ) var $res = $('li').map(function(){ $('#one').find('li[class$=e]').css( ) ( 查找指定元素下匹配的元素 返回找到的元素 ) |
| 排除选择器 | $('li:not(.b)') ( 选择除了类名为b的元素 ) $('li:not(#one,#two,.aaa)') ( 同时排除多个 ) |
| 奇偶选择器 | $('li:even') ( 选取偶数 注:下标为0开始 ) $('li:odd') ( 选取奇数 ) |
| 大于小于等于 | $('li:gt(0)') ( 选取下标大于0的li元素 ) $('li:lt(3)') ( 选取下标小于0的li元素 ) $('li:eq(0)') ( 选取下标等于0的li元素 ) 注:不包括本身。 |
| 可见选择器 | $(':visible') ( 选取所有可见的元素 ) $('input:hidden') ( 选取input表单为hidden的元素 ) |
| 关系选择器 | $('.two').next( ) ( 选中下面一个相邻元素 ) $('.two').nextAll( ) ( 选中元素下面的所有相邻元素 ) $('.five').prev( ) ( 选取元素上一个相邻元素 ) $('.five').prevAll( ) ( 选取元素上面全部相邻元素 ) $('.five').prevUntil('.two') ( 选取.five上面(不包括.five)到.two(不包括.two)的元素 ) |
| 伪类选择器 | $('*:focus') ( 获取所有聚焦的元素 ) $(':selected') ( 获取下拉列表选中的元素 ) $(':checked+span') ( 获取选中的元素 ) |
| 表单选择器 | $(':input') ( 匹配所有的input textarea select button ) $(':text') ( 匹配单行文本框 ) $(':password') ( 密码匹配器 ) $(':radio') ( 单选框选择器 ) $(':checkbox+span') ( 复选框选择器 ) $(':button') ( 按钮选择器 ) |