• 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”类。

  • 相关阅读:
    Educational Codeforces Round 13
    Educational Codeforces Round 12
    vscode 修改标签栏样式为换行全部展示
    webpack uglifyjs 报错 Unexpected token name
    tsconfig.js 使用 paths 设置alias无效问题
    Webpack 报错 filename.indexOf is not a function 的问题
    'GL_EXT_shader_framebuffer_fetch' : extension is not supported
    Flutter命令突然无响应、vscode突然无法连接到IOS模拟器
    解决node fs.writeFile 生成csv 文件乱码问题
    数组map方法与如何使用ES5实现
  • 原文地址:https://www.cnblogs.com/Rising/p/1722109.html
Copyright © 2020-2023  润新知