• JQuery知识快览之一—选择器


    阅读指导:本文参考最新的1.10.2版写成,针对用得比较多的1.4版,所有1.5版之后的函数都会注明哪一版新增。对于熟悉1.4版想学1.10版的请直接搜索"新增"。

    JQuery是一个JavaScript库,它提供了很多有用的API,简化了我们使用JavaScript的方式。

    JQuery由JQuery.com提供,你可以在该网站上下到最新的

    有两种类型的JQuery,一种是未压缩的,便于你学习其源代码,另一种是压缩的,不易阅读但是更节约流量。

    现在有两个版本的JQuery,V1.x支持ie6,7,8,V2.x开始不支持ie6,7,8了。

    现在1.x的最新版本是1.10.2

    如果你不愿意在自己的计算机上存放JQuery库,你可以连接到以下的一些CDN.

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>

     使用CDN的好处,用户已经访问了包含这些资源的网站的话,在访问你的网站时就不用重复下载资源了。

    本文主要介绍JQuery选择器,这可以说是JQuery的亮点之一,JQuery提供了有丰富功能的选择器,可以方便的获取页面中的元素。

    使用选择器注意事项

    1.选择器对元素,属性,值的大小是不敏感的

    2.对于!"#$%&'()*+,./:;<=>?@[]^`{|}~等特殊符号,需要用//转义

    基础选择器

    1.选择所有的元素

    $("*")

    2.根据元素Id选择

    $("#myid")

    注意一个页面的id都是唯一的,这个只能选择第一个match的

    3.根据元素的名称选择

    $("div")

    4.根据元素的css类选择

    $(".myclass")

    注意:一个元素可以有多个css类,只要其中一个匹配就会被选择

    5.复合选择器

    做多种选择器的和,比如$("#myid,div,.myclass)相当于$("#myid").add("div").add(".myclass")

    层次选择器

    1.选择选择器1中所选元素的所有符合选择器2条件的直接子节点

    $("body > div")

    2.选择选择器1中所选元素的所有符合选择器2条件的所有子孙节点

    $("body div")

    3.选择选择器1中所选元素后面的一个符合选择器2条件的节点,选择器2所选元素和选择器1所选元素要在同一节点下。

    $("#myid + li")

    4.选择选择器1中所选元素后面的所有符合选择器2条件的节点,选择器2所选元素和选择器1所选元素要在同一节点下。

    $("#myid ~ li")

    表单选择器

    用表单选择器要注意两点,一点是最好和input一起用,比如$("input:submit")。另一点是大多数选择器都不属于css规范,无法用其优化功能。最好是先做别的选择,再用表单选择器过滤。

    1.匹配所有按钮

    $(":button")

    匹配所有的<button>mybutton</button>和<input type="button" value="mybutton" />

    2.匹配提交按钮

    $(":submit")

    匹配所有的<button>mybutton</button>,<button type="submit">mybutton</button>和<input type="submit" value="提交" />

    3.匹配所有文本

    $(":text")

    匹配所有的<input type="text" >

    注意:从版本1.5.2开始,<input>也能被匹配。

    4.匹配当前焦点

    $(":focus")

    这是1.6版新增的,能获取当前获得焦点的元素

    5.获取被选择状态的元素

    $(":checked")

    注意:它适用于checkbox,radio button和select列表。

    6.其他的一些,很容易理解的。

    $(":selected")

    $(":reset")

    $(":password")

    $(":input")

    $(":image")

    $(":file")

    $(":enabled")

    $(":disabled")

    属性选择器

    1.有某属性

    $("[attribute]")

    如$("div[id]")选择有id属性的div

    2.属性为某值

    $("[attribute='value']")

    3.属性为某值或‘某值-’打头的值

    $("[attribute|='value']")

    4.属性的值中含有某值

    $("[attribute*='value']")

    5.属性含有某值

    $("[attribute~='value']")

    注意:一个属性可以有多个值,每个值之间用空格分开,这个选择器正好能处理多个值中包含给定值就被选择的情况

    6.属性的值以某值打头

    $("[attribute^='value']")

    7.属性的值以某值结尾

    $("[attribute$='value']")

    8.不含某属性或有该属性但是属性不为某值

    $("[attribute!='value']")

    注意:该选择器不属于css规范,无法用其优化功能。最好是先做别的选择,再用该选择器过滤。

    9.复合属性选择器

    $("[attributeFilter1][attributeFilter2][attributeFilterN]")

    基本过滤器

    1.获取当前选择器中给定位置的元素,从0开始计数

    $("selector:first")

    $("selector:last")

    $("selector:even")偶数位

    $("selector:odd")奇数位

    $("selector:eq(index)")等于给定索引值的元素

    $("selector:gt(index)")所有大于给定索引值的元素

    $("selector:lt(index)")所有小于给定索引值的元素

    注意:从1.8版开始,给定索引值可以为负数,表示从尾部开始索引。

    2.去除与给定选择器匹配的元素

    $(":not(selector)")

    最好用.not()函数

    3.选择h1,h2等header标签

    $(":header")

    4.选择给定语言的元素

    1.9版新增

    对于<div lang="en-us"></div>

    用$("div:lang(en)")可以匹配所有lang属性为en或en-打头的元素

    5.获取根元素

    1.9版新增

    $(":root")获取<html>元素

    6.获取文档URI所指向的元素。

    比如有个URI是http://example.com/#foo,$("p.target")会获取<p id="foo">元素

    7.获取当前正在动画的对象

    $(":animated")

    内容过滤器

    1.匹配包含给定文本的元素

    $(":contains(text)")

    2.匹配所有不包含子元素或者文本的空元素

    $(":empty")

    3.匹配所有包含子元素或者文本的元素

    $(":parent")

    注意:所有的p都认为非空

    4.匹配含有选择器所匹配的元素的元素.

    $(":has(selector)")

    注意:被匹配的元素可以是其孙子元素

    子元素过滤器

    1.获取在父元素中给定位置的元素,从1开始计数,对每个父元素分别计数。

    需要注意的是如果选择器中的元素有n个在一个父元素中,但是这n个并不在父元素中的给定位置处,这样这n个元素都不会被选择。

    $(":first-child")

    $(":last-child")

    $(":nth-child(index/even/odd/equation)")

    equation的写法如:

    $(":nth-child(3n+2)")

    $(":nth-last-child(index/even/odd/equation)")  1.9版新增

    2.选择在其父元素中是唯一元素的元素

    $(":only-child")

    3.获取在父元素中给定位置的元素,从1开始计数,对每个父元素分别计数。

    针对原有的:nth-child等选择器对位置的判断是针对父元素中所有的元素的情况,1.9版新增了一些选择器,其对位置的判断变为针对父元素中所有在选择器中的元素来计数。

    $(":first-of-type")

    $(":last-of-type")

    $(":nth-of-type(index/even/odd/equation)")

    $(":nth-last-of-type(index/even/odd/equation)")

    4.选择在选择器中是父元素唯一元素的元素

    $(":only-of-type")

    这个也是1.9版新增的

    可见性过滤器

    只有两个

    $(":hidden")和$(":visible")

    下面这些元素被认为是hidden的:

    1.CSS的display属性为none

    2.type="hidden"

    3.元素的长或宽被设置为0

    4.祖先为hidden,则元素为hidden

    注意:不在document中的元素无法判断是否可见。

    visibility:hidden或opacity:0被认为是可见的,因为它们仍会消耗布局空间。

  • 相关阅读:
    Objective-C中的锁及应用-13- 多线程
    Android开发技术周报 Issue#53
    Android开发技术周报 Issue#52
    Android开发技术周报 Issue#54
    Android开发技术周报 Issue#55
    Android开发技术周报 Issue#56
    Android开发技术周报 Issue#57
    Android开发技术周报 Issue#58
    Android开发技术周报 Issue#60
    Android开发技术周报 Issue#61
  • 原文地址:https://www.cnblogs.com/studynote/p/3463588.html
Copyright © 2020-2023  润新知