zoukankan      html  css  js  c++  java
  • JQuery基础 选择器

    传统的Javascript是通过document.getElementById()函数来选择页面元素,这需要被选择的元素具有定义好的ID。相比之下,jQuery对页面元素的选择就要灵活多,它不但支持通过ID选择,而且还支持Class Name、元素及其位置顺序、以及这些方法的组合。

    如果你对CSS熟悉,你一定知道什么是ID和Class。ID和Class都是对页面元素的标识,不同的是ID是对某个元素的标识(不同的元素不可以具有相同的ID),而Class是对一类元素的标识(不同元素可以具有相同的Class)。 jQuery用到的ID和Class就是来自CSS。

    1. 通过“ID”来选择:

    <p id="myID">这一段落的ID是“myID"</p>
    
    //用以下jQuery来选择这一段落,然后加上特效(向右移动10px)
    
    $("#myID").animate({ marginLeft: 10}, 'fast');

    2. 通过“Class”来选择:

    <p class="myClass">这一段落的Class是”myClass“</p>
    
    //用以下的jQuery来选择这一段落,然后附加上一个词
    
    $(".myClass").append("<b>Hello</b>"

    3. 通过“元素及其位置顺序”来选择:

    <ul>
    
      <li>第一列</li>
    
      <li>第二列</li>
    
      <li>第三列</li>
    
    </ul>
    
    //使用下列jQuery对第三列进行选择,然后加上特效
    
    $('li:eq(2)').animate({ marginLeft: 10}, 'fast');

    4. 使用“上述方法的组合”来多项选择:

    <p id="myID">paragraph with id</p>
    
    <p class="myClass">paragraph with class</p>
    <ul>
    
      <li>第一列</li>
    
      <li>第二列</li>
    
      <li>第三列</li>
    
    </ul>
    
    //使用以下jQuery可以把上面的HTML元素都选中
    
    $('#myID, .myClass, li:eq(2), li').append("-被选中");

    注意:

    • 选择页面元素的格式是:$('selector') , 这里selector是你要选择的元素,它可以是以上4种情况。
    • 元素选择后,通常要执行一些操作,以上例子里使用了animateappend,更多更深入的探讨将在以后的文章里详述。
    • jQuery的选择器(selector)功能强大,所包含的内容比较多,这里只是对最基本的功能进行介绍。我会在以后的文章里对它进行更加详细的介绍。
    • $('selector')是jQuery('selector')的缩写,如果你的Javascript代码包含有对$的其他定义,你必须使用jQuery来代替$
    • 要注意$()中用 #id选择器 和.class 类选择器的标识.

    JQuery所支持的基本CSS选择器

    选择器 描述
    *   匹配任何元素
    E   匹配标签名称为E的所有元素
    E F   匹配标签名称为F、作为E的后代节点的所有元素  
    E>F   匹配标签名称为F、作为E的直接子节点的所有元素
    E+F   匹配前面是邻近兄弟节点E的所有元素F(E和F紧挨着)  
    E-F   匹配前面是任何兄弟节点E的所有元素F(E和F可以不紧挨着)  
    E:has(F)   匹配标签名称为E、至少有一个标签名称为F的后代节点的所有元素  
    E.C   匹配带有类名C的所有元素E  (.C等效于 *.C)  
    E#I   匹配id特性值为I的元素E (#I等效于*#I)
    E[A] 匹配带有特性A的所有元素E(不管特性A的值是什么)  
    E[A=V]   匹配所有元素E,其特性A的值正好是V  
    E[A^=V]   匹配所有元素E,其特性A的值以V开头  
    E[A$=V]   匹配所有元素E,其特性A的值以V结尾  
    E[A*=V]   匹配所有元素E,其特性A的值包含V

    ============================================

    如:

    1. a[href^=http://]  :  以http://开头的A标签
    2. input[type=text]  :  所有<input type="text" />的元素
    3. div[title^=my]  :  匹配title属性以my开头的所有div元素
    4. a[href$=.pdf] : 匹配引用PDF文件链接的所有a标签
    5. li:has(a) : 匹配包含<a>元素的所有<li>元素
    

    根据在DOM中位置来选择元素

    选择器 描述
    :first 页面的最先的匹配 li a:first 返回最先的,并且在列表<li>项下的链接  
    :last 页面的最后匹配 
    :first-child 最先的子元素. li:first-child 返回每个列表的最先的项
    :last-child 最后的子元素
    :only-child 返回没有兄弟节点的所有元素
    :nth-child(n) 第n个子节点(n从1开始,n=0导致选择所有元素的异常结果);li:nth-child(2)返回每个列表的第2个<li>项  
    :nth-child(even|odd) 偶数或奇数的子节点.li:nth-child(even) 返回每个序列的偶数子节点
    :nth-child(Xn+Y)  根据传入的公式计算的第n个子节点. 如果Y为0,则忽略Y.n从0开始,且X不等于0 ; li:nth-child(3n)返回3的倍数的项,
    而li:nth-child(5n+1)返回5的倍数的项的下一项
    :even 或 :odd 页面范围内偶数或奇数的匹配元素.  li:even 返回全部偶数<li>项
    :eq(n) 第n个匹配元素(n从0开始)
    :gt(n) 第n个匹配元素(不包括)之后的元素(n从0开始)
    :lt(n) 第n个匹配元素(不包括)之前的元素(n从0开始)

    自定义筛选选择器

    选择器   描述
    :animated   选择当前处于动态控制之下的元素.  
    :button   选择任何按钮(input[type=submit], input[type=reset], input[type=button],或button  
    :checkbox   只选择复选框元素(input[type=checkbox])  
    :checked   只选择已选中的复选框或单选按钮  
    :contains(foo)   只选择包含文本foo的元素  
    :disabled   只选择在界面上已经禁用的表单元素  
    :enabled   只选择在界面上已经启用的表单元素  
    :file   选择所有文件元素(input[type=file])  
    :header   只选择标题元素(<hn>,n代表数字1~6),例如<h1><h2>  
    :hidden   只选择隐藏元素  
    :image   选择表单图像元素(input[type]=image)  
    :input   只选择表单元素(<input> <select> <textarea> <button>  
    :not(filter)   根据制定的筛选器进行求反  
    :parent   只选择拥有后代节点(包括文本)的元素,而排除空元素  
    :password   只选择口令元素(input[type=password])  
    :radio   只选择单选按钮元素(input[type=radio])  
    :reset   选择复位按钮元素(input[type=reset] 或 button[type=reset])
    :selected   选择已选中的选项元素  
    :submit   选择提交按钮元素(button[type=submit] 或 input[type=submit]  )
    :text   只选择文本字段元素(input[type=text])  
    :visible   只选择可见元素

    没有目标的人都只在帮有目标的人完成目标

  • 相关阅读:
    BZOJ 3506 机械排序臂 splay
    BZOJ 2843 LCT
    BZOJ 3669 魔法森林
    BZOJ 2049 LCT
    BZOJ 3223 文艺平衡树 splay
    BZOJ 1433 假期的宿舍 二分图匹配
    BZOJ 1051 受欢迎的牛 强连通块
    BZOJ 1503 郁闷的出纳员 treap
    BZOJ 1096 ZJOI2007 仓库设计 斜率优化dp
    BZOJ 1396: 识别子串( 后缀数组 + 线段树 )
  • 原文地址:https://www.cnblogs.com/tweet/p/1647658.html
Copyright © 2011-2022 走看看