Jquery基础之选择器

  选择器是JQuery的根基,在JQuery中对事件处理、选择遍历Dom、ajax操作都依赖选择器。JQuery选择器分为基本选择器、层次选择器、过滤选择器、表单选择器。

  一、基本选择器

  1、ID选择器$("#ID")

    页面中每个ID是唯一的,ID选择器选择每个ID元素,如下方法如下:$("#ID");例:$("#tbxName")这个方法选择id=tbxName的页面元素。选择结果为单个元素。

  2、类选择器$(".class")

    据给定的类匹配查找元素,类选择器选择页面中样式类定义为要查找类的元素,方法如下:$(".class");例:$(".mini")这个方法选择类定义为mini的页面元素集合。

选择结果为元素集合。

  3、元素选择器$("element")

    根据元素类型选择对应的元素集合。元素选择器选择页面中给定元素名匹配的所有元素,方法如下:$("div");例:$("div")这个方法选择页面中所有div元素的集合。

选择结果为元素集合。

  4、多个元素选择器$("selector1,selector2,...,selectorN")

    将每一个选择器匹配到的元素合并后一起返回。可以指定任意多个选择器,并将匹配到的元素合并到一个结果内,方法如下:$("selector1,selector2,...,selectorN");

例:$("div,#two,.one")这个方法查找页面中所有div元素,id=two的页面元素和class=one的元素,并将结果以集合的形式返回。选择结果为元素集合。

  5、所有元素选择$("*)

    选择页面中的所有元素,多用于结合上下文来搜索。方法如下:$("*");例:$("*")这个方法选择页面中所有元素的集合。选择结果为元素集合。

  二、层次选择器

  1、后代元素选择器$("ancestor descandent
")
    

    在给定的祖先元素下匹配所有的后代元素,就是在祖先元素节点中查找符合匹配的所有后代元素【子节点,孙节点、重孙节点等】,方法如下:$("ancestor descandent
");

例:$("body div")这个方法查找body的所有的div元素,返回结果是元素集合。

  2、子元素选择器$("parent > child")

    在给定的交节点中查找子节点元素,只查找匹配的子节点元素【只能是子节点】,方法如下:$("parent
> child");例:$("body > div")这个方法查找body中的子div元素,

返回结果是元素集合。

  3、紧邻下个元素选择器$("prev + next")

    在给定的节点后的兄弟元素中查找指定的元素,查找指定节点的兄弟元素中与节点紧邻且匹配的一个元素,方法如下:$("prev
+ next");例:$(".one + div")这个方法查找

类为one的元素后的兄弟元素中紧邻的div元素,返回结果是元素集合。

    PS:可以使用next()方法替代该方法,替代形式如下:$("prev").next("next");改写上面的例子为$(".one").next("div");返回结果为元素集合。

  4、紧邻兄弟元素选择器$("prev ~ slibing")

    指定节点后的所有兄弟元素,查找指定的节点后的兄弟元素中所有匹配的兄弟元素,方法如下:$("prev ~
slibing");例:$("#two ~div")这个方法查找id=two元素的所有兄

弟节点中的div元素,返回结果是元素集合。

    PS:可以使用NextAll()方法替代该方法,替代形式如下:$("prev").ntextAll("next");改写上面的例子为$("#two").nextAll("div");返回结果为元素集合。使用siblings()方法

可以查找元素的同辈元素,方法如下:$("prev").siblings("siblings");例:$("#two").siblings("div")这个方法查找id=two元素的所有同辈div元素,返回结果是元素集合。

  三、过滤选择器

  过滤选择器根据特定的选择规则选择Dom元素,根据选择不同的过滤规则可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

  1.)基本过滤


    1、取第一个元素$("selector:first")

      选择指定元素中的第一个元素,方法如下:$("selector:first");例:$("div:first")这个方法查找所有div中的第一个元素是单一元素,返回结果是单个元素。

    2、取最后一个元素$("selector:last")

      选择指定元素中的最后一个元素,方法如下:$("selector:last");例:$("div:last")这个方法查找所有div中的最后一个单一元素,返回结果是单个元素。

    3、not选择器$("selector:not(selector2)")

      not选择器去除所有和selector2匹配的元素,最终结果是取所有不和selector2匹配的元素集合,方法如下:$("selector:not(selector2)");例:$("div:not(.mini)")

这个方法结果是取div中所有样式类不是mini的元素,返回结果是元素集合。

    4、取偶数元素$("selector:even")

      取索引是偶数的所有元素,索引丛0开始计数,返回结果是所有偶数索引的元素,方法如下:$("selector:even");例:$("input:even")这个方法结果是取input中偶数的

所有input元素,返回结果是元素集合。

      5、取奇数元素$("selector:odd")

      取索引是奇数的所有元素,索引丛0开始计数,返回结果是所有奇数索引的元素,方法如下:$("selector:odd");例:$("input:odd")这个方法结果是取input中奇数的所有input元素,返回结果是元素集合。

    6、取索引值所在位置的元素$("selector:eq(index)")

      取索引值所在位置排序的元素用于获得选择器中某个位置的元素,索引值index丛0开始计数,返回索引等于index的元素,方法如下:$("selector:eq(index)");例:$("div:eq(1)")这个方法返回结果是div中结果是索引值为1的元素,返回结果是单个元素。

    7、选择索引值大于索引的元素$("selector:gt(index)")

      选择索引值大于index的元素,index丛0开始计数,返回索引大于index的元素集合,方法如下:$("selector:gt(index)");例:$("div:gt(2)")这个方法返回索引值大于2的元素的集合,返回结果是元素集合。

    8、选择索引值小于索引的元素$("selector:lt(index)")

      选择索引值小于index的元素,index丛0开始计数,返回索引小于index的元素集合,方法如下:$("selector:lt(index)");例:$("div:lt(2)")这个方法返回索引值小于2的元素的集合,返回结果是元素集合。

    9、标题元素选择器$(":header")

      标题元素选择器选择所有标题元素,方法如下:$(":header");例:$(":header")这个方法选择页面中所有的标题元素,返回结果是元素集合。

    10、正在执行动画选择器$("selector:animated")

      选取当前正在执行动画的元素,方法如下:$("selectro:animated");例:$("div:animated")这个方法选择div中正在执行动画的元素,返回结果是元素集合。

  2.)内容过滤


    1、含有内容选择器$("selector:contains(text)")

      选取selector中含有文本内容为text的元素.方法如下:$("selector:contains(text)");例:$("div:contains(di)")这个方法选取包含内容为di的div元素,返回结果是元素集合。

    2、空元素选择器$("selector:empty")

      选取selector中不包含子元素或者内容为空的元素,方法如下:$("selector:empty");例:$("div:empty")这个方法选取内容为空或者不任何子元素的div元素,返回结果是元素集合。

    3、含有选择器匹配元素选择器$("selector:has(selector2)")

      选取selector中包含有selector2的元素,方法如下:$("selector:has(selector2)");例:$("div:has(p)")这个方法选取内容中包含元素<p>节点的元素,返回结果是元素集合。

    4、选择拥有子元素或者文本的选择器$("selector:parent")

      选取selector中含有子元素或者文本的元素,方法如下:$("selector:parent");例:$("div:parent")这个方法选取拥有子元素的div元素,返回结果是元素集合。

  3.)可见性过滤

      可见性过滤根据元素的可见或者不可见性来选择对应的元素。

    1、可见性选择$("selector:visible")

      可见性选择是选择selector中可见的元素,方法如下:$("selector:visible");例:$("div:visible")这个方法选取可见的div元素的集合,返回结果是元素集合。

    2、不可见性选择$("selector:hidden")

      不可见性选择是选择selector中不可见的元素,方法如下:$("selector:hidden");例:$("div:hidden")这个方法选取不可见的div元素的集合,返回结果是元素集合。

      PS:此处hidden不仅仅包括样式dispaly:none,也包括文本隐藏域<input
type=hidden />和visible=false这样的元素。

  4.)属性过滤

      属性过滤选择器是通过元素的属性来选取相应的元素。

    1、属性名选择器$("[attribute]")

      属性名选择器选择属性中包含有某个属性名称的元素,方法如下:$("selector[attribute]");例:$("div[id]")这个方法选择有属性id的div元素,返回结果是元素集合。

    2、属性值选择器$("[attribute=value]")

      属性值选择器选择属性中包含属性名和值的元素,方法如下:$("selector[attribute=value]");例:$("div[title=test]")这个方法选择属性名为title且属性对应的属性值为test的div元素,返回结果是元素集合。

    3、属性值不为待查值选择器$("[attribute!=value")

      属性值不为待查值的属性,方法如下:$("selector[attribute!=value]");例:$("div[title!=test]")这个方法选择属性名为title且属性对应的属性值不为test的div元素,返回结果是元素集合。

    4、属性值以待查值开始选择器$("[attribute^=value]")

      属性值以待查值开始选择器用于选取属性值以待查值开头的元素,方法如下:$("selector[attribut^=value]");例:$("div[id^=te]")这个方法选择属性名称为id且属性值以te开头的元素,返回结果是元素集合。  

    5、属性值以待查值结束选择器$("[attribute$=value]")

      属性值以待查值结束选择器用于选取属性值以待查值结尾的元素,方法如下:$("selector[attribut$=value]");例:$("div[id$=st]")这个方法选择属性名称为id且属性值以st结尾的元素,返回结果是元素集合。

    6、属性值含有待查值选择器$("[attribute*=value]")

      属性值含有待查值选择器用于选取属性值含有待查值的元素,方法如下:$("selector[attribut*=value]");例:$("div[id*=st]")这个方法选择属性名称为id且属性值含有st的元素,返回结果是元素集合。

    7、多属性选择器$("selector[attribute][attribute=value],...,[attribute^=value])

      多属性选择器根据多个属性选择元素,每次根据属性缩小选择选择范围,最后选取符合全部属性的元素集合,方法如下:$("selector[attribute][attribut1=value1]");例:$("div[id][title*=es]")这个方法选择属性名中含有id且属性title值中含有es的div元素集合,返回结果是元素集合。

  5.)子元素过滤

    子元素过滤选择器用于选择父元素中的符合查找条件的子元素。

    1、第一个子元素选择器$("selector:first-child")

      第一个子元素选择器用于选择父元素中第一个子元素,方法如下:$("selector:first-child");例:$("ul
li:first-child")这个方法返回ul元素集中第一个li子元素,返回结果是元素集合。

      PS:基本内容选择器first选取是的第一个元素,返回结果是单个元素,first-child返回的是每个父元素中第一个子元素,返回结果是元素集合。

    2、最后一个元素选择器$("selector:last-child")

       最后一个子元素选择器用于选择父元素中最后一个子元素,方法如下:$("selector:last-child");例:$("ul
li:last-child")这个方法返回ul元素集中最后一个li子元素,返回结果是元素集合。

      PS:基本内容选择器last选取是的最后一个元素,返回结果是单个元素,last-child返回的是每个父元素中最后一个子元素,返回结果是元素集合。

    3、index根据位置选择元素选择器$("selector:nth-child(index)")

      index根据位置选择元素选择器,根据选择器中指定的元素位置选择元素,index从1开始计数,方法如下:$("selector:nth-child(index)");例:$("ul
li:nth-child(even)"此方法选择ul中li为偶数的元素,例:$("ul
li:nth-child(3n+1)")此方法选择ul元素中被3整除余数为1的元素。返回结果是元素集合。

    4、只有一个子元素的元素选择器$("selector:only-child")

      只有一个子元素的元素选择器,选取元素中只有一个子元素的元素,即如果元素有一个子元素那么该元素就会被选取,方法如下:$("selector:only-child");例:$("div:only-child")此方法选取div中只有一个子元素的div,返回结果是元素集合。

  6.)表单对象属性过滤


   1、可用元素选择器$(":enabled")

      匹配所有可用元素,方法如下:$(":enabled");例:$("#from1
:enabled")选取id=form1的表单中可用的所有元素,返回结果是元素集合。

   2、不可用元素选择器$(":disabled")

      匹配所有不可用元素,方法如下:$(":disabled");例:$("#from1
:disabled")选取id=form1的表单中所有不可用的元素,返回结果是元素集合。

   3、被选中的元素选择器$(":checked")

      选取所有被选中【checked】的元素,方法如下:$(":checked");例:$("#from1:checked")选取id=from1的表单中所有被【check】选中的元素,返回结果是元素集合。

   4、补选择的选项选择器$(":selected")

      撷取所有被选中【selected】的选项元素,方法如下:$(":selected");例:$("#from1:selected")这个方法选取id=form1的表单中所有被【selected】选中的元素,返回结果是元素集合。

  四、表单选择器


   1、input选择器$(":input")

     选取所有的input元素,方法如下:$(":input");例:$("#from2
:input")这个方法选取id=from2中的所有input元素,返回结果是元素集合。

   2、text选择器$(":text")

     选取所有单行文本框,方法如下:$(":text");例:$("#from2
:text")这个方法选取id=form2中的所有单行文本框,返回结果是元素集合。

   3、password选择器$(":password")

      选取所有密码框,方法如下:$(":password");例:$("#from2
:password")这个方法选取id=form2中的所有密码框,返回结果是元素集合。

   4、radio选择器$(":radio")

      选取所有单选框,方法如下:$(":radio");例:$("#from2
:radio")这个方法选取id=form2中的所有单选框,返回结果是元素集合。

   5、checkbox选择器$(":checkbox")

      选取所有的多选框,方法如下:$(":checkbox");例:$("#from2
:radio")这个方法选取id=form2中的所有复选框,返回结果是元素集合。

   6、submit选择器$(":submit")

      选取所有的提交按钮,方法如下:$(":submit");例:$("#from2
:submit")这个方法选取id=form2中的所有提交按钮,返回结果是元素集合。

   7、image选择器$(":image")

      选取所有的图像按钮,方法如下:$(":image");例:$("#from2
:image")这个方法选取id=form2中的所有图像按钮,返回结果是元素集合。

   8、reset选择器$(":reset")

      选取所有的重置按钮,方法如下:$(":reset");例:$("#from2
:reset")这个方法选取id=form2中的所有重置按钮,返回结果是元素集合。

   9、button选择器$(":button")

      选取所有的按钮,方法如下:$(":button");例:$("#from2
:button")这个方法选取id=form2中的所有按钮,返回结果是元素集合。

   10、file选择器$(":file")

      选取所有的上传域,方法如下:$(":file");例:$("#from2
:file")这个方法选取id=form2中的所有上传域,返回结果是元素集合。

   11、hidden选择器$(":hidden")

      选取所有的不可见元素,方法如下:$(":hidden");例:$("#from2
:hidden")这个方法选取id=form2中的所有不可见元素,返回结果是元素集合。

    选择器中注意事项:

    1、选择器中含有特殊字符[.,#,*,(,],]时候需要使用车转义符转义如id="id#2"。选择时候操作如下:$("#id\\#2");

    2、选择器中含有空格会对结果产生不同影响。

Jquery基础之选择器,布布扣,bubuko.com

时间: 2024-10-29 10:45:39

Jquery基础之选择器的相关文章

jQuery基础知识--选择器与效果

$(this).hide()-----隐藏当前元素 $("p").hide()------隐藏所有段落 $(".test").hide()--隐藏所有class="test"的元素 $("#test").hide()--隐藏所有id="test"的元素 文档就绪函数 $(document).ready(function() {     ---------jQuery function go here----

jQuery基础,选择器

jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口:具有高效灵活的cs

Webform——JQuery基础(选择器、事件、DOM操作)

一.选择器 1.基本选择器 ①id选择器:#       ②class选择器:.       ③标签名选择:标签名 ④并列选择:用,隔开          ⑤后代选择:用空格隔开 代码用法展示:   2.过滤选择器 (1).基本过滤 ①首个::first        ②尾个::last       ③任意个::eq(索引号)        ④大于::gt(索引号) ⑤小于::lt(索引号)         ⑥排除::not(选择器)         ⑦奇数:odd           ⑧偶数:

Jquery | 基础 | 属性过滤选择器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

HTML5移动开发之路(34)——jQuery中的选择器

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(34)--jQuery中的选择器 一.jQuery是什么? jQuery是由美国人John Resig创建,至今吸引了来自世界各地的众多JavaScript高手加入其中. jQuery的创始人和技术领袖,目前在Mozilla担任JavaScript工具开发工程师.著有<Pro JavaScript Techniques>(即<精通JavaScript>)等经典JavaScript书籍. jQu

jQuery基础之(二)jQuery中的$

在jQuery中,最常用的莫过于使用美元符号$,它提供了各种各样的丰富功能.包括选择页面中一个或者一类元素.作为功能函数的前缀.windows.onload的完善,创建DOM节点等.本文介绍jQuery的用法.作为基础 1.选择器 在css中,选择器的作用是选择页面的某一类(类别选择器)元素或者某个(id选择器).而jQuery中的“$”作为选择器,同样是选择某类或者某个元素,只不过jQuery提供了更全面的选择方式.而且为用户处理了浏览器兼容问题. 例如在在css<h2>下的<a>

jQuery中的选择器深入浅出

随着JavaScript的不断发展,各种各样的为了方便给jQuery变成的库应运而 生,Prototype,YUI,Extjs,bindows,JSVM(国内的),而目前较为流行的是jQuery ,这是一个轻量级的JavaScript库,它的诸多的优点:开源,兼容各种浏览器,继承css ,html,javascript,ajax等,据统计,目前世界上前10000个访问量最高的网站中,有 超过60%都使用的是jQuery,不得不说,在现在的前端界,如果你说你不会jQuery, 那么估计很多人就会对

jQuery基础1

jQuery 语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作. 基础语法是:$(selector).action() 美元符号定义 jQuery 选择符(selector)“查询”和“查找” HTML 元素 jQuery 的 action() 执行对元素的操作 示例 $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $(".test").hide() - 隐藏所有 class="

jQuery cxCalendar 日期选择器

cxCalendar 是基于 jQuery 的日期选择器插件. 它灵活自由,你可以自定义外观,日期的范围,返回的格式等. 版本: jQuery v1.7+ jQuery cxCalendar v1.5 github 使用方法 载入 CSS 文件 <link rel="stylesheet" href="jquery.cxcalendar.css"> 复制 载入 JavaScript 文件 <script src="jquery.js&qu