关于JQuery选择器的类型

简介:       JQuery选择器大概分为四大类:基本选择器,层次选择器,过滤选择器,表单选择器;一:基本选择器     基本选择器一般包括ID,元素名,类名,以及显示页面所有元素。

      JQuery选择器大概分为四大类:基本选择器,层次选择器,过滤选择器,表单选择器;

一:基本选择器

     基本选择器一般包括ID,元素名,类名,以及显示页面所有元素。前面三个都好理解,显示所有元素用$("*")即可,需要说明的一点,可以合并匹配元素,如

$("div ,span")表示选择div 和span 元素。


二:层次选择器

    DOM元素间的主要层次关系包括后代、父子、相邻、兄弟关系

例子: $("div span") 匹配div下面的所有span元素,

             $("div>span")匹配div的子元素span,

             $("div").next() 匹配div相邻的元素,也可以用$("div+next")表示,

            $("div").nextAll()匹配div之后的所有兄弟元素,也可以用$("div~siblingd)表示,需要说明的是,$("div").siblings("div")获取所有的相邻div元素。


三:过滤选择器

     过滤选择器根据过滤规则进行元素的匹配,书写时都以冒号(:)开头。

例子:

基本过滤器:$("li:first") 匹配第一个li元素,

           $("li:last")  匹配最后一个li元素,

           $("li:not(.Notclass)") 匹配除了类为Notclass的所有li元素,

           $('li:even")匹配所有索引值为偶数的li元素,

           $('li:odd")匹配所有索引值为奇数的li元素,

           $('li:eq(1)")匹配指定索引值得li元素,从0开始计数,

           $('li:gt(1)")匹配所有大于指定索引值的li元素,从0开始计数,

           $('li:lt(1)")匹配所有小于指定索引值的li元素,从0开始计数,

内容过滤器: $('div:contains('A')")匹配包含指定文本的div元素,区分大小写

           $('div:empty")匹配不包含元素或者文本的div元素,

           $('div:has(span)")匹配包含有span元素的div元素,

           $('div:parent")匹配含有子元素或者文本的div元素,

可见性过滤器: $("div:hidden")匹配所有隐藏的div元素,包括display=none,visibility=hidden,type=hidden,

           $("div:visible")匹配所有显示的div元素,

属性过滤器:属性过滤器包括'[]'

           $("div[title='A']")匹配title属性等于A的div元素,

           $("div[title!='A']")匹配title属性不等于A的div元素,

           $("div[title^='A']")匹配title属性为A开始的div元素,

           $("div[title$='A']")匹配title属性为A结束的div元素,

           $("div[title*='A']")匹配title属性包含有A的div元素,

           $("div[title='A'][name='B']")匹配title属性为A,同时name属性为B的div元素,

子元素过滤器:$("li:nth-child(4)")匹配li元素下的第四个子元素,

           $("li:first-child")匹配li元素下的第一个子元素,

           $("li:last-child")匹配li元素下的最后一个子元素,

           $("li:only-child")匹配只有一个子元素的li元素,

表单对象属性过滤选择器:$("input:enabled")匹配表单中所有属性可用的input元素,

           $("input:disabled")匹配表单中所有属性不可用的input元素,

           $("input:checked")匹配表单中所有被选中的input元素,

           $("option:selected")匹配表单中所有被选中的option元素


四:表单选择器

使用表单选择器,可以更加方便的、高效的使用表单,基本都是通过type类型确定

          :input  获取所有input、 textarea 、select元素,

          :text    获取所有单行文本框,

          :password 获取所有密码框,

          :radio 获取所有单选按钮,

          :checkbox 获取所有复选框,

          :submit 获取所有的提交按钮,

          :image 获取所有图像域,

          :reset 获取所有重置按钮,

          :button 获取所有按钮,

          :file 获取所有文件域

目录
相关文章
N..
|
7月前
|
JavaScript 前端开发 开发者
jQuery选择器
jQuery选择器
N..
46 1
|
2月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
30 2
|
3月前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
40 5
|
2月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器用于操作 HTML 元素,支持基于 id、类、类型、属性等条件选择元素。它扩展了 CSS 选择器的功能,并使用 $() 符号。例如,$("p") 选取所有段落元素,而 $("button").click(function(){ $("p").hide(); }) 实现点击按钮后隐藏所有段落。
|
6月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
35 0
|
6月前
|
JavaScript 前端开发 索引
jQuery的选择器与自带函数详解
jQuery的选择器与自带函数详解
|
3月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
3月前
|
JavaScript
jQuery 选择器
jQuery 选择器
25 3
|
3月前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
30 1
|
4月前
|
JavaScript 索引
jQuery的选择器有几种?
jQuery的选择器有几种?
36 1