自学JavaWeb第四天JavaScript进阶和jQuery入门

第四讲JavaScript进阶和jQuery入门

一、BOM模型

BOM对象: 即浏览器对象模型;

作用:

用来执行浏览器的相关操作(浏览器地址栏, 弹出消息);

BOM对象有一个核心对象: Window, 它还包含了6个核心模板:

Document: 文档对象模型

Frames: HTML自身框架(基本不用)

History: 页面的历史记录(了解)

Location: 即当前的地址(重点强调)

Navigator: 包含浏览器相关的操作(基本不用)

Screen: 用户显示屏幕的相关信息(基本不用)

注意:

所有的浏览器都支持window对象,它表示浏览器窗口, 调用函数时window可以省略;

（一）window定时器

定时器包含两种定时器:

循环定时器

定义: 是调用一次循环定时器并循环创建并执行一个定时器, 可以是执行多次;

启动:

Var timeId = Window.setInterval(参数1, 参数2);

参数:

参数1: 要执行的方法

参数2: 毫秒值

停止:

clearInterval(timeId);

一次性定时器

定义: 是调用一次就会创建并执行一次定时器, 只能执行一次;

启动:

Var timeId = Window.setTimeOut(参数1, 参数2);

参数:

参数1: 要执行的方法

参数2: 毫秒值

停止:

clearTimeout(timeId);

补充:

页面加载方式: onload事件

有两种加载方式:

第一种:

第二种:

1、案例-轮播图

需求说明: 实现轮播图案例

需要编写程序，完成自动切换图片功能。

每 2 秒切换一次图片。

代码准备: 页面原型详见(资料)

2、案例-定时显示图片

需求说明:

⚫ 网站顶部在页面打开两秒后显示广告图

⚫ 广告图展示两秒后关闭广告图

代码准备: 页面原型详见(资料)

.hiddenImg {

display: none;// 隐藏

display: inline-block;//显示

}

3、案例-显示系统当前时间

<!DOCTYPE html>

<html>

<head>

<title>显示系统当前时间</title>

</head>

<body>

</body>

</html>

（二）window弹出框

window 对象有三种类型的弹出框：警告框、确认框和提示框。

通常在书写时可以省略前面的 window 前缀。

函数名	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
confirm()	显示带有一段消息以及确认按钮和取消按钮的确认框。
prompt()	显示可提示用户输入的*提示框。点击确定获得用户输入数据*

代码准备：

<!DOCTYPE html>

<html>

<head>

<title>window弹框</title>

</head>

<body>

</body>

</html>

（三）Window其它对象

1、Window Location

window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面

地址栏:

如何获取地址栏地址:

如何设置地址栏地址:

2、Window History

window.history 对象包含浏览器历史。

方法名	描述
history.back()	等同于在浏览器点击后退按钮
history.forward()	等同于在浏览器中点击前进按钮

浏览器内置好了历史记录;

3、Window Screen

Screen: 包含有关用户屏幕的信息(相当于屏幕分辨率)

方法名	描述
screen.availWidth	可用的屏幕宽度,以像素计，减去界面特性，比如窗口任务栏。
screen.availHeight	可用的屏幕高度,以像素计，减去界面特性，比如窗口任务栏。

4、Window Document

方法名	描述
document.body.offsetWidth	网页可见区域的宽度（包括连线的宽）
document.body.offsetHeight	网页可见区域的高度（包括连线的高）

（四）扩展案例-桌面弹球

需求:

编写一个小球, 让小球左右移动, 实现桌面弹球的效果

二、jQuery基本介绍

（一）jQuery简介

jQuery是一个优秀的JS框架(js库)

特点:

它兼容css, 还兼容各种浏览器

文档说明很全(API/菜鸟教程)

应用很详细, 成熟插件较多;

例如: Bootstrap, jQuery-invalidate插件, EasyUI;

（二）jQuery使用步骤

1、jQuery下载

下载地址：https://jquery.com/

点击下载后进入下载页面

解压后的jQuery文件：

压缩版和未压缩版的区别:

功能上没有任何区别;

区别: 压缩版将空格, 注释, 换行全部删掉了(文件大小变小了)

压缩版有什么好处:

由于压缩版做了简单的加密, 可以保护js不会被泄露;
压缩版的体积变小, 网页加载速度提升了;

2、jQuery引入

该jQuery的js文件未引入;

3、jQuery基本语法

写法格式:

jQuery(选择器)
$(选择器)(此方法用的最多)

jQuery等价于$;

4、jQuery页面加载

jQuery提供了ready()函数，用于页面加载成功后执行。与window.onload函数作用一致。写法有以下三种：

（三）DOM对象和jQuery对象转换

获取js对象: document.getElementById("username");

获取jQuery对象: $("#username")

在实际开发中:

Js代码和jQuery代码时同时存在的; js对象不能调用jQuery的方法, jQuery对象不能调用js的方法;

相互转换:

jQuery对象转DOM对象:

写法格式:

Var js对象 = jQuery对象[index];

DOM对象转jQuery对象:

写法格式:

Var jQuery对象 = $(js对象)

三、jQuery选择器

jQuery 选择器是 jQuery 强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。从而完成元素属性和行为的处理。

（一）基本选择器

基本选择器是我们使用频率最高的选择器。

标签选择器, id选择器, 类选择器, 全局选择器

代码准备：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p id="title" class="first">我是p标签1</p>

<p class="first">我是p标签2</p>

<p>我是p标签3</p>

</body>

</html>

（二）层级选择器

层级选择器指按节点树的层级关系获取元素。通俗一点讲就是子孙元素/父子元素/兄弟元素的关系。

主要有：

A B 使用空格隔开。获得 A 元素内部的所有的 B 元素。 (父子关系/爷孙关系)

A>B 使用>符号隔开。获得 A 元素下面的所有 B 子元素。(父子关系)

A+B 使用+隔开。获得 A 元素同级下一个 B 元素(兄弟关系, 同级)

A~B 使用~隔开。获得 A 元素之后的所有 B 元素(兄弟关系, 所有弟弟)

代码准备：

<!DOCTYPE html>

<html>

<head>

<title>层级选择器</title>

$(function(){

//1、获取id为main的span标签内所有的div标签

//2、获取id为main的span标签内子元素div标签

//3、获取id为main的span标签后第一个div兄弟标签

//4、获取id为main的span标签后所有的div兄弟标签

});

</script>

</head>

<body>

<span>

</span>

<span>

</span>

</body>

</html>

（三）过滤选择器

过滤选择器是从获取的对象列表中再次筛选想要的元素。

常用的过滤选择器有：

:first 第一个

:last 最后一个

:eq(index) 指定索引的元素

:gt(index) 大于index索引的元素

:lt(index) 小于index索引的元素

:even 偶数索引都是从0开始

:odd 奇数

:not() 除了** 之外 abcd :not(ab)==>cd

代码准备：

<!DOCTYPE html>

<html>

<head>

<title>过滤选择器</title>

$(function(){

//1、在所有DIV标签中，获取第一个div

//2、在所有DIV标签中，获取最后一个div

//3、在所有DIV标签中，获取所有偶数位的div

//4、在所有DIV标签中，获取所有奇数位的div

//5、在所有DIV标签中，获取除了第一位以外所有的div

//6、在所有DIV标签中，获取索引等于1的div

//7、在所有DIV标签中，获取索引大于1的div

//8、在所有DIV标签中，获取索引小于1的div

});

</script>

</head>

<body>

</body>

</html>

（四）属性选择器

我们可以通过属性选择器，以属性名或者属性值来匹配对应标签

[属性名] 获得有指定属性名的标签对象。 $(“[name]”)

[属性名=值] 获得指定属性名等于指定值的标签对象 $(“[name=’username’]”)

[属性名*=值] 获得指定属性名含有指定值的标签对象 $(“[name *= n]”)

注意:

多个属性选择器可以组合使用

[选择器 1][选择器 2][选择器 3] ，可以多个属性同时过滤。

代码准备：

<!DOCTYPE html>

<html>

<head>

<title>属性选择器</title>

$(function(){

//1、获取所有存在type属性的标签

//2、获取所有type属性为radio的标签

//3、获取所有type属性含有o的标签

//4、获取所有input标签中的单选框，且name为sex的标签

});

</script>

</head>

<body>

用户名：<input type="text" name="uname" value="小刘"/><br />

密码：<input type="password" name="pwd" value="123"/><br />

性别：<input type="radio" name="sex" value="man" />男

是否VIP：<input type="radio" name="vip" value="no" />不是

</body>

</html>

（五）表单选择器

表单选择器分为基本表单选择器和表单过滤器。

基本表单选择器：

表单过滤器：

代码准备:

<!DOCTYPE html>

<html>

<head>

<title>表单选择器</title>

$(function(){

//获取可用的表单输入项

//获取不可用的表单输入项

//获取选中的复选框

//获取国家下拉框中，被选中的option

});

</script>

</head>

<body>

<h1>不可用的表单输入项</h1>

<input type="checkbox" name="hobby" value="code"/>编程

<input type="checkbox" name="hobby" value="swimming" checked="checked"/>游泳

<input type="checkbox" name="hobby" value="reading" checked="checked"/>阅读

<hr />

<h1>下拉选择框</h1>

城市：<select id="city">

</select>

<hr />

国家：<select id="country" multiple="multiple">

</select>

</body>

</html>

（六）this

This: 表示获取当前正在操作的元素对象

案例: