《JQuery实战》第1-3章

Posted 2020-06-29

第1章 引荐JQuery

1、JQuery基本原理

1）JQuery包装器：$()函数返回特别的javascript对象，它包含着与选择器相匹配的DOM元素的数组。该对象拥有大量预定义的有用的方法，能够作用于该组元素。当完成一个操作时，它们返回相同的一组元素，提供给下一个操作。因为每个函数都作用在与最初的选择器相匹配的全部元素智商，所以没有必要循环遍历元素数组。

2）实用工具函数：$()函数的另外一个职责是作为几个通用的实用工具函数的命名空间前缀。

3）文档就绪处理程序：$( function(){ //执行内容} );

4）创建DOM元素

5）扩展JQuery：$.fn.functionName表示我们用名为functionName的函数来扩展$包装器

6）使用JQuery和其他库：jquery.noConfict()把$还原到非JQuery库所定义的含义。

第二章 创建元素包装集

1、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。.C等效于*.C
E#I	匹配id特征值为I的元素E。#I等效于*#I
E[A]	匹配带有特征A的所有元素E（不管特征A的值是什么）
E[A=V]	匹配所有元素E，其特征A的值正好是V
E[A^=V]	匹配所有元素E，其特征A的值以V开头
E[A$=V]	匹配所有元素E，其特征A的值以V结尾
E[A*=V]	匹配所有元素E，其特征A的值包含V

2、JQuery支持更高级的位置选择器：根据在DOM中的位置来选择元素

选择器	描述
:first	页面的最先的匹配。Li a:first返回最先的、并且在列表(<li>)项下的链接
:last	页面的最后的匹配。Li a:last返回最后的、并且在列表(<li>)项下的链接
:first-child	最先的子元素。Li:first-child返回每个列表的最先的项
:last-child	最后的子元素。Li:last-child返回每个列表的最后的项
:only-child	返回没有兄弟节点的所有元素
:nth-child(n)	第n个子节点(n从1开始)。Li:nth-child(2)返回每个列表的第2个<li>项
:nth-child(even|odd)	偶数或奇数的子节点。Li:nth-child(even)返回每个序列的偶数子节点
:nth-child(Xn+Y)	根据传入的公式计算的第n个子节点。如果y为0，则忽略y。N为0开始，且X不等于0。Li:nth-child(3n)返回3的倍数的项，而li:nth-child(5n+1)返回5的倍数的项的下一项
:even或:odd	页面返回内偶数或奇数的匹配元素。Li:even返回全部偶数<li>项
:eq(n)	第n个匹配元素(n从0开始)
:gt(n)	第n个匹配元素（不包括）之后的元素（n从0开始）
:lt(n)	第n个匹配元素（不包括）之前的元素（n从0开始）

3、JQuery自定义的筛选选择器赋予标识目标元素的无穷力量

选择器	描述
:animated	选择当前处于动态控制之下的元素。第5章讲述动画和特效
:button	选择任何按钮(input[type=submit]、input[type=reset]、input[type=button]或button)
:checkbox	只选择复选框元素（input[type=checkbox]）
:checked	只选择已选中的复选框或单选按钮（为CSS所支持）
:contains(foo)	只选择包含文本foo的元素
:disabled	只选择界面上已经禁用的表单元素（为CSS所支持）
:enabled	只选择界面上已经启用的表单元素（为CSS所支持）
:file	选择所有文件元素（input[type=file]）
:header	只选择标题元素（<hn>，n代表数字1到6），例如：<h1>、<h2>...<h6>
:hidden	只选择隐藏元素
:image	选择表单图像元素（input[type=image]）
:input	只选择表单元素（<input>、<select>、<textarea>、<button>）
:not(filter)	根据指定的筛选器进行求反
:parent	只选择拥有后代节点（包括文本）的元素，而排除空元素
:password	只选择口令元素（input[type=password]）
:radio	只选择单选按钮元素（input[type=radio]）
:reset	选择复选按钮元素（input[type=reset]或button[type=reset]）
:selected	选择已选中的选项元素
:submit	选择提交按钮元素（button[type=submit]或input[type=submit]）
:text	只选择文本字段元素（input[type=text]）
:visible	只选择可见元素

4、管理包装元素的集合

命令	定义	参数	返回
size()	返回包装集里元素的个数	无	元素的个数
get()	获取包装集里一个或所有匹配元素。	如果指定了下标参数，就返回下标所对应的元素；如果不指定参数，则以数组形式返回所有元素	一个DOM元素或DOM元素数组
index(element)	在包装集里查找传入的元素。	元素的引用	已传入元素在包装集里的顺序下标。如果找不到该元素，则返回-1
add(expression)	把表达式参数所指定的元素添加到包装集	参数如果是JQuery选择器，则全部匹配元素都被添加到集合；如果是html片段，则创建适当地元素并添加到集合；如果是DOM元素或DOM元素数组，则直接添加到集合	包装集
not(expression)	根据表达式参数的值，从包装集里删除元素	参数如果是JQuery选择器，则从包装集里删除任何匹配表达式的元素；如果是元素的引用，则从包装集里删除该元素	包装集
filter(expression)	利用传入的选择器表达式或筛选函数，从包装集里筛选元素	参数如果是JQuery选择器，则从包装集里删除任何与选择器不匹配的元素；如果是函数，则为包装集里的每一个元素各调用一次函数，删除返回值为false的元素	包装集
slice(begin,end)	返回新包装集，包含原始包装集的连续的一部分	begin：数值（从0开始） end（可选）：数值（从0开始）	包装集
find(selector)	返回新包装集，包含原始包装集里与传入选择器表达式相匹配的所有元素	JQuery选择器	包装集
contains(text)	返回新包装集，由包含text参数所传入的文本字符串的元素所组成	添加到新包装集里的元素必须包含的文本	包装集
is(selector)	确定包装集里是否有元素匹配传入的选择器	JQuery选择器	如果至少有一个元素匹配传入的选择器，则返回true，否则返回false
end()	在JQuery命令链内调用，以便回退到前一个包装集	无	前一个包装集
andSelf()	合并命令链内最近产生的两个包装集	无	合并后的包装集

第三章 用JQuery让页面生动起来

1、操作元素属性和特性

命令	定义	参数	返回
attr(name)	获取指派到包装集里第一个元素指定特性的值	特性的名称	包装集里第一个元素指定特性的值。如果包装集为空或第一个元素没有该特性，则返回undefined
attr(name,value)	为包装集里的所有元素的特性设置值	value参数可以是字符串、函数。如果是函数，为包装集各元素分别调用函数，把函数返回值作为特性值，当前元素作为this变量。每次调用函数传递一个参数，表示元素在包装集里从0开始的下标。	包装集
attr(attributes)	把已传递对象指定的特性和值设置到包装集的所有元素上	对象	包装集
removeAttr(name)	从每个已匹配元素删除指定的特性	将要删除的特性的名称	包装集

2、修改元素样式

命令	定义	参数	返回
addClass(names)	添加指定的一个或多个类名到包装集的所有元素	一个类名或以空格分隔的多个类名	包装集
removeClass(names)	从包装集各元素里删除指定的一个或多个类名称	一个类名或以空格分隔的多个类名	包装集
toggleClass(name)	如果在元素中指定类名不存在，则添加指定类名；反之则删除指定类名	类名	包装集
css(name,value)	设置指定的值到每个已匹配元素的指定的CSS属性	value参数可以是字符串、数字、函数。如果是函数，为包装集各元素分别调用函数，把函数返回值作为CSS属性值，当前元素作为this变量。	包装集
css(properties)	为包装集里的所有元素设置已传递对象里多个键所指定的CSS属性为相关的值	对象	包装集
css(name)	获取指派到包装集里第一个元素指定CSS属性的已计算样式值	CSS属性的名称	已计算样式值
width(value) height(value)	对包装集里所有元素设置指定的宽度和高度	数值，已像素为单位	包装集
width height	获取包装集里第一个元素的宽度或高度	无	已计算的宽度或高度
hasClass(name)	确定包装集里是否有元素拥有已传递类名	类名	如果包装集里某个元素拥有已传递类名，返回true，否则返回false

3、设置元素内容

命令	定义	参数	返回
html()	获取包装集里第一个元素的HTML内容	无	第一个已匹配元素的HTML内容
html(text)	把传入的HTML片段设置为所有匹配元素的内容	HTML片段	包装集
text()	把包装集里元素的所有文本内容连接起来	无	连接而成的字符串
text(content)	把包装集里的所有元素的文本内容设置为已传递值	文本内容	包装集
append(content)	把传入的HTML片段或元素追加到所有已匹配元素的内容之后	HTML片段的字符串、现有或新建DOM元素的引用、JQuery元素包装集	包装集
appendTo(target)	把包装集里的所有元素移动到指定目标的内容之后	JQuery选择器的字符串、现有或新建DOM元素的引用	包装集
wrap(wrapper)	把包装集各元素用已传递HTML标签或已传递元素的克隆副本分别包裹起来	用于包裹包装集里各元素的开始和结束标签，或者一个将被克隆且用作包裹器的元素	包装集
wrapAll(wrapper)	用已传递HTML标签或已传递元素的克隆副本把包装集元素作为一个单元包裹起来	用于包裹包装集里各元素的开始和结束标签，或者一个将被克隆且用作包裹器的元素	包装集
wrapInner(wrapper)	把包装集各元素的内容（包括文本节点）用已传递HTML标签或已传递元素的克隆副本分别包裹起来	用于包裹包装集里各元素的开始和结束标签，或者一个将被克隆且用作包裹器的元素	包装集
remove()	从页面DOM里删除包装集里的所有元素	无	包装集
empty()	清空匹配集里所有DOM元素的内容	无	包装集
clone(copyHandlers)	创建包装集里元素的副本，并返回包含这些副本的新包装集	参数如果为true表示复制事件处理程序，如果为false或省略则不复制事件处理程序	新建的包装集

4、处理表单元素值

命令	定义	参数	返回
val()	返回包装集里第一个元素的value特性；如果是多选元素，则返回所有选中项的数组	无	已获取的值或值数组
val(value)	把传入的值设置为所有已匹配表单元素的值	字符串	包装集
val(values)	导致包装集里任何复选框、单选按钮或<select>元素的选项变为checked或selected状态	值数组	包装集