front-end study day14

jQuery

jQuery

1. 简介

jQuery是开源软件,jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档对象模型(DOM)元素、创建动画效果、处理事件、以及开发Ajax程序。jQuery也提供了给开发人员在其上创建插件的能力。这使开发人员可以对底层交互与动画、高级效果和高级主题化的组件进行抽象化。模块化的方式使jQuery函数库能够创建功能强大的动态网页以及网络应用程序。

jQuery有以下特点:

  • 轻量级
  • 强大的选择器
  • 出色的DOM操作的封装
  • 可靠的事件处理机制
  • 完善的Ajax
  • 不污染顶级变量
  • 出色的浏览器兼容性
  • 链式操作方式
  • 隐式迭代
  • 行为层与结构层的分离
  • 丰富的插件支持
  • 开源软件

2. 加载jQuery

先说一下版本问题,现在有1.x和2.x两个分支,其中2.x已不再支持低版本IE.

正式环境推荐使用压缩版:

1
2
3
4
5
<!-- 使用本地版 -->
<script src="js/jquery.min.js"></script>
<!-- 使用百度提供的在线版 -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

3. 语法

jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。

基础语法是:$(selector).action()

  • 美元符号定义 jQuery
  • 选择符(selector)“查询”和“查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

jQuery选择器

选择器jQuery的基础.利用jQuery选择器,可以非常迅速的找出目标,然后为它们添加行为.

jQuery选择器继承了CSS选择器的风格.其中$()是选择器函数,比如查找一个ID为test的元素:

1
2
3
4
5
<!-- 使用document -->
var x = document.getElementById('test')
<!-- 使用jQuery -->
$('#test')

1. 基本选择器

基本选择器是jQuery中最常用的选择器.它通过元素id,class,标签名等来查找DOM元素.

选择器说明返回示例
#id根据给定的id匹配一个元素单个元素$(“#top”)选取id为top的元素
.class根据给定的class匹配元素集合元素$(“.top”)选取所有class为top的元素
element根据给定的元素名匹配元素集合元素$(“p”)选取所有的p元素
*匹配所有元素集合元素$(“*”)选取所有元素
selector1,selector2,..,selectorN将每一个选择器匹配的元素合并后一起返回集合元素$(“div,#top,p.top”)选取所有的div元素,id为top的元素和拥有top类的p元素

NOTE:

id选择器中,使用任何的元字符(如 !”#$%&’()*+,./:;<=>?@[]^`{|}~)作为名称的文本部分, 它必须被两个反斜杠转义:\。

html代码: <span id="foo:bar"></span>
jQuery代码: $("#foo\\:bar")

2. 层级选择器

如果想要通过DOM元素之间的层次关系查找特定元素,如后代元素,相邻元素等,那么使用层级选择器就是一个好的选择.

选择器说明返回示例
$(“ancestor descendant”)选取ancestor元素下所有的descendant元素(祖先->后代)集合元素$(“div p”)选取div元素下的所有p元素
$(“parent>child”)选取parent元素下的child元素(父->子)集合元素$(div>p)选取div元素下的p元素
$(“prev+next”)选取紧跟parent元素的next元素(同级关系)集合元素$(“div+p”)选取紧跟div元素之后的p元素
$(“(prev~siblings)”)选取prev元素后的所有siblings元素(同级关系)集合元素$(“div~p”)

通过下图,理解它们的区别:

层级选择器

NOTE:
其中$("prev+next")可以用$('prev').next()来代替, $("(prev~siblings)"可以用$('prev').nextAll()来代替.

还有一点就是$("(prev~siblings)")获取的是prev元素之后的, 而siblings()方法匹配的是所有的同辈节点(与前后无关).

3. 过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素.

3.1 基本过滤选择器

选择器说明返回示例
:first选取第一个元素单个元素$(“div:first”)选取所有div元素中的第一个div
:last选取最后一个元素单个元素$(“div:last”)选取所有div元素中的最后一个div
:not(selector)选取与给定selector选择器不等的元素集合元素$(“div:not(.btn)”)选取所有class不为.btn的div元素
:even选取索引值是偶数的所有元素,索取从0开始集合元素$(“li:even”)选取所有li元素中索引为偶数的
:odd选取索引值是奇数的所有元素,索引从0开始集合元素$(“li:odd”)选取所有li元素中索引为奇数的
:eq(index)选取索引值等于index的元素单个元素$(“li:eq(1)”)选取所有li元素中索引为1的元素
:gt(index)选取索引值大于index的元素集合元素$(“li:eq(1)”)选取所有li元素中索引大于1的元素
:lt(index)选取索引值小于index的元素集合元素$(“li:eq(1)”)选取所有li元素中索引小于1的元素
:header选取所有的标题元素,如h1,h2集合元素$(:header)选取所有的h元素
:animated选取当前正在执行动画的所有元素集合元素$(div:animated)选取正在执行动画的div元素
:focus选取当前获取焦点的元素集合元素$(“:focus”)选取当前获取焦点的元素

3.2 内容过滤选择器

内容过滤选择器的过滤规则体现在它所包含的子元素或文本内容上.

选择器说明返回示例
:contains(text)选取文本内容含有”text”的元素集合元素$(“p:contains(“p标签”)”)选取含有文本”p标签”的所有p元素
:has(selector)选取匹配selector选择器的元素集合元素$(“div:has(.myclass)”)选取所有包含.myclass的div元素
:empty选取不包含子元素或文本的空元素集合元素$(“div:empty”)选取不包含子元素或文本的div元素
:parent选取含有子元素或文本的元素集合元素$(“div:parent”)选取包含子元素或文本的div元素

3.3 可见性过滤选择器

可见性过滤是根据元素是否可见来选择.

选择器说明返回示例
:hidden选取所有不可见元素,或者type为hidden的元素集合元素$(“:hidden”)选取所有不可见元素,包括<input type="hidden"/>,<div style="display: none"></div>等元素.
:visible选取所有可见的元素集合元素$(“:visible”)选取所有可见的元素

3.4 属性过滤选择器

属性过滤选择器是通过元素的属性来选取相应元素.

选择器说明返回示例
[attribute]选取拥有此属性的元素集合元素$(“div[id]”)选取拥有id属性的div元素
[attribute=value]选用属性值为value的元素集合元素$(“div[class=btn]”)选取class属性为btn的div元素
[attribute!=value]选取属性值不为value的元素集合元素$(“div[class!=btn]”)选取class属性不为btn的div元素
[attribute^=value]选取属性值以value开头的元素集合元素$(“div[class^=btn]”)选取class属性以btn开头的div元素
[attribute$=value]选取属性值以value结束的元素集合元素$(“div[class$=btn]”)选取class属性以btn结尾的div元素
[attribute*=value]选取属性值含有value的元素集合元素$(“div[class*=btn]”)选取class属性含有btn的div元素
[attrSel1][attrSel2][attrSelN]依次使用多种属性选择器来过滤,每选择依次,范围就缩小依次集合元素$(“div[id][class^=btn][class*=myclass]”)选取拥有id属性的div元素,且其class属性以btn开始,并包含有myclass

NOTE: 这里出现的^,*,$,*等特殊符号功能类似于正则,两者可以结合着记忆.

3.5 表单对象选择器

利用表单选择器,可以方便的获取表单中的某个或某类型的元素.

选择器说明返回示例
:input选取所有input,textarea,select和button元素集合元素$(“:input”)
:text选取所有的单行文本框集合元素$(“:text”)
:password选取所有的密码框集合元素$(“:password”)
:radio选取所有的单选框集合元素$(“:radio”)
:checkbox选取所有的复选框集合元素$(“:checkbox”)
:submit选取所有的提交按钮集合元素$(“:submit”)
:image选取所有的图像按钮集合元素$(“:image”)
:reset选取所有的重置按钮集合元素$(“:reset”)
:button选取所有的按钮集合元素$(“:button”)
:file选取所有的文件域集合元素$(“:file”)

3.6 表单对象属性选择器

主要是对表单元素进行过滤.

选择器说明返回示例
:enabled选取所有可用元素集合元素$(“input:enabled”)选取所有可用的input元素
:disabled选取所有不可用元素集合元素$(“input:disabled”)选取所有不可用的input元素
:checked选取所有被选中的元素(如单选框,复选框)集合元素$(“input:checked”)选取所有被选中input元素
:selected选取所有被选中的选项元素(select下拉框)集合元素$(“select option:selected”)选取所有被选中的选项元素

三. jQuery筛选

jQuery最有特色的莫过于它的链式操作方式.即对发生在同一对象的一组动作,可以直接连写而无需重复获取对象.

使用之前所学的选择器获取对象后,可以在其基础上继续进行其他操作,比如筛选动作.

3.1 过滤

筛选器说明返回示例
eq(index or -index)获取第N个jQuery对象,当index大于等于0时为正向选取,比如0代表第一个,1代表第二个。当index为负数时为反向选取,比如-1为倒数第一个jQuery对象$(“div”).eq(1)获取第二个div元素
first()获取第一个元素jQuery对象$(“div”).first()获取第一个div元素
last()获取最后一个元素jQuery对象$(“div”).last()获取最后一个div元素
hasClass(class)判断当前元素是否含有class类,有就返回truetrue or false$(“div”).hasClass(‘myclass’)如果div元素的class属性含有mycalss,就返回true

3.2 查找

有关查找的筛选器非常重要,需要掌握.

筛选器说明返回示例
children([expr])选取一个包含匹配的元素集合中每一个元素的所有子元素的元素集合.可以通过可选的表达式来过滤所匹配的子元素jQuery对象$(“div”).children(“.myclass”)选取所有div元素含有myclass类的子元素集合
find(expr or obj or ele)选取所有与指定条件匹配的元素(在其后代元素中搜索)jQuery对象$(“div”).find(“p”)选取div元素下的搜索p元素
next([expr])选取一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合(expr用于筛选的表达式)jQuery对象$(“div”).next()选取紧跟所有div的同辈元素
nextAll([expr])选取当前元素之后所有的同辈元素,可以用表达式过滤jQuery对象$(“div”).first().nextAll()选取紧跟第一个div的所有同辈元素
parent([expr])选取父元素jQuery对象$(“p”).parent()选取所有p元素的父元素
parents([expr])选取所有的父辈元素集合jQuery对象$(“p”).parents()选取所有p元素的所有祖辈元素(不包括根元素)
prev([expr])取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到,而不是前面所有的同辈元素。jQuery对象$(“#top”).prev()选取id为top的元素的紧邻的前一个元素
prevAll([expr])选取当前元素之前的所有同辈元素jQuery对象$(“div”).last().prevAll().addClass(“before”)给最后一个之前的所有div加上一个before类
siblings([expr])选取所有的同辈元素jQuery对象$(“hr”).siblings().css(“background-color”,”#000000”)给hr元素的所有同辈元素设置一个背景色

参考

day14 end