【一些简单的jQuery选择器】
学习【js DOM 编程艺术】,最后面有许多jQuery的选择器,每个都动手敲了一遍。
jQuery 提供了高级选择器的方法。
js获取元素的三个基本方法分别是通过标签名,类名和id,即(getElementsByTagName, getElementsByClassName和getElementById)。那么jQuery是如何获取呢?
通过标签获取:$('tag')
通过类名获取:$('.className')
通过id获取:$('#id') 除了上面个三个最基本最简单的,还有下面几个css选择器:
$('*') 选择所有元素
$('tagA tagB') 选择作为tagA后代的tagB元素
$('tagA, tagB, tagC') 选择所有tagA元素,tagB元素和tagC元素
$('tag#id') 选择ID为id的tag元素
$('tag.className') 选择类名为className的tag元素 jQuery支持下列css2.1属性选择器:
$('tag[attr]') 选择所有带有attr属性的tag元素
$('tag[attr*=value]') 选择所有attr属性值中包含字符串value的tag元素 $('tag[attr=value]') 选择所有attr属性值等于value的tag元素
$('tag[attr!=value]') 选择所有attr属性值不等于value的tag元素 $('tag[attr^=value]') 选择所有attr属性值以value开头的tag元素
$('tag[attr$=value]') 选择所有attr属性值以value结尾的tag元素 $('tag[attr~=value]') 选择所有attr属性值 为空格分割的多个字符串且其中一个字符串等于value 的tag元素
$('tag[attr|=value]') 选择所有attr属性值 为连字符分割的字符串切该字符串以value开头的tag元素 子选择器,同辈选择器:
$('tagA > tagB') 选择作为tagA元素子元素的所有tagB元素
$('tagA + tagB') 选择紧邻tagA元素且位于其后的tagB元素
$('tagA ~ tagB') 选择作为tagA同辈元素且位于其后的所有tagB元素 伪类,伪元素选择器:
$('tag:root') 选择作为文档根元素的tag元素
$('tag:nth-child(n)') 选择作为其父元素正数第n个元素的所有tag元素
$('tag:nth-last-child(n)') 选择作为其父元素倒数 第n个元素的所有tag元素
$('tag:nth-of-type(n)') 选择几个同辈tag元素中的正数第n个
$('tag:nth-last-f-type(n)') 选择几个同辈tag元素中的倒数第n个
$('tag:first-child') 选择作为其父元素第一个子元素的tag元素
$('tag:last-child') 选择作为其父元素第一个子元素的tag元素
$('tag:first-of-type') 选择作为同辈tag元素中的第一个
$('tag:last-of-type') 选择作为同辈tag元素中的最后一个
$('tag:only-child') 选择作为其父元素唯一子元素的tag元素
$('tag:only-of-type') 选择作为同辈元素中唯一一个标签为tag的元素
$('tag:empty') 选择所有没有子元素的tag元素
$('tag:enabled') 选择界面元素中所有已经启用的tag元素
$('tag:disabled') 选择界面元素中所有已经禁用的tag元素
$('tag:checked') 选择界面元素中所有已经被选中的tag元素(如:复选框,单选按钮)
$('tag:not(s)') 选择与选择器s不匹配的所有tag元素 其他专有选择器:
$('tag:even') 选择匹配元素集 中偶数序号的元素(适合突出显示表格行)
$('tag:odd') 选择匹配元素集 中奇数序号的元素
$('tag:eq(0)'), $('tag: nth(0)') 选择匹配元素 集中的第一个元素,如页面的第一个段落
$('tag:gt(n)') 选择匹配元素集 中索引值大于n的所有元素
$('tag:lt(n)') 选择匹配元素集 中索引值小于n的所有元素
$('tag:first') 选择匹配元素集 中的第一个元素, 等价于eq(0)
$('tag:last') 选择匹配元素集 中的最后一个元素
$('tag:parent') 选择匹配元素集 中包含子元素(文本节点也算)的所有元素
$('tag:contains('test')') 选择匹配元素集 中包含指定文本的所有元素
$('tag:visible') 选择匹配元素集 中所有可见的元素(包括display属性为block和inline,visibility属性为visible以及type属性不是hidden的表单元素)
$('tag:hidden') 选择匹配元素集 中所有隐藏的元素(包括display属性为none, visibility属性为hidden以及type属性为hidden的表单元素) 一些专门为表单设计的表达式,用于快速访问表单元素:
:input 选择表单中的所有元素
:text 选择所有文本字段
:password 选择所有密码字段
:radio 选择所有单选按钮
:checkbox 选择所有复选框
:submit 选择所有提交按钮
:image 选择所有表单图像
:reset 选择所有重置按钮
:button 选择所有其他按钮
【一些简单的jQuery选择器】的更多相关文章
- 简单的jquery选择器的实现
function getByClass(oParent,oClass){ if(document.getElementsByClassName){ return document ...
- 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
- jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...
- 《锋利的jQuery(第2版)》笔记-第2章-jQuery选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...
- 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器
× 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...
- jQuery-1.9.1源码分析系列(二)jQuery选择器
1.选择器结构 jQuery的选择器根据源码可以分为几块 init: function( selector, context, rootjQuery ) { ... // HANDLE: $(&quo ...
- jQuery-1.9.1源码分析系列(二)jQuery选择器续1
在分析之前说一点题外话. ownerDocument和 documentElement的区别 ownerDocument是Node对象的一个属性,返回的是某个元素的根节点文档对象:即document对 ...
- 二、jquery选择器
在jquery库中,可以通过选择器实现DOM元素快捷选择这一重要的核心功能. 1.选择器的优势 (1)代码更简单 由于在jquery库中,封装了大量可以通过选择器直接调用的方法或函数,使编写代码更加简 ...
- jquery 选择器(name,属性,元素)大全
jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象 ...
随机推荐
- leetcode-74-搜索二维矩阵
题目描述: 编写一个高效的算法来判断 m x n 矩阵中,是否存在一个目标值.该矩阵具有如下特性: 每行中的整数从左到右按升序排列. 每行的第一个整数大于前一行的最后一个整数. 示例 1: 输入: ...
- 2016级算法期末上机-C.简单·Bamboo's Fight with DDLs III
简单·Bamboo's Fight with DDLs III 分析 一句话:贪心,简单哈夫曼应用,要求的其实是所有结点的值与权值的乘积之和,也就是带权路径长. 可以理解为非叶子节点的权值的和,这里的 ...
- IDEA + SpringBoot + Java搭建Web项目
打开IDEA,选择Spring Initializr,默认配置,点击Next  添写GAV.(group.Artifact.Version)  选择Spring Boot版本,这里选2.1.4稳定 ...
- tp5.0 根据经纬度 获取附近信息
自己备注一下 /* *参数说明: *$lng 经度 *$lat 纬度 *$distance 周边半径 默认是500米(0.5Km) */ public function returnSquarePoi ...
- Sequential Minimal Optimization(SMO,序列最小优化算法)初探
什么是SVM SVM是Support Vector Machine(支持向量机)的英文缩写,是上世纪九十年代兴起的一种机器学习算法,在目前神经网络大行其道的情况下依然保持着生命力.有人说现在是神经网络 ...
- dubbo学习笔记:快速搭建
搭建一个简单的dubbo服务 参考地址: dubbo官网:http://dubbo.apache.org/zh-cn/docs/user/references/registry/zookeeper.h ...
- Docker 入门相关
什么是Docker和容器 可能是把Docker的概念讲的最清楚的一篇文章 为什么要用Docker 相关网址 Window平台Docker下载 一些基本知识 Volume docker volume l ...
- 基于nightmare的美团美食商家爬虫实践
前言美团商家页分析需要爬取的数据有(这里没有按人数爬)爬虫工具选取pysipderscrapynightmare同步任务js动态加载中断继续爬坑总结示例代码 前言 上学的时候自己写过一些爬虫代码,比较 ...
- (转)DB2下载地址总结
原文:https://blog.csdn.net/huozengguang/article/details/58602910 DB2 v8.2,v9.1,v9.5,v9.7下载地址 下列都是完全版包含 ...
- vue中的双向数据绑定详解
前言 什么是数据双向绑定? vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化.这也算是vue的精髓之处了.值得注意的是,我 ...