jquery
沈长恨
jQuery框架
一. jQuery框架介绍
1.1 jQuery框架概述
jQuery的概述
jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。JQuery封装了JavaScript常用的功能代码，提供了一套易于使用的API，可以跨多种浏览器工作，使HTML文档的遍历和操作、事件处理、动画设计和Ajax交互等操作变得更加简单。
jQuery的作用
jQuery最主要的作用是简化js的Dom树的操作
1.2 jQuery框架的下载与引入
jQuery的官方下载
- jQuery的官方下载地址：http://www.jquery.com
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，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本
- 开发版本与生产版本，命名为jQuery-x.x.x.js为开发版本，命名为jQuery-x.x.x.min.js为生产版本，开发版本源码格式良好，有代码缩进和代码注释，方便开发人员查看源码，但体积稍大。而生产版本没有代码缩进和注释，且去掉了换行和空行，不方便发人员查看源码，但体积很小。
jQuery的引入
在需要使用jQuery的html中使用js的引入方式进行引入，如下：
<script type="text/javascript" src="jquery-x.x.x.js></script>
jQuery引入成功的测试
关键代码解释
$(function(){ 代码 })
- 是指 $(document).ready(function(){}) 的简写
- 用来在DOM加载完成之后执行一系列预先定义好的函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入jQuery -->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<!-- 测试jQuery -->
<script type="text/javascript">
$(function(){
alert("jQuery引入成功....");
});
</script>
</head>
<body>
</body>
</html>
1.3 jQuery对象与js对象之间的转换
jQuery本质上虽然也是js，但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象，而不是js方式获得的DOM对象，二者的API方法不能混合使用，若想使用对方的API，需要进行对象的转换。
使用js方式获取的对象是js的DOM对象，使用jQuery方式获取的对象是jQuery对象。两者的转换关系如下：
- js的DOM对象转换成jQuery对象，语法：
$(js的DOM对象) - jQuery对象转换成js对象，语法：
jquery对象[索引] 或 jquery对象.get(索引)
代码演示：
- 演示使用js的DOM对象方式、jquery对象方式获取div中的文本数据
- 演示将js的DOM对象 转换成 jquery对象，再使用转换后的jquery对象方式获取div中的数据
- 演示将jquery对象 转换成 js的DOM对象， 再使用转换后js的DOM对象方式获取div中的数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入jQuery -->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<!-- 测试jQuery -->
<script type="text/javascript">
$(function(){
//1.演示使用js的DOM对象方式获取div中的文本数据
var divEle = document.getElementById("myDiv");//js的DOM对象
alert(divEle.innerHTML);//js对象的innerHTML属性
//1.演示使用jquery对象方式获取div中的文本数据
var $divEle = $("#myDiv");//jQuery对象
alert($divEle.html());//jQuery对象的html方法
//2.演示将js的DOM对象 转换成 jquery对象，再使用转换后的jquery对象方式获取div中的数据
alert($(divEle).html());//转换后正常执行
//3.演示将jquery对象 转换成 js的DOM对象， 再使用转换后js的DOM对象方式获取div中的数据
alert($divEle[0].innerHTML);
});
</script>
</head>
<body>
<div id="myDiv">通过不同方式获得文本内容</div>
</body>
</html>
小结：
-
js的DOM对象转换成jQuery对象，语法：
$(js的DOM对象)var jsDomEle = document.getElementById("myDiv"); //js的DOM对象 var $jQueryEle = $(jsDomEle); //js的DOM对象 转换成 jquery对象 -
jQuery对象转换成js对象，语法：
jquery对象[索引] 或 jquery对象.get(索引)var $jQueryEle = $("#myDiv"); //jQuery对象 var jsDomEle = $jQueryEle[0]; //jquery对象 转换成 js的DOM对象 -
提示：JQuery对象变量名前面的
$符号，主要作用是便于我们区分该变量是 JsDOM对象 与 jQuery对象，并无特殊含义。写$符号代表jQuery对象 是 行业书写规范，不加$，代码也没有错误。
二. jQuery选择器
2.1 基本选择器
- 语法
| 选择器名称 | 语法 | 解释 |
|---|---|---|
| 标签选择器（元素选择器） | $(“html标签名”) | 获得所有匹配标签名称的于元素 |
| id选择器 | $("#id的属性值") | 获得与指定id属性值匹配的元素 |
| 类选择器 | $(".class的属性值") | 获得与指定的class属性值匹配的元素 |
需求
- 改变 id 为 one 的元素的背景色为 红色
- 改变元素名为
的所有元素的背景色为 红色
- 改变 class 为 mini 的所有元素的背景色为 红色
- 改变所有的元素和 id 为 two 的元素的背景色为红色
实现：
<script type="text/javascript">
//<input type="button" value="改变 id 为 one 的元素的背景色为 红色" id="b1"/>
$("#b1").click(function(){
$("#one").css("backgroundColor","red");
});
//<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色" id="b2"/>
$("#b2").click(function(){
$("div").css("backgroundColor","red");
});
//<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色" id="b3"/>
$("#b3").click(function(){
$(".mini").css("backgroundColor","red");
});
//<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色" id="b4"/>
$("#b4").click(function(){
$("span,#two").css("backgroundColor","red");
});
</script>
2.2 层级选择器
语法:
- 获得A元素内部的所有的B元素：$("A B ") — 后代选择器(包含子孙)
- 获得A元素下面的所有B子元素：$(“A > B”) 只有儿子,没有孙子
- 获得A元素同级下一个B元素：$(“A + B”) 下一个兄弟
- 获得A元素同级所有后面B元素：$(“A ~ B”) 后边的所有兄弟
- 获取A元素的同级B元素: $(“A”).siblings(“B”) 获取所有的兄弟
需求：
- 改变 <\body> 内所有 <\div> 的背景色为红色
- 改变 <\body> 内 子 <\div> 的背景色为 红色
实现：
<script type="text/javascript">
//<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色" id="b1"/>
$("#b1").click(function(){
$("body div").css("background-color","red");
});
//<input type="button" value=" 改变 <body> 内 子 <div> 的背景色为 红色" id="b2"/>
$("#b2").click(function(){
$("body>div").css("background-color","red");
});
</script>
2.3 属性选择器
语法:
- 获得有属性名的元素：$(“A[属性名]”)
- 获得属性名 等于 值 元素：$(“A[属性名=值]”)
- 复合属性选择器，多个属性同时过滤：$(“A[属性名!=值]…[属性名!=值]”)
- 获得属性名 不等于 值 元素：$(“A[属性名!=值]”)
- 获得属性名 以 值 开头 元素：$(“A[属性名^=值]”)
- 获得属性名 以 值 结尾 元素： ( " A [ 属 性 名 ("A[属性名 ("A[属性名=值]")
- 获得属性名 含有 值 元素：$(“A[属性名*=值]”)
需求:
- 含有属性title 的div元素背景色为红色
- 属性title值等于test的div元素背景色为红色
- 选取有属性id的div元素，然后在结果中选取属性title等于“test”的 div 元素背景色为红色
实现:
<script type="text/javascript">
//<input type="button" value=" 含有属性title 的div元素背景色为红色" id="b1"/>
$("#b1").click(function(){
$("div[title]").css("background-color","red");
});
//<input type="button" value=" 属性title值等于test的div元素背景色为红色" id="b2"/>
$("#b2").click(function(){
$("div[title='test']").css("background-color","red");
});
//<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title等于“test”的 div 元素背景色为红色" id="b3"/>
$("#b3").click(function(){
$("div[id][title='test']").css("background-color","red");
});
</script>
2.4 基本过滤选择器
语法:
- 获得选择的元素中的第一个元素： :first
- 获得选择的元素中的最后一个元素： :last
- 不包括指定内容的元素例如： :not(selecter)
- 偶数，从 0 开始计数： :even
- 奇数，从 0 开始技术： :odd
- 指定索引(index)元素： :eq(index)
- 大于指定索引(index)元素： :gt(index)
- 小于指定索引(index)元素： :lt(index)
- 获得标题,固定写法 （<\h1> /<\h2> …） :header
- 获得正在执行的动画,固定写法 :animated
需求：
- 改变第一个 div 元素的背景色为 红色
- 改变最后一个 div 元素的背景色为 红色
- 改变class不为 one 的所有 div 元素的背景色为 红色
- 改变索引值为偶数的 div 元素的背景色为 红色
- 改变索引值为奇数的 div 元素的背景色为 红色
- 改变索引值为大于 3 的 div 元素的背景色为 红色
- 改变索引值为等于 3 的 div 元素的背景色为 红色
- 改变索引值为小于 3 的 div 元素的背景色为 红色
- 改变所有的标题元素的背景色为 红色
实现：
<script type="text/javascript">
//<input type="button" value=" 改变第一个 div 元素的背景色为 红色" id="b1"/>
$("#b1").click(function(){
$("div:first").css("background-color","red");
});
//<input type="button" value=" 改变最后一个 div 元素的背景色为 红色" id="b2"/>
$("#b2").click(function(){
$("div:last").css("background-color","red");
});
//<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色" id="b3"/>
$("#b3").click(function(){
$("div:not(.one)").css("background-color","red");
});
//<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色" id="b4"/>
$("#b4").click(function(){
$("div:even").css("background-color","red");
});
//<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色" id="b5"/>
$("#b5").click(function(){
$("div:odd").css("background-color","red");
});
//<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色" id="b6"/>
$("#b6").click(function(){
$("div:gt(3)").css("background-color","red");
});
//<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色" id="b7"/>
$("#b7").click(function(){
$("div:eq(3)").css("background-color","red");
});
//<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色" id="b8"/>
$("#b8").click(function(){
$("div:lt(3)").css("background-color","red");
});
//<input type="button" value=" 改变所有的标题元素的背景色为 红色" id="b9"/>
$("#b9").click(function(){
$(":header").css("background-color","red");
});
</script>
2.5 表单属性选择器
语法:
- 获得可用元素： :enabled
- 获得不可用元素： :disabled
- 获得单选/复选框选中的元素（单选radio ，多选checkbox）： :checked
- 获得下拉框选中的元素（下列列表select）： :selected
需求:
- 利用 jQuery 对象的 val() 方法改变表单内可用 元素的值
- 利用 jQuery 对象的 val() 方法改变表单内不可用 元素的值
- 利用 jQuery 对象的 length 属性获取多选框选中的个数
- 利用 jQuery 对象的 text() 方法获取下拉框选中的内容
实现:
<script type="text/javascript">
// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input type="text"> 元素的值" id="b1"/>
$("#b1").click(function(){
var $input = $("input[type='text']:enabled");
$input.val("input标签可用文本输入框的值被改变");
});
// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input type="text"> 元素的值" id="b2"/>
$("#b2").click(function(){
var $input = $("input[type='text']:disabled");
$input.val("input标签不可用文本输入框的值被改变");
});
// <input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/>
$("#b3").click(function(){
var $cb = $("input[type='checkbox']:checked");
alert($cb.length);
});
// <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/>
//获取id是b4的按钮对象,增加一个单击事件
$("#b4").click(function(){
var $option = $("option:selected");
alert($option.text());
---------------------------------------
var $options = $("option:selected");
for(var i=0;i<$options.length;i++){
alert($($options[i]).text());
});
</script>
三. jQuery的DOM操作
3.1 jQuery对DOM树中的文本和值进行操作
-
语法
html() === innerHTML <\h1>
纯文本
text() === innerText
val() === value
html text val 传递参数代表赋值 空参代表获取
- 代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"> </script>
<script type="text/javascript">
//页面加载完毕事件
$(function(){
//获取张三
alert($("#myinput").val());
//获得mydiv的文本内容
alert($("#mydiv").text());
//获得mydiv的标签体内容
alert($("#mydiv").html())
});
</script>
</head>
<body>
<input id="myinput" type="text" name="username" value="张三" /><br />
<div id="mydiv"><p><a href="#">标题标签</a></p></div>
</body>
</html>
3.2 jQuery对DOM树中的属性进行操作
- 语法
| API方法 | 解释 |
|---|---|
| attr(name[,value]) | 获得/设置属性的值 setAttribute和getAttribute |
| prop(name[,value]) | 获得/设置属性的值(checked，selected) |
- 代码演示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>获取属性</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<ul>
<li id="bj" name="beijing" xxx="yyy" >北京</li>
<li id="tj" name="tianjin">天津</li>
</ul>
<input type="checkbox" id="hobby"/>
</body>
<script type="text/javascript">
//获取北京节点的name属性值
alert($("#bj").attr("name"));
//设置北京节点的name属性的值为dabeijing
$("#bj").attr("name","dabeijing");
//新增北京节点的discription属性 属性值是didu
$("#bj").attr("discription","wudu");
//删除北京节点的name属性并检验name属性是否存在
$("#bj").removeAttr("name");
//获得hobby的的选中状态
alert($("#hobby").prop("checked"));
</script>
</html>
- attr与prop的注意问题
- attr与prop是以1.6为界限
- checked 和 selected 使用prop获取
- 其他使用attr获取 获取不到换成prop
3.3 jQuery对class进行操作
- 语法
| API方法 | 解释 |
|---|---|
| css(name[,value]) | 获取/设置指定的CSS样式 |
| addClass(value) | addClass(类样式名) 给指定的对象添加新的类样式，指定类样式名字即可 |
| removeClass(value) | removeClass(类样式名) 删除指定的类样式 |
| toggleClass(value) | toggleClass(类样式名) 切换样式，如果没有类样式，则添加，如果有类样式，则删除 |
- 代码演示
<script type="text/javascript">
//<input type="button" value="采用属性增加样式(改变id=one的样式)" id="b1"/>
$("#b1").click(function(){
$("#one").attr("class","second");
});
//<input type="button" value=" addClass" id="b2"/>
$("#b2").click(function(){
$("#one").addClass("second");
});
//<input type="button" value="removeClass" id="b3"/>
$("#b3").click(function(){
$("#one").removeClass("second");
});
//<input type="button" value=" 切换样式" id="b5"/>
$("#b4").click(function(){
$("#one").toggleClass("second");
});
//<input type="button" value=" 通过css()获得id为one背景颜色" id="b5"/>
$("#b5").click(function(){
alert($("#one").css("background-color"));
});
// <input type="button" value=" 通过css()设置id为one背景颜色为绿色" id="b6"/>
$("#b6").click(function(){
$("#one").css("background-color","green");
});
</script>
3.4 jQuery创建插入对象
- 语法
| API方法 | 解释 |
|---|---|
| $("") | 创建A元素对象,同时可以给对象添加属性和标签体 |
| append(element) | 添加成最后一个子元素，两者之间是父子关系 |
| prepend(element) | 添加成第一个子元素，两者之间是父子关系 |
| before(element) | 添加到当前元素的前面，两者之间是兄弟关系 |
| after(element) | 添加到当前元素的后面，两者之间是兄弟关系 |
- 代码演示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>内部插入脚本</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="../js/jquery-3.3.1.js"></script>
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<ul id="love">
<li id="fk" name="fankong">反恐</li>
<li id="xj" name="xingji">星际</li>
</ul>
<div id="foo1">Hello1</div>
</body>
<script type="text/javascript">
/**将反恐放置到city的后面*/
$("#city").append($("#fk"));
/**将反恐放置到city的最前面*/
$("#city").prepend($("#fk"));
//将反恐插入到天津后面
$("#tj").after($("#fk"));
//将反恐插入到天津前面
$("#tj").before($("#fk"));
//将反恐插入到天津后面
$("#fk").insertAfter($("#tj"));
//将反恐插入到天津前面
$("#fk").insertBefore($("#tj"));
</script>
</html>
3.5 jQuery删除对象
- 语法
| API方法 | 解释 |
|---|---|
| remove() | 删除指定元素 |
| empty() | 清空指定元素的所有子元素 |
- 代码演示
<!DOCTYPE HTML>
<html>
<head>
<title>删除节点</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<p class="hello">Hello</p> how are <p>you?</p>
</body>
<script type="text/javascript">
//删除<li id="bj" name="beijing">北京</li>
$("#bj").remove();
//删除所有的子节点 清空元素中的所有后代节点(不包含属性节点).
$("#city").empty();
</script>
</html>
3.6 案例-表格隔行换色
- 效果
[外链图片转存失败(img-ZF9ucU5E-1567146949158)(img\99.png)]
- 代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("tr:gt(1):even").css("background-color", "pink");
$("tr:gt(1):odd").css("background-color", "yellow");
});
</script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
<tr>
<td colspan="5"><input type="button" value="删除"></td>
</tr>
<tr style="background-color: #999999;">
<th><input type="checkbox"></th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
</html>
3.7 案例-复选框全选全不选
- 代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
//创建一个checkbox全选框的单击事件的响应函数
function selectAll(obj){
//通过class属性值获取所有的其他复选框,设置checked属性值和全选一样
$(".itemSelect").prop("checked",obj.checked);
}
</script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
<tr>
<td colspan="5"><input type="button" value="删除"></td>
</tr>
<tr>
<th><input type="checkbox" onclick="selectAll(this)"></th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
</html>
四. jQuery动画
4.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>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function hideFn(){
$("#showDiv").hide("slow","swing");
}
function showFn(){
$("#showDiv").show("normal","swing");
}
function toggleFn(){
$("#showDiv").toggle(5000,"linear");
}
</script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
<div id="showDiv" style="width:300px;height:300px;background:red">
div显示和隐藏
</div>
</body>
</html>
4.2 滑动效果
- 方法
| 方法名称 | 解释 |
|---|---|
| slideDown([speed,[easing],[fn]]) | 向下滑动方法 |
| slideUp([speed,[easing],[fn]]) | 向上滑动方法 |
| slideToggle([speed],[easing],[fn]) | 切换元素方法，显示的使之隐藏，隐藏的使之显示 |
- 参数
| 参数名称 | 解释 |
|---|---|
| speed | 三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) |
| easing | 用来指定切换效果，默认是"swing"，可用参数"linear" |
| fn | 在动画完成时执行的函数，每个元素执行一次 |
- 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function hideFn(){
$("#showDiv").fadeOut("slow","swing");
}
function showFn(){
$("#showDiv").fadeIn("normal","swing");
}
function toggleFn(){
$("#showDiv").fadeToggle(5000,"linear");
}
</script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
<div id="showDiv" style="width:300px;height:300px;background:red">
div显示和隐藏
</div>
</body>
</html>
4.3 广告的自动显示与隐藏案例
- 需求描述
页面打开，延迟几秒钟，广告从上向下慢慢滑下显示，停留几秒，再从下向上慢慢滑动隐藏。
- 代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站的首页</title>
<style>
#content{width:100%;height:500px;background:#999}
</style>
<!--引入jquery-->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function(){
adFn();
});
//定时广告的方法
function adFn(){
//5秒钟弹出广告
setTimeout(
function(){
$("#ad").slideDown(3000);
//$("#ad").fadeIn(3000
setTimeout(
function(){
$("#ad").slideUp(3000);
//$("#ad").fadeOut(3000);
},
8000
);
},
5000
);
}
</script>
</head>
<body>
<!-- 整体的DIV -->
<div>
<!-- 广告DIV -->
<div id="ad" style="display: none;">
<img style="width:100%" src="../img/ad.jpg" />
</div>
<!-- 下方正文部分 -->
<div id="content">
正文部分
</div>
</div>
</body>
</html>
五.jQuery的遍历
jQuery对象本身就是数组对象，通过jQuery选择器获得的都是满足该选择器条件的元素对象的集合体。因此常常需要对jQuery对象进行遍历。
5.1 原始方式遍历
- 语法
for(var i=0;i<元素数组.length;i++){
元素数组[i];
}
- 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var $lis = $("#city li");
//1、原始循环方式
for(var i=0;i<$lis.length;i++){
console.log($($lis[i]).html());
}
});
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
5.2 jquery对象方法遍历
- 语法
jquery对象.each(function(index,element){});
其中，
index:就是元素在集合中的索引
element：就是集合中的每一个元素对象
- 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var $lis = $("#city li");
$lis.each(function(index,element){
console.log(index+"--"+$(element).html());
});
});
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
5.3 jquery的全局方法遍历
- 语法
$.each(jquery对象,function(index,element){});
其中，
index:就是元素在集合中的索引
element：就是集合中的每一个元素对象
- 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var $lis = $("#city li");
$.each($lis, function(index,element) {
console.log(index+"--"+$(element).html());
});
});
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
5.4 jQuery3.0新特性for of语句遍历
- 语法
for(变量 of jquery对象){
变量；
}
其中，
变量:定义变量依次接受jquery数组中的每一个元素
jquery对象：要被遍历的jquery对象
- 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 版本是3以上 -->
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var $lis = $("#city li");
for(li of $lis){
console.log($(li).html());
}
});
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
六.jQuery的事件
常用事件
jQuery绑定事件,事件名字没有on
| 事件名称 | 事件说明 |
|---|---|
| blur | 事件源失去焦点 |
| click | 单击事件源 |
| change | 内容改变 |
| keydown | 接受键盘上的所有键 |
| keypress | 接受键盘上的部分键（ctrl,alt,shift等无效） |
| keyup | 键盘抬起 |
| mouseover | 鼠标悬停(鼠标移入) |
| mouseout | 鼠标离开 |
6.1 on绑定事件
- 语法
jQuery元素对象.on(事件名称,function(){
//逻辑代码
})
其中：事件名称是jQuery的事件方法的方法名称，例如：click、mouseover、mouseout、focus、blur等
- 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
/*$("#btn").on("click",function(){
alert("按钮被点击了!");
});*/
$("#btn").click(function(){
alert("按钮被点击了!");
});
});
</script>
</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
</body>
</html>
6.2 off解绑事件
- 语法
jQuery元素对象.off(事件名称);
其中：参数事件名称如果省略不写，可以解绑该jQuery对象上的所有事件
- 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#btn-on").on("click",function(){
alert("使用on绑定点击事件");
});
$("#btn-off").click(function(){
$("#btn-on").off("click");
});
});
</script>
</head>
<body>
<input id="btn-on" type="button" value="使用on绑定点击事件">
<input id="btn-off" type="button" value="使用off解绑点击事件">
</body>
</html>
6.3 事件切换
普通写法
- 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#myDiv").mouseover(function(){
$(this).css("background","green");
});
$("#myDiv").mouseout(function(){
$(this).css("background","red");
});
});
</script>
</head>
<body>
<div id="myDiv" style="width:300px;height:300px;background:red">鼠标移入变成绿色，移出回复红色</div>
</body>
</html>
链式写法
- 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#myDiv").mouseover(function(){
$(this).css("background","green");
}).mouseout(function(){
$(this).css("background","red");
});
});
</script>
</head>
<body>
<div id="myDiv" style="width:300px;height:300px;background:red">鼠标移入变成绿色，移出回复红色</div>
</body>
</html>
切换函数写法
- 语法
hover([over,]out)
其中：
over代表鼠标移入事件触发的函数；
out代表鼠标移出事件触发的函数。
- 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#myDiv").hover(function(){
$(this).css("background","green");
},function(){
$(this).css("background","red");
});
});
</script>
</head>
<body>
<div id="myDiv" style="width:300px;height:300px;background:red">鼠标移入变成绿色，移出回复红色</div>
</body>
</html>
类似资料：