初识jQuery
[图片上传失败...(image-832757-1554710646556)] 本章学习目标
(1) . 能够搭建jQuery开发环境
(2) . 使用ready( )方法加载页面、掌握jQuery语法
a) 使用addClass( )方法和css( )方法为元素添加CSS样式
b) 使用next( )方法获取元素
c) 会使用show( )和hide( )显示和隐藏元素
[图片上传失败...(image-ac572-1554710646556)] 学习内容
一、 jQuery简介
(1) . jQuery由美国人John Resig于2006年创建
(2) . jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
(3) . 它的设计思想是write less,do more
[图片上传失败...(image-e5ee4e-1554710646556)]
jQuery****能做的JavaScript****也都能做，但使用jQuery****能大幅提高开发效率
二、 第一个jQuery项目
(一) 配制jQuery环境
1. 获取jQuery的最新版本
进入jQuery官网：http://jquery.com
[图片上传失败...(image-559d09-1554710646556)]
2. jQuery库分开发版和发布版
|
名称
|
大小
|
说 明
|
|
jquery-3.版本号.js（开发版）
|
约286KB
|
完整无压缩版本，主要用于测试、学习和开发
|
|
jquery-3.版本号.min.js（发布版）
|
约94.8KB
|
经过工具压缩或经过服务器开启Gzip压缩，主要应用于发布的产品和项目
|
本课程采用的版本是jquery-3.3.1.js
3. 在页面中引入jQuery
jQuery不需要安装，把下载的jquery文件放在网站的公共位置，想要在某个页面上使用时，只需要在上关的HTML页面中引入该库即，引入方法如下：
<script type="text/javascript" src="../../../jquery/jquery-3.3.1.js"></script>
(二) 编写第一个jQuery程序
1. 需求
在页面完成加载时，弹出一个对话框，显示“我欲奔赴沙场征战jQuery，势必攻克之！”。
2. 实现效果
[图片上传失败...(image-899606-1554710646556)]
3. 参考代码
<script type="text/javascript">
$(document).ready(function(){
alert("我欲奔赴沙场征战jQuery，势必攻克之！");
});
</script>
(三) $(document).ready()与window.onload
上面代码中的$(document).ready类似于传统JavaScript中的onload()方法，它是jQuery中页面载入事情的方法。二者的异同如下所示
| |
window.onload
|
$(document).ready()
|
|
执行时机
|
必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行
|
网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完
|
|
编写个数
|
同一页面不能同时编写多个
|
同一页面能同时编写多个
|
|
简化写法
|
无
|
$(function(){ //执行代码
}) ;
|
(四) 课堂作业
1. 编写第一个jQuery程序
需求说明
(1) . 在Hbuilder中配置jQuery开发环境
(2) . 打开页面时，弹出窗口，提示信息为“我编写的第一个jQuery程序！^^”
[图片上传失败...(image-6adf2a-1554710646556)]
三、 jQuery语法结构
(一) 语法结构
通过上节的示例中()、document和ready().这三部分分别被称为工厂函数、选择器和方法。将其语法化后，结构如下：
$(selector).action();
(二) 工厂函数$()
(1) . 在jQuery中，美元符号()=jQuery();
(2) . $()的作用将DOM对象转化为jQuery对象，只有将DOM对象转发为jQuery对象后，才能使用jQuery的方法。
(三) 选择器selector
jQuery支持CSS1.0到CSS3.0规则中几乎所有的选择器，如标签选择器、类选择器和ID选择器和后代选择器。
语法:
$(selector)
示例
$(“#username”); //获取DOM中id为username的元素
$(“div”); //获取DOM中所有的div元素；
$(“.content”); //获取DOM 中class为content的元素
(四) 方法action()
jQuery中提供的方法，其中包括绑定事件处理的方法，比如点击事件click()
四、 jQuery操作页面元素
(一) 使用addClass( )方法为元素添加样式
1. 案例演示：添加菜单样式
需求说明
此例是一个网站导航特效，当单击导航项时，id为current的导航项添加类名为current的类样式。
实现效果
[图片上传失败...(image-3eb77a-1554710646556)]
核心代码
$(document).ready(function(){
$("li").click(function(){
$("#current").addClass("current");
});
});
2. 语法说明
addClass()是jQuery中用于进行CSS操作的方法之一，它的作用是向被选元素添加一个或多个类样式。
jQuery对象.addClass([新式名]);
其中，样式名可以是一个，也可以多个，多个样式名需要用空格隔开。
需要注意的是，与使用选择器获取DOM元素不同，获取id为current的元素时，”current”前需要加id的符号”#”，而使用addClass()方法添加class为current的类样式时，该类名前不带类符号“.”。
(二) 使用css( )方法设置元素样式、使用show( )、hide( ) 方法设置元素的显示和隐藏
1. 案例演示：仿京东的左侧菜单
需求说明
当鼠标指针移到菜单上时，当前菜单背景颜色改变并显示对应的二级菜单；
当鼠标指针离开二级菜单时，当前菜单背景颜色恢复并且二级菜单消失。
实现效果
[图片上传失败...(image-174965-1554710646556)]
核心代码
$(document).ready(function(){
$("li").mouseover(function(){
$(this).css(
{"background":"orange"}
);
$(this).children("div").show();
});
$("li").mouseout(function(){
$(this).css(
{"background":"#c81523"}
);
$(this).children("div").hide();
})
});
2. css()方法
描述
css()方法是jQuery中用于进行css操作的另一种方法，它的作用是为匹配的元素添加CSS样式。
语法格式
css("属性","属性值") ;
css({"属性1":"属性值1","属性2":"属性值2"...}) ;
比如，让页面中<p>的文本的颜色为蓝色，可以写成：
$(“p”).css(“color”:”blue”);
css()和addClass的区别
(1) . css()方法为所匹配的元素设置给定的CSS样式
(2) . addClass()方法向所匹配的元素添加一个或多个类，该方法不会删除已存在的类，仅在原有基础上追加新的类样式；
(3) . 建议使用addClass()方法为元素添加样式
3. show()、hide()方法
描述
使用show( )、hide( ) 方法设置元素的显示和隐藏;
语法结构
$(selector).show( );
$(selector).hide( );
4. children()
children()方法是jQuery中遍历后代的一种方式，用作查找被选元素的所有直接子元素。【后面课程会讲到】
(三) 课堂作业
1. 制作当当顶部导航
需求说明
(1) . 制作当当顶部导航
(2) . 鼠标移至“我的当当”上时显示二级菜单，并且显示1px的颜色为#EE7304实线边框，当鼠标离开边框范围之后，二级菜单消失，并有边框也消失
实现效果
[图片上传失败...(image-d6a626-1554710646556)]
[图片上传失败...(image-e92267-1554710646556)]
五、 课后作业
(一) 使用jQuery变换网页效果
1. 需求说明
(1) . 制作《你是人间四月天》内容简介页面
(2) . 单击“你是人间的四月天”标题后，标题字体大小、颜色变为蓝色，正文的字体颜色变为绿色
(3) . 单击“查看全部”显示内容简介
2. 实现效果
[图片上传失败...(image-e502d2-1554710646556)] [图片上传失败...(image-e63377-1554710646556)]
[图片上传失败...(image-b72519-1554710646556)]
3. 实现思路
（1）新建HTML文件，文件名为april.html
（2）在新建的HTML文档中引入jQuery库
（3）使用$(document).ready( )创建文档加载事件
（4）使用$( )选取所需元素
（5）使用css( )、addClass( )方法为所选取的元素添加CSS样式
（6）使用show( )设置简介内容显示
