今日任务
使用JQuery完成页面定时弹出广告
定时器:
setInterval clearInterval
setTimeout clearTimeout
显示: img.style.display = \"block\"
隐藏: img.style.display = \"none\"
img 对象
style属性: style对象
使用JQuery完成表格的隔行换色
获得所有的行
table.rows[]
修改行的颜色
row.bgColor =\"red\"
row.style.backgroundColor = \"black\"
row.style.background = \"red\"
\"background-color:red\"
\"background:red\"
使用JQuery完成复选框的全选效果
checked属性
如何获取所有复选框:
document.getElementsByName get Elements By Name 数据库里面
使用JQuery完成省市联动效果
JS中的数组: [\"城市\"]
new Array()
DOM树操作:
创建节点: document.createElement
创建文本节点: document.createTextNode
添加节点: appendChild
使用JQuery完成下列列表左右选择
select下拉列表
multiple 允许多选
: 双击事件
for循环遍历,一边遍历一边移除出现的问题
使用JQuery完成表单的校验(扩展)
事件:
获得焦点事件:
失去焦点事件:
按键抬起事件:
鼠标移入:
鼠标移出:
JS引入外部文件 :
今日目标：
掌握JQuery的基本使用
掌握JQuery的基本选择器,层次选择器
会使用JQuery完成DOM的基本操作
1. 使用JQuery完成页面定时弹出广告
1.1 需求分析：
当用户打开界面，3秒钟之后弹出广告，这个广告显示5秒钟，隐藏广告
1.2 技术分析
定时器: setTimeout
显示和隐藏: style.display = \"block/none\"
什么JQuery:
jQuery是一个快速、简洁的 框架，是继Prototype之后又一个优秀的 代码库（*或 框架*）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装 常用的功能代码，提供一种简便的 设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
JQuery的作用:
1. 写更少的代码,做更多的事情: write Less ,Do more
2. 将我们页面的JS代码和HTML页面代码进行分离
为什么学习JQuery:
提高我们的工作效率
JQ的入门
```html
< >
//js文档加载完成的事件
window. = function(){
alert(\"window. 111\");
}
window. = function(){
alert(\"window. 222\");
}
/*文档加载完成的事件*/
jQuery(document).ready(function(){
alert(\"jQuery(document).ready(function()\");
});
/*
jQuery 简写成 $
*/
$(document).ready(function(){
alert(\"$(document).ready(function()\");
});
/*
最简单的写法
*/
$(function(){
alert(\"$(function(){\");
});
</ >
```
【JQ中根据ID查找元素】
```html
全都是根据选择器去找的
#ID{}
.类名{}
$(\"#ID的名称\")
```
【JQ和JS之间的转换】
- JQ对象,只能调用JQ的属性和方法
- JS对象 只能调用JS的属性和方法
```html
function changeJS(){
var div = document.getElementById(\"div1\");
// div.innerHTML = \"JS成功修改了内容\"
//将JS对象转成JQ对象
$(div).html(\"转成JQ对象来修改内容\")
}
$(function(){
//给按钮绑定事件
$(\"#btn2\").click(function(){
//找到div1
// $(\"#div1\").html(\"JQ方式成功修改了内容\");
//将JQ对象转成JS对象来调用
var $div = $(\"#div1\");
// var jsDiv = $div.get(0);
var jsDiv = $div[0];
jsDiv.innerHTML=\"jq转成JS对象成功\";
});
});
```
JQ的开发步骤: (将我们页面的JS代码和HTML页面代码进行分离)
1. 导入JQ相关的文件
2. 文档加载完成事件: $(function) : 页面初始化的操作: 绑定事件, 启动页面定时器
3. 确定相关操作的事件
4. 事件触发函数
5. 函数里面再去操作相关的元素
显示和隐藏 img.style.display
【JQ中的动画效果】
```
show()
hide()
slideUp
slideDown
fadeIn
fadeOut
animate : 自定义动画
```
1.3 步骤分析：
1. 导入JQ的文件
2. 编写JQ的文档加载事件
3. 启动定时器 setTimeout(\"\",3000);
4. 编写显示广告的函数
5. 在显示广告里面再启动一个定时器
6. 编写隐藏广告的函数
1.4 代码实现
```html
< >
//显示广告
function showAd(){
$(\"#img1\").slideDown(2000);
setTimeout(\"hideAd()\",3000);
}
//隐藏广告
function hideAd(){
$(\"#img1\").slideUp(2000);
}
$(function(){
setTimeout(\"showAd()\",3000);
});
</ >
```
JQuery中的选择器
让我们能够更加精确找到我们要操作的元素
基本选择器
- ID选择器 : #ID的名称
- 类选择器: 以 . 开头 .类名
- 元素选择器: 标签的名称
- 通配符选择器: *
- 选择器,选择器: 选择器1,选择器2
基本选择器的案例
```
<!--
- ID选择器 : #ID的名称
- 类选择器: 以 . 开头 .类名
- 元素选择器: 标签的名称
- 通配符选择器: *
- 选择器,选择器: 选择器1,选择器2
-->
< >
//文档加载事件,页面初始化的操作
$(function(){
//初始化操作: 给按钮绑定事件
$(\"#btn1\").click(function(){
$(\"#two\").css(\"background-color\",\"palegreen\");
});
//找出mini类的所有元素
$(\"#btn2\").click(function(){
$(\".mini\").css(\"background-color\",\"palegreen\");
});
$(\"#btn3\").click(function(){
$(\"div\").css(\"background-color\",\"palegreen\");
});
$(\"#btn4\").click(function(){
$(\"*\").css(\"background-color\",\"palegreen\");
});
/*选择器分组*/
//找出mini类 和 span元素
$(\"#btn5\").click(function(){
$(\".mini,span\").css(\"background-color\",\"palegreen\");
});
});
</ >
```
JQ中的层级选择器
- 子元素选择器: 选择器1 > 选择器2
- 后代选择器: 选择器1 儿孙
- 相邻兄弟选择器 : 选择器1 + 选择器2 : 找出紧挨着的一个弟弟
- 找出所有弟弟: 选择器1~ 选择器2 : 找出所有的弟弟
```html
< >
//文档加载事件,页面初始化的操作
$(function(){
//初始化操作: 给按钮绑定事件
//找出body下面的子div
$(\"#btn1\").click(function(){
$(\"body > div\").css(\"background-color\",\"palegreen\");
});
//找出body下面的所有div
$(\"#btn2\").click(function(){
$(\"body div\").css(\"background-color\",\"palegreen\");
});
$(\"#btn3\").click(function(){
$(\"#one+div\").css(\"background-color\",\"palegreen\");
});
$(\"#btn4\").click(function(){
$(\"#two~div\").css(\"background-color\",\"palegreen\");
});
});
</ >
```
JQ中的基本过滤器
```html
< >
$(function(){
/< >
//文档加载事件,页面初始化的操作
$(function(){
//初始化操作: 给按钮绑定事件
//过滤出所有div中第一个元素
$(\"#btn1\").click(function(){
$(\"div:first\").css(\"background-color\",\"palegreen\");
});
//过滤出所有div中偶数位的div
$(\"#btn2\").click(function(){
$(\"div:even\").css(\"background-color\",\"palegreen\");
});
$(\"#btn3\").click(function(){
$(\"div:odd\").css(\"background-color\",\"palegreen\");
});
$(\"#btn4\").click(function(){
$(\"div:gt(2)\").css(\"background-color\",\"palegreen\");
});
});
</ >
```
JQ中的属性选择器
```html
$(function(){
//找到有name属性的input
$(\"#btn1\").click(function(){
$(\"input[name]\").attr(\"checked\",true);
});
$(\"#btn2\").click(function(){
$(\"input[name=\'accept\']\").attr(\"checked\",true);
});
$(\"#btn3\").click(function(){
$(\"input[name=\'newsletter\'][value=\'Hot Fuzz\']\").attr(\"checked\",true);
});
});
```
JQ中的表单过滤器
```html
< >
//1.文档加载事件
$(function(){
$(\":text\").css(\"background-color\",\"pink\");
});
</ >
```
上午的内容回顾:
什么是JQ: write less , do more: 写更少的代码,做更多的事
函数库
1.11版本
定时器:
动画效果:
show : 显示
hide : 隐藏
slideDown:
slideUp: 向上滑动
fadeIn
fadeOut
JQ选择器:
基本选择器:
ID选择器: #ID的名字
类选择器: .类名
元素选择器: 标签名称
通配符选择器: *
选择器分组: 选择器1,选择器2
层级选择器:
后代选择器: 选择器1 儿孙
子元素选择器: 选择器1 > 儿子
相邻兄弟选择器: 选择器1 + 选择器2 找出紧挨着它的弟弟
所有弟弟选择器: 选择器1~选择器2 找出所有弟弟
基本过滤器:
选择器:first : 找出的是第一个
:last
:even 找出索引为偶数
:odd 找出奇数索引
:gt(index) : 大于索引
:lt(index) 小于
:eq(index) 等于
属性选择器:
选择器[href] : 单个属性
```html
选择器[href][ ] : 多个属性
选择器[href][ =\'test\'] : 多个属性,包含值
```
表单过滤器:
:input 找出所有输入项: input textarea select
:text
:password
表单对象属性:
找出select中被选中的那一项:
option:selected
JQ的开发步骤:
1. 导入JQ相关的包
2. 文档加载文成的事件: 页面初始化: 绑定事件, 启动定时器
3. 确定事件
4. 实现事件索要触发的函数
5. 函数里面再去操作我们要操作的元素
使用JQ完成表格的隔行换色
需求分析:
在我们的实际开发过程中,我们的表格如果所有的行都是一样的话,很容易看花眼,所以我们需要让我们的表格隔行换色
技术分析:
获取所有行 table.rows
遍历所有行
根据行号去修改每一行的背景颜色: bgColor
style.backgroundColor = \"red\"
步骤分析:
1. 导入JQ的包
2. 文档加载完成函数: 页面初始化
3. 获得所有的行 : 元素选择器
4. 根据行号去修改颜色
代码实现:
```html
$(function(){
//获得所有的行 : 元素选择器
$(\"tbody > tr:even\").css(\"background-color\",\"#CCCCCC\");
//修改基数行
$(\"tbody > tr:odd\").css(\"background-color\",\"#FFF38F\");
// $(\"tbody > tr\").css(\"background-color\",\"#FFF38F\");
});
```
使用JQuery完成表单的全选全不选功能
需求分析
在我们对表格处理的时,有些情况下,我们需要对表格进行批量处理,
技术分析:
代码实现:
使用JQ完成省市联动效果
需求分析:
在我们的注册表单中,通常我们需要知道用户的籍贯,需要一个给用选择的项,当用户选中了省份之后,列出省下面所有的城市
技术分析:
1. 准备工作 : 城市信息的数据
2. 添加节点 : appendChild (JS)
1. append : 添加子元素到末尾
2. appendTo : 给自己找一个爹,将自己添加到别人家里
3. prepend : 在子元素前面添加
4. after : 在自己的后面添加一个兄弟
3. 遍历的操作:
步骤分析:
1. 导入JQ的文件
2. 文档加载事件:页面初始化
3. 进一步确定事件: change事件
4. 函数: 得到当前选中省份
5. 得到城市, 遍历城市数据
6. 将遍历出来的城市添加到城市的select中
代码实现:
```
$(function(){
$(\"#province\").change(function(){
// alert(this.value);
//得到城市信息
var cities = provinces[this.value];
//清空城市select中的option
/*var $city = $(\"#city\");
//将JQ对象转成JS对象
var citySelect = $city.get(0)
citySelect.options.length = 0;*/
$(\"#city\").empty(); //采用JQ的方式清空
//遍历城市数据
$(cities).each(function(i,n){
$(\"#city\").append(\"<option>\"+n+\"</option>\");
});
});
});
```
使用JQ完成下拉列表左右选择
需求分析
我们的商品通常包含已经有了的, 还有没有的,现在我们需要有一个页面用于动态编辑这些商品
技术分析
步骤分析
1. 导入JQ的文件
2. 文档加载函数 :页面初始化
3.确定事件 : 点击事件
4. 事件触发函数
1. 移动被选中的那一项到右边
代码实现
```
< type=\"text/ \" src=\"../js/jquery-1.11.0.js\" ></ >
< >
$(function(){
$(\"#a1\").click(function(){
//找到被选中的那一项
//将被选中项添加到右边
$(\"#rightSelect\").append($(\"#leftSelect option:selected\"));
});
//将左边所有商品移动到右边
$(\"#a2\").click(function(){
$(\"#rightSelect\").append($(\"#leftSelect option\"));
});
});
</ >
```
今天内容总结:
定时器
动画效果: show hide slideDown slideUp fadeIn fadeOut animate
基本选择器:
ID选择器: #ID名称
类选择器: .类名
元素选择器: 元素/标签名称
通配符选择器: * 找出所有页面元素 包含页面上所有的标签
选择器分组 : 选择器1, 选择器2 [选择器1,选择器2]
层级选择器:
后代选择器: 选择器1 选择器2 找出所有的后代,儿子孙子曾孙
子元素选择器: 选择器1 >选择器2 找出所有儿子
相邻兄弟选择器: 选择器1+选择器2 : 找出紧挨着自己那个弟弟
兄弟选择器 : 选择器1~选择器2 : 找出所有的弟弟
属性选择器:
选择器[属性名称]
```html
选择器[属性名称][属性名名]
选择器[属性名称=\'属性值\'][属性名称=\'属性值\'][属性名称=\'属性值\']
```
表单选择器:
:input 找出所有的输入项 : 不单单找出input textarea select
:text 找出type类型为 text
:password
基本过滤器:
:even
:odd
:gt
:lt
:eq
:first
:last
表单对象属性:
:selected
:checked
```html
$(function) : 文档加载完成的事件
css() : 修改css样式
prop() : 修改属性/ 获取属性
html() : 修改innerHTML
append : 给自己添加子节点
appendTo : 将自己添加到别人家,给自己找一个爹
prepend : 在自己最前面添加子节点
after : 在自己后面添加一个兄弟
empty : 清空所有子节点
$(cities).each(function(i,n){
})
$.each(arr,function(i,n){
});
了解, 熟悉, 熟练, 精通
经过一个项目,将所有学过串起来
```
使用JQ完成表单的校验(扩展)
需求分析
在用户提交表单的时候, 我们最好是能够在用户数据提交给服务器之前去做一次校验,防止服务器压力过大,并且需要给用户一个友好提示
技术分析
- trigger
- triggerHandler
- is()
步骤分析
1. 首先给必填项,添加尾部添加一个小红点
2. 获取用户输入的信息,做相应的校验
3. 事件: 获得焦点, 失去焦点, 按键抬起
4. 表单提交的事件
代码实现
继续阅读与本文标签相同的文章
企业技术展望：黑科技解放“黄金”劳动力
保护好手中的比特币，比特币诈骗又见新花样！
-
东方富海董事长陈玮：想要牛市，要大幅提升直投比例。
2026-05-19栏目： 教程
-
一个系统，搞定闲鱼服务端复杂问题告警-定位-快速处理
2026-05-19栏目： 教程
-
中小企业如何建官方网站 | 推荐阿里云自营建站服务
2026-05-19栏目： 教程
-
从求生存到修体系，我在阿里找到了技术人的成长模式 | 8月29号栖夜读
2026-05-19栏目： 教程
-
阿里钉钉副总裁白惠源：数字未来已来，“钉钉”能为你带来哪些变革？
2026-05-19栏目： 教程