第5章 jQuery-Web前端开发-刘敏娜-清华大学出版社
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
10
5.2.2 层次选择器
3.前+后选择器 前+后选择器可以选择指定的前面元素后面的元素。 语法：$("前元素+后元素") 4.前~兄弟选择器 使用前~兄弟选择器可以引用前面元素后面的兄弟元素。 语法：$("前元素+兄弟元素")
11
5.2.3 过滤器
利用过滤器可以对选中的数据进行过滤。 过滤器的使用方法：$("选择器:过滤器")。 1.基本过滤器 :first匹配找到的第一个元素。如$("input:first")选择网页中的第一个input元素。 :last匹配找到的最后一个元素。如$("input:last")选择网页中的最后一个input元素。 :not过滤与给定选择器匹配的元素。如$("input:not(.one)")表示引用input中class不是one的元素。 :even匹配所有索引值是偶数的元素。如$("input:even")表示引用input元素中索引值为偶数的元素，索引值从0开始表示，所以表示的是第奇数次出现的 input元素。 :odd匹配所有索引值是奇数的元素。如$("input:odd")表示引用input元素中索引值为奇数的元素，索引值从0开始表示，所以表示的是第偶数次出现的 input元素。 :eq(index)匹配索引值是index的元素。如$("input:eq(0)")匹配input中索引号为0的元素。 :gt(index)匹配索引值大于index的元素。如$("input:gt(0)") 匹配input元素索引值大于0的元素。 :lt(index)匹配索引值小于index的元素。如$("input:lt(2)") 匹配input元素中索引值小于2的元素。 :header匹配h1-h6的元素。语法$(":header ")。
3
5.1.2 jQuery功能
wenku.baidu.com
查询HTML元素，修改HTML元 素的属性和样式。
动态生成网页元素，并插入到 原来的布局中，读取和改变元 素的内容、属性值以及样式。
jQuery动画特效
与ajax进行交互，实现提交数 据局部刷新网页。
4
5.1.3 jQuery下载
任何一款网页编辑工具都可以用来编辑和调试jQuery程序，如HBuilder，SublimeText。 如果编写jQuery脚本，需要在官网下载jQuery脚本库。 最新的jQuery版本是3.3.1，每个版本对应三种脚本库，compressed版、uncompressed版和 source map版。compressed是压缩版，文件比较小，适合项目开发，但是不便于调试。 Uncompressed是没有经过压缩处理的，文件较大，但是方便调试。Source map是一个信息文件， 里面储存信息转换后的代码的位置所对应的转换前的位置，方便进行javascript还原性调试。通过 Source map，调试工具将直接显示原始代码，而不是转换后的代码。 本书使用最新的版本jQuery 3.3.1，在使用时需要将其复制到站点根目录下。
5.2 jQuery选择器
通过jQuery可以对HTML元素进行动态管理，在操作网页元素之前先需要通过jQuery选择器引用元素。在 jQuery中有基础选择器和层次选择器。选择器的写法$(基础选择器/层次选择器) 5.2.1 基础选择器
1.标签选择器 标签选择器表示通过HTML标签名称选择网页元素。如通过$("table")可以选取网页中的table元素。 语法：$("标签名") 2.类选择器 类选择器是根据网页元素类名来选取网页元素。如在网页中定义了一个名为title的css类，在p标记中应用了该样式， <p class="title">，如果要引用该p对象，可以通过类选择器表示，$(".title")。 语法： $(".类名") 3. id选择器 id选择器是通过网页元素的id号选择对应的HTML元素。 语法：$("#id号")
第5章 jQuery
Speaker name and title
Contents
1 jQuery基础 2 jQuery选择器 3 设置HTML属性及CSS样式 4 jQuery常见事件方法 5 jQuery+ajax
5.1.1 jQuery概述
jQuery是一个快速、简洁的JavaScript 函数库。 jQuery设计宗旨是“write Less，Do More”（写更少的代码做更多的事情）。 jQuery提供一种简便的JavaScript设计模式，在jQuery中优化了HTML文档操作、事件处理、动画设 计和Ajax交互。 jQuery兼容各种主流浏览器，如IE 6.0以上、FF 1.5以上、Safari 2.0以上、Opera 9.0以上。
HTML文件中的元素是有一定的层次关系的，如处于根部的是HTML元素，其下有头部元素和主体 元素，它们分别有自己的子元素，如head中包含title和meta等元素。 1.祖先—后代选择器 利用祖先后代选择器可以选取某个祖先元素的指定后代元素。如利用$("div p ")可以选择div中所有 的p元素。 语法：$("祖先选择器 后代选择器") 2.父>子选择器 使用父>子选择器可以选取指定父元素中的某些子元素。如通过$("div>p ")可以选取div中所有的p元 素。 语法：$("父选择器>子选择器")
5
$(document).ready(function(){
6
alert("hello world!");
})
7
</script>
8 </head>
9 <body>
10 </body>
11</html>
6
Contents
1 jQuery基础 2 jQuery选择器 3 设置HTML属性及CSS样式 4 jQuery常见事件方法 5 jQuery+ajax
5
5.1.4 第一个jQuery程序
【例5.1】jQuery程序示例
1 <html><head>
2
<meta charset="utf-8">
3
<script type="text/javascript" src="jquery-3.3.1.js"></script>
4
<script type="text/javascript">
8
5.2.1 基础选择器-续上页
4.选择所有元素 在jQuery中，使用通配符“*”表示引用所有HTML元素。 语法：$("*") 5.同时选择多个元素 如果同时对多个HTML元素进行相同的操作，可以通过逗号运算符一次性引用多个元素。 语法：$("选择器1,选择器2,选择器3")
9
5.2.2 层次选择器
5.2.2 层次选择器
3.前+后选择器 前+后选择器可以选择指定的前面元素后面的元素。 语法：$("前元素+后元素") 4.前~兄弟选择器 使用前~兄弟选择器可以引用前面元素后面的兄弟元素。 语法：$("前元素+兄弟元素")
11
5.2.3 过滤器
利用过滤器可以对选中的数据进行过滤。 过滤器的使用方法：$("选择器:过滤器")。 1.基本过滤器 :first匹配找到的第一个元素。如$("input:first")选择网页中的第一个input元素。 :last匹配找到的最后一个元素。如$("input:last")选择网页中的最后一个input元素。 :not过滤与给定选择器匹配的元素。如$("input:not(.one)")表示引用input中class不是one的元素。 :even匹配所有索引值是偶数的元素。如$("input:even")表示引用input元素中索引值为偶数的元素，索引值从0开始表示，所以表示的是第奇数次出现的 input元素。 :odd匹配所有索引值是奇数的元素。如$("input:odd")表示引用input元素中索引值为奇数的元素，索引值从0开始表示，所以表示的是第偶数次出现的 input元素。 :eq(index)匹配索引值是index的元素。如$("input:eq(0)")匹配input中索引号为0的元素。 :gt(index)匹配索引值大于index的元素。如$("input:gt(0)") 匹配input元素索引值大于0的元素。 :lt(index)匹配索引值小于index的元素。如$("input:lt(2)") 匹配input元素中索引值小于2的元素。 :header匹配h1-h6的元素。语法$(":header ")。
3
5.1.2 jQuery功能
wenku.baidu.com
查询HTML元素，修改HTML元 素的属性和样式。
动态生成网页元素，并插入到 原来的布局中，读取和改变元 素的内容、属性值以及样式。
jQuery动画特效
与ajax进行交互，实现提交数 据局部刷新网页。
4
5.1.3 jQuery下载
任何一款网页编辑工具都可以用来编辑和调试jQuery程序，如HBuilder，SublimeText。 如果编写jQuery脚本，需要在官网下载jQuery脚本库。 最新的jQuery版本是3.3.1，每个版本对应三种脚本库，compressed版、uncompressed版和 source map版。compressed是压缩版，文件比较小，适合项目开发，但是不便于调试。 Uncompressed是没有经过压缩处理的，文件较大，但是方便调试。Source map是一个信息文件， 里面储存信息转换后的代码的位置所对应的转换前的位置，方便进行javascript还原性调试。通过 Source map，调试工具将直接显示原始代码，而不是转换后的代码。 本书使用最新的版本jQuery 3.3.1，在使用时需要将其复制到站点根目录下。
5.2 jQuery选择器
通过jQuery可以对HTML元素进行动态管理，在操作网页元素之前先需要通过jQuery选择器引用元素。在 jQuery中有基础选择器和层次选择器。选择器的写法$(基础选择器/层次选择器) 5.2.1 基础选择器
1.标签选择器 标签选择器表示通过HTML标签名称选择网页元素。如通过$("table")可以选取网页中的table元素。 语法：$("标签名") 2.类选择器 类选择器是根据网页元素类名来选取网页元素。如在网页中定义了一个名为title的css类，在p标记中应用了该样式， <p class="title">，如果要引用该p对象，可以通过类选择器表示，$(".title")。 语法： $(".类名") 3. id选择器 id选择器是通过网页元素的id号选择对应的HTML元素。 语法：$("#id号")
第5章 jQuery
Speaker name and title
Contents
1 jQuery基础 2 jQuery选择器 3 设置HTML属性及CSS样式 4 jQuery常见事件方法 5 jQuery+ajax
5.1.1 jQuery概述
jQuery是一个快速、简洁的JavaScript 函数库。 jQuery设计宗旨是“write Less，Do More”（写更少的代码做更多的事情）。 jQuery提供一种简便的JavaScript设计模式，在jQuery中优化了HTML文档操作、事件处理、动画设 计和Ajax交互。 jQuery兼容各种主流浏览器，如IE 6.0以上、FF 1.5以上、Safari 2.0以上、Opera 9.0以上。
HTML文件中的元素是有一定的层次关系的，如处于根部的是HTML元素，其下有头部元素和主体 元素，它们分别有自己的子元素，如head中包含title和meta等元素。 1.祖先—后代选择器 利用祖先后代选择器可以选取某个祖先元素的指定后代元素。如利用$("div p ")可以选择div中所有 的p元素。 语法：$("祖先选择器 后代选择器") 2.父>子选择器 使用父>子选择器可以选取指定父元素中的某些子元素。如通过$("div>p ")可以选取div中所有的p元 素。 语法：$("父选择器>子选择器")
5
$(document).ready(function(){
6
alert("hello world!");
})
7
</script>
8 </head>
9 <body>
10 </body>
11</html>
6
Contents
1 jQuery基础 2 jQuery选择器 3 设置HTML属性及CSS样式 4 jQuery常见事件方法 5 jQuery+ajax
5
5.1.4 第一个jQuery程序
【例5.1】jQuery程序示例
1 <html><head>
2
<meta charset="utf-8">
3
<script type="text/javascript" src="jquery-3.3.1.js"></script>
4
<script type="text/javascript">
8
5.2.1 基础选择器-续上页
4.选择所有元素 在jQuery中，使用通配符“*”表示引用所有HTML元素。 语法：$("*") 5.同时选择多个元素 如果同时对多个HTML元素进行相同的操作，可以通过逗号运算符一次性引用多个元素。 语法：$("选择器1,选择器2,选择器3")
9
5.2.2 层次选择器