$()函数在大多的JavaScript类库中都被作为一个选择器函数来使用,在jQuery中就是。

  $(“#id”)通过id来获取元素,用来代替document.getElementById()函数。红色函数(JavaScript)

  $(“tagName”)通过标签名来获取元素,用来代替document.getElementsByTagName()函数。

  jQuery的基本语法是:$(selector).action(), selector即选择器。

jQuery选择器的分类

  jQuery的选择器基本可以分为四大类:

  基本选择器(basic)

  层次选择器(level)

  过滤选择器(filter)

  表单选择器(form)

一、基本选择器(basic)

  * 匹配所有元素.示例:$(“*")选取所有元素。

  #id根据给定的id匹配元素(最多只返回一个元素).示例: $("#IdName”)选取id="IdName"的元素。

  .class根据给定的类名匹配元素.示例:$(".ClassName”)选取所有class=“ClassName"的元素。

  element根据给定的元素名匹配元素.示例: $(“p")选取所有<p>元素。

  .class.class 示例: $(".ClassName.MyClass”)选取所有且class="MyClass”的元素.(交集)。

  selector1, selector2, …, selectorN, 将每一个选择器匹配到的元素合并后一起返回.(并集)。

  除了#id选择器返回单个元素外,其他选择器返回的都是元素集合。

  这是因为HTML规范里面id应该是唯一的,所以重复id的元素没有被考虑。

  如果多个元素的id相同,取这个id也只能获取第一个元素.即获取的jQuery对象的length属性是1。

  如果要匹配的元素不存在,则都返回一个空的jQuery对象。

    基本选择器之间可以组合,用逗号分隔,结果取所有条件的结果的并集。

  当没有用逗号分隔时,应该是所有条件都满足的交集。

二、层次选择器(level)

  $(“div span”) 选取dia元素里的所有span后代元素,包括直接子元素和更深嵌套的后代元素。(即在div 即可,无论是否多层嵌套)

  例:$(“div span”)选取<div>里的所有的<span>元素。

  注意:选择器都是全页面扫描,返回一个集合,所有符合选择条件的元素都会被包括进去。所以多个<div>下面的<span>都会被选择。

  $(“parent>child”)选取parent元素下的child子元素,即只有直接子元素被选取.其他后代元素不包括.

  例:$(“div>span”)选取<div>元素下元素名是<span>的子元素.

  $(“prev+next”)选取紧接在prev元素后的next元素(同一层级)。

  例:$(“.one+div”)选取class为one的下一个div元素。

  $(“prev+siblings”)选取prev元素之后的所有siblings元素(同一层级)。

  例:$(“#two~div”)选取id为two的元素后面的所有<div>兄弟元素。

  等价方法:

  $(“prev+next”)等价于方法$(“prev”).next(“next”);选取prev元素之后紧接着的一个next元素。

  $(“prev~sublings”)等价于方法$(“prev”).nextAll(“sublings”),选取prev元素之后的所有同级的sublings元素。

  而$(“prev”).sublings(“next”)方法选取与prev同辈的所有next元素,与前后位置无关。

三、部分过滤选择器

基本过滤选择器规则:

基本过滤选择器
选 择 器 描 述 返 回 示 例
: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>元素

目前先写到这里!会陆续更新~~

jQ选择器学习片段(JavaScript 部分对应)的更多相关文章

  1. HTML 学习笔记 JavaScript(面向对象)

    现在让我们继续跟着大神的脚步前进 学习一下JavaScript中的面向对象的思想,其实作为一个iOS开发者,对面向对象还是比较熟悉的,但是昨晚看了一下Js中的面向对象,妈蛋 一脸萌比啊.还好有大神.让 ...

  2. JavaScript学习13 JavaScript中的继承

    JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...

  3. 前端之JavaScript第一天学习(1)-JavaScript 简介

    javaScript 是世界上最流行的编程语言. 这门语言可用于 HTML 和 web,更可广泛用于服务器.PC.笔记本电脑.平板电脑和智能手机等设备. JavaScript 是脚本语言 JavaSc ...

  4. Javascript学习2 - Javascript中的表达式和运算符

    原文:Javascript学习2 - Javascript中的表达式和运算符 Javascript中的运算符与C/C++中的运算符相似,但有几处不同的地方,相对于C/C++,也增加了几个不同的运算符, ...

  5. Javascript学习1 - Javascript中的类型对象

    原文:Javascript学习1 - Javascript中的类型对象 1.1关于Numbers对象. 常用的方法:number.toString() 不用具体介绍,把数字转换为字符串,相应的还有一个 ...

  6. jq选择器基础

    Jquery $代表选择器 使用jq必须要导入jq文件 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&qu ...

  7. HTML 学习笔记 JavaScript (prototype)

    原博地址:http://www.cnblogs.com/dolphinX/p/3286177.html 原博客的作者是一个非常牛逼的前端大神,我作为一个初学者,在此借助大神的博客进行自己的学习.在这里 ...

  8. 【javascript学习——《javascript高级程序设计》笔记】DOM操作

    DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次节点树,允许开发人员添加.移除和修改. 1.节点层次 <html> <head& ...

  9. JQ入门学习实战演练

    选择器是JQuery一大特色,所有的DOM操作.事件操作.Ajax操作都离不开选择器.熟练掌握JQuery的选择器,可以节省很多代码,很大程序上简化我们的脚本编程工作. JQuery的选择器很类似于样 ...

随机推荐

  1. 物联网平台设计心得:你所不知道的CRC校验

    在物联网平台设计过程中,我的中间件一方面需要处理来自于硬件端的包,另一方面需要处理来自于用户端的包,用户端包括web端和手机端等等.所以编写一个统一的CRC认证是非常必须要. 那么,在设计开始,CRC ...

  2. 使用Github Pages创建自己的网站

    这是一篇使用Github Pages创建自己网站的教程,操作很简单,相信,亲们肯定一学就会,但是大家也要有一定的github基础呀,所以小编给大家附上一个链接(http://www.cnblogs.c ...

  3. Nodejs正则表达式函数之match、test、exec、search、split、replace使用详解

    1. Match函数 使用指定的正则表达式函数对字符串惊醒查找,并以数组形式返回符合要求的字符串 原型:stringObj.match(regExp) 参数: stringObj 必选项,需要去进行匹 ...

  4. 帝国CMS【操作类型】说明详解

    看标签的参数时候,一般最后一个参数是操作类型说明,可是后面写的是:"操作类型说明 具体看操作类型说明", 这个操作类型说明在什么地方看啊 操作类型 说明 操作类型 说明 0 各栏目 ...

  5. H5 Canvas刮刮乐

    玩游戏的人 很多时候都会遇到翻牌子  开宝箱. 总有人傻傻的在哪里还纠结很久到底点哪一个! 纠结  指不定翻哪一个会多一点,你明明看到那个卡片的奖项多 . 那我就告诉你好了  其实很多时候在你点开那个 ...

  6. 提示Can&#39;t load package:dclite70.bpl解决方法

    64位系统安装Delphi7提示Can’t load package:dclite70.bpl 2015年04月05日 ⁄ 杂谈 ⁄ 共 392字 ⁄ 字号 小 中 大 ⁄ 暂无评论 ⁄ 阅读 1,7 ...

  7. Mysql锁初步

    存储引擎 要了解mysql的锁,就要先从存储引擎说起. 常用存储引擎列表如下图所示: 最常使用的两种存储引擎: Myisam是Mysql的默认存储引擎.当create创建新表时,未指定新表的存储引擎时 ...

  8. kaili 2.0 metasploit连接postgres数据库

    第一步:使用命令 db_init 初始化数据库

  9. C++—函数探幽

    一.内联函数 1.内联函数的机制 内联函数是C++为提高程序运行速度而做的一项改进. 函数调用机制:常规函数调用使程序使程序跳到被掉函数的地址,并在函数结束时返回. 内联函数的机制:内联函数的代码与其 ...

  10. python 循环设计

    for循环 1.range()用法 for循环后的in跟随一个序列的画,循环每次使用的序列元素而不是序列的下标 例:s='abcdefg' for i in range(0,len(s),3): pr ...