Web前端-jQuery（四）

最新推荐文章于 2024-09-27 10:34:26 发布
最新推荐文章于 2024-09-27 10:34:26 发布
阅读量696 收藏 1
点赞数
分类专栏： # 计算机（Java进阶）初级进阶 阶段 文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42171159/article/details/125144390
版权

文章目录

一、认识jQuery

在这里插入图片描述
核心理念:write Less, Do More 写的少,做的多

1.2 jQuery的引入及使用

jQuery版本有很多，不同版本的jQuery之间方法和功能有一定改变。

点我下载jQuery的所需版本

在这里插入图片描述

非压缩版和压缩版的区别:
功能上没有任何区别,区别在与将回车, 换行 ,注释全部删掉了(文件大小改变了)
压缩版: 适合开发中使用
非压缩版:学习阶段使用

（1）引入jQuery（全文所需jQuery导入和引入都一样，详见如下：）
在这里插入图片描述
案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的获取方式</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <script>
        /*js获取*/
        function run() {
            //alert(document.getElementById("aa").value);
            /*jQuery第一种方式获取*/
           // alert( jQuery("#aa").val());
            /*jQuery第二种方式获取*/
            alert($("#aa").val())
        }
    </script>
</head>
<body>
        <input type="text" value="Daniel" id="aa"><br />
        <input type="button" value="获取值" onclick="run()">

</body>
</html>

效果显示
在这里插入图片描述

1.3 jQuery对象和JS对象的互转

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery与js的互转</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <script>

        function  run() {
            //jq对象
            var jq = $("#aa");
            //js对象
            var js = jq[0];
           // alert(js.value);
            //js转jQuery
            var jq2 = $(js);
            alert(jq2.val())
        }

    </script>
</head>
<body>
        <input type="text" value="Daniel" id="aa"><br />
        <input type="button" value="获取值" onclick="run()">
</body>
</html>

效果显示
在这里插入图片描述
1.3 jQuery页面加载完执行的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery页面加载事件</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <script>

        /*第一种方式不常用*/
        $(document).ready(function () {
            alert(111);
        });
        /*第二种方式常用*/
        $(function () {
            alert(222)
        })
    </script>
</head>
<body>
</body>
</html>

效果显示
在这里插入图片描述

1.4 jQuery动画效果

1.4.1 知识汇总

以下所有动画效果方法中都有两个参数：
speed 动画效果的持续时间，单位：毫秒
一般快速效果设置500，正常效果设置1000即可
fn 动画效果成功展示完成后，回来调用的函数。(回调函数)

基本效果：（放大缩小滑动）
在这里插入图片描述
滑动效果：（上下滑动）
在这里插入图片描述
淡入淡出效果：（改变透明度的效果）
在这里插入图片描述
(1)案例素材

<style>
	#d1{
		background-color:lightskyblue;
		width:300px;
		height:300px;
	}
</style>
	<script>
		//展示
		function run1(){
			
		}
		//隐藏
		function run2(){
			
		}
		//切换显示/隐藏
		function run3(){
			
		}
	</script>
<div id="d1"></div>
		<input type="button" value="展示" onclick="run1()" />
		<input type="button" value="隐藏" onclick="run2()" />
		<input type="button" value="切换显示/隐藏" onclick="run3()" />

（2）js源码

<script>
        //展示
        function run1(){
            //$("#d1").show();
          // $("#d1").slideDown(2000);
            $("#d1").fadeIn(2000,function () {
                alert("显示成功")
            })
        }
        //隐藏
        function run2(){
           // $("#d1").hide();
            //$("#d1").slideUp(2000);
            $("#d1").fadeOut(2000,function () {
                alert("隐藏成功")
            })
        }
        //切换显示/隐藏
        function run3(){
            //$("#d1").toggle();
            //$("#d1").slideToggle(2000);
            $("#d1").fadeToggle(2000,function () {
                alert("切换成功")
            })
        }
    </script>

（3）完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>

    <style>
        #d1{
            background-color:lightskyblue;
            width:300px;
            height:300px;
        }
    </style>
    <script>
        //展示
        function run1(){
            //$("#d1").show();
          // $("#d1").slideDown(2000);
            $("#d1").fadeIn(2000,function () {
                alert("显示成功")
            })
        }
        //隐藏
        function run2(){
           // $("#d1").hide();
            //$("#d1").slideUp(2000);
            $("#d1").fadeOut(2000,function () {
                alert("隐藏成功")
            })
        }
        //切换显示/隐藏
        function run3(){
            //$("#d1").toggle();
            //$("#d1").slideToggle(2000);
            $("#d1").fadeToggle(2000,function () {
                alert("切换成功")
            })
        }
    </script>
</head>
<body>
            <div id="d1"></div>
            <input type="button" value="展示" onclick="run1()" />
            <input type="button" value="隐藏" onclick="run2()" />
            <input type="button" value="切换显示/隐藏" onclick="run3()" />
</body>
</html>

运行效果显示
在这里插入图片描述

二、jQuery选择器

2.1 基本选择器

jQuery也有和CSS一样，也有选择器概念，即 选择性获取某些标签对象
jQuery有大量复杂选择器，这里先介绍三个基本选择器。
ID选择器 $(“#id”)
元素选择器 $(“元素名”)
类选择器 $(“.类名”)

案例代码素材：

<script>
			$(function(){
				//页面加载完成时，获取对应的标签对象
				//获取id为r01的标签对象
				
				//获取标签名为input的标签对象
				
				//获取class属性值为hehe的标签对象
			});
			
		</script>

<input type="radio" name="hobby" value="敲代码" id="r01"/>
		<input type="radio" name="hobby" value="调试bug" class="hehe"/>
		<input type="radio" name="hobby" value="谈需求" class="hehe"/>

案例代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <script>
        $(function(){
            //页面加载完成时，获取对应的标签对象
            //获取id为r01的标签对象
              var ele = $("#r01");
              alert(ele.val());
            //获取标签名为input的标签对象
            var ale = $("input");
            alert(ale.length);
            //获取class属性值为hehe的标签对象
            var ble = $(".hehe");
            alert(ble.length);
        });
    </script>
</head>
	<body>
            <input type="radio" name="hobby" value="敲代码" id="r01"/>
            <input type="radio" name="hobby" value="调试bug" class="hehe"/>
            <input type="radio" name="hobby" value="谈需求" class="hehe"/>
 	</body>
</html>

运行效果显示
在这里插入图片描述

2.2 使用jQuery重写弹出广告案例

结构：
在这里插入图片描述

（1）案例代码准备

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript"  src="../js/jquery-3.3.1.js"></script>
         </head>
   <body>
      <table width="100%">
         <!-- 网站顶部广告 -->
         <tr>
            <td>
               <img id="ad" src="img/f001.jpg" width="100%" style="display:none;">
            </td>
         </tr>
         <!-- 网站头部 图片 -->
         <tr>
            <td>
               <table width="100%">
                  <tr>
                     <td>
                        <img src="img/logo.jpg" />
                     </td>
                     <td>
                        <img src="img/header.png" />
                     </td>
                     <td>
                        <a href="">登录</a>
                        <a href="">注册</a>
                        <a href="">购物车</a>
                     </td>
                  </tr>
               </table>
            </td>
         </tr>
         
         <!-- 网站黑色导航 -->
         <tr>
            <td>
               <table width="100%" bgcolor="black">
                  <tr>
                     <td>
                        <a href=""><font color="white" size="5">首页</font></a>
                        <a href=""><font color="white" size="5">手机数码</font></a>
                        <a href=""><font color="white" size="5">电脑办公</font></a>
                        <a href=""><font color="white" size="5">家具家居</font></a>
                     </td>
                  </tr>
               </table>
            </td>
         </tr>
         <!-- 网站大轮播图 -->
         <tr>
            <td>
               <img src="img/1.jpg" width="100%"/>
            </td>
         </tr>
      </table>
   </body>
</html>
（2）图片素材导入
（3）Js&jQuery代码编写
<script>
            $(function () {
               setTimeout(showImg(),2000);
                });
            function showImg() {
               $("#ad").slideDown(function () {
                  setTimeout(hide(),2000)
                    });
                }
            function hide() {
               $("#ad").slideUp(2000);
                }
      </script>

（4）完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript"  src="../js/jquery-3.3.1.js"></script>
		<script>
				$(function () {
					setTimeout(showImg(),2000);
                });
				function showImg() {
					$("#ad").slideDown(function () {
						setTimeout(hide(),2000)
                    });
                }
				function hide() {
					$("#ad").slideUp(2000);
                }
		</script>
	</head>
	<body>
		<table width="100%">
			<!-- 网站顶部广告 -->
			<tr>
				<td>
					<img id="ad" src="img/f001.jpg" width="100%" style="display:none;">
				</td>
			</tr>
			<!-- 网站头部 图片 -->
			<tr>
				<td>
					<table width="100%">
						<tr>
							<td>
								<img src="img/logo.jpg" />
							</td>
							<td>
								<img src="img/header.png" />
							</td>
							<td>
								<a href="">登录</a>
								<a href="">注册</a>
								<a href="">购物车</a>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			
			<!-- 网站黑色导航 -->
			<tr>
				<td>
					<table width="100%" bgcolor="black">
						<tr>
							<td>
								<a href=""><font color="white" size="5">首页</font></a>
								<a href=""><font color="white" size="5">手机数码</font></a>
								<a href=""><font color="white" size="5">电脑办公</font></a>
								<a href=""><font color="white" size="5">家具家居</font></a>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			
			<!-- 网站大轮播图 -->
			<tr>
				<td>
					<img src="img/1.jpg" width="100%"/>
				</td>
			</tr>
		</table>
	</body>
</html>

运行效果为：
在这里插入图片描述

2.3 层级选择器（了解）

和CSS层级选择器类似，可以通过层级关系获取对应标签对象。
A B 获取A元素内部的所有B的后代元素 (父子关系 祖孙关系)
A>B 获取A元素下边的所有B子元素 (父子关系)
A+B 获取A元素下边的同级B元素 (下一个兄弟)
A~B 获取A元素之后的所有B元素 (所有弟弟)

（1）案例素材：

<script>
			$(function(){
				//1、获取id为main的span标签 内 所有的div标签
				
				//2、获取id为main的span标签 内 子元素div标签
				
				//3、获取id为main的span标签 后 第一个div兄弟标签
				
				//4、获取id为main的span标签 后 所有的div兄弟标签
				
			});
		</script>

<span id="main">
			<div>111111</div>
			<div>222222</div>
			<div>333333</div>
			<span>
				<div>44444</div>
			</span>
</span>
		<div>55555</div>
		<span>
			<div>66666</div>
		</span>
		<div>77777</div>

（2）编写jQuery代码

<script>
    $(function(){
        //1、获取id为main的span标签 内 所有的div标签
        /*var ale = $("#main div")
        for (var i = 0; i < ale.length; i++) {
            alert(ale[i].innerHTML)
        }*/
        //2、获取id为main的span标签 内 子元素div标签
        /*var ale = $("#main>div")
        for (var i = 0; i < ale.length; i++) {
            alert(ale[i].innerHTML)
        }*/
        //3、获取id为main的span标签 后 第一个div兄弟标签
                   /* var ale = $("#main+div")
                    for (var i = 0; i < ale.length; i++) {
                        alert(ale[i].innerHTML)
                    }*/
        //4、获取id为main的span标签 后 所有的div兄弟标签
                    var ale = $("#main~div")
                    for (var i = 0; i < ale.length; i++) {
                        alert(ale[i].innerHTML)
                    }
    });
</script>

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>

    <script>
        $(function(){
            //1、获取id为main的span标签 内 所有的div标签
            /*var ale = $("#main div")
            for (var i = 0; i < ale.length; i++) {
                alert(ale[i].innerHTML)
            }*/
            //2、获取id为main的span标签 内 子元素div标签
            /*var ale = $("#main>div")
            for (var i = 0; i < ale.length; i++) {
                alert(ale[i].innerHTML)
            }*/
            //3、获取id为main的span标签 后 第一个div兄弟标签
                       /* var ale = $("#main+div")
                        for (var i = 0; i < ale.length; i++) {
                            alert(ale[i].innerHTML)
                        }*/
            //4、获取id为main的span标签 后 所有的div兄弟标签
                        var ale = $("#main~div")
                        for (var i = 0; i < ale.length; i++) {
                            alert(ale[i].innerHTML)
                        }
        });
    </script>
</head>
<body>
            <span id="main">
                <div>111111</div>
                <div>222222</div>
                <div>333333</div>
                    <span>
                        <div>44444</div>
                    </span>
            </span>
                <div>55555</div>
            <span>
                <div>66666</div>
            </span>
                <div>77777</div>
</body>
</html>

运行效果为：
在这里插入图片描述

2.4、属性选择器（了解）

我们可以通过属性选择器，以属性名或者值来匹配对应标签

 <input type="radio" name="hobby" value="敲代码" id="r01" />

[属性名] 获取有指定属性名的标签对象 $(“name”)
[属性名=值] 获取指定属性名等于属性值 $(“name=hobby”)
[属性名*=值] 获取指定属性名 含有 指定值的标签对象 $(“name*=o”)
多个属性选择器可以组合使用
[选择器1][选择器2][选择器3] ，多个属性同时过滤。

(1)案例素材

<script>
			$(function(){
				//1、获取所有存在type属性的标签
				
				//2、获取所有type属性为radio的标签
				
				//3、获取所有type属性含有o的标签
				
				//4、获取所有input标签中的单选框，且name为sex的标签
			});
		</script>

用户名：<input type="text" name="uname" value="小刘"/><br />
		密码：<input type="password" name="pwd" value="123"/><br />
		性别：<input type="radio" name="sex" value="man" />男
			  <input type="radio" name="sex" value="woman" />女<br />
		是否VIP：<input type="radio" name="vip" value="no" />不是
			  	 <input type="radio" name="vip" value="yes" />是<br />

(2)编写jQuery代码

<script>
    $(function(){
        //1、获取所有存在type属性的标签
            var ele1  = $("[type]");
            //alert(ele1.length);//7
            //为什么是7呢，因为上面引入jQuery的标签内部还有个type
        //2、获取所有type属性为radio的标签
            var ele2 = $("[type=radio]");
            //alert(ele2.length)//4
        //3、获取所有type属性含有o的标签
            var ele3 = $("[type*=o]");
            //alert(ele3.length);//5
        //4、获取所有input标签中的单选框，且name为sex的标签
        var ele4 = $("input[type=radio][name=sex]");//2
        alert(ele4.length)
    });
</script>

(3)完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>

        <script>
            $(function(){
                //1、获取所有存在type属性的标签
                    var ele1  = $("[type]");
                    //alert(ele1.length);//7
                    //为什么是7呢，因为上面引入jQuery的标签内部还有个type
                //2、获取所有type属性为radio的标签
                    var ele2 = $("[type=radio]");
                    //alert(ele2.length)//4
                //3、获取所有type属性含有o的标签
                    var ele3 = $("[type*=o]");
                    //alert(ele3.length);//5
                //4、获取所有input标签中的单选框，且name为sex的标签
                var ele4 = $("input[type=radio][name=sex]");//2
                alert(ele4.length)
            });
        </script>
</head>
        <body>
            用户名：<input type="text" name="uname" value="小刘"/><br />
            密码：<input type="password" name="pwd" value="123"/><br />
            性别：<input type="radio" name="sex" value="man" />男
            <input type="radio" name="sex" value="woman" />女<br />
            是否VIP：<input type="radio" name="vip" value="no" />不是
            <input type="radio" name="vip" value="yes" />是<br />
        </body>
</html>

运行效果为：
在这里插入图片描述

2.5、基本过滤选择器（了解）

通常我们在获取到一系列标签对象之后，会有一些筛选需求，
这里就可以使用基本过滤选择器。
:first 第一个
:last 最后一个
:even 偶数 索引是从0开始计数
:odd 奇数
:not(…) 除了指定内容 abcd:not(ab) == > cd
:eq(index) 获取指定索引
:gt(index) 大于指定索引
:lt(index) 小于指定索引

案例代码：

<script>
			$(function(){
				//1、在所有DIV标签中，获取第一个div
				
				//2、在所有DIV标签中，获取最后一个div
				
				//3、在所有DIV标签中，获取所有偶数位的div
				
				//4、在所有DIV标签中，获取所有奇数位的div
				
				//5、在所有DIV标签中，获取除了第一位以外所有的div
				
				//6、在所有DIV标签中，获取索引等于1的div
				
				//7、在所有DIV标签中，获取索引大于1的div
				
				//8、在所有DIV标签中，获取索引小于1的div
			});
		</script>


<div>11111111，索引是0</div>
		<div>22222222，索引是1</div>
		<div>33333333，索引是2</div>
		<div>44444444，索引是3</div>
		<div>55555555，索引是4</div>
		<div>66666666，索引是5</div>
		<div>77777777，索引是6</div>
		<div>88888888，索引是7</div>

(2)编写jQuery代码

<script>
    $(function(){
        //1、在所有DIV标签中，获取第一个div
           // alert($("div:first")[0].innerHTML);
             //alert($("div:eq(0)")[0].innerHTML);
        //2、在所有DIV标签中，获取最后一个div
            //alert($("div:last")[0].innerHTML);
        //3、在所有DIV标签中，获取所有偶数位的div
           /* var arr = $("div:even");
            for (var i = 0; i < arr.length; i++) {
                alert(arr[i].innerHTML);
            }*/
        //4、在所有DIV标签中，获取所有奇数位的div
        /*var arr = $("div:odd");
        for (var i = 0; i < arr.length; i++) {
            alert(arr[i].innerHTML);
        }*/
        //5、在所有DIV标签中，获取除了第一位以外所有的div
        /*var arr1 = $("div:not(div:first)")
        for (var i = 0; i < arr1.length; i++) {
            alert(arr1[i].innerHTML)
        }*/
        //6、在所有DIV标签中，获取索引等于1的div
           // alert($("div:eq(1)")[0].innerHTML)
        //7、在所有DIV标签中，获取索引大于1的div
        //alert($("div:gt(1)")[0].innerHTML)
        //8、在所有DIV标签中，获取索引小于1的div
        alert($("div:lt(1)")[0].innerHTML)
    });
</script>

(3)完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <script>
        $(function(){
            //1、在所有DIV标签中，获取第一个div
               // alert($("div:first")[0].innerHTML);
                 //alert($("div:eq(0)")[0].innerHTML);
            //2、在所有DIV标签中，获取最后一个div
                //alert($("div:last")[0].innerHTML);
            //3、在所有DIV标签中，获取所有偶数位的div
               /* var arr = $("div:even");
                for (var i = 0; i < arr.length; i++) {
                    alert(arr[i].innerHTML);
                }*/
            //4、在所有DIV标签中，获取所有奇数位的div
            /*var arr = $("div:odd");
            for (var i = 0; i < arr.length; i++) {
                alert(arr[i].innerHTML);
            }*/
            //5、在所有DIV标签中，获取除了第一位以外所有的div
            /*var arr1 = $("div:not(div:first)")
            for (var i = 0; i < arr1.length; i++) {
                alert(arr1[i].innerHTML)
            }*/
            //6、在所有DIV标签中，获取索引等于1的div
               // alert($("div:eq(1)")[0].innerHTML)
            //7、在所有DIV标签中，获取索引大于1的div
            //alert($("div:gt(1)")[0].innerHTML)
            //8、在所有DIV标签中，获取索引小于1的div
            alert($("div:lt(1)")[0].innerHTML)
        });
    </script>
</head>
<body>
                    <div>11111111，索引是0</div>
                    <div>22222222，索引是1</div>
                    <div>33333333，索引是2</div>
                    <div>44444444，索引是3</div>
                    <div>55555555，索引是4</div>
                    <div>66666666，索引是5</div>
                    <div>77777777，索引是6</div>
                    <div>88888888，索引是7</div>
</body>
</html>

运行效果为：
在这里插入图片描述

2.6、表单属性选择器（了解）

:checked 选中（单选radio ，多选checkbox） <input type="..." checked="checked">
:selected 选择（下列列表 ） <option selected="selected">
:enabled 可用
:disabled 不可用。<xxx disabled="disabled"> | <xxx disabled=" "> | <xxx disabled>

（1）案例素材：

<script>
			$(function(){
				//获取可用的表单输入项
				
				//获取不可用的表单输入项
				
				//获取选中的复选框
				
				//获取国家下拉框中，被选中的option 
				

			});
		</script>


<h1>不可用的表单输入项</h1>
		<input type="text" disabled="disabled" />
		<input type="button" value="不可用按钮" disabled="disabled" />
		<h1>复选框</h1>
		<input type="checkbox" name="hobby" value="code"/>编程
		<input type="checkbox" name="hobby" value="swimming" checked="checked"/>游泳
		<input type="checkbox" name="hobby" value="reading" checked="checked"/>阅读
		<hr />
		<h1>下拉选择框</h1>
		城市：<select id="city">
			<option value="">请选择</option>
			<option value="bj">北京</option>
			<option value="sh">上海</option>
		</select>
		<hr />
		国家：<select id="country" multiple="multiple">
			<option value="China" selected="selected">中国</option>
			<option value="America" selected="selected">美国</option>
			<option value="Russia">俄罗斯</option>
			<option value="England">英国</option>
		</select>

（2）编写jQuery代码

<script>
    $(function(){
        //获取可用的表单输入项
            //alert($("input:enabled").length);
        //获取不可用的表单输入项
            //alert($("input:disabled").length);
        //获取选中的复选框
            //alert($("input[type=checkbox]:checked").length);
        //获取国家下拉框中，被选中的option
            alert($("#country optiona:selected").length);

    });
</script>

（3）完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <script>
        $(function(){
            //获取可用的表单输入项
                //alert($("input:enabled").length);
            //获取不可用的表单输入项
                //alert($("input:disabled").length);
            //获取选中的复选框
                //alert($("input[type=checkbox]:checked").length);
            //获取国家下拉框中，被选中的option
                alert($("#country optiona:selected").length);

        });
    </script>

</head>
        <body>
                        <h1>不可用的表单输入项</h1>
                        <input type="text" disabled="disabled" />
                        <input type="button" value="不可用按钮" disabled="disabled" />
                        <h1>复选框</h1>
                        <input type="checkbox" name="hobby" value="code"/>编程
                        <input type="checkbox" name="hobby" value="swimming" checked="checked"/>游泳
                        <input type="checkbox" name="hobby" value="reading" checked="checked"/>阅读
                        <hr />
                        <h1>下拉选择框</h1>
                        城市：<select id="city">
                            <option value="">请选择</option>
                            <option value="bj">北京</option>
                            <option value="sh">上海</option>
                        </select>
                        <hr />
                        国家：<select id="country" multiple="multiple">
                            <option value="China" selected="selected">中国</option>
                            <option value="America" selected="selected">美国</option>
                            <option value="Russia">俄罗斯</option>
                            <option value="England">英国</option>
                        </select>
        </body>
</html>

运行效果为：
在这里插入图片描述

三、重写隔行换色(jQuery)

3.1 使用jQuery 重写隔行换色

3.1.1 知识穿插（jQuery操作class属性）

addClass( ) 给指定标签的class属性追加样式
removeClass( ) 给指定标签的class属性移除样式

案例代码：

<style>
			.blueDiv{
				background-color: #87CEFA;
				width:300px;
				height:300px;
			}
			.redDiv{
				background-color: red;
				width:300px;
				height:300px;
			}
		</style>
		<script>
			$(function(){
				//1、设置d1这个div标签样式为blueDiv
				
				//2、移除d2这个div标签的redDiv样式
				
			});
		</script>

<div id="d1">11111</div>
		<div id="d2" class="redDiv">22222</div>

（2）编写jQuery代码

<script>
    $(function(){
        //1、设置d1这个div标签样式为blueDiv
           $("#d1").addClass("blueDiv");
        //2、移除d2这个div标签的redDiv样式
            $("#d2").removeClass();
    });
</script>

（3）完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <style>
        .blueDiv{
            background-color: #87CEFA;
            width:300px;
            height:300px;
        }
        .redDiv{
            background-color: red;
            width:300px;
            height:300px;
        }
    </style>
    <script>
        $(function(){
            //1、设置d1这个div标签样式为blueDiv
               $("#d1").addClass("blueDiv");
            //2、移除d2这个div标签的redDiv样式
                $("#d2").removeClass();
        });
    </script>
</head>
	<body>
        <div id="d1">11111</div>
        <div id="d2" class="redDiv">22222</div>
	</body>
</html>

运行显示效果为：
在这里插入图片描述

3.1.2 隔行换色实现

（1）案例素材源码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <style>
        .blue{
            background-color: lightskyblue;
        }
    </style>
    </head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="80%">
    <tr>
        <th></th>
        <th>序号</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>

（2）jQuery代码编写

<script>
       $(function () {
           $("tr:gt(0):odd").addClass("blue")
       })
</script>

（4）完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <style>
        .blue{
            background-color: lightskyblue;
        }
    </style>
    <script>
       $(function () {
           $("tr:gt(0):odd").addClass("blue")
       })
    </script>
</head>
<body>
	<table border="1" cellpadding="0" cellspacing="0" width="80%">
	    <tr>
	        <th></th>
	        <th>序号</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>

四、重写全选全不选、反选(jQuery)

4.1使用jQuery 重写全选全不选、反选

4.1.1 需求说明及分析

在这里插入图片描述
在这里插入图片描述

4.1.2 知识点：jQuery

prop(“属性名”); 获取指定属性的值 等价于 attr(“属性名”)
prop(“属性名”,属性值); 设置指定属性的值为第二个参数(属性值)
removeProp(“属性名”); 移除指定属性的值 (jq3.X版本之后就把removeProp干掉了) removeAttr(“属性名”)

（1）案例素材源码；

<style>
			.blueDiv{
				background-color: #87CEFA;
				width:300px;
				height:300px;
			}
			.redDiv{
				background-color: red;
				width:300px;
				height:300px;
			}
		</style>
		<script>
			$(function(){
				//1、获取d2这个div标签的class值
				
				//2、设置d1这个div标签样式为blueDiv
				
				//3、移除d2这个div标签的redDiv样式
				
			});
		</script>
			<div id="d1">11111</div>
			<div id="d2" class="redDiv">22222</div>

（2）编写jQuery代码

<script>
    $(function(){
        //1、获取d2这个div标签的class值
            //alert($("#dd").val());
            var arr = $("input").prop("value","Wendy");
            var ar =  $("#d2").prop("class");
            //alert(ar)
        //2、设置d1这个div标签样式为blueDiv
                $("#d1").prop("class","blueDiv");
        //3、移除d2这个div标签的redDiv样式
                $("#d2").removeAttr("class");

    });
</script>

（3）完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <style>
        .blueDiv{
            background-color: #87CEFA;
            width:300px;
            height:300px;
        }
        .redDiv{
            background-color: red;
            width:300px;
            height:300px;
        }
    </style>
    <script>
        $(function(){
            //1、获取d2这个div标签的class值
                //alert($("#dd").val());
                var arr = $("input").prop("value","Wendy");
                var ar =  $("#d2").prop("class");
                //alert(ar)
            //2、设置d1这个div标签样式为blueDiv
                    $("#d1").prop("class","blueDiv");
            //3、移除d2这个div标签的redDiv样式
                    $("#d2").removeAttr("class");

        });
    </script>
</head>
    <body>
        <input type="text" value="Daniel" id="dd">
        <div id="d1">11111</div>
        <div id="d2" class="redDiv">22222</div>
</body>
</html>

效果显示为：
在这里插入图片描述

4.1.3 反选知识点

数组遍历：
在JS中，我们使用普通FOR循环即可遍历数组。
在JQuery中，我们可以使数组的遍历变得更为简单。
在这里插入图片描述
Fn: 回调函数(数组每次遍历都会执行一次这个函数)

Function(index){
	//index:遍历的索引
	//this:当前遍历的元素对象
}

4.1.4 使用jQuery 重写全选全不选、反选

(1)案例源码：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script>
         
      </script>
   </head>
   <body>
      <table border="1" cellpadding="0" cellspacing="0" width="80%">
         <tr>
            <th>
               <input type="button" value="全选" onclick=""/>
               <input type="button" value="全不选" onclick=""/>
            </th>
            <th>序号</th>
            <th>商品名称</th>
         </tr>
         <tr>
            <td>
               <input type="checkbox" class="itemSelect" />      
            </td>
            <td>1</td>
            <td>手机数码</td>
         </tr>
         <tr>
            <td>
               <input type="checkbox" class="itemSelect" />      
            </td>
            <td>2</td>
            <td>电脑办公</td>
         </tr>
         <tr>
            <td>
               <input type="checkbox" class="itemSelect" />      
            </td>
            <td>3</td>
            <td>鞋靴箱包</td>
         </tr>
         <tr>
            <td>
               <input type="checkbox" class="itemSelect" />      
            </td>
            <td>4</td>
            <td>家居饰品</td>
         </tr>
      </table>
   </body>
</html>

（2）编写jQuery代码

<script>
      function quan() {
                  $(".itemSelect").prop("checked",true);
              }
              function bu() {
                  $(".itemSelect").prop("checked",false);
              }
              function fan() {
            var arr = $(".itemSelect");
            arr.each(function () {
               var temp = $(this).prop("checked");
               $(this).prop("checked",!temp);
                      })
              }
</script>

（3）完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
		<script>
				function quan() {
                    $(".itemSelect").prop("checked",true);
                }
                function bu() {
                    $(".itemSelect").prop("checked",false);
                }
                function fan() {
						var arr = $(".itemSelect");
						arr.each(function () {
							var temp = $(this).prop("checked");
							$(this).prop("checked",!temp);
                        })
                }
		</script>
	</head>
	<body>
		<table border="1" cellpadding="0" cellspacing="0" width="80%">
			<tr>
				<th>
					<input type="button" value="全选" onclick="quan()"/>
					<input type="button" value="全不选" onclick="bu()"/>
					<input type="button" value="反选" onclick="fan()"/>
				</th>
				<th>序号</th>
				<th>商品名称</th>
			</tr>
			<tr>
				<td>
					<input type="checkbox" class="itemSelect" />		
				</td>
				<td>1</td>
				<td>手机数码</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" class="itemSelect" />		
				</td>
				<td>2</td>
				<td>电脑办公</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" class="itemSelect" />		
				</td>
				<td>3</td>
				<td>鞋靴箱包</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" class="itemSelect" />		
				</td>
				<td>4</td>
				<td>家居饰品</td>
			</tr>
		</table>
	</body>
</html>

五、 重写省市联动(jQuery)

5.1 元素value属性操作

获取value属性值
Js方式: js对象.value
Jq方式: jq对象.prop(“value”)
jQuery中，还有一种快捷操作方式：
在这里插入图片描述
（1）案例素材代码：

<input type="text" id="uname" value="黄蓉" /><br />
<input type="button" value="点击获取输入框的value值" onclick="run1()" />
<input type="button" value="点击设置输入框的value值" onclick="run2()" />

（2）jQuery代码编写

<script>
    //点击获取输入框的value值
   function run1(){
       alert($("#uname").val());
   }
   //点击设置输入框的value值
   function run2() {
       $("#uname").val("Kendra")
   }

（3）完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <script>
        //点击获取输入框的value值
       function run1(){
           alert($("#uname").val());
       }
       //点击设置输入框的value值
       function run2() {
           $("#uname").val("Kendra")
       }

    </script>
</head>
<body>
      <input type="text" id="uname" value="Daniel" /><br />
      <input type="button" value="点击获取输入框的value值" onclick="run1()" />
      <input type="button" value="点击设置输入框的value值" onclick="run2()" />
</body>
</html>

运行显示为：
在这里插入图片描述

5.2 获取/设置元素内容体

1、获取/设置元素内容体HTML代码

在这里插入图片描述

2、获取/设置元素内容体纯文本
在这里插入图片描述
（1）案例素材源码：

<div id="d1">
	<font color="red">你好</font>
</div>
<hr />
<input type="button" value="点我获取内容体代码" onclick="run1()"/>
<input type="button" value="点我设置内容体代码为蓝色字体" onclick="run2()"/>
<hr />
<input type="button" value="点我获取内容体纯文本" onclick="run3()"/>
<input type="button" value="点我设置内容体纯文本" onclick="run4()"/>

（2）编写jQuery代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <script>
        //点我获取内容体代码  JQ对象.html()
        function run1() {
            alert($("#d1").html());
        }
        //点我设置内容体代码为蓝色字体   JQ对象.html("HTML代码")
        function run2() {
            $("#d1").html("<font color='green'>你好</font>");
        }
        //点我获取内容体纯文本    JQ对象.text()
        function run3() {

            alert($("#d1").text())
        }
        //点我设置内容体纯文本  JQ对象.text("纯文本")
        function run4() {
            $("#d1").text(" <font color='#663399'>我不好</font>")
        }

    </script>
</head>
	<body>
	        <div id="d1">
	            <font color="red">你好</font>
	        </div>
	        <hr />
	        <input type="button" value="点我获取内容体代码" onclick="run1()"/>
	        <input type="button" value="点我设置内容体代码为蓝色字体" onclick="run2()"/>
	        <hr />
	        <input type="button" value="点我获取内容体纯文本" onclick="run3()"/>
	        <input type="button" value="点我设置内容体纯文本" onclick="run4()"/>
	
	</body>
</html>

效果显示为：
在这里插入图片描述

5.2 追加元素内容体

通常我们涉及到追加内容体，使得效果可以层层叠加。
以下两句效果相同，写法不同
A.append(B) , 向A的末尾追加B
B.appendTo(A) ，将B追加到A的末尾
（1） 案例素材源码：

在这里插入图片描述

以下两句效果相同，写法不同
A.prepend(B) , 向A的头部追加B
B.prependTo(A) ， 将B追加到A的头部

在这里插入图片描述
（1）案例素材源码：

<ul id="rank">
	<li>Php</li>
	<li>Android</li>
	<li>Ios</li>
</ul>
<hr />
 <input type="button" value="列表头部追加Java" onclick="run1()" />
 <input type="button" value="列表尾部追加Java" onclick="run2()" />

（2）完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <script>
        //列表头部追加Java    A.prepend(B) ,      向A的头部追加B
        function run1() {
            $("#rank").prepend("<li>java</li>");
        }
        //列表尾部部追加Java    B.prependTo(A) ，		将B追加到A的头部
        function run2() {
            $("#rank").append("<li>C#</li>");
        }
    </script>
</head>
    <body>
            <ul id="rank">
                <li>Php</li>
                <li>Android</li>
                <li>Ios</li>
            </ul>
            <hr />
            <input type="button" value="列表头部追加Java" onclick="run1()" />
            <input type="button" value="列表尾部追加Java" onclick="run2()" />
    </body>
</html>

运行结果显示为：

在这里插入图片描述

5.3 重写省市联动

（1）案例素材准备

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script>
		// 定义二维数组,存储城市信息
		var cities = new Array();
		cities[0] = new Array("海淀区","房山区","朝阳区");
		cities[1] = new Array("长春市","吉林市","松原市","延边市");
		cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
		cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
		cities[4] = new Array("南京市","苏州市","扬州市","宿迁市");

	</script>
	<body>
		<select id="province" style="width:150px">
			<option value="">----请-选-择-省----</option>
			<option value="0">北京</option>
			<option value="1">吉林省</option>
			<option value="2">山东省</option>
			<option value="3">河北省</option>
			<option value="4">江苏省</option>
		</select>
		<select id="city" style="width:150px">
			<option>----请-选-择-市----</option>
		</select>
	</body>
</html>

（2）添加onchange方法

在这里插入图片描述

οnchange="changeCity(this.value)"

（3）编写jQuery代码：

<script>
		function changeCity(obj) {
		    //1.根据obj获取城市信息
			var arr = cities[obj];
			//alert(arr);
			//2.获取请选择市的元素对象
			var city = $("#city");
			//4.清空（原始状态）
			city.html("<option>----请-选-择-市----</option>");
			//3.遍历出城市信息，然后追加请选择市的下拉框内
			$(arr).each(function () {

			    city.append("<option >"+this+"</option>")
            })
        }
	</script>

（4）完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
	<script>
		function changeCity(obj) {
		    //1.根据obj获取城市信息
			var arr = cities[obj];
			//alert(arr);
			//2.获取请选择市的元素对象
			var city = $("#city");
			//4.清空（原始状态）
			city.html("<option>----请-选-择-市----</option>");
			//3.遍历出城市信息，然后追加请选择市的下拉框内
			$(arr).each(function () {

			    city.append("<option >"+this+"</option>")
            })
        }
	</script>
	<script>
		// 定义二维数组,存储城市信息
		var cities = new Array();
		cities[0] = new Array("海淀区","房山区","朝阳区");
		cities[1] = new Array("长春市","吉林市","松原市","延边市");
		cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市");
		cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市");
		cities[4] = new Array("南京市","苏州市","扬州市","宿迁市");

	</script>
	<body>
		<select id="province" style="width:150px" onchange="changeCity(this.value)">
			<option value="">----请-选-择-省----</option>
			<option value="0">北京</option>
			<option value="1">吉林省</option>
			<option value="2">山东省</option>
			<option value="3">河北省</option>
			<option value="4">江苏省</option>
		</select>
		<select id="city" style="width:150px">
			<option>----请-选-择-市----</option>
		</select>
	</body>
</html>

完成效果显示：
在这里插入图片描述

六、倒计时效果

6.1 需求说明及分析

在页面中有按钮,实现5秒以后才可以点击,有倒计时效果; (5秒之后图1变为图2)：
图1：(注:开始是灰色不可点击)

在这里插入图片描述

图2：(注:5秒之后内容变更为同意, 且可以点击)

在这里插入图片描述

6.2 案例实现

（1）案例素材源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
	<script>
		
	</script>

</head>
	<body>
		<input type="button" id="btnShow"  value="请仔细阅读协议(5)" />
	</body>
</html>

（2）编写jQuery代码：

<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
	<script>
        var id;
		$(function () {
		    	//1.按钮变成不可点击（disabled）
				$("#btnShow").prop("disabled",true);
				id = setInterval("daoji()",1000);
        })
        var count=4;
		function daoji() {
		    if(count == 0){
		        //将按钮的值改变为同意，可点击，并且停止定时器
                $("#btnShow").val("同意");
               $("#btnShow").prop("disabled",false);
               //清楚定时器
                clearInterval(id)
			}else{
                $("#btnShow").val("请仔细阅读协议("+count+")")
			}
			count --;
        }
	</script>

（3）完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
	<script>
        var id;
		$(function () {
		    	//1.按钮变成不可点击（disabled）
				$("#btnShow").prop("disabled",true);
				id = setInterval("daoji()",1000);
        })
        var count=4;
		function daoji() {
		    if(count == 0){
		        //将按钮的值改变为同意，可点击，并且停止定时器
                $("#btnShow").val("同意");
               $("#btnShow").prop("disabled",false);
               //清楚定时器
                clearInterval(id)
			}else{
                $("#btnShow").val("请仔细阅读协议("+count+")")
			}
			count --;
        }
	</script>

</head>
	<body>
		<input type="button" id="btnShow"  value="请仔细阅读协议(5)" />
	</body>
</html>

显示效果为：
在这里插入图片描述在这里插入图片描述

七、数组内容显示到下拉列表

7.1 需求说明及分析

在这里插入图片描述

当页面加载完成后，就将数组的内容显示到下拉列表

7.2 案例实现

(1)素材源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	</head>
<body>
	<select id="s1">
		<option value="">四大姊妹
</option>
	</select>
</body>
</html>

(2)完整源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <script>
        var arr = ["Daniel","Wendy","Kendra","Guoguo"];

        $(function () {

            $(arr).each(function () {

                $("#add").append("<option value=''>"+this+"</option>")
            })
        })

    </script>
</head>
	<body>
    	<select id="add">
        	<option value="">四大姊妹</option>
   	   </select>
	</body>
</html>

运行显示为：
在这里插入图片描述

八、列表左右选择

8.1 需求说明及分析

在这里插入图片描述

8.2 案例实现

（1）素材源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
		
		</script>
	</head>
	<body>
		<select id="leftSelectId" multiple="multiple" style="width: 100px;height: 200px;">
			<option>左1</option>
			<option>左2</option>
			<option>左3</option>
			<option>左4</option>
			<option>左5</option>
		</select>
		<input type="button" value="》" />
		<input type="button" value="》》"/>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="button" value="《"   />
		<input type="button" value="《《" />
		<select id="rightSelectId" multiple="multiple" style="width: 100px;height: 200px;">
			<option>右1</option>
			<option>右2</option>
			<option>右3</option>
			<option>右4</option>
			<option>右5</option>
		</select>
		<hr />
	</body>
</html>

(2)添加四个方法run1(),run2(),run3(),run4
(3)完整源码

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
      <script>
            //将左边选中的数据追加到右边列表末尾
            function run1() {
                $("#leftSelectId option:selected" ).appendTo($("#rightSelectId"));
                }
                //将左边全部的数据追加到右边列表末尾
                function run2() {
                    $("#leftSelectId option" ).appendTo($("#rightSelectId"));
                }
                //将右边选中的数据追加到左边列表的末尾
                function run3() {
                    $("#rightSelectId option:selected" ).appendTo($("#leftSelectId"));
                }
                //将右边全部数据追加到左边列表的末尾
                function run4() {
                    $("#rightSelectId option" ).appendTo($("#leftSelectId"));
                }
      </script>
   </head>
   <body>
      <select id="leftSelectId" multiple="multiple" style="width: 100px;height: 200px;">
         <option>左1</option>
         <option>左2</option>
         <option>左3</option>
         <option>左4</option>
         <option>左5</option>
      </select>
      <input type="button" value="》" onclick="run1()" />
      <input type="button" value="》》" onclick="run2()"/>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="button" value="《"  onclick="run3()" />
      <input type="button" value="《《" onclick="run4()" />
      <select id="rightSelectId" multiple="multiple" style="width: 100px;height: 200px;">
         <option>右1</option>
         <option>右2</option>
         <option>右3</option>
         <option>右4</option>
         <option>右5</option>
      </select>
      <hr />
      
   </body>
</html>

（4）效果完成：
在这里插入图片描述
效果二：
在这里插入图片描述
完成效果
在这里插入图片描述

九、jQuery常见事件

在这里插入图片描述
jQuery事件比js事件少写了一个on
6.2、jQuery事件定义方式
我们以鼠标移入、移出和点击事件为例讲解：

鼠标移入：mouseover
鼠标移出：mouseout
点击事件：click
格式：jQuery对象.mouseover(fn);
其中: Fn: 当鼠标移入时会调用这个函数( 回调函数 )

(1)素材准备

<style>
			#d1{
				background-color: #87CEFA;
				width:300px;
				height:300px;
			}
			#d2{
				background-color:bisque;
				width:300px;
				height:300px;
			}
		</style>
		<script>
			$(function(){
				//页面加载完成时，
				//为d1加入鼠标移入和点击事件
				
				//为d2加入鼠标移出事件
				
			});
</script>
		<div id="d1">我是div1</div>
		<div id="d2">我是div2</div>

(2) 完整实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            background-color: #87CEFA;
            width:300px;
            height:300px;
        }
        #d2{
            background-color:bisque;
            width:300px;
            height:300px;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <script>
        $(function(){
            //页面加载完成时，
            //为d1加入鼠标移入和点击事件
            $("#d1").mouseover(function () {
                alert("鼠标移入了");
            }).click(function () {
                alert("鼠标点击了");//鼠标移入后点击或按键盘空格才起作用
            })
            //为d2加入鼠标移出事件
            $("#d2").mouseout(function () {
                alert("鼠标移出了")
            })
        });
    </script>
</head>
<body>
        <div id="d1">我是div1</div>
        <div id="d2">我是div2</div>
</body>
</html>

(3)实现效果：
在这里插入图片描述
在这里插入图片描述

十、重写表单校验(jQuery)

10.1 需求说明与分析

在这里插入图片描述

要求:
1.用户名 密码 确认密码 邮箱 出生日期不能为空
2.用户名的长度在6—12之间
3.密码和确认密码必须保持一致
4.Email必须符合邮箱的格式
5.出生日期必须符合日期格式

10.2、走进知识点-JQuery

10.2.1、JQuery插件-validation

10.2.1.1、插件简述

插件简述
在这里插入图片描述

10.2.1.2、插件导入

点我下载

在这里插入图片描述
导入顺序

jQuery.validate.js所在位置：
jQuery-validation插件\jquery-validation-1.15.0\dist\ jQuery.validate.js
messages_zh.js所在位置：
jQuery-validation插件\jquery-validation-1.15.0\dist\localization\messages_zh.js

在这里插入图片描述
在这里插入图片描述（1）案例素材源码

为指定表单加入校验
validate需要手动的声明，对那个表单进行校验，及需要手动调用validate()方法。

<script type="text/javascript">
	$(function () {
		//为指定表单加入校验
		$("#表单ID").validate();
	});
</script>

为校验加入规则
validate()方法中可以指定添加规则

<script type="text/javascript">
	$(function () {
		//为指定表单加入校验
		$("#表单ID").validate({
                rules:{
                   name1:{ 
                       规则1:规则值,
                       规则2：规则值
						},
				   name2:{
                       规则1:规则值,
                       规则2：规则值
					}
				}
		});
	});
</script>

规则速查表

在这里插入图片描述
（2）完整源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../js/jquery.validate.js"></script>
    <script type="text/javascript" src="../js/messages_zh.js"></script>

    <script type="text/javascript">
        $(function () {
            //为指定表单加入校验
            $("#f1").validate({
                rules:{
                    username:{
                        required:true,
                        rangelength:[6,10]
                    },
                    email:{
                        email:true
                    },
                    birthday:{
                        date:true
                    },
                    sal:{
                        number:true
                    },
                    workForday:{
                        range:[6,16]
                    },
                    pwd:{
                        required:true
                    },
                    repwd:{
                        required:true,
                        equalTo:"#pwd"
                    }
                }
            });
        });
    </script>
</head>
    <body>
    <form id="f1">
        <table border="1" width="100%" cellpadding="0" cellspacing="0">
            <tr>
                <td colspan="3"><font color="cornflowerblue" size="5">测试表单</font></td>
            </tr>
            <tr>
                <td>用户名（必填字段，长度范围6~10）</td>
                <td colspan="2">
                    <input type="text" name="username"  />
                </td>
            </tr>
            <tr>
                <td>Email（符合邮件格式）</td>
                <td colspan="2">
                    <input type="text" name="email" />
                </td>
            </tr>
            <tr>
                <td>出生日期（日期格式）</td>
                <td colspan="2">
                    <input type="text" name="birthday" />
                </td>
            </tr>
            <tr>
                <td>薪资（数字）</td>
                <td colspan="2">
                    <input type="text" name="sal" />
                </td>
            </tr>
            <tr>
                <td>一天工作时长（值范围6~16）</td>
                <td colspan="2">
                    <input type="text" name="workForday" />
                </td>
            </tr>
            <tr>
                <td>密码（必须填写）</td>
                <td colspan="2">
                    <input type="text" name="pwd" id="pwd"/>
                </td>
            </tr>
            <tr>
                <td>确认密码（必须填写，且与密码值要相同）</td>
                <td colspan="2">
                    <input type="text" name="repwd" />
                </td>
            </tr>
            <tr>
                <td></td>
                <td colspan="2">
                    <input type="submit" value="注册" />
                </td>
            </tr>
        </table>
    </form>
    </body>
</html>

（3）效果显示：
在这里插入图片描述
在这里插入图片描述

（4）需求：将错误提示信息改为红色

通过F12查找都为lable标签所以直接添加：
在这里插入图片描述

直接添加即可：

<style>
     label{
         color: red;
     }
</style>

为规则自定义错误信息
messages可以为已经定好的规则自定义错误信息

<script type="text/javascript">
	$(function () {
		//为指定表单加入校验
		$("#表单ID").validate({
                rules:{
                   name1:{
                       规则1:规则值,
                       规则2:规则值
						}
				},
				messages:{
				  name1:{
				       规则1:"自定义错误信息"
				  }
			   }
			 });
	    });
</script>

上述代码追加：
在这里插入图片描述

messages:{
     username:{
         required:"亲，这是必填字段哦",
         rangelength:"必须要填6到10位字哦，狗崽！"
     }
}

显示：
在这里插入图片描述

动态取值:
{0}: 动态取值第一个值
{1}: 动态取值第二个值

在这里插入图片描述

10.2.1.3、自定义校验规则（扩展-了解）

如果希望自定义校验规则，需要在为表单加入校验之前，使用$.validator.addMethod完成。

$.validator.addMethod(name , method , message);
	参数1：name，校验规则的名称。例如：required  range
	参数2：method，执行校验时调用的函数。
			//参数value：表单项的value值。例如：<input value="">
			//参数ele：被校验的表单项对象。  一般不用
			//参数params：使用当前校验规则传递的值。例如：rules : { 规则1: 规则值params }
		function(value , ele , params ){
			
			//该方法必须返回true或者false
			//返回true，意味着符合规则
			//返回false，意味着不符合规则，阻止表单提交，同时展示错误信息
	     } 
	参数3：message，校验未通过时的提示信息

(1)案例实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../js/jquery.validate.js"></script>
    <script type="text/javascript" src="../js/messages_zh.js"></script>
    <style>
        label{
            color: red;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //为指定表单加入校验
            //自定义校验规则
            //第一个参数: 校验规则名称
            //第二个参数: 执行逻辑判断
            //第三个参数:提示错误信息
            $.validator.addMethod("Daniel" ,function (value,ele,param) {
                //文件中去下载  身份证正则表达式
                var reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
                var iCard = reg.test(value);
                return iCard;
            }, "请输入合适的身份证号");
            $("#f1").validate({
                rules:{
                    iCard:{
                        Daniel:true
                    }
                }
            });
        });
    </script>
</head>
	<body>
		<form id="f1">
		    <table border="1" width="100%" cellpadding="0" cellspacing="0">
		        <tr>
		            <td colspan="3"><font color="cornflowerblue" size="5">测试表单</font></td>
		        </tr>
		
		        <tr>
		            <td>身份证校验</td>
		            <td colspan="2">
		                <input type="text" name="iCard" />
		            </td>
		        </tr>
		        <tr>
		            <td></td>
		            <td colspan="2">
		                <input type="submit" value="注册" />
		            </td>
		        </tr>
		    </table>
		</form>
	</body>
</html>

实现效果：
在这里插入图片描述
正确输入
在这里插入图片描述

10.3 重写表单校验

（1）案例源码：里面图片下载

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			body{
				height:400px;
			}
			#divFormId{
				border: 5px solid #999;
				width: 640px;
				margin: 0 auto;
				padding: 20px;
				background-color: #fff;
			}
			#divbg{
				background: url(img/regist_bg_20190806_115335.jpg);
				height:100%;
				padding-top: 80px;
			}
			td{
				padding-top: 10px;
			}
			
		</style>
		<script>
			
		</script>
	</head>

	<body>
		<div id="divbg">
			<div id="divFormId">
				<form action="#" method="get" id="form">
					<table  width="660">
						<tr>
							<td colspan="3">
								<font color="#3164af" size="5">会员注册</font> USER REGISTER
							</td>
						</tr>
						<tr>
							<td align="right">用户名</td>
							<td colspan="2">
								<input type="text" id="username" name="username" size="35"/>
							</td>
						</tr>
						<tr>
							<td align="right">密码</td>
							<td colspan="2">
								<input type="password" id="pwd" name="pwd" size="35"/>
							</td>
						</tr>
						<tr>
							<td align="right">确认密码</td>
							<td colspan="2">
								<input type="password" id="repwd" name="repwd" size="35"/>
							</td>
						</tr>
						<tr>
							<td align="right">Email</td>
							<td colspan="2"><input type="text" id="email" name="email" size="35"/> </td>
						</tr>
						
						<tr>
							<td align="right">性别</td>
							<td colspan="2">
								<input type="radio" name="sex" value="man" checked="checked" />男
								<input type="radio" name="sex" value="woman" />女
							</td>
						</tr>
						<tr>
							<td align="right">出生日期</td>
							<td colspan="2"><input type="text" id="birthday" name="birthday" size="35"/> </td>
						</tr>
						<tr>
							<td width="80" align="right">验证码</td>
							<td width="100"><input type="text" id="verifyCode" name="verifyCode" /> </td>
							<td><img src="img/verifyCode.jpg" /> </td>
						</tr>
						<tr>
							<td></td>
							<td colspan="2">
								<input type="image" src="img/submit.jpg"  />
							</td>
						</tr>
					</table>

				</form>
			</div>
		</div>
	</body>
</html>

(2)引入插件：

<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>
<script type="text/javascript" src="../js/messages_zh.js"></script>

(3) 添加提示错误信息字样式

<style>
	label{
		color: red;
	}
</style>

（4）添加id（缺啥补啥）

在这里插入图片描述

(4)编写jQuery代码：

		<script>
			$(function () {
               $("#form").validate({
				   rules:{
                       username:{
                           required:true,
                           rangelength:[6,12]
					   },
                       pwd:{
                           required:true

                       },
                       repwd:{
                           required:true,
                           equalTo:"#pwd"
                       },
                       email:{
                           required:true,
                           email:true,
                       },
                       birthday:{
                           required:true,
                           dateISO:true
                       }
				   }
			   })
            })
		</script>

（5）完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
		<script type="text/javascript" src="../js/jquery.validate.js"></script>
		<script type="text/javascript" src="../js/messages_zh.js"></script>
		<style>
			label{
				color: red;
			}
		</style>
		<script>
			$(function () {
               $("#form").validate({
				   rules:{
                       username:{
                           required:true,
                           rangelength:[6,12]
					   },
                       pwd:{
                           required:true

                       },
                       repwd:{
                           required:true,
                           equalTo:"#pwd"
                       },
                       email:{
                           required:true,
                           email:true,
                       },
                       birthday:{
                           required:true,
                           dateISO:true
                       }
				   }
			   })
            })
		</script>
		<style type="text/css">
			body{
				height:400px;
			}
			#divFormId{
				border: 5px solid #999;
				width: 640px;
				margin: 0 auto;
				padding: 20px;
				background-color: #fff;
			}
			#divbg{
				background: url(img/regist_bg_20190806_115335.jpg);
				height:100%;
				padding-top: 80px;
			}
			td{
				padding-top: 10px;
			}
			
		</style>
		<script>
			
		</script>
	</head>

	<body>
		<div id="divbg">
			<div id="divFormId">
				<form action="#" method="get" id="form">
					<table  width="660">
						<tr>
							<td colspan="3">
								<font color="#3164af" size="5">会员注册</font> USER REGISTER
							</td>
						</tr>
						<tr>
							<td align="right">用户名</td>
							<td colspan="2">
								<input type="text" id="username" name="username" size="35"/>
							</td>
						</tr>
						<tr>
							<td align="right">密码</td>
							<td colspan="2">
								<input type="password" id="pwd" name="pwd" size="35"/>
							</td>
						</tr>
						<tr>
							<td align="right">确认密码</td>
							<td colspan="2">
								<input type="password" id="repwd" name="repwd" size="35"/>
							</td>
						</tr>
						<tr>
							<td align="right">Email</td>
							<td colspan="2"><input type="text" id="email" name="email" size="35"/> </td>
						</tr>
						
						<tr>
							<td align="right">性别</td>
							<td colspan="2">
								<input type="radio" name="sex" value="man" checked="checked" />男
								<input type="radio" name="sex" value="woman" />女
							</td>
						</tr>
						<tr>
							<td align="right">出生日期</td>
							<td colspan="2"><input type="text" id="birthday" name="birthday" size="35"/> </td>
						</tr>
						<tr>
							<td width="80" align="right">验证码</td>
							<td width="100"><input type="text" id="verifyCode" name="verifyCode" /> </td>
							<td><img src="img/verifyCode.jpg" /> </td>
						</tr>
						<tr>
							<td></td>
							<td colspan="2">
								<input type="image" src="img/submit.jpg"  />
							</td>
						</tr>
					</table>

				</form>
			</div>
		</div>
	</body>
</html>

(6)效果显示：
在这里插入图片描述
在这里插入图片描述

Daniel521-Spark
关注
专栏目录
前端页面jquery规范写法
02-21 391
最新版本的 jQuery 会改进性能和增加新功能，若不是为了兼容旧浏览器，建议使用最新版本的 jQuery。结果 1.6.2 版执行次数远超两个老版本。
前端-jQuery开发：案例
qq_57210034的博客
05-21 351
前端-jQuery开发：案例 目录 1.图片的放大和缩小功能 2.自动更新-当地时间 3.反选 List item 4.商品图片局部放大（放大镜）效果 1.图片的放大和缩小功能 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片的放大和缩小功能</title> <style type="text/css">
前端之jQuery
Yietong的博客
08-26 1360
jQuery是一个轻量级的兼容多浏览器的javascript库.它使用户能够更方便的处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“...
jQuery快速入门与实战指南
最新发布
weixin_35879493的博客
09-27 1019
本文还有配套的精品资源，点击获取 简介：《15天学会jQuery》是一份旨在让初学者在短时间内掌握jQuery核心概念和实用技巧的教程。内容涵盖jQuery的基础知识、DOM操作、事件处理、动画效果、Ajax交互以及插件使用和性能优化。通过每天的学习计划，读者将理解如何利用jQuery提高网页开发效率，并通过实战项目加深理解。 1. jQuery库简介与引入方法 ...
jQuery实现的各种前端网页，种类多样
小宝的博客
05-18 538
各种jQuery网页，种类多样，价格优惠，欢迎联系
基于jquery的web端登录界面前端
02-20
用jquery手写的web登录界面前端代码，欢迎讨论相互学习。
WEB前端-案例汇总
11-08
在“WEB前端-案例汇总”这个资源包中，包含了丰富的前端开发实例，旨在帮助初学者逐步进阶，全面掌握前端开发的各项技能。这个资源大汇总几乎涵盖了前端开发的所有领域，对于想要深入学习和理解Web前端技术的人来说...
前端web-jQuery.md
07-23
前端
Web前端开发技术-Jquery选择器.pptx
07-07
【jQuery选择器】是Web前端开发技术中一个重要的部分，它极大地简化了DOM元素的选取和操作。jQuery选择器分为多种类型，包括基本选择器、层级选择器、筛选选择器和其他选择器。 **1. 基本选择器** 基本选择器与CSS...
前端项目-jquery-smart-web-app-banner.zip
09-03
【前端项目-jquery-smart-web-app-banner.zip】是一个前端开发资源包，主要目的是为了帮助开发者在网站上实现一种智能的Web应用横幅功能。这种功能可以让用户方便地将网站保存到他们的设备主屏幕上，如同安装了一个...
JavaScript+jQuery交互式Web前端开发-源代码.zip
04-16
JavaScript 和 jQuery 是现代 Web 前端开发中的两个核心工具，它们共同为创建动态、交互式的网页提供了强大的功能。在本教程中，我们将深入探讨如何将这两种技术与 HTML 和 CSS 结合，以实现高效的网页设计。 ...
JQuery引入
lolhahahaha的博客
07-23 258
文章目录引入jQuery联网时可以使用在线版本也可以使用下载的jQuery理解$(function(){})通过id获取元素添加事件监听 引入jQuery 联网时可以使用在线版本 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 也可以使用下载的jQuery 在idea中添加下面的语句，再alt+enter进行下载 <script src="https://how2j.cn/study/jq
jQuery引入
weixin_30241919的博客
01-02 137
jQuery的介绍 1、jQuery是一个轻量级的、兼容多浏览器的JavaScript库(这里的兼容性主要是针对以前的IE浏览器来说的，因为当时的IE浏览器不兼容，但是现在基本所有的浏览器都能实现兼容) 2、jQuery 使用户能够更方便的处理 HTML Document、Events、实现动画效果、方便的进行 Ajax 交互，能够极大地简化 JavaScript 编程。它的宗旨就是：" Wr...
JQuery的引入
超级大洋葱的博客
01-17 996
JQuery下载地址：https://jquery.com/download/ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--导包,引入JQ的文件--> <script type="text/javascript" src="../../js/jquery-1.11.0.js" ></scr
jQuery的引入
Null_Robot的博客
07-15 1548
1.什么是jQuery？ jquery ， 是一个轻量级的js库。 2.jQuery的优点有哪些?： 1)写的少做的多 2) 强大的元素选择器 使用的是css1-css3所有选择器 3)简化了dom操作 4)优化了事件机制 3.jQuery的引入方式 1）外部引用 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> 2）内部
基于Jquery实现登录功能的前端页面
热门推荐
阳菜
08-31 4万+
本篇文章讲解如何用jquery完成登录功能的前端页面展示 html部分： <div class="name"> <label>用户名:</label> <input type="text" name="username" id="username"> </div> <div class="password"&g...
前端检测浏览器兼容性 - jQuery代码实现
4. jQuery库的使用: 在前端开发中，jQuery库的使用非常广泛，它可以简化DOM操作，事件处理，动画，Ajax等操作，使得开发人员可以更加专注于业务逻辑的实现。 5. 前端兼容性问题: 在前端开发中，我们经常会遇到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Daniel521-Spark

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值