zoukankan      html  css  js  c++  java
  • JQuery中的选择器

    jQuery In Action  是不错的技术图书,主要学习其选择器,具体使用时可以根据需要查看示例中的代码。对于AJAX方面的应用,个人感觉还是直接选用对应的框架或控件完成更合适。

    jQuery有子选择器、容器选择器和特性选择器三类选择器,可以嵌套使用

    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

    E#idvalue  匹配id为指定的idvalue的元素E

    E[A]    匹配带有特性A的所有元素E

    -----------------------------------------------------------------------------------

    jQuery的位置选择器

    jQuery支持更高级的位置选择器:根据在DOM里的位置来选择元素

    -------------------------------------------------------------------------------------

    选择器                                                                            描述

    --------------------------------------------------------------------------------------

    :first    第一个匹配项。li a:first返回第一个在<li>中的超链接对象

    :last    最后一个匹配项。 li a:last返回最后一个在<li>中的超链接对象

    :first-child   第一个子元素。 li:first-child返回每个列表的第一个<li>子元素(第一个li对象)

    :last-child   最后一个子元素。li:last-child返回每个列表的最后一个<li>子元素(最后一个li对象)

    :only-child  返回没有兄弟节点的所有对应元素。ul:only-child返回没有兄弟节点的<ul>元素

    :nth-child(n)   返回第n个子节点(n从1开始计数)。li:nth-child(2)返回每个列表的第2个<li>项

    :nth-child(even|odd) 返回偶数或奇数的子节点(从1开始计数)。li:nth-child(even)返回每个列表中的偶数<li>项

    :nth-child(Xn+Y)  根据传入的公式计算的第n个子节点。如果Y为0,则忽略Y。n从0开始,且X不等于0。li:nth-child(3n)返回序号是3的倍数的<li>项,而li:nth-child(5n+1)则返回序号是5的倍数加1的<li>项

    :even或:odd  返回页面内的偶数或奇数的匹配元素。如li:even返回全部偶数<li>项,注意,序号计算是按整页内来计数的。

    :eq(n)        返回第n个匹配的元素(n从0开始计数)

    :gt(n)        返回第n个匹配元素之后的元素(n从0开始计数,不包括第n个元素)

    :lt(n)         返回第n个匹配元素之前的元素(n从0开始计数,不包括第n个元素)

    -------------------------------------------------------------------------------------

    jQuery自定义筛选选择器

    -----------------------------------------------------------------------------------------------------

    选择器                          描述

    ------------------------------------------------------------------------------------------------------

    :animated    选择当前处于动态控制之下的元素。

    :button     选择任何按钮

    :checkbox    选择任何复选框元素

    :checked     选择任何已选中的复选框元素或单选按钮

    :contains(foo)   选择包含文本foo的元素

    :disabled    选择在界面上已经禁用的表单元素

    :enabled    选择在界面上已经启用的表单元素

    :file      选择所有文件元素(input[type=file])

    :header    选择标题元素(包括<h1>、<h2>直到<h6>)

    :hidden    选择隐藏元素

    :image    选择表单中的图像元素

    :input    选择表单元素(包括:<input>, <select>, <textarea>,<button>)

    :not(filter)  根据指定筛选器进行求反后得到的元素

    :parent    选择在拥有后代节点的元素

    :password  选择口令元素

    :radio    选择单选按钮元素

    :reset    选择复位元素

    :selected    选择已选中的选项元素

    :submit    选择提交按钮

    :text    选择文本字段元素

    :visible    选择可见元素

    ----------------------------------------------------------------------------------------------------------

    jQuery中有两个有用的自定义选择符:odd和:even。如以下代码可以设置表格的奇、偶数行有不同的风格:

    $(document).ready(functioin() {

      $("tr:odd").addClass("oddstyle");

      $("tr:even").addClass("evenstyle");

    });

    其中,tr:odd则选中表中的所有奇数行,然后添加样式oddstyle;tr:even则选中表中的所有偶数行,然后添加样式evenstyle。当然oddstyle这样式和evenstyle样式必须先在css文件中定义出来。

    contains选择符

    contains选择符是指对象中包括指定内容的对象本身,如:$('td:contains("abcd")').addClass('highlight');则是找到所有包含“abcd”这样内容的单元格,设置这些单元格的样式类型添加“highlight”类。

  • 相关阅读:
    PHP获取当前页面完整URL的方法
    PHP中常见的提示对照表
    PHP语言中使用JSON和将json还原成数组
    PHP中被定义为false的
    yum
    PHP中计划任务
    command shell 的知识整理
    js的包管理工具bower安装
    Shell脚本
    liunx中计算机壳层
  • 原文地址:https://www.cnblogs.com/Rising/p/1722109.html
Copyright © 2011-2022 走看看