菜单 搜索
首页 前端知识 JavaWeb之jQuery

JavaWeb之jQuery

2024-02-01 12:02:32 前端知识 前端哥 15 192 我要收藏

28、jQuery

28.1、jQuery的概述

概念：一个JavaScript框架。简化JS开发

  • jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互
  • JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已

28.2、jQuery的快速入门

步骤：

  1. 下载jQuery

    • 目前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插件不支持这个版本

      ​ 目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）

    • jquery-xxx.js 与 jquery-xxx.min.js区别：

      1. jquery-xxx.js ：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
      2. jquery-xxx.min.js ：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快

  2. 导入jQuery的js文件：导入min.js文件

  3. 使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>快速入门</title>
<!--  导入jquery文件-->
  <script src="js/jquery.min.js"></script>
</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
</body>
<script>
<!--  获取div元素对象-->
let div1 = $("#div1");
let div2 = $("#div2");
alert(div1.html())
alert(div2.html())
</script>
</html>

28.3、jQuery对象和JS对象区别与转换

jQuery对象在操作时，更加方便

jQuery对象和js对象方法不通用

两者相互转换

  • jq --> js：jq对象[索引] 或者 jq对象.get(索引)
  • js --> jq：$(js对象)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>快速入门</title>
    <!--  导入jquery文件-->
    <script src="js/jquery.min.js"></script>
</head>
<body>
<div id="div1">div1...</div>
<div id="div2">div2...</div>
</body>
    <script>
        //获取所有div元素的对象
        //JS方式获取
        let divs = document.getElementsByTagName("div");
        alert(divs)
        //JQ方式获取
        let $divs = $("div");
        alert($divs)
        //获取div元素中的值
        //js的方式
        for (var i = 0;i<divs.length;i++){
            let innerText = divs[i].innerText;
            alert(innerText)
        }
        //jq的方式
        let html = $divs.html();
        alert(html)
        //修改div元素中的值
        //js的方式
        for (var i = 0;i<divs.length;i++){
            divs[i].innerText = "aaa";
        }
        //jq的方式
        $divs.html("bbb");
        //js转换jq的方式
        let $1 = $(divs);
        alert($1)
        //jq转换js的方式
        //let div = $divs[0];
        let div = $divs.get(1);
        alert(div);
    </script>
</html>

28.4、事件绑定&入口函数&样式控制

事件绑定

//获取按钮对象绑定单击事件 
$("#b1").click(function(){
    alter("abc");
})

入口函数

//当页面加在完执行函数里面的代码
$(function(){
    
});
/* 
	window.onload 和 $(function) 区别
		window.onload 只能定义一次，如果定义多次，后面的会将前边的覆盖掉
		$(function)可以定义多次的
*/

样式控制：css方法

//$("#div1").css("background-color","red");
$("#div1").css("backgroundColor","pink");

28.5、选择器

选择器：筛选具有相似特征的元素（标签）

28.5.1、基本选择器

  1. 标签选择器（元素选择器）
    • 语法：$("html标签名") 获得所有匹配标签名称的元素
  2. id选择器
    • 语法：$("#id的属性值") 获得与指定id属性值匹配的元素
  3. 类选择器
    • 语法：$(".class的属性值") 获得与指定的class属性值匹配的元素
  4. 并集选择器
    • 语法：$("选择器1,选择器2...") 获取多个选择器选中的所有元素
<!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.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 180px;
			    height: 180px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div .mini01{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			
			
	 </style>
	<script type="text/javascript">
		$(function (){
			//<input type="button" value="保存"  class="mini" name="ok"  class="mini" />
			//<input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
			$("#b1").click(function (){
				$("#one").css("background-color","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>
   
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
		 <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>
		 <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
		 <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
		
 
		 <h1>有一种奇迹叫坚持</h1>
		 <h2>自信源于努力</h2>
		 
	   <div id="one">
	    	 id为one       
		 </div>
		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini 
		       <div  class="mini" >class是 mini</div>
		 </div>
		
		 <div class="one" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" >
		 	  class是 one 
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
		

		<span class="spanone">class为spanone的span元素</span>
		<span class="mini">class为mini的span元素</span>
		

		<input type="text" value="zhang" id="username" name="username">
	
	</body>
	
	
	
</html>

28.5.2、层级选择器

  1. 后代选择器
    • 语法：$("A B") 选择A元素内部的所有B元素
  2. 子选择器：
    • 语法：$("A > B") 选择A元素内部的所有B子元素
<!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.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 180px;
			    height: 180px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div .mini01{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
	 </style>
    <script type="text/javascript">
		$(function (){
			// <input type="button" value="保存" className="mini" name="ok" className="mini"/>
			// <input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色" id="b1"/>
			$("#b1").click(function (){
				$("body div").css("backgroundColor","red");
			})
			// <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色" id="b2"/>
			$("#b2").click(function (){
				$("body > div").css("backgroundColor","red");
			})
		})

		
	</script>
   
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色"  id="b1"/>
		 <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色"  id="b2"/>
		
 
		 <h1>有一种奇迹叫坚持</h1>
		 <h2>自信源于努力</h2>
		 
	     <div id="one">
	    	 id为one  
		     
		 </div>
		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini 
		       <div  class="mini" >class是 mini</div>
		</div>
		
		 <div class="one" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one">
		 	  class是 one 
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
		
		
		<span class="spanone">    span
		</span>
		
	</body>
	
	
</html>

28.5.3、属性选择器

  1. 属性名称选择器
    • 语法：$(A[属性名]) 包含指定属性的选择器
  2. 属性选择器
    • 语法：$("A[属性名='值']") 包含指定属性等于指定值的选择器
  3. 复合属性选择器
    • 语法：$("A[属性名='值'][]...") 包含多个属性条件的选择器
<!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.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 180px;
			    height: 180px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div .mini01{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			
			div.visible{
				display:none;
			}
	 </style>
	 <script type="text/javascript">
		$(function () {
			// <input type="button" value="保存" className="mini" name="ok" className="mini"/>
			// <input type="button" value=" 含有属性title 的div元素背景色为红色" id="b1"/>
			$("#b1").click(function (){
				$("div[title]").css("backgroundColor","red")
			})
			// <input type="button" value=" 属性title值等于test的div元素背景色为红色" id="b2"/>
			$("#b2").click(function (){
				$("div[title='test']").css("backgroundColor","red")
			})
			// <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色" id="b3"/>
			$("#b3").click(function (){
				$("div[title!='test']").css("backgroundColor","red")
			})
			// <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色" id="b4"/>
			$("#b4").click(function (){
				$("div[title^='te']").css("backgroundColor","red")
			})
			// <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色" id="b5"/>
			$("#b5").click(function (){
				$("div[title$='est']").css("backgroundColor","red")
			})
			// <input type="button" value="属性title值 含有es的div元素背景色为红色" id="b6"/>
			$("#b6").click(function (){
				$("div[title*='es']").css("backgroundColor","red")
			})
			// <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色" id="b7"/>
			$("#b7").click(function (){
				$("div[id][title*='es']").css("backgroundColor","red")
			})
		})
		
		
	</script>
   
	 
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 含有属性title 的div元素背景色为红色"  id="b1"/>
		 <input type="button" value=" 属性title值等于test的div元素背景色为红色"  id="b2"/>
		 <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色"  id="b3"/>
		 <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色"  id="b4"/>
		 <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色"  id="b5"/>
		 <input type="button" value="属性title值 含有es的div元素背景色为红色"  id="b6"/>
		 <input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"/>
		 
		 
	   <div id="one">
	    	 id为one   div  
		 </div>
		
		 <div id="two" class="mini"  title="test">
	    	   id为two   class是 mini  div  title="test"
		       <div  class="mini" >class是 mini</div>
		</div>
		
		 <div class="visible" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" title="test02">
		 	  class是 one    title="test02"
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" style="margin-top:0px;">class是 mini</div>
		</div>
		
		
		<div class="visible" >
		 	  这是隐藏的
		</div>
		
		<div class="one">
			
		</div>
		
		<div id="mover" >
		 	  动画
		</div>
		
		<input type="text" value="zhang" id="username" name="username">
	</body>
	
	
   
</html>

28.5.4、过滤选择器

  1. 首元素选择器
    • 语法：:frist 获得选择的元素中的第一个元素
  2. 尾元素选择器
    • 语法：:last 获得选择的元素中的最后一个元素
  3. 非元素选择器
    • 语法：:not(selecter) 不包含指定内容的元素
  4. 偶数选择器
    • 语法：:even 偶数，从0开始计数
  5. 奇数选择器
    • 语法：:odd 奇数，从0开始计数
  6. 等于索引选择器
    • 语法：:eq(index) 指定索引元素
  7. 大于索引选择器
    • 语法：:gt(index) 大于指定索引元素
  8. 小于索引选择器
    • 语法：:lt(index) 小于指定索引元素
  9. 标题选择器
    • 语法：:header 获得标题元素，固定写法
<!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.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 180px;
			    height: 180px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div .mini01{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
	 </style>
	<script type="text/javascript">
		$(function (){
			// <input type="button" value="保存" className="mini" name="ok" className="mini"/>
			// <input type="button" value=" 改变第一个 div 元素的背景色为 红色" id="b1"/>
			$("#b1").click(function () {
				$("div:first").css("backgroundColor","red");
			})
			// <input type="button" value=" 改变最后一个 div 元素的背景色为 红色" id="b2"/>
			$("#b2").click(function () {
				$("div:last").css("backgroundColor","red");
			})
			// <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色" id="b3"/>
			$("#b3").click(function () {
				$("div:not(.one)").css("backgroundColor","red");
			})
			// <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色" id="b4"/>
			$("#b4").click(function () {
				$("div:even").css("backgroundColor","red");
			})
			// <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色" id="b5"/>
			$("#b5").click(function () {
				$("div:odd").css("backgroundColor","red");
			})
			// <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色" id="b6"/>
			$("#b6").click(function () {
				$("div:gt(3)").css("backgroundColor","red");
			})
			// <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色" id="b7"/>
			$("#b7").click(function () {
				$("div:eq(3)").css("backgroundColor","red");
			})
			// <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色" id="b8"/>
			$("#b8").click(function () {
				$("div:lt(3)").css("backgroundColor","red");
			})
			// <input type="button" value=" 改变所有的标题元素的背景色为 红色" id="b9"/>
			$("#b9").click(function () {
				$(":header").css("backgroundColor","red");
			})
		})
		
		 
	</script>
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
		 <input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>
		 <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
		 <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
		 <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
		 <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
		 <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
		 <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
		 <input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>
		 
		
		 <h1>有一种奇迹叫坚持</h1>
		 <h2>自信源于努力</h2>
		 
	     <div id="one">
	    	 id为one  
		     
		 </div>
		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini 
		       <div  class="mini" >class是 mini</div>
		</div>
		
		 <div class="one" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" >
		 	  class是 one 
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
		
		
		
	</body>
	
	
   
</html>

28.5.5、表单过滤选择器

  1. 可用元素选择器
    • 语法：:enable 获得可用元素
  2. 不可用元素选择器
    • 语法：:disabled 获取不可用元素
  3. 选中选择器
    • 语法：:checked 获得单选/复选框选中的元素
  4. 选中选择器
    • 语法：: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  src="js/jquery.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 180px;
			    height: 180px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div .mini01{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			#job{
				margin: 20px;
			}
			#edu{
				margin-top:-70px;
			}
			
	 </style>
    <script type="text/javascript">
		$(function () {
			// <input type="button" value="保存" className="mini" name="ok" className="mini"/>
			// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/>
			$("#b1").click(function (){
				$("input[type='text']:enabled").val("aaa")
			})
			// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/>
			$("#b2").click(function (){
				$("input[type='text']:disabled").val("aaa")
			})
			// <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数" id="b3"/>
			$("#b3").click(function (){
				alert($("input[type='checkbox']:checked").length)
			})
			// <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数" id="b4"/>
			$("#b4").click(function (){
				alert($("#job > option:selected").length)
			})
		})
		
	
	
	</script>
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"  id="b1"/>
		 <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值"  id="b2"/>
		 <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数"  id="b3"/>
		 <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数"  id="b4"/>
 
 		<br><br>
 		
         <input type="text" value="不可用值1" disabled="disabled"> 
		 <input type="text" value="可用值1" >
		 <input type="text" value="不可用值2" disabled="disabled">
		 <input type="text" value="可用值2" >
		 
		 <br><br>
		 <input type="checkbox" name="items" value="美容" >美容
		 <input type="checkbox" name="items" value="IT" >IT
		 <input type="checkbox" name="items" value="金融" >金融
		 <input type="checkbox" name="items" value="管理" >管理
		 
		 <br><br>
		 
		  <input type="radio" name="sex" value="男" >男
		  <input type="radio" name="sex" value="女" >女
		  
         <br><br>
		 
		  <select name="job" id="job" multiple="multiple" size=4>
          	<option>程序员</option>
			<option>中级程序员</option>
			<option>高级程序员</option>
			<option>系统分析师</option>
          </select>
		    
          <select name="edu" id="edu">
          	<option>本科</option>
			<option>博士</option>
			<option>硕士</option>
			<option>大专</option>
          </select>
	   
	  		
	  	<br/>
	  		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini  div
		       <div  class="mini" >class是 mini</div>
		</div>
		
		 <div class="one" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" >
		 	  class是 one 
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
		
	</body>
	
	
   
</html>

28.6、DOM操作

28.6.1、内容操作

  1. html()：获取/设置元素的标签内容 <a><font>内容</font></a> --> <font>内容</font>
  2. text()：获取/设置元素的标签体纯文本内容 <a><font>内容</font></a> --> 内容
  3. val()：获取/设置元素的value属性值
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script  src="../js/jquery.min.js"></script>
		<script>
			$(function (){
				// 获取myinput 的value值
				let value = $("#myinput").val();
				alert(value);
				// 获取mydiv的标签体内容
				let html = $("#mydiv").html();
				alert(html)
				// 获取mydiv文本内容
				let text = $("#mydiv").text();
				alert(text)
			})

		</script>
		
	</head>
	<body>
		<input id="myinput" type="text" name="username" value="张三" /><br />
		<div id="mydiv"><p><a href="#">标题标签</a></p></div>
	</body>
</html>

28.6.2、属性操作

28.6.2.1、通用属性操作
  1. attr()：获取/设置元素的属性
  2. removeAttr()：删除属性
  3. prop()：获取/设置元素的属性
  4. removeProp()：删除属性
  • attr和prop区别？
    1. 如果操作的是元素的固有属性，则建议使用prop
    2. 如果操作的是元素自定义的属性，则建议使用attr
<!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.min.js"></script>
	
	
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
    
	<script type="text/javascript">
		$(function () {
			//获取北京节点的name属性值
			alert($("#bj").attr("name"));
			//设置北京节点的name属性的值为dabeijing
			$("#bj").attr("name","dabeijing")
			//新增北京节点的discription属性 属性值是didu
			$("#bj").attr("discription","didu")
			//删除北京节点的name属性并检验name属性是否存在
			$("#bj").removeAttr("name")
			//获得hobby的的选中状态
			let prop = $("#hobby").prop("checked");
			alert(prop)
		})

	</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>
	
	
   
</html>
28.6.2.2、对class属性操作
  1. addClass()：添加class属性值
  2. removeClass()：删除class属性值
  3. toggleClass()：切换class属性
    • toggleClass("one")：
      • 判断如果元素对象上存在class="one"，则将属性值one删除掉。如果元素对象上不存在class="one"，则添加
  4. css()
<!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.min.js"></script>
	<style type="text/css">
		   .one{
			    width: 200px;
			    height: 140px;
			    margin: 20px;
			    background: red;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
		
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 40px;
			    height: 40px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			div .mini01{
			    width: 40px;
			    height: 40px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			/*待用的样式*/
			.second{
				width: 300px;
			    height: 340px;
			    margin: 20px;
			    background: yellow;
			    border: pink 3px dotted;
				float:left;
			    font-size: 22px;
			    font-family:Roman;
			}
			
			
	 </style>
    <script type="text/javascript">
		$(function () {
			//<input type="button" value="采用属性增加样式(改变id=one的样式)"  id="b1"/>
			$("#b1").click(function (){
				$("#one").addClass("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="b4"/>
			$("#b4").click(function (){
				$("#one").toggleClass("second")
			})
			//<input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>
			$("#b5").click(function (){
				alert($("#one").css("backgroundColor"))
			})
			//<input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>
			$("#b6").click(function (){
				$("#one").css("backgroundColor","green")
			})

		})

	
	</script>
   
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value="采用属性增加样式(改变id=one的样式)"  id="b1"/>
		 <input type="button" value=" addClass"  id="b2"/>
		 <input type="button" value="removeClass"  id="b3"/>
		 <input type="button" value=" 切换样式"  id="b4"/>
		 <input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>
 		 <input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>
 
		 <h1>有一种奇迹叫坚持</h1>
		 <h2>自信源于努力</h2>
		 
	     <div id="one">
	    	 id为one 
		 </div>
		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini 
		       <div  class="mini" >class是 mini</div>
		</div>
		
		 <div class="one" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 
		 <div class="one" >
		 	  class是 one 
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
		
		

		<span class="spanone">    span
		</span>
		
	</body>
	
	
</html>

28.6.3、CRUD操作

  1. append()：父元素子元素追加到末尾
    • 对象1.append(对象2)：将对象2添加到对象1元素内部，并且在末尾
  2. prepend()：父元素将子元素追加到开头
    • 对象1.prepend(对象2)：将对象2添加到对象1元素内部，并且在开头
  3. appendTo()：
    • 对象1.appendTo(对象2)：将对象1添加到对象2内部，并且在末尾
  4. prependTo()：
    • 对象1.prependTo(对象2)：将对象1添加到对象2内部，并且在开头
  5. after()：添加元素到元素后边
    • 对象1.after(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
  6. before()：添加元素到元素前边
    • 对象1.before(对象2)：将对象2添加到对象1前边。对象1和对象2是兄弟关系
  7. insertAfter()：
    • 对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
  8. insertBefore()：
    • 对象1.insertBefore(对象2)：将对象2添加到对象1前边。对象1和对象2是兄弟关系
<!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.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	 <script type="text/javascript">
		 $(function (){
			 // <input type="button" value="将反恐放置到city的后面"  id="b1"/>
			 $("#b1").click(function (){
			 	//$("#city").append($("#fk"))
				 $("#fk").appendTo($("#city"))
			 })
			 // <input type="button" value="将反恐放置到city的最前面"  id="b2"/>
			 $("#b2").click(function (){
				 $("#city").prepend($("#fk"))
				 //$("#fk").prependTo($("#city"))
			 })
			 // <input type="button" value="将反恐插入到天津后面"  id="b3"/>
			 $("#b3").click(function (){
				 //$("#tj").after($("#fk"))
				 $("#fk").insertAfter($("#tj"))
			 })
			 // <input type="button" value="将反恐插入到天津前面"  id="b4"/>
			 $("#b4").click(function (){
				 $("#tj").before($("#fk"))
				 //$("#fk").insertBefore($("#tj"))
			 })
		 })
		
	</script>
	 
	 
	</head>
	 
	<body>

		<input type="button" value="将反恐放置到city的后面"  id="b1"/>
		<input type="button" value="将反恐放置到city的最前面"  id="b2"/>
		<input type="button" value="将反恐插入到天津后面"  id="b3"/>
		<input type="button" value="将反恐插入到天津前面"  id="b4"/>
		 <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>
	
	
   
</html>
  1. remove()：移除元素
    • 对象.remove()：将对象删除掉
  2. empty()：清空元素的所有后代元素
    • 对象.empty()：将对象的后代元素全部清空，但是保留当前对象以及其属性节点
<!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.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
    <script type="text/javascript">
		$(function () {
			// <input type="button" value="删除<li id='bj' name='beijing'>北京</li>"  id="b1"/>
			$("#b1").click(function (){
				$("#bj").remove()
			})
			// <input type="button" value="删除city所有的li节点   清空元素中的所有后代节点(不包含属性节点)"  id="b2"/>
			$("#b2").click(function (){
				$("#city").empty()
			})
		})
	
	</script>
	</head>
	 
	<body>
	<input type="button" value="删除<li id='bj' name='beijing'>北京</li>"  id="b1"/>
	<input type="button" value="删除所有的子节点   清空元素中的所有后代节点(不包含属性节点)"  id="b2"/>

		 <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>
	
	
   
</html>

28.6.4、隔行换色案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script  src="../../js/jquery.min.js"></script>
		
		<script>
			//需求：将数据行的奇数行背景色设置为 pink，偶数行背景色设置为 yellow
			$(function (){
				//获取数据行中的tr的对象并判断是奇数还是偶数
				$("tr:gt(1):odd").css("backgroundColor","pink")
				$("tr:gt(1):even").css("backgroundColor","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>

28.6.5、全选全不选案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script  src="../../js/jquery.min.js"></script>
		<script>
			//通过点击按钮将多选框全部选中
			function selectAll(obj) {
				//alert(obj.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>

28.6.6、QQ表情选择

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>QQ表情选择</title>
	 <script  src="../../js/jquery.min.js"></script>
    <style type="text/css">
    *{margin: 0;padding: 0;list-style: none;}

    .emoji{margin:50px;}
    ul{overflow: hidden;}
    li{float: left;width: 48px;height: 48px;cursor: pointer;}
    .emoji img{ cursor: pointer; }
    </style>
	<script>
        //需求：点击qq表情，将其追加到发言框中
        $(function () {
            //给所有的图片添加单击事件
            $("ul img").click(function () {
                $(".word").append($(this).clone())
            })
        })
		
		
    </script>
	
</head>
<body>
    <div class="emoji">
        <ul>
            <li><img src="img/01.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/02.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/03.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/04.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/05.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/06.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/07.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/08.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/09.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/10.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/11.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/12.gif" height="22" width="22" alt="" /></li>
        </ul>
        <p class="word">
            <strong>请发言：</strong>
            <img src="img/12.gif" height="22" width="22" alt="" />
        </p>
    </div>
</body>
</html>

28.6.7、多选下拉列表左右移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script  src="../../js/jquery.min.js"></script>


		<style>
			#leftName , #btn,#rightName{
				float: left;
				width: 100px;
				height: 300px;
			}
			#toRight,#toLeft{
				margin-top:100px ;
				margin-left:30px;
				width: 50px;
			}

			.border{
				height: 500px;
				padding: 100px;
			}
		</style>

		<script>

			//需求：实现下拉列表选择条目左右选择功能
			$(function () {
				//获取按钮对象并绑定单击事件
				$("#toRight").click(function () {
					$("#rightName").append($("#leftName > option:selected"))
				})
				$("#toLeft").click(function () {
					$("#leftName").append($("#rightName > option:selected"))
				})
			})

		</script>



	</head>
	<body>
		<div class="border">
			<select id="leftName" multiple="multiple">
				<option>张三</option>
				<option>李四</option>
				<option>王五</option>
				<option>赵六</option>
			</select>
			<div id="btn">
				<input type="button" id="toRight" value="-->"><br>
				<input type="button" id="toLeft" value="<--">

			</div>

			<select id="rightName" multiple="multiple">
				<option>钱七</option>
			</select>

		</div>


	</body>
</html>

28.7、动画

三种方式显示和隐藏元素

  1. 默认显示和隐藏方式
    1. show([speed],[easing],[fn])
      • 参数：
        1. speed：动画的速度。三个预定义的值(“slow”,“normal”,“fast”)或表示动画时长的毫秒数值(如：1000)
        2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
          • swing：动画执行时效果是 先慢，中间快，最后又慢
          • linear：动画执行时速度是匀速的
        3. fn：在动画完成时执行的函数，每一个元素执行一次
    2. hide([speed],[easing],[fn])
    3. toggle([speed],[easing],[fn])
  2. 滑动显示和隐藏方式
    1. slideDown([speed],[easing],[fn])
    2. slideUp([speed],[easing],[fn])
    3. slideToggle([speed],[easing],[fn])
  3. 淡入淡出显示和隐藏方式
    1. fadeIn([speed],[easing],[fn])
    2. fadeOut([speed],[easing],[fn])
    3. fadeToggle([speed],[easing],[fn])
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script>
        //隐藏
        function hideFn() {
            $("#showDiv").hide("slow","swing");
        }
        //显示
        function showFn() {
            $("#showDiv").show("slow","swing");
        }
        //切换
        function toggleFn() {
            $("#showDiv").toggle("slow","swing");
        }
    </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:pink">
    div显示和隐藏
</div>
</body>
</html>

28.8、遍历

28.8.1、js遍历

js遍历的方式：

  • for(初始化值;循环结束条件;步长)
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            //获取所有的li元素
            let lis = $("#city li");
            //原始js的方式遍历
            for (var i=0;i<lis.length;i++ ){
                alert(lis[i].innerHTML)
            }
        })

    </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>
</html>

28.8.2、jq遍历

  1. jq对象.each(callback)

    1. 语法：

      jquery对象.each(function(index,element){});

      • index：就是元素在集合中的索引
      • element：就是集合中的每一个元素对象
      • this：集合中每一个元素对象

    2. 回调函数返回值：

      • true：如果当前function返回为false，则结束循环(break)。
      • false：如果当前function返回为true，则结束本次循环，继续下次循环(continue)

  2. $.each(object,[callback])

  3. for..of：jquery 3.0 版本之后提供的方式

    for(元素对象 of 容器对象)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            //获取所有的li元素
            let lis = $("#city li");
            //使用jq的方式遍历
            //jq对象.each(callback)
            // lis.each(function (index,element) {
            //     //这里的this代表每一个li元素对象，index代表元素的索引，element代表元素对象
            //     alert(index+":"+element.innerHTML)
            // })
            //$.each(object,[callback])
            $.each(lis,function (index,element) {
                alert(index+":"+element.innerHTML)
            })
        })

    </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>
</html>

28.9、事件绑定

28.9.1、jq标准绑定

jquery标准的绑定方式：

  • jq对象.事件方法(回调函数);
  • 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为
    • 表单对象.submit();让表单提交

28.9.2、on绑定事件/off解除绑定

  • jq对象.on("事件名称",回调函数)
  • jq对象.off("事件名称")
    • 如果off方法不传递任何参数，则将组件上的所有事件全部解绑

28.9.3、事件切换

事件切换：toggle

  • jq对象.toggle(fn1,fn2...)

    • 当单击jq对象对应的组件后，会执行fn1,，第二次点击会执行fn2…

  • 注意：1.9版本.toggle() 方法删除，jQuery Migrate(迁移) 插件可以恢复此功能

    <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>

28.10、广告显示和隐藏案例

<!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.min.js"></script>
    <script>
        //定义个显示和隐藏的方法
        function hideFn() {
            $("#ad").hide("slow")
        }
        function showFn(){
            $("#ad").show("slow")
        }
        $(function () {
            //当页面加载完3秒后执行显示方法使用定时器
            setTimeout(showFn,3000);
            //当广告显示5秒后隐藏
            setTimeout(hideFn,8000)
        })
    </script>
</head>
<body>
<!-- 整体的DIV -->
<div>
    <!-- 广告DIV -->
    <div id="ad" style="display: none;">
        <img style="width:100%" src="../img/adv.jpg" />
    </div>

    <!-- 下方正文部分 -->
    <div id="content">
        正文部分
    </div>
</div>
</body>
</html>

28.11、抽奖案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery案例之抽奖</title>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script>
        //获取将所有的图片封装称为一个数组
        var arr = [
                "../img/man00.jpg",
                "../img/man01.jpg",
                "../img/man02.jpg",
                "../img/man03.jpg",
                "../img/man04.jpg",
                "../img/man05.jpg",
                "../img/man06.jpg",
        ]
        var id;
        var index;
        $(function () {
            //定义点击开始按钮后让小相框中的图片发生变化
            $("#startID").click(function () {
                //使用循环定时器切换图片
                id = setInterval(function () {
                    //获取一个随机数作为角标
                    index = Math.floor(Math.random()*7);
                    $("#img1ID").prop("src",arr[index])
                },20);
            })
            //定义点击停止按钮使小相框中的图片停止切换
            $("#stopID").click(function () {
                clearInterval(id);
                $("#img2ID").prop("src",arr[index])
            })
        })
    </script>
</head>
<body>

<!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px">
    <img id="img1ID" src="../img/man00.jpg" style="width:160px;height:100px"/>
</div>

<!-- 大像框 -->
<div
        style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
    <img id="img2ID" src="../img/man00.jpg" width="800px" height="500px"/>
</div>

<!-- 开始按钮 -->
<input
        id="startID"
        type="button"
        value="点击开始"
        style="width:150px;height:150px;font-size:22px"
        onclick="imgStart()">

<!-- 停止按钮 -->
<input
        id="stopID"
        type="button"
        value="点击停止"
        style="width:150px;height:150px;font-size:22px"
        onclick="imgStop()">


<script language='javascript' type='text/javascript'>
    //准备一个一维数组，装用户的像片路径
    var imgs = [
        "../img/man00.jpg",
        "../img/man01.jpg",
        "../img/man02.jpg",
        "../img/man03.jpg",
        "../img/man04.jpg",
        "../img/man05.jpg",
        "../img/man06.jpg"
    ];

</script>
</body>
</html>

28.12、插件

插件：增强jQuery的功能

实现方式：

  1. $.fn.extend(object)
    • 增强通过jquery获取的对象的功能 $("#id")
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01-jQuery对象进行方法扩展</title>
    <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $.fn.extend({
            //定义一个方法
            check:function (){
                this.prop("checked",true);
            },
            uncheck:function () {
                this.prop("checked",false)
            }
        })
        function checkFn() {
            $("input[type='checkbox']").check()
        }
        function uncheckFn() {
            $("input[type='checkbox']").uncheck()
        }
    </script>
</head>
<body>
<input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
<input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
<br/>
<input type="checkbox" value="football">足球
<input type="checkbox" value="basketball">篮球
<input type="checkbox" value="volleyball">排球

</body>
</html>
  1. $.extend(object)
    • 通过jQuery对象自身的功能 $/jQuery
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01-jQuery对象进行方法扩展</title>
    <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值
        $.extend({
            min:function (a,b) {
                return a>b?b:a;
            },
            max:function (b,c) {
                return b>c?b:c
            }
        })
        $(function () {
            let min = $.min(1,2);
            alert(min)
            let max = $.max(4,5);
            alert(max)
        })

    </script>
</head>
<body>
</body>
</html>
转载请注明出处或者链接地址：https://www.qianduange.cn//article/1048.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

jQuery——jQuery学习笔记(完整版）

2024-02-14 09:02:11

靡语IT: JQuery-JavaScript代码库-动画篇

2024-02-14 09:02:11

Ajax用法总结

2024-02-14 09:02:07

JQuery之jsTree树形插件

2024-02-14 09:02:01

Why React Doesn‘t Need jQuery?

2024-02-14 09:02:00

原生HTML通过JS（ES6、JQuery）引入公共模块(header,footer,menu等)实现模块化以及组件化，实现父子组件传值以及数据监听（基于Object.defineProperty）

2024-02-14 09:02:59

jQuery模板字符串

2024-02-14 09:02:58

Echarts数据可视化 第3章 Echarts组件详解 3.6 数据区域缩放

2024-02-14 09:02:47

通过echarts展示不同省、市、区地图 vue3写法

2024-02-14 09:02:43

Echarts5.* 关系图谱(relation graph)添加节点拖拽、点击节点高亮效果

2024-02-14 09:02:43

大家推荐的文章
1

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
2

移动端css布局大全

2024-02-06 15:02:421000
3

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
4

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
5

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
6

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
7

尚硅谷css3笔记

2024-02-13 10:02:44998
8

如何利用浏览器测试跨域

2024-02-11 10:02:28998
9

html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997
10

响应式Web开发项目教程（HTML5 CSS3 Bootstrap）第2版 例3-3 CSS3 旋转缩放

2024-02-10 19:02:06995

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！