jquery培训教材

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,培训教材,作者：罗露,第一章 简介,第二章选择器,第三章中的操作,第四章中的事件和动画,培训教材,第一章 简介,库,为简化 的开发,封装了很多预定义的对象和函数,兼容各大浏览器,常见的 库,认识,是一个 库,极大地简化了 编程,很容易学习,的理念：写得更少，做得更多（ , ）,有优势,不污染顶级变量,出色的浏览器兼容性,链式操作方式,隐式迭代,行为层与结构层分离,跟丰富的插件支持,完善的文档,开源,轻量级,强大的选择器,出色的 操作,可靠的事件处理机制,完善的,进入 世界,获得 库（）,库位于一个 文件中，其中包含了所有的 函数。,版本号（无压缩版, 用于测试、学习）,版本号（压缩版, 用于产品、项目),配置：无需安装，只需有库文件即可(库的替代：见备注),网页中引入 库：,注意： 标签应该位于页面的 部分。,在 5 中，不必在 标签中使用 。 是 5 以及所有现代浏览器中的默认脚步语言！,基础语法,基础语法是：$()(),美元符号定义 （又称工厂函数）,选择器（）“查询”和“查找” 元素,() 执行对元素的操作,示例,$()() 隐藏当前元素,$(p)() 隐藏所有段落,$()() 隐藏所有 的段落,$()() 隐藏第 的元素,代码风格,链式操作风格,对于同一对象不超过3个操作，可直接写一行,对同一对象的操作较多，建议每行写一个操作,添加必要的注释,$()()$()(),(a)()()()()(a)(););,文档就绪函数,$()()：类似 定义文档加载完后执行的函数,$()(),( !);,);,这是为了防止文档在完全加载（就绪）之前运行 代码。,如果在文档没有完全加载之前就运行函数，操作可能失败。,例如：试图隐藏一个不存在的元素,获得未完全加载的图像的大小,文档就绪函数,对象与 对象,对象：的文档对象模型中的元素对象。可通过 的以下方法获取,对象：经包装后的对象,两者拥有的方法不同,(),(p),$(),$(p),对象与 对象相互转换,对象转成 对象,对象转成 对象,$ = $();,= $0; 对象是一个数组，可通过索引得到对象,或,= $(0);用提供的()方法得到对象,= ();,$ = $(); 用的工厂方法,解决 与其它库的冲突,在其它库之后导入,(); 让出$使用权,然后用 而不用 $,在其它库之前导入,直接用 而不用 $，同时，可以使用$()方法作为其它库的快捷方式,详情见备注。,开发工具和插件,为了使 支持自动提示需要到 下载一个插件：（如有需要见：“例子集合”文件夹中）,在中选择 “命令”-“扩展管理”-“安装扩展”,插件 下载,插件： 下载,开发工具和插件,2010（已包含1.4.1）,培训教材,第二章 选择器,什么是 选择器,方便找出文档中的 元素,可对找出的元素添加相应行为,兼容各种浏览器,选择器的优点,写法简洁,$()、 $() 、 $(),支持 13 选择器,无需考虑特定浏览器是否支持,完善的处理机制,元素不存在不会出错,注意：判断元素是否存在，要判断,对象的长度是否0，或者,转换成 对象来判断,不能用下面方式判断元素是否存在,($(),可用以下两种方式判断元素是否存在,($() 0),或,($()0),代码，元素不存在会出错,();,代码，元素不存在不出错,$()(,);,选择器的类型,基本选择器,层次选择器,过滤选择器,基本过滤选择器,内容过滤选择器,可见性过滤选择器,属性过滤选择器,子元素过滤选择器,表单域对象属性过滤选择器,表单选择器,基本选择器,基本选择器,返回值,(1)概述:根据给定的匹配一个元素。,如果选择器中包含特殊字符，可以用两个斜杠转义。参见示例。,(2)参数：,用于搜索的，通过元素的 属性中给定的值,(3)示例：,例一：描述：查找含有特殊字符“的元素”。,代码见：“例子集合”文件夹中的,基本选择器,返回值,(1)概述:根据给定的类匹配元素。,(2)参数：,一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到。,(3)示例：,例一：描述：选取“”的元素。,代码见：“例子集合”文件夹中的,基本选择器,返回值,(1)概述:根据给定的元素名匹配所有元素,(2)参数：,一个用于搜索的元素。指向 节点的标签名。,(3)示例：,例一：描述：查找一个 p 元素。,代码见：“例子集合”文件夹中的,基本选择器 *,* 返回值,(1)概述:匹配所有元素,多用于结合上下文来搜索。,(2)示例：,例一：描述：找到下的每一个元素，并设置字体样式。,代码见：“例子集合”文件夹中的,基本选择器 12,1、2、 返回值,(1)概述:将每一个选择器匹配到的元素合并后一起返回。,你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。,(2)参数：1,一个有效的选择器,2,另一个有效的选择器,(可选),任意多个有效选择器,(3)示例：,例一：描述：找到匹配任意一个类的元素，并设置字体颜色为红色,代码见：“例子集合”文件夹中的,层次选择器,后两种选择器较少用因为jQuery中有更简单的方法代替：next() 代替 $(prev + next)nextAll() 代替 $(prev siblings),层次选择器,返回值,(1)概述:在给定的祖先元素下匹配所有的后代元素,(2)参数：,任何有效选择器,用以匹配元素的选择器，并且它是第一个选择器的后代元素,(3)示例：,例一：描述：找到下的每一个元素，并设置字体样式。,代码见：“例子集合”文件夹中的,层次选择器 , 返回值,(1)概述:在给定的父元素下匹配所有的子元素,(2)参数：,任何有效选择器,用以匹配元素的选择器，并且它是第一个选择器的子元素,(3)示例：,例一：描述：匹配表单中所有的子级元素，并设置字体颜色为红色。,代码见：“例子集合”文件夹中的,层次选择器 +,+ 返回值,(1)概述:匹配所有紧接在 元素后的 元素,(2)参数：,任何有效选择器,一个有效选择器并且紧接着第一个选择器,(3)示例：,例一：描述：匹配所有跟在 后面的 元素，并设置边框为蓝色。,代码见：“例子集合”文件夹中的,层次选择器 ,返回值,(1)概述:匹配 元素之后的所有 元素,(2)参数：,任何有效选择器,一个选择器，并且它作为第一个选择器的同辈,(3)示例：,例一：描述：找到所有与表单同辈的 元素，并设置边框为红色。,代码见：“例子集合”文件夹中的,过滤选择器 - 基本过滤选择器,过滤选择器 - 基本过滤选择器,() 返回值,(1)概述:获取第一个元素,(2)示例：,例一：描述：获取第一个元素，并设置背景色为红色。,代码见：“例子集合”文件夹中的,过滤选择器 - 基本过滤选择器,()() 返回值,(1)概述:获取最后个元素,(2)示例：,例一：描述：获取最后一个元素，并设置背景色为红色。,代码见：“例子集合”文件夹中的,过滤选择器 - 基本过滤选择器 (),() 返回值,(1)概述:去除所有与给定选择器匹配的元素,在 1.3中，已经支持复杂选择器了（例如( a) 和 ()）,(2)参数:,用于筛选的选择器,(3)示例：,例一：描述：只有对不在执行动画效果的元素执行一个动画特效,代码见：“例子集合”文件夹中的,过滤选择器 - 基本过滤选择器,返回值,(1)概述:匹配所有索引值为偶数的元素，从 0 开始计数,(2)示例：,例一：描述：表格中偶数行高亮显示。,代码见：“例子集合”文件夹中的,过滤选择器 - 基本过滤选择器,返回值,(1)概述:匹配所有索引值为奇数的元素，从 0 开始计数,(2)示例：,例一：描述：表中奇数行不高亮显示。,代码见：“例子集合”文件夹中的,过滤选择器 - 基本过滤选择器 (),() 返回值,(1)概述:匹配一个给定索引值的元素,(2)参数:,从 0 开始计数,(3)示例：,例一：描述：在表格中查找第二个。,代码见：“例子集合”文件夹中的,过滤选择器 - 基本过滤选择器 (),() 返回值,(1)概述:匹配所有大于给定索引值的元素,(2)参数:,从 0 开始计数,(3)示例：,例一：描述：在表格中查找索引值大于21的。,代码见：“例子集合”文件夹中的,过滤选择器 - 基本过滤选择器 (),() 返回值,(1)概述:匹配所有大于给定索引值的元素,(2)参数:,从 0 开始计数,(3)示例：,例一：描述：在表格中查找索引值小于2的。,代码见：“例子集合”文件夹中的,过滤选择器 - 基本过滤选择器,返回值,(1)概述:匹配如 h1, h2, h3之类的标题元素,(2)示例：,例一：描述：给页面内所有标题加上背景色。,代码见：“例子集合”文件夹中的,过滤选择器 - 基本过滤选择器,返回值,(1)概述:匹配所有正在执行动画效果的元素,(2)示例：,例一：描述：只有对不在执行动画效果的元素执行一个动画特效,代码见：“例子集合”文件夹中的,过滤选择器 - 内容过滤选择器,过滤选择器-内容过滤选择器 (),() 返回值,(1)概述:匹配包含给定文本的元素,(2)示例：,例一：描述：查找所有包含 123 的 元素。,代码见：“例子集合”文件夹中的,过滤选择器-内容过滤选择器,返回值,(1)概述:匹配所有不包含子元素或者文本的空元素,(2)示例：,例一：描述：查找所有不包含子元素或者文本的空元素。,代码见：“例子集合”文件夹中的,过滤选择器-内容过滤选择器 (),() 返回值,(1)概述:匹配含有选择器所匹配的元素的元素,(2)参数:,一个用于筛选的选择器,(3)示例：,例一：描述：给所有包含 a 元素的 元素设置中的字体颜色为红色。,代码见：“例子集合”文件夹中的,过滤选择器-内容过滤选择器,返回值,(1)概述:查找所有含有子元素或者文本的 元素,(2)示例：,例一：描述：查找所有含有子元素或者文本的 元素,代码:, 1, 2,代码:,$(),结果：, 1, 2 ,过滤选择器 - 可见性过滤选择器,过滤选择器-可见性过滤选择器,返回值,(1)概述:匹配所有不可见元素，或者为的元素,(2)示例：,例一：描述：查找隐藏的,代码:, 1, 2,代码:,$(),结果：, 1,过滤选择器-可见性过滤选择器,例二：描述：匹配为的元素,代码:,代码:,$(),结果：, ,过滤选择器-可见性过滤选择器,返回值,(1)概述:匹配所有的可见元素,(2)示例：,例一：描述：查找所有可见的 元素,代码:, 1, 2,代码:,$(),结果：, 2,过滤选择器 - 属性过滤选择器,过滤选择器-属性过滤选择器 , 返回值,(1)概述:匹配包含给定属性的元素。注意，在 1.3中，前导的符号已经被废除！如果想要兼容最新版本，只需要简单去掉符号即可。,(2)参数:,属性名,(3)示例：,例一：描述：查找所有 属性是 2 的 元素，并设置边框为绿色。,代码见：“例子集合”文件夹中的,过滤选择器-属性过滤选择器 , 返回值,(1)概述:匹配给定的属性是某个特定值的元素,(2)参数:,属性名,(可选),属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含时，用以避免冲突。,(3)示例：,例一：描述：查找所有 属性是 2 的 元素，并设置边框为绿色。,代码见：“例子集合”文件夹中的,过滤选择器-属性过滤选择器, 返回值,(1)概述:匹配所有不含有指定的属性，或者属性不等于特定值的元素。,此选择器等价于(),要匹配含有特定属性但不等于特定值的元素，请使用(),(2)参数:,属性名,(可选),属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含时，用以避免冲突。,(3)示例：,例一：描述：查找所有 属性不是 的 元素,代码见：“例子集合”文件夹中的,过滤选择器-属性过滤选择器, 返回值,(1)概述:匹配给定的属性是以某些值开始的元素,(2)参数:,属性名,(可选),属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含时，用以避免冲突。,(3)示例：,例一：描述：查找所有 以 开始的 元素,代码:,过滤选择器-属性过滤选择器,代码:,$(=),结果：, , ,过滤选择器-属性过滤选择器$,$ 返回值,(1)概述:匹配给定的属性是以某些值结尾的元素,(2)参数:,属性名,(可选),属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含时，用以避免冲突。,(3)示例：,例一：描述：查找所有 以 结尾的 元素,代码:,过滤选择器-属性过滤选择器$,代码:,$($=),结果：, ,过滤选择器-属性过滤选择器*,* 返回值,(1)概述:匹配给定的属性是以包含某些值的元素,(2)参数:,属性名,(可选),属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含时，用以避免冲突。,(3)示例：,例一：描述：查找所有 包含 的 元素,代码:,过滤选择器-属性过滤选择器*,代码:,$(*=),结果：, , , ,过滤选择器-属性过滤选择器 12,12 返回值,(1)概述:复合属性选择器，需要同时满足多个条件时使用。,(2)参数: 1,属性选择器,2,另一个属性选择器，用以进一步缩小范围,任意多个属性选择器,过滤选择器-属性过滤选择器 12,(3)示例：,例一：描述：找到所有含有 属性，并且它的 属性是以 结尾的,代码:,代码:,$($=),结果：,过滤选择器 - 子元素过滤选择器,过滤选择器-子元素过滤选择器,返回值,(1)概述:匹配其父元素下的第N个子或奇偶元素,() 只匹配一个元素，而这个将为每一个父元素匹配子元素。,从1开始的，而()是从0算起的！可以使用:,：()、()、(3n)、(2),(31)、(32),(2)参数:,要匹配元素的序号，从1开始,(3)示例：,例一：描述：在每个 查找第 2 个,并设置背景颜色为红色。,代码见：“例子集合”文件夹中的,过滤选择器-子元素过滤选择器,返回值,(1)概述:匹配第一个子元素, 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素,(2)示例：,例一：描述：在每个 中查找第一个 ,并设置背景颜色为红色。,代码见：“例子集合”文件夹中的,过滤选择器-子元素过滤选择器,返回值,(1)概述:匹配最后一个子元素,只匹配一个元素，而此选择符将为每个父元素匹配一个子元素,(2)示例：,例一：描述：在每个 中查找最后一个 ,并设置背景颜色为红色。,代码见：“例子集合”文件夹中的,过滤选择器-子元素过滤选择器,返回值,(1)概述:如果某个元素是父元素中唯一的子元素，那将会被匹配,如果父元素中含有其他元素，那将不会被匹配。,(2)示例：,例一：描述：在 中查找是唯一子元素的 ,并设置背景颜色为红色。,代码见：“例子集合”文件夹中的,过滤选择器 -表单域对象属性过滤选择器,过滤选择器-表单域对象属性过滤选择器,返回值,(1)概述:匹配所有可用元素,(2)示例：,例一：描述：查找所有可用的元素,代码见：“例子集合”文件夹中的,过滤选择器-表单域对象属性过滤选择器,返回值,(1)概述:匹配所有不可用元素,(2)示例：,例一：描述：查找所有不可用的元素,代码见：“例子集合”文件夹中的,过滤选择器-表单域对象属性过滤选择器,返回值,(1)概述:匹配所有选中的被选中元素(复选框、单选框等，不包括中的),(2)示例：,例一：描述：查找所有选中的复选框元素,代码见：“例子集合”文件夹中的,过滤选择器-表单域对象属性过滤选择器,返回值,(1)概述:匹配所有选中的元素,(2)示例：,例一：描述：查找所有选中的选项元素,代码见：“例子集合”文件夹中的,表单选择器,表单选择器,返回值,(1)概述:匹配所有 , , 和 元素,(2)示例：,例一：描述：查找所有的，, 和 元素，并设置背景色为淡蓝色。,代码见：“例子集合”文件夹中的,表单选择器,返回值,(1)概述:匹配所有的单行文本框,(2)示例：,例一：描述：查找“”的表单下的所有文本框，并设置边框为紫色。,代码见：“例子集合”文件夹中的,表单选择器,返回值,(1)概述:匹配所有密码框,(2)示例：,例一：描述：查找“”的表单下的所有密码框，并设置边框为黄色。,代码见：“例子集合”文件夹中的,表单选择器,返回值,(1)概述:匹配所有单选按钮,(2)示例：,例一：描述：查找“”的表单下的所有单选按钮，并设置“20”。,代码见：“例子集合”文件夹中的,表单选择器,返回值,(1)概述:匹配所有复选框,(2)示例：,例一：描述：查找“”的表单下的所有复选框，并设置“20”。,代码见：“例子集合”文件夹中的,表单选择器,返回值,(1)概述:匹配所有提交按钮,(2)示例：,例一：描述：查找“”的表单下的所有提交按钮。,代码见：“例子集合”文件夹中的,表单选择器,返回值,(1)概述:匹配所有图像域,(2)示例：,例一：描述：匹配“”的表单下的所有图像域。,代码见：“例子集合”文件夹中的,表单选择器,返回值,(1)概述:匹配所有重置按钮,(2)示例：,例一：描述：查找“”的表单下的所有重置按钮。,代码见：“例子集合”文件夹中的,表单选择器,返回值,(1)概述:匹配所有按钮,(2)示例：,例一：描述：查找“”的表单下的所有按钮.,代码见：“例子集合”文件夹中的,表单选择器,返回值,(1)概述:匹配所有不可见元素，或者为的元素,(2)示例：,例一：描述：查找隐藏的,代码:, 1, 2,代码:,$(),结果：, 1,表单选择器,例二：描述：匹配为的元素,代码:,代码:,$(),结果：,表单选择器,返回值,(1)概述:匹配所有文件域,(2)示例：,例一：描述：查找“”的表单下的所有文件域,代码见：“例子集合”文件夹中的,培训教材,第三章 中的操作,操作,节点操作(文档处理),查找,创建,插入,删除,复制,替换,包裹,遍历,操作,属性操作,属性,类(样式操作),文本,值,操作,操作分类,（核心）,任何一种支持的语言都可使用它,可用来处理任何一种标记语言文档,(), (), ()等,仅用来处理文档，处理更方便,针对的操作,();,();,= ;,中的操作 - 节点操作,查找节点,使用选择器查找节点,$ = $( (1) 获取第二个元素节点,= $() 输出第二个元素节点的,创建节点,$1 = $();,$1 = $(文本);,$1 = $(文本);,中的操作 - 节点操作,插入节点,示例：见：“例子集合”文件夹中的,中的操作 - 节点操作,删除节点,()：删除所有匹配的元素,$( (1)();,()：清空所有匹配元素的子节点,复制节点,$()()();,$()()(“”);参数 表示绑定事件,示例：见：“例子集合”文件夹中的,中的操作 - 节点操作,替换节点,(),$(p)();,(),$()(p);,替换后原来元素的事件也消失,中的操作 - 节点操作,包裹节点,(): 将所有匹配元素单独包裹起来,$(p)();,(): 将所有匹配元素一起包裹起来,$(p)();,(): 将所有匹配元素的子内容包裹起来,$(p)();,示例：见：“例子集合”文件夹中的和,中的操作 - 节点操作,遍历节点,中的操作 - 属性操作,属性操作,获取属性的值,= $(p)();,设置单个属性的值,$(p)(, );,同时设置多个属性,$(p)(:, :p1);,删除属性,$(p)();,中的操作 - 类(样式操作),样式操作,获取样式,= $(p)();,设置样式,$(p)(, );,追加样式,$(p)();,移除样式,$(p)();,中的操作 - 类(样式操作),样式操作,切换样式,$(p)();在添加和移除样式间切换,判断是否含有某个样式,($(p)(),示例：见：“例子集合”文件夹中的,中的操作 - 、文本和值的操作,设置和获取 、文本和值,()方法：类似,()方法：类似,()方法：类似于,中的操作 - 操作,操作,获取 样式属性的值,= $(p)();,设置 样式属性的值,$(p)(, );,$(p)(:, :30);,获取和设置元素的宽高,()、(),中的操作 - 操作,操作,() 方法：获取元素在当前视窗的相对偏移,() 方法：获取元素相对于最近一个 为 或的父节点的相对偏移,() 方法和 () 方法获取和设置元素滚动的上边距和左边距,示例：见：“例子集合”文件夹中的位置操作,培训教材,第四章 中的事件和动画,为加载页面绑定事件处理,与 $()()的区别前面已经介绍,如果希望 也在加载完所有页面内容后再执行代码的话，可以用：,$()() );,事件绑定,() 方法,( ，, );,参数：事件类型。包括：, , , , , , , , , , , , , , , , , , , , , 等,参数：可选，传递给事件对象的额外数据,参数：事件回调函数,示例：描述：“投他一票”和“取消投票”的事件的绑定,代码见“例子集合”文件夹中的,合成事件,一个合成事件可绑定多个回调函数,() 方法,语法： (, );,用于光标悬停事件。当光标移到元素上，执行第一个函数当光标移出元素，则执行第二个函数,示例：描述：p元素字体颜色,代码见“例子集合”文件夹中的,() 方法,语法：(1, 2, 3, );,光标单击元素时轮流执行各个回调函数,示例：见“例子集合”文件夹中的,移除事件,一个事件可绑定多个回调函数一个回调函数也可被多个事件绑定,移除事件,() : 移除所有事件绑定,() : 移除 事件所有绑定,(, 1) :移除 事件绑定的 1 函数,另：() 方法与() 方法类似，但绑定的函数执行一次后就自动移除,示例：描述：“投他一票”和“取消投票”的事件的移除,代码见“例子集合”文件夹中的,中的动画,() 与 () 方法,同时改变大小和不透明度,可无参，或有参,参数可为：, , 或毫秒数（:600, :400, :200）,$()();,$()();,$()(1000);,示例：描述：“b”的b元素隐藏和显示,代码见“例子集合”文件夹中的,中的动画,() 与 () 方法,仅改变不透明度,参数与 (), () 一样,() 与 () 方法,仅改变高度,参数与 (), () 一样,示例：描述：分别为“”、“”和“”的透明度的渐变。,代码见“例子集合”文件夹中的,中的动画,() 方法,用于自定义动画,语法： (, , ),: 样式属性值对, :300, :100 ,: 速度参数，可选,: 动画完成时执行的函数，可选,示例：描述：只有对不在执行动画效果的元素执行一个动画特效,代码见：“例子集合”文件夹中的,中的动画,停止动画,() 方法,语法：(, ),两个参数均为值,第一个参数为 表示停止整个动画队列,第二个参数为 表示直接到动画的最终状态,判断元素是否处于动画状态,$()(),示例：描述：只有对不在执行动画效果的元素暂停一个动画特效,代码见：“例子集合”文件夹中的,中的动画,其它动画方法,() 方法：切换元素的可见状态,相当于切换调用 () 和 (),$(1)();,() 方法：通过调整高度切换元素可见,相当于切换调用 () 和 (),() 方法：将元素不透明度调整到指定值,$(1)(600, 0.2);,示例：描述：分别为“”、“”和“”的透明度的渐变。,代码见“例子集合”文件夹中的,