学习目标
第一章-JQ知识点
知识点-JQ介绍
1.目标
2.路径
- jQuery的概述
- jQuery的作用
- jQuery框架的下载
- jQuery的版本
3.讲解
3.1 jQuery的概述
jQuery是一个优秀的javascript库(类似Java里面的jar包),兼容css3和各大浏览器,提供了dom、events、animate、ajax等简易的操作。 并且jquery的插件非常丰富,大多数功能都有相应的插件解决方案。jquery的宗旨是 write less, do more。
概念:jQuery是JavaScript的一个工具库,将js的一些 常用操作封装成了方法,从而简化js操作html。
3.2 jQuery的作用
jQuery最主要的作用是简化js操作HTML
3.3 jQuery框架的下载
jQuery的官方下载地址:http://www.jquery.com
3.4 jQuery的版本
-
1.x:兼容IE678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日)
-
2.x:不兼容IE678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)
-
3.x:不兼容IE678,很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本.
-
注:开发版本与生产版本,命名为jQuery-x.x.x.js为开发版本,命名为jQuery-x.x.x.min.js为生产版本,开发版本源码格式良好,有代码缩进和代码注释,方便开发人员查看源码,但体积稍大。而生产版本没有代码缩进和注释,且去掉了换行和空行,不方便发人员查看源码,但体积很小
4.小结
- 概念:jQuery是JavaScript的一个工具库,封装了js的一些常见操作,简化js操作html页面。
- jQuery版本
- 开发版:未压缩版 281kb 代码有良好的格式 方便开发人员在开发中阅读学习
- 生产版:压缩版 84kb 代码就一行没有空格换行 节省带宽 提高用户下载速度
案例-JQ快速入门
1.需求
页面一打开,就加载"Hello jQuery"
2.步骤
- 创建项目,将jQuery的js文件添加到项目
- 将jQuery的js文件添加到指定的html页面中
- 编写jQuery代码
3.实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<h1>Hello sz118</h1>
<!--
1.将jQuery的js文件引入项目中
2.将jquery的js引入到要使用的页面
3.使用jQuery
-->
<script>
/*
$:jQuery $(document).ready() = onload
js加载:onload="函数()"
jQuery:$(document).ready(函数)
*/
/*$(document).ready(function () {
alert("Hello jQuery");
});*/
//简易方式
$(function () {
alert("Hello jQuery");
});
</script>
</body>
</html>
4.小结
-
步骤:
-
将jQuery的js文件添加到项目中
-
将jQuery的js文件引入到要使用的html页面中
<script src="js/jquery-3.3.1.min.js"></script>
-
使用jQuery
-
注意:
未定义$,表示jQuery文件在页面中没有引入!
- 后台代码报错,看idea控制台
- 前端代码报错,浏览器F12
-
知识点-JQ和JS对象转换【重点】
1.目标
2.分析
2.1对象说明
js对象:使用js方式【document.getElementXxx()】 获取的对象,称为js对象,可以调用js的属性和方法
jQuery对象:使用jQuery方式【$("选择器")】获取的对象,称为jQuery对象,可以调用jQuery中的方法
问题:js对象不能调用jQuery中提供的方法,jQuery对象不能调用js中提供的属性和方法
解决:如果你想使用js对象调用jQuery方法,或者你想使用jQuery对象调用js属性方法,就需要进行js对象和jQuery对象的转换
jQuery本质上虽然也是js,但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象而不是js方式获得的DOM对象。使用js方式获取的对象是js的DOM对象,使用jQuery方式获取的对象是jQuery对象。两者的转换关系如下
2.2转换语法
js的DOM对象转换成jQuery对象,语法:$(js对象)
jQuery对象转换成js对象,语法:jquery对象[索引] 或 jquery对象.get(索引); 一般索引写0
3.讲解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<!--需求:点击按钮改变span标签中的文本内容-->
<span id="spanId">Hello World</span><br>
<button onclick="fun01()">改变内容【js转jQuery】</button><br>
<button onclick="fun02()">改变内容【jQuery转js】</button><br>
<script>
function fun01() {
//使用js对象js方式改变
//1.获取span标签对象
var span = document.getElementById("spanId");
//2.设置span标签体内容
//span.innerText = "Hello JQuery";
//2.将js对象转为jQuery对象 使用jQuery对象的方式改变 语法:jq对象 = $(js对象);
//变量命名随便起 我这里加$是为了表示该对象是jQuery对象 方便和js对象区分
var $span = $(span);
$span.text("Hello SZ118");
}
function fun02() {
//1.获取span标签对象 使用jQuery的方式获取
var $span = $("#spanId");
//2.jquery对象转js对象 语法:js对象=jq对象[下标] 或 jq对象.get(下标) 下标从0开始
var span = $span[0];
//3.通过js对象使用js方式改变内容
span.innerText = "Hello JS"
}
</script>
</body>
</html>
4.小结
- js对象:使用js方式【document.getElementXxx()】获取的对象是js对象,js对象只能调用js的属性和方法。
- jQuery对象:使用jQuery方式【$(选择器)】获取的对象是jQuery对象,jQuery对象只能调用jQuery中的方法。
- 为什么需要js对象和jQuery转换,原因就是js对象只能调用js的属性和方法,jQuery对象只能调用jQuery的方法
- js对象转jQuery对象:jQuery对象 = $(js对象);
- jQuery对象转js对象:js对象 = jQuery对象[下标] ; 或 jQuery对象.get(下标);
知识点-JQ中事件的使用
1.目标
2.路径
- 基本事件的使用
- jQuery的事件绑定与解绑
- 事件切换 【链式写法】
3.讲解
3.1 基本事件的使用【重点】
- 事件在jq里面都封装成了方法. 去掉了JS里面.on 语法:
js:<button onclick="fun01()">改变内容</button><br>
jQuery:jq对象.事件方法名(function(){ //事件操作 });
eg:点击事件
btn.click(function(){...});
- 点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<button id="btn01">点击</button><br>
<script>
//基本事件使用语法:jq对象.事件方法( function(){事件处理} );
$("#btn01").click(function () {
alert("点我很开心!");
});
</script>
</body>
</html>
- 获得焦点和失去焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
name: <input type="text" id="name"><br>
<script>
//需求:输入框获得焦点和失去事件 在使用焦点时获取输入框输入内容
$("#name").focus(function(){
console.log("获得了焦点");
});
//失去焦点 获取输入框内容
$("#name").blur(function () {
//this表示的就是当前操作的标签对象 是一个js对象
console.log("失去了焦点:"+this.value);
});
</script>
</body>
</html>
- 内容改变事件
<body>
<select name="province" id="province">
<option value="河南">河南</option>
<option value="河北">河北</option>
<option value="广东">广东</option>
<option value="广西">广西</option>
</select><br>
<script>
/*需求3:下拉列表内容改变事件*/
$("#province").change(function () {
console.log("内容改变了:"+this.value);
});
</script>
</body>
- 鼠标相关的事件
<body>
<div id="divId" style="width: 200px;height: 200px;border: 1px solid black"></div>
<script>
/*需求4:当鼠标移入div 背景颜色显示为红色 移出 背景颜色显示为绿色*/
$("#divId").mouseover(function () {
this.style.backgroundColor = "red";
});
$("#divId").mouseout(function () {
this.style.backgroundColor = "green";
});
</script>
</body>
- 键盘相关事件
<body>
<input type="text" name="name" id="name"><br>
<script>
/*需求5:键盘按下松开事件*/
$("#username").keydown(function () {
console.log("键盘按下");
});
$("#username").keyup(function () {
console.log("键盘松开");
});
</script>
</body>
语法:jq对象.事件方法( function(){事件处理代码} );
3.2jQuery的事件绑定与解绑 【了解】
- 事件的绑定
jQuery对象.on(事件名称,function(){} );
其中:事件名称是jQuery的事件方法的方法名称,例如:click、mouseover、mouseout、focus、blur等
eg:点击事件
-- 基本使用 jq对象.click(function(){})
-- 绑定发送 jq对象.on("click",function(){});
- 事件的解绑
jQuery对象.off(事件名称);
其中:参数事件名称如果省略不写,可以解绑该jQuery对象上的所有事件
- 实例代码
<body>
<div id="divId" style="width: 200px;height: 200px;border: 1px solid black"></div>
<button id="btn01">事件绑定</button>
<button id="btn02">事件解绑</button>
<script>
/*需求1:为div绑定点击事件 当点击按钮btn01时,为div绑定点击事件 绑定完成后 点击div 弹出事件绑定成功*/
$("#btn01").click(function () {
//事件处理 就是为div绑定点击事件
$("#divId").on("click",function () {
alert("事件绑定成功");
});
});
/*需求2:为div解绑点击事件 当点击按钮btn02时,为div解绑点击事件 解绑完成后 点击div 将没有任何反应*/
$("#btn02").click(function () {
//事件处理 就是为div解绑点击事件
$("#divId").off("click");
});
</script>
</body>
3.3事件切换
- 普通写法
<body>
<div id="divId" style="width: 200px;height: 200px;border: 1px solid black"></div>
<script>
/*需求:当鼠标移入div,其背景颜色为红色 移出 背景颜色为绿色*/
$("#divId").mouseover(function () {
this.style.backgroundColor = "red";
});
$("#divId").mouseout(function () {
this.style.backgroundColor = "green";
});
</script>
</body>
- 链式写法
<body>
<div id="divId" style="width: 200px;height: 200px;border: 1px solid black"></div>
<script>
//jQuery支持链式写法
$("#divId").mouseover(function () {
this.style.backgroundColor="red";
}).mouseout(function () {
this.style.backgroundColor="green";
});
</script>
</body>
4.小结
- 基本事件使用【重点】
- 语法:jq对象.事件方法名(function(){ //事件处理代码 });
- 常用事件:click、focus、blur、change、keydown、keyup、mouseover、mouseout
- 事件的绑定和解绑
- 事件绑定:jq对象.on("事件名称",function(){});
- 事件解绑:jq对象.off("事件名称");
- 事件切换:jQuery的链式写法 操作之后返回之前的对象
知识点-JQ动画【了解】
1.目标
2.路径
- 基本效果
- 滑动效果
- 淡入淡出效果
3.讲解
3.1基本效果
- 方法
方法名称 | 解释 |
---|---|
show([speed],[easing],[fn]]) | 显示元素方法 |
hide([speed,[easing],[fn]]) | 隐藏元素方法 |
toggle([speed],[easing],[fn]) | 切换元素方法,显示的使之隐藏,隐藏的使之显示 |
- 参数
参数名称 | 解释 |
---|---|
speed | 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000) |
easing | 用来指定切换效果,默认是"swing",可用参数"linear" |
fn | 在动画完成时执行的函数,每个元素执行一次 |
- 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<img id="mm" src="../images/mm.jpg" alt="" width="50%" height="50%"><br>
<button id="btn01">显示【show】</button>
<button id="btn02">隐藏【hide】</button>
<button id="btn03">切换【toggle】</button><br>
<button id="btn04">显示【slideDown】</button>
<button id="btn05">隐藏【slideUp】</button>
<button id="btn06">切换【slideToggle】</button><br>
<button id="btn07">显示【fadeIn】</button>
<button id="btn08">隐藏【fadeOut】</button>
<button id="btn09">切换【fadeToggle】</button><br>
<script>
$("#btn01").click(function () {
$("#mm").show(3000,"linear",function () {
alert("图片显示完成!");
});
});
$("#btn02").click(function () {
$("#mm").hide();
});
$("#btn03").click(function () {
$("#mm").toggle();
});
$("#btn04").click(function () {
$("#mm").slideDown(3000);
});
$("#btn05").click(function () {
$("#mm").slideUp(3000);
});
$("#btn06").click(function () {
$("#mm").slideToggle();
});
$("#btn07").click(function () {
$("#mm").fadeIn(3000);
});
$("#btn08").click(function () {
$("#mm").fadeOut(3000);
});
$("#btn09").click(function () {
$("#mm").fadeToggle();
});
</script>
</body>
</html>
3.2滑动效果
- 方法
方法名称 | 解释 |
---|---|
slideDown([speed,[easing],[fn]]) | 向下滑动方法 |
slideUp([speed,[easing],[fn]]) | 向上滑动方法 |
slideToggle([speed],[easing],[fn]) | 切换元素方法,显示的使之隐藏,隐藏的使之显示 |
- 参数
参数名称 | 解释 |
---|---|
speed | 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000) |
easing | 用来指定切换效果,默认是"swing",可用参数"linear" |
fn | 在动画完成时执行的函数,每个元素执行一次 |
3.3 淡入淡出效果
- 方法
方法名称 | 解释 |
---|---|
fadeIn([speed,[easing],[fn]]) | 淡入显示方法 |
fadeOut([speed,[easing],[fn]]) | 淡出隐藏方法 |
fadeToggle([speed],[easing],[fn]) | 切换元素方法,显示的使之隐藏,隐藏的使之显示 |
- 参数
参数名称 | 解释 |
---|---|
speed | 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000) |
easing | 用来指定切换效果,默认是"swing",可用参数"linear" |
fn | 在动画完成时执行的函数,每个元素执行一次 |
4.小结
- 了解就行, 对着帮助文档玩一下
知识点-JQ选择器【重点】
1.目标
2.路径
- 基本选择器
- 层级选择器
- 属性选择器
- 基本过滤选择器
- 表单属性选择器
3.讲解
3.1.基本选择器【重点】
- 语法
选择器名称 | 语法 | 解释 |
---|---|---|
标签选择器(元素选择器) | $("html标签名") | 获得所有匹配标签名称的元素 |
id选择器 | $("#id的属性值") | 获得与指定id属性值匹配的元素 |
类选择器 | $(".class的属性值") | 获得与指定的class属性值匹配的元素 |
3.2 层级选择器
- 语法
选择器名称 | 语法 | 解释 |
---|---|---|
后代选择器(子子孙孙) | $("A B ") | 选择A元素内部的所有B元素 |
子选择器(儿子) | $("A > B") | 选择A元素内部的所有B子元素 |
兄弟选择器(弟弟) | $("A + B") | 获得A元素同级的下一个B元素 |
相邻选择器(所有弟弟) | $("A ~ B") | 获得A元素同级的所有B元素 |
3 属性选择器
- 语法
选择器名称 | 语法 | 解释 |
---|---|---|
属性选择器 | $("A[属性名]") | 包含指定属性的选择器 |
属性选择器 | $("A[属性名=值]") | 包含指定属性等于指定值的选择器 |
4.基本过滤选择器
- 语法
选择器名称 | 语法 | 解释 |
---|---|---|
首元素选择器 | :first | 获得选择的元素中的第一个元素 |
尾元素选择器 | :last | 获得选择的元素中的最后一个元素 |
非元素选择器 | :not(selecter) | 不包括指定内容的元素 |
偶数选择器 | :even | 偶数,从 0 开始计数 |
奇数选择器 | :odd | 奇数,从 0 开始计数 |
等于索引选择器 | :eq(index) | 指定索引元素 |
大于索引选择器 | :gt(index) | 大于指定索引元素 |
小于索引选择器 | :lt(index) | 小于指定索引元素 |
5.表单属性选择器
- 语法
选择器名称 | 语法 | 解释 |
---|---|---|
可用元素选择器 | :enabled | 获得可用元素 |
不可用元素选择器 | :disabled | 获得不可用元素 |
选中选择器 | :checked | 获得单选/复选框选中的元素 |
选中选择器 | :selected | 获得下拉框选中的元素 |
4.小结
- 基本选择器【重点】
- 标签选择器:$("标签名") 选择指定的标签名称的元素 获取的标签集合
- id选择器:$("#id属性值") 选择指的的id属性值的元素 获取的标签集合 只不过集合只有一个元素
- 类选择器:$(".class属性值") 选择指定的class属性值的元素 获取的标签集合
- 属性选择器、层级选择器、基本过滤选择器 根据帮助文档会使用即可
知识点-JQ操作样式
1.目标
2.讲解
API方法 | 解释 |
---|---|
css(name) | 获取CSS样式 |
css(name,value) | 设置CSS样式 |
addClass(className) | 添加CSS类样式 |
removeClass(className) | 移除CSS类样式 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery-3.3.1.min.js"></script>
<style>
.color{
background-color: red;
}
</style>
</head>
<body>
<div id="divId" style="width: 200px;height: 200px;border: 1px solid black"></div>
<button id="btn01">获取样式</button>
<button id="btn02">设置样式</button>
<script>
//通过css()方法设置获取的实际上是行内样式
/*需求:点击btn01获取div的指定css样式 点击btn02设置div的css样式*/
$("#btn01").click(function () {
console.log("width:"+ $("#divId").css("width"));
});
$("#btn02").click(function () {
//$("#divId").css("width","500px");
$("#divId").css({"width":"500px","height":"500px"});
});
//需求:当鼠标移入div时 设置背景颜色为红色,移出恢复原样
$("#divId").mouseover(function () {
$(this).addClass("color");
}).mouseout(function () {
$(this).removeClass("color");
});
</script>
</body>
</html>
3.小结
- 获取样式:jq对象.css(name);
- 设置样式:jq对象.css(name,value);
- 添加类样式:jq对象.addClass(className);
- 移除类样式:jq对象.removeClass(className);
知识点-JQ操作属性
1.目标
2.讲解
API方法 | 解释 |
---|---|
attr(name,[value]) | 获得/设置属性的值 |
prop(name,[value]) | 获得/设置属性的值(checked,selected) |
-
attr与prop的注意问题
attr与prop是以1.6为界限
checked 和 selected 建议 使用prop获取
其他使用attr获取
3.小结
- 获取元素属性值:attr("属性名") 或 prop("属性名")
- 设置元素属性值:attr("属性名","属性值") 或 prop("属性名","属性值")
- 一般获取或设置选中状态 使用prop()方法
知识点-使用JQ操作DOM
1.目标
2.路径
- jQuery对DOM树中的文本和值进行操作
- jQuery创建,插入节点
- jQuery移除节点
3.讲解
3.1jQuery对DOM树中的文本和值进行操作
- API
API方法 | 解释 |
---|---|
val([value]) js中value | 获得/设置输入框的值 |
text([value]) js中innerText | 获得/设置元素的文本内容 不会解析html标签 |
html([value]) js中innerHtml | 获得/设置元素的标签体内容 会解析html标签 |
- 解释
val() 获得标签里面value属性的值 value属性的封装
val("...") 给标签value属性设置值
html() 获得标签的内容,如果有标签,一并获得。
html("....") 设置html代码,如果有标签,将进行解析。支持标签 封装了innerHTML
text() 获得标签的内容,如果有标签,忽略标签。
text("..."") 设置文本,如果含有标签,把标签当做字符串.不支持标签
-
val()和val(...)
-
text()和html()
-
text(....)和html(...)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<span>hello world</span>
<input type="text" id="name" name="name" value="zs"> <br>
<button id="btn01">获取文件和值</button>
<button id="btn02">设置文本和值</button>
<br>
<!--
val():获取或设置输入框的值
text():获取或设置标签体中的文本 不会解析html标签
html():获取或设置标签体中的文本 会解析html标签
使用技巧:
不传参表示获取,传递参数表示设置
-->
<script>
$("#btn01").click(function () {
//获取输入框的值 等价于js中的value
var value = $("#name").val();
console.log(value);
//获取标签体中的文本
console.log($("span").text());
console.log($("span").html());
});
$("#btn02").click(function () {
//设置输入框的值
$("#name").val("张三是个大坏蛋");
//设置标签体中的文本
//$("span").text("<font color='red'>Hello SZ118</font>");
//设置标签体中的文本 html()
$("span").html("<font color='red'>Hello SZ118</font>");
});
</script>
</body>
</html>
3.2jQuery创建,插入
- API
API方法 | 解释 |
---|---|
$("A") | 创建A元素对象 |
append(element) | 添加成最后一个子元素,两者之间是父子关系 |
prepend(element) | 添加成第一个子元素,两者之间是父子关系 |
appendTo(element) | 添加到父元素的内部最后面 B.appendTo(A) = A.append(B) |
prependTo(element) | 添加到父元素的内部最前面 B.prependTo(A) = A.prepend(B) |
before(element) | 添加到当前元素的前面,两者之间是兄弟关系 |
after(element) | 添加到当前元素的后面,两者之间是兄弟关系 |
- 内部插入:父节点/子字点之间操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<ul>
<li>猪八戒</li>
</ul>
<script>
//1.创建元素
var li1 = $("<li>孙悟空</li>");
var li2 = $("<li>沙悟净</li>");
var p1 = $("<p>唐三藏</p>");
var p2 = $("<p>白龙马</p>");
//2.元素插入
//2.1:内部插入 A.prepend(B):表示将B插入到A的内部最前面
$("ul").prepend(li1);
//2.2:内部插入 A.append(B):表示将B插入A的内部最后面
$("ul").append(li2);
//3.外部插入
//3.1:外部插入 A.before(B):表示将B插入到A的前面 A和B同级
$("ul").before(p1);
//3.2:外部插入 A.after(B) :表示将B插入到A的后面 A和B同级
$("ul").after(p2)
//4.移除元素
//$("ul").remove();
$("ul").empty();
</script>
</body>
</html>
- 外部插入(了解): 兄弟节点之间操作
after a.after(c); 哥哥找弟弟 八戒找沙师弟
<a></a><c></c>
before a.before(c); 弟弟找哥哥 八戒找孙悟空
<c></c><a></a>
3.3jQuery移除节点(对象) 【了解】
- API
API方法 | 解释 |
---|---|
remove() | 删除指定元素(自己移除自己) |
empty() | 清空指定元素的所有子元素(清空元素内容) |
4.小结
4.1操作输入框的值和标签内容
- 获取或设置输入框的值:val()、val(...)
- 获取或设置标签的文本内容:text() 、 text(...)
- 获取或设置标签的HTML内容:html() 、 html(...)
4.2创建和添加节点
- 创建节点:$("A")
- 内部插入:
- A.prepend(B):将B插入到A的内部最前面
- A.append(B):将B插入到A的内部最后面
- 外部插入:
- A.before(B):将B插入到A的前面 同级插入
- A.after(B):将B插入到A的后面 同级插入
4.3移除节点
- remove():自杀
- empty():清空当前节点内容
知识点-JQ遍历【重点】
1.目标
2.路径
- 复习JS方式遍历
- jquery对象方法遍历
- jquery的全局方法遍历
- jQuery3.0新特性for of语句遍历
3.讲解
3.1 复习JS方式遍历
- 语法
for(var i=0;i<元素数组.length;i++){
元素数组[i];
}
- eg
var array = ["张三","李四","王五"];
//js方式遍历
for(i=0;i<array.length;i++){
console.log(array[i]);
}
3.2 jquery对象方法遍历【重点】
- 语法
jquery对象.each(function(index,element){});
其中:(参数名字随便取的)
index:就是元素在集合中的索引
element:就是集合中的每一个元素对象
- eg
//方式一:jq对象.each(function(index,element){}); 两个参数名称可以随便起 【推荐使用】
console.log("jQuery方式一遍历:");
$(array).each(function(index,element){
console.log(index+" --> "+element);
});
3.3 jquery的全局方法遍历
- 语法
$.each(jquery对象,function(index,element){});
其中,
index:就是元素在集合中的索引
element:就是集合中的每一个元素对象
- eg
//方式二:$.each(jq对象,function(index,element){});
console.log("jQuery方式二遍历:");
$.each($(array),function (index,element) {
console.log(index+" --> "+element);
})
3.4 jQuery3.0新特性for of语句遍历
- 语法
for(变量 of jquery对象){
变量;
}
其中,
变量:定义变量依次接受jquery数组中的每一个元素
jquery对象:要被遍历的jquery对象
- eg
//方式三 :jQuery3.0新特性 for(变量 of jq对象){}
console.log("jQuery方式三遍历:");
for(element of array){
console.log(element);
}
4.小结
- jq对象方法遍历【重点】
jq对象.each(function(i,ele){
});
参数1: 下标
参数2:下标对应的元素
参数名字随便取
- 全局方法遍历
$.each(jq对象,function(i,ele){
});
参数1: 下标
参数2:下标对应的值
参数名字随便取
- jq3.0新特性
for(ele of jq对象){
}
第二章-JQ案例
案例一:使用JQuery完成页面定时弹出广告
一,需求分析
- 进入页面3s后弹出广告,3s后广告隐藏
二,思路分析
-
在页面头部添加一个div,作为广告展示区域,并且先隐藏
<!--广告展示div--> <div id="divId" style="width: 100%;height: 100%;display: none"> <img src="img/ad.jpg" alt="" width="100%" height="100%"> </div>
-
设置定时器,绑定广告显示函数showAd()
setTimeout("showAd()",3000);
-
编写showAd()
function showAd(){ //1.广告图片显示 $("#divId").show(); //2.3s之后广告隐藏 设置定时器 绑定广告隐藏函数hideAd() setTimeout("hideAd()",3000); }
-
编写hideAd()
三,代码实现
<div id="divId" style="width: 100%;height: 100%;display: none">
<img src="img/ad.jpg" alt="" width="100%" height="100%">
</div>
</div>
<script>
//1.设置定时函数
setTimeout("showAd()",3000);
//2.编写showAd函数
function showAd() {
/*//1.显示广告
$("#divId").show(3000);
//2.3s之后广告隐藏
setTimeout("hideAd()",6000);*/
//3000表示显示广告图片需要3000ms,function表示图片显示完成之后做某个事情
$("#divId").show(3000,function () {
setTimeout("hideAd()",3000);
});
}
//3.编写hideAd函数
function hideAd() {
$("#divId").hide();
}
</script>
四,小结
- 创建一个div区域用于展示广告图片
- 定时函数 setTimeout("函数()",3000);
- 动画:show() 、 hide()
案例二:使用JQuery完成表格的隔行换色
一,需求分析
二,思路分析
- 使用基本过滤选择器,通过:even设置偶数行背景颜色为蓝色blue
- 使用基本过滤选择器,通过:odd设置奇数行背景颜色为粉色pink
三,代码实现
<script>
//- 筛选出奇数的tr, 设置一个背景色
$("tr:odd").css("backgroundColor","pink");
//- 筛选出偶数的tr, 设置一个背景色
$("tr:even").css("backgroundColor","blue");
</script>
四,小结
- 基本过滤选择器(:even :odd)
- 操作样式 css(css属性,css属性值)
案例三:使用JQuery完成复选框的全选效果
一,需求分析
二.思路分析
-
准备页面
-
获取标题行复选框选中状态 $("#all").prop("checked");
-
为标题行复选框绑定点击事件
$("#all").click(function(){ //1.获取标题行复选框选中状态 var checked = $(this).prop("checked"); //2.将标题行复选框的选中状态 赋值给商品行的复选框 $(".itemSelect").prop("checked",checked); });
三,代码实现
- js代码
<script>
$("#all").click(function(){
//1.获取父复选框的选中状态 使用prop()
var checked = $(this).prop("checked");
//2.将父复选框的选中状态赋值给子复选框 使用prop()
$(".itemSelect").prop("checked",checked);
});
</script>
四,小结
- 点击事件:标题行复选框选中状态改变 需要赋值给商品行复选框
- 使用属性获取和设置方法:prop()
案例四:使用JQuery完成省市联动效果
一,需求分析
二,思路分析
-
准备页面,准备两个select下拉列表,分别存放省市数据
-
准备一个二维数据,存放省份对应城市数据
var citys = [["郑州","信阳","洛阳","南阳","开封"],["广州","深圳","珠海","中山","韶关"],["武汉","襄阳","宜昌","黄冈","仙桃"]];
-
为省份下拉列表绑定内容改变change事件
$("#province").change(function(){ //0.当省份内容选择发送改变时 需要清空城市下拉列表数据 重新加载 //1.获取选中的省份列表的value //2.根据获取的到省份列表value作为下标去城市二维数组中获取到对应的城市列表数组 //3.遍历城市列表数组,创建option标签,插入到城市下拉列表中 });
三,代码实现
- js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../js/jquery-3.3.1.min.js"></script>
</head>
<body>
籍贯:<select name="province" id="province">
<option value="-1">请选择</option>
<option value="0">河南</option>
<option value="1">广东</option>
<option value="2">湖北</option>
</select>
<select name="city" id="city">
<option value="-1">请选择</option>
</select>
<script>
var citys = [["郑州","信阳","洛阳","南阳","开封"],["广州","深圳","珠海","中山","韶关"],["武汉","襄阳","宜昌","黄冈","仙桃"]];
$("#province").change(function () {
//0.当每次选择省份改变之后需要清空城市下拉列表内容
//$("#city").empty();
$("#city").html("<option>请选择</option>");
//1.获取省份下拉列表的值value
var value = $(this).val();
//2.根据省份列表的value去二维数组中获取对应的城市数据
var cityes = citys[value];
//3.遍历城市数据【1.创建option元素 2.插入到城市下拉列表中】
$(cityes).each(function(index,element){
var option = $("<option>"+element+"</option>");
$("#city").append(option);
});
});
</script>
</body>
</html>
四.小结
- 内容改变事件:$("#province").change(function(){ ... });
- 遍历数据:jq对象.each(function(index,element){});
- 创建元素:$("A")
- 插入元素:A.append(B)
- 清空标签内容:empty
扩展案例_表格换色
1.需求
- 鼠标进入当前行tr的时候背景颜色变为red
- 鼠标离开当前行tr的时候背景颜色变为原来的颜色
2.技术
- 选择器【基本过滤选择器 :even :odd】
- 事件(mouseover() mouseout())
- css()
3.思路
-
给tr设置鼠标移入事件
$("tr").mouseover(function(){ //1.获取当前行之前的颜色 //2.设置当前行背景颜色为红色 });
-
给tr设置鼠标移出事件
$("tr").mouseout(function(){ //1.设置当前行背景颜色为原来的颜色 });
4.代码
<script>
var oldColor;
$("tr").mouseover(function(){
//1.获取当前行之前的颜色
oldColor = $(this).css("backgroundColor");
//2.设置当前行背景颜色为红色
$(this).css("backgroundColor","red");
}).mouseout(function () {
//3.移出设置当前行的颜色为原来的颜色
$(this).css("backgroundColor",oldColor);
});
</script>
扩展案例_电子时钟
1.需求
2,思路
-
准备页面,创建一个标签(h1、p、span)用于存放当前时间
-
设置定时函数,每隔1s重新获取一下时间
setInterval("myClock()",1000); function myClock(){ //1.获取当前时间 //2.将当前时间设置到标签体中 }
3.实现
<h1 id="curTime"></h1>
<script>
// 2. 设置定时函数,间隔1s调用一次
setInterval("clock()",1000);
//3.编写时钟函数 获取当前时间
function clock() {
//3.1:获取当前时间
var dateStr = new Date().toLocaleString();
//3.2:将当前时间放入到h1标签中显示
$("#curTime").text(dateStr);
}
</script>
本章小结
-
jQuery概念:jQuery是js的一个库,类似于java中的jar包,封装了js中的属性方法,解决了一些浏览器兼容性问题,简化js操作html。
-
jQuery入门
<html> <head> </head> <body> <script src="jQuery的js文件路径"></script> <script> //jQuery代码 操作Html </script> </body> </html>
-
jQuery报错:js文件没有引入
-
jQuery对象和js对象转换
js对象:使用js方式【document.getElementXxx()】获取的对象,称为js对象,只能调用js中的属性和方法。
jQuery对象:使用jQuery方式【$("选择器")】获取到的对象,称为jQuery对象,只能调用jQuery中的方法。
js对象-->jQuery对象:var jq对象=$(js对象);
jQuery对象-->js对象:var js对象 = jq对象[下标] ; 或者 var js对象=jq对象.get(下标);
-
jQuery事件的使用
- 基本事件使用 jq对象.事件方法名(function(){ //处理 });
- 基本事件:click、focus、blur、change、mouseover、mouseout、keydown、keyup
- 事件的绑定和解绑
- 绑定:jq对象.on("事件方法名",function(){});
- 解绑:jq对象.off("事件方法名");
- 事件的切换【jQuery链式写法】
- jd对象.mouseover().mouseout();
-
jQuery动画【了解】
- show|hide|toggle
- slideDown|slideUp|slideToggle
- fadeIn|fadeOut|fadeToggle
-
jQuery选择器
- 基本选择器 【标签选择器、id选择器、类选择器】
- 层次选择器【后代选择器、子选择器、兄弟选择器、同辈选择器】
- 属性选择器
- 基本过滤选择器【:first :last :even :odd :eq(下标)】
-
jQuery操作样式
- css(name):获取指定的css样式属性值
- css(name,value):设置css样式
- addClass(类样式名称):设置类样式
- removeClass(类样式名称):移除类样式
-
jQuery操作属性
- attr(name)|prop(name):获取指定属性
- attr(name,value)|prop(name,value):设置属性
- 单选框复选框以及下拉列表的选中状态属性的获取和设置一般使用prop()
-
jQuery操作标签文本和值
- val():获取或设置输入框的值
- text():获取或设置标签体中的文本 不会解析html标签
- html():获取或设置标签体中的html内容 会解析html标签
-
jQuery的DOM操作
- 创建节点:var node = $("标签内容");
- 插入节点:
- 内部插入
- A.prepend(B):在A中插入B,将B插入到最前面
- A.append(B):在A中插入B,将B插入到最后面
- 外部插入
- A.before(B):将B插入到A的前面 同级插入
- A.after(B):将B插入到A的后面 同级插入
- 内部插入
- 元素移除
- remove():删除当前元素
- empty:清空当前元素内容
-
jQuery遍历
- jq对象方法遍历:jq对象.each(function(index,element){});
- jq全局方法遍历:$.each(jq对象,function(index,element){});
- jq3.0新特性:for(迭代变量 of jq对象){}
-
练习:
- jQ和js对象转换
- jQuery基本事件使用
- jQuery基本选择器
- jQuery对象方法遍历
- 案例....