zoukankan      html  css  js  c++  java
  • jquery选择器

    关于jquery的选择器老是忘,看网上一篇文章不错,摘抄下来。 原文出处:http://www.cnblogs.com/artwl/archive/2012/02/07/2342088.html

    一、过滤选择器

    过滤选择器主要是通过特定的过滤规则来筛选出所需要的DOM元素,过滤规则与CSS中的伪类选择器语法相同。 按照不同的过滤规则,过滤选择器可以分为以下几种: 1、基本过滤选择器 2、内容过滤选择器 3、可见性过滤选择器 4、属性过滤选择器 5、子元素过滤选择器 6、表单对象属性过滤选择器 下面就对这几种过滤选择器分别加以介绍。

    1.1基本过滤选择器

    基本过滤选择器是过滤选择器中用的最多的一种,它的过滤规则主要体现在元素的位置(索引)上及一些特定的元素。 基本过滤选择器规则:
    基本过滤选择器
    选 择 器 描 述 返 回 示 例
    :first 选取第1个元素 单个元素 $("div:first")选取所有 <div>元素 中第一个<div>元素
    :last 选取最后1个元素 单个元素 $("div:last")选取所有 <div>元素 中最后一个<div>元素
    :not(selector) 去除所有与给定选择器 匹配的元素 集合元素 $("input:not(.myClass)")选取class不是 myClass的<input>元素
    :even 选取索引(从0开始)是偶数 的所有元素 集合元素 $("input:even")选取索引是偶数的 <input>元素
    : odd 选取索引(从0开始)是奇数 的所有元素 集合元素 $("input:odd")选取索引是奇数的 <input>元素
    :eq(index) 选取索引(从0开始)等于 index的元素 单个元素 $("input:eq(1)")选取索引等于1的 <input>元素
    :gt(index) 选取索引(从0开始)大于 index的元素 集合元素 $("input:gt(1)")选取索引大于1的 <input>元素
    :lt(index) 选取索引(从0开始)小于 index的元素 集合元素 $("input:lt(1)")选取索引小于1的 <input>元素
    :header 选取所有的标题元素,即 <h1>到<h6> 集合元素 $(":header")选取页面中所有的标题元素
    :animated 选取当前正在执行动画的 所有元素 集合元素 $("div:animated")选取当前正在执行动画 的<div>元素

    1.2内容过滤选择器

    内容过滤选择器的过滤规则主要体现在它所含的子元素或文本内容上。 内容过滤选择器规则:
    内容过滤选择器
    选 择 器 描 述 返 回 示 例
    :contains(text) 选取含有文本内容为 text 的元素 集合元素 $("div:contains('test')")选取含有文本内容 为 test 的<div>元素
    :empty 选取不包含子元素或文本的空元素 集合元素 $("div:empty")选取不包含子元素或文本 的空<div>元素
    :has(selector) 选取含有给定选择器 匹配的元素的元素 集合元素 $("div:has(.myClass)")选取含有class为 myClass的元素的<div>元素
    :parent 选取含有子元素或文本的元素 集合元素 $("div:parent")选取含有子元素或文本的 <div>元素

    1.3可见性过滤选择器

    可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。 可见性过滤选择器规则:
    可见性过滤选择器
    选 择 器 描 述 返 回 示 例
    :hidden 选取所有不可见的元素 集合元素 $("div:hidden")选取所有不可见的<div>元素
    :visible 选取所有不可见的元素 集合元素 $("div:visible")选取所有可见的<div>元素

    1.4属性过滤选择器

    属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。 属性过滤选择器规则:
    属性过滤选择器
    选 择 器 描 述 返 回 示 例
    [attribute] 选取拥有此属性的元素 集合元素 $("div[id]")选取拥有属性id的元素
    [attribute=value] 选取属性的值为value的元素 集合元素 $("div[title=test]")选取属性 title 为 test 的<div>元素
    [attribute!=value] 选取属性的值不等于value的元素 集合元素 $("div[title!=test]")选取属性 title 不 等于 test 的<div>元素
    [attribute^=value] 选取属性的值以value开始的元素 集合元素 $("div[title^=test]")选取属性 title 以 test 开始的<div>元素
    [attribute$=value] 选取属性的值以value结束的元素 集合元素 $("div[title$=test]")选取属性 title 以 test 结束的<div>元素
    [attribute*=value] 选取属性的值含有value的元素 集合元素 $("div[title*=test]")选取属性 title 含 有 test 的<div>元素
    [selector1][selector2] ...[selectorN] 选取匹配以上所有属性 选择器的元素 集合元素 $("div[id][title*=test]")选取拥有属性id, 且属性 title 含有 test 的<div>元素

    1.5子元素过滤选择器

    子元素过滤选择器的过滤规则是通过元素的父子关系来获取相应的元素。 子元素过滤选择器规则:
    子元素过滤选择器
    选 择 器 描 述 返 回 示 例
    :nth-child(index/even/odd/equation) 选取每个父元素下的第index(索引值为奇数/索引值为偶数/索引值等于某个表达式)个子元素,index从1开始 集合元素 $("div:nth-child(1)")选取每个<div>中第一个子元素
    :first-child 选取每个父元素下的第1个子元素 集合元素 $("div :first-child")选取每个<div>下第一个子元素
    :last-child 选取每个父元素下的最后1个子元素 集合元素 $("div :last-child")选取每个<div>下最后一个子元素
    : only-child 选取只有唯一子元素的元素的子元素 集合元素 $("div : only-child")选择只有一个子元素的<div>元素
    这里值得一提的是:nth-child(),这个选择器的详细功能如下: 1、nth-child(even) 能选取每个父元素下的索引值是偶数的元素 2、nth-child(odd) 能选取每个父元素下的索引值是奇数的元素   3、nth-child(2) 能选取每个父元素下的索引值等于2的元素   4、nth-child(3n) 能选取每个父元素下的索引值等于3的倍数的元素,n从0开始   5、nth-child(3n+1) 能选取每个父元素下的索引值等于 (3n+1) 的的元素,n从0开始

    1.6表单对象属性过滤选择器

    此选择器主要是对所选择的表单元素进行过滤。 表单对象属性过滤选择器规则:
    表单对象属性过滤选择器
    选 择 器 描 述 返 回 示 例
    :enabled 选取所有可用元素 集合元素 $("body:enabled")选取页面内所有可用元素
    :disabled 选取所有不可用元素 集合元素 $("body:disabled")选取页面内所有不可用元素
    :checked 选取所有被选中的元素(单选框、复选框) 集合元素 $("input:checked")选取所有被选中的<input>元素
    :selected 选取所有被选中的选项元素(下拉列表) 集合元素 $("select:selected")选取所有被选中的选项元素

    二、表单选择器

    顾名思义,表单选择器是为了能更加容易地操作表单,表单选择器是根据元素类型来定义的。 表单选择器规则:
    表单选择器
    选 择 器 描 述 返 回 示 例
    :input 选取所有的<input>、<textarea>、 <select>和<button>元素 集合元素 $(":input")选取所有的<input>、<textarea>、 <select>和<button>元素
    :text 选取所有的单行文本框 集合元素 $(":text")选取所有的单行文本框
    :password 选取所有的密码框 集合元素 $(":password")选取所有的密码框
    :radio 选取所有的单选框 集合元素 $(":radio")选取所有的单选框
    :checkbox 选取所有的多选框 集合元素 $(":checkbox")选取所有的多选框
    :submit 选取所有的提交按钮 集合元素 $(":submit")选取所有的提交按钮
    :image 选取所有的图像按钮 集合元素 $(":image")选取所有的图像按钮
    :reset 选取所有的重置按钮 集合元素 $(":reset")选取所有的重置按钮
    :button 选取所有的按钮 集合元素 $(":button")选取所有的按钮
    :file 选取所有的上传按钮 集合元素 $(":file")选取所有的上传按钮
    :hidden 选取所有的不可见元素 集合元素 $(":hidden")选取所有的不可见元素
    写个博客不容易,请转载的时候备注下原文出处,谢谢
    作者:keepnode
    博客地址:http://www.cnblogs.com/woaic
    每件事到最后都是好事,如果不是好事,说明还没有到最后
    =========================
  • 相关阅读:
    js下载doxc 文件示例和部分后缀对应的content-type 总结
    使用react-app-rewired和customize-cra对默认webpack自定义配置
    koa2使用es7 的装饰器decorator
    vue history 模式打包部署在域名的二级目录的配置指南
    linux 安装 node 环境
    javascript 正则表达式之分组与前瞻匹配详解
    vue的$emit 与$on父子组件与兄弟组件的之间通信
    mysql 的基本操作总结--增删改查
    mysql 常用的时间日期函数小结
    小程序封装request请求,统一API
  • 原文地址:https://www.cnblogs.com/woaic/p/3942777.html
Copyright © 2011-2022 走看看