2019-04-08初识jQuery

初识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(…),不难发现,这条jQuery语句主要包含三大部分:()、document和ready().这三部分分别被称为工厂函数、选择器和方法。将其语法化后,结构如下:

$(selector).action();

(二) 工厂函数$()

(1) . 在jQuery中,美元符号等价于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( )设置简介内容显示

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,013评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,205评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,370评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,168评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,153评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,954评论 1 283
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,271评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,916评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,382评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,877评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,989评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,624评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,209评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,199评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,418评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,401评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,700评论 2 345

推荐阅读更多精彩内容