zoukankan html css js c++ java

笔记-JavaWeb学习之旅17

1.过滤选择器

首元素选择器：first 获得选择的元素中的第一个元素

尾元素选择器：last获得选择元素中的最后一个元素

非元素选择器：not(selector) 不包括指定内容的元素

偶数选择器：even偶数，从0开始计数

奇数选择器：odd奇数，从0开始计数

等于索引选择器：eq(index)指定索引元素

大于索引选择器：gt(index) 大于指定索引元素

小于索引选择器：lt(index)小于指定索引元素

标题选择器：header 获得标题(h1-h6)元素，固定写法

<!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.min.js"></script>
	<style type="text/css">
		 	div,span{
			     180px;
			    height: 180px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			     50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div .mini01{
			     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=" 改变第一个 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  class="mini" >class是xinlaid mini</div>
		</div>			
	</body>	 
</html>

表单过滤选择器

可用元素选择器：enabled 获得可用元素

不可用元素选择器：disabled 获得不可用元素

选中选择器 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  src="js/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		 	div,span{
			     180px;
			    height: 180px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			     50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div .mini01{
			     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=" 利用 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(){
                //获取所有复选框，checked表示选中的个数
                alert($("input[type='checkbox']:checked").length);
            })
			// <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数"  id="b4"/>
            $("#b4").click(function(){
                //通过id获取器获得下拉框元素
                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>

DOM操作

(需要分清楚是对标签体的内容还是对标签体的属性进行操作)

内容操作

html():获取/设置元素的标签体内容

text()：获取/设置元素的标签体纯文本内容

val()：获取/设置元素的value属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script  src="js/jquery-3.3.1.min.js"></script>
		<script>
			$(function () {
                // 获取myinput的value值
				// 通过id选择器获取元素对象
				var value = $("#myinput").val();
                alert(value);
                // 获取mydiv的标签体内容,使用html方法
				alert($("#mydiv").html());
                // 获取mydiv文本内容
                alert($("#mydiv").text());
            });
		</script>
	</head>
	<body>
		<input id="myinput" type="text" name="username" value="张三" /><br />
		<div id="mydiv"><p><a href="#">标题标签</a></p></div>
	</body>
</html>

属性操作

1.通用属性操作

attr(): 获取/设置元素的属性
removeAttr():删除属性
prop():获取/设置元素的属性
removeProp():删除属性

attr和prop的区别

如果操作的是元素的固有属性，则建议使用Prop

如果操作的是元素自定义的属性，则建议使用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-3.3.1.min.js"></script>
	
	
	<style type="text/css">
		 	div,span{
			     140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			     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属性值
			//name是标签体的属性，li标签中没有name属性，所以是自定义的属性，建议使用attr
			//获取标签元素，使用方法attr获取属性值
			var value = $("#bj").attr("name");
			alert(value);
            //设置北京节点的name属性的值为dabeijing
            var value1 = $("#bj").attr("name","dabeijing");
            //新增北京节点的discription属性 属性值是didu
			var value2 = $("#bj").attr("discription","didu");
            //删除北京节点的name属性并检验name属性是否存在
			$("#bj").removeAttr("name")
            //获得hobby的的选中状态,checked是固有属性，建议使用prop
			var checked = $("#hobby").prop("checked");
			alert(checked);
		});
		
	</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>

2.对class属性的操作

1.addClass():添加class属性值

2.removeClass():删除class属性值

3.toggleClass():切换class属性(如果存在该属性值就删除掉，不存在该属性值就添加)

<!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.min.js"></script>
	<style type="text/css">
		   .one{
			     200px;
			    height: 140px;
			    margin: 20px;
			    background: red;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
		
		 	div,span{
			     140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			     40px;
			    height: 40px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			div .mini01{
			     40px;
			    height: 40px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			/*待用的样式*/
			.second{
				 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"/>
			//使用attr获取/设置属性的值
			$("#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="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" class="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>

CRUD操作

<!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.min.js"></script>
	<style type="text/css">
		 	div,span{
			     140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			     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"));
             })
			 // <input type="button" value="将反恐放置到city的最前面"  id="b2"/>
             $("#b2").click(function () {
                 $("#city").prepend($("#fk"));
             })
			 // <input type="button" value="将反恐插入到天津后面"  id="b3"/>
             $("#b3").click(function () {
                 $("#tj").after($("#fk"));
             })
			 // <input type="button" value="将反恐插入到天津前面"  id="b4"/>
             $("#b4").click(function () {
                 $("#tj").before($("#fk"));
             })
         });


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

JQuery高级

动画

三种方式显示和隐藏元素

1.默认显示和隐藏方式

show([speed],[easing],[fn])
hide([speed],[easing],[fn])
toggle([speed],[easing],[fn])

speed:动画的速度，三个预定义的值("slow","normal","fast")或表示动画时长的毫秒数值

easing:用来指定切换效果，默认是"swing",可用参数"linear"

fn:在动画完成是执行的函数，每个函数执行一次

2.滑动显示和隐藏方式

1.slideDown([speed],[easing],[fn])

2.slideUp([speed],[easing],[fn])

3.slideToggle([speed],[easing],[fn])

3.淡入淡出显示和隐藏方式

fadeIn([speed],[easing],[fn])

fadeOut([speed],[easing],[fn])

fadeToggle([speed],[easing],[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>
        //隐藏div
        function hideFn(){
            //默认方式
          //$("#showDiv").hide("slow","swing")
            //滑动方式
          //$("#showDiv").slideUp("slow","swing")
            //淡入淡出方式
          $("#showDiv").fadeOut("8000","swing")
        }
        //点击按钮显示div
        function showFn(){
            //默认方式
             //$("#showDiv").show("slow","linear");
            //滑动方式
             //$("#showDiv").slideDown("slow","linear");
            //淡入淡出方式
             $("#showDiv").fadeIn("5000","linear");
        }
        //点击按钮切换div显示和隐藏
        function toggleFn(){
             //默认方式
             //$("#showDiv").toggle("slow","swing");
             //滑动方式
             //$("#showDiv").slideToggle("slow","swing");
            //淡入淡出方式
             $("#showDiv").fadeToggle("5000","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="300px;height:300px;background:pink">
    div显示和隐藏
</div>
</body>
</html>

遍历

js遍历方式 for(初始化值;循环结束条件；步长)

jq遍历方式

1.jq对象.each(callback)

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

3.for...of;

<!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 citys =  $("#city li");
       //第一种方式，不能获得索引
       citys.each(function (index,element) {
       //     alert(this.innerHTML)
       // });
        //第二种方式，可以获得索引，在回调函数中定义参数
       if("上海"==$(element).html()){
           return false;//false相当于java的break,true相当于continue
       }
        alert(index+":"+$(element).html());//把获得的js对象强制转换jq对象
    });
    });
    </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>重庆</li>
</ul>
</body>
</html>

事件绑定

1.jquery标准的绑定方式：jq对象.事件方法(回调函数)

2.on绑定事件/off解除绑定

jq对象.on("事件名称"，回调函数)

jq对象.off("事件名称")

3.事件切换：toggle

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

<!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("click",function () {
                alert("我被点击了")
            })
            //解除单机事件
            $("#btn2").click(function () {
                $("#btn").off("click");//若不传递click参数，则将btn上的所有绑定事件解绑
            })
        });


    </script>
</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
<input id="btn2" type="button" value="使用off解绑点击事件">
</body>
</html>

案例1

当页面加载完，3秒后，自动显示广告

广告显示5秒后，自动消失

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>广告的自动显示与隐藏</title>
    <style>
        #content{100%;height:500px;background:#999}
    </style>

    <!--引入jquery-->
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            setTimeout(adShow,3000);
            setTimeout(adHide,8000);
        })
        function adShow() {
            $("#ad").fadeIn("slow","swing")
        }
        function adHide() {
            $("#ad").fadeOut("slow","swing")
        }


    </script>
</head>
<body>
<!-- 整体的DIV -->
<div>
    <!-- 广告DIV -->
    <div id="ad" style="display: none;">
        <img style="100%" src="adv.jpg" />
    </div>

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

案例2--抽奖

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jquery案例之抽奖</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

    <script language='javascript' type='text/javascript'>
        var imgs = [
            "man00.jpg",
            "man01.jpg",
            "man02.jpg",
            "man03.jpg",
            "man04.jpg",
            "man05.jpg",
            "man06.jpg",
        ];
        var satrtId;
        var index;
        $(function () {
            //点击开始按钮，需要循环加载图片
          $("#startID").click(function () {
              $("#startID").prop("disabled",false);//设置按钮可用
              $("#stopID").prop("disabled",true);//设置按钮不可用
                //使用定时器，循环加载图片
              satrtId= setInterval(function () {
                  $("#startID").prop("disabled",true);
                  $("#stopID").prop("disabled",false);
                    //随机获得数字
                    index = Math.floor(Math.random()*7);
                    $("#img1ID").prop("src",imgs[index]);//获得随机图片
                },20);
            })
            //点击停止按钮，加载大方框图片
            $("#stopID").click(function () {
                $("#startID").prop("disabled",false);
                $("#stopID").prop("disabled",true);
                //结束定时器
                clearInterval(satrtId)
               var img =  $("#img2ID").prop("src",imgs[index]).hide();
                img.show(1000);

            })
        })

    </script>

</head>
<body>

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

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

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

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


</body>
</html>

插件机制

实现方式：

1.$.fn.extend(object),增强通过jquery获取对象的功能 $("#id")

(使用对象调用方法)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01-jQuery对象进行方法扩展</title>
    <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
       //使用jquery插件 给jq对象添加2个方法 check()选中所有复选框，uncheck()取消选中所有复选框
        //1.定义jqeury的对象插件
            $.fn.extend({
                //该方法所有的jq对象都可以调用
                check:function () {
                    this.prop("checked",true);
                },
                uncheck:function () {
                    this.prop("checked",false);
                }
            });
            $(function () {
                $("#btn-check").click(function () {
                    $("input[type='checkbox']").check();//获取所有的复选框对象
                })

            })
       $(function () {
           $("#btn-uncheck").click(function () {
               $("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>

2.$.extend(object),增强JQuery对象自身的功能，$/JQuery

（使用$来调用方法）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>01-jQuery对象进行方法扩展</title>
    <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值
        $.extend({
            max:function (a,b) {
                return a>=b ? a:b;
            },
            min:function (a,b) {
                return a<=b ? a:b;
            }
        })
        //调用全局方法
       var max =  $.max(2,3);
        alert(max);

        var min =  $.min(2,3);
        alert(min);

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

查看全文

相关阅读:
异常[PersistenceUnit: default] Unable to build Hibernate SessionFactory
关于本地模块安装入maven仓库出现的异常
 dwd面试记录与最近面试的一些感想。
java编程思想第九章接口
 java编程思想第八章多态
 微服务调用本地测试与外部测试的差异
 Java编程思想第七章复用类
 Gson的学习与使用
 为什么会有这个分类？
Spark 2.1.1 源码编译

原文地址：https://www.cnblogs.com/train99999/p/11037394.html