当前位置: 首页 > 工具软件 > jQuery Guide > 使用案例 >

jquery

沈长恨
2023-12-01

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(索引)

代码演示:

  1. 演示使用js的DOM对象方式、jquery对象方式获取div中的文本数据
  2. 演示将js的DOM对象 转换成 jquery对象,再使用转换后的jquery对象方式获取div中的数据
  3. 演示将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[属性名^=值]”)
  • 获得属性名 以 值 结尾 元素: ( &quot; A [ 属 性 名 (&quot;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>

 类似资料: