jQuery的讲解及使用

最新推荐文章于 2024-09-30 08:51:48 发布
最新推荐文章于 2024-09-30 08:51:48 发布
阅读量339 收藏 1
点赞数
文章标签： jquery css javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45018290/article/details/107868215
版权

jQuery

jQuery基本介绍

jQuery简介

  • jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery使用步骤

  • jQuery下载

    • 下载地址：https://jquery.com/
    • 压缩版本的好处：
      （1）由于压缩版本做了简单的加密，可以保护JS不会被泄露
      （2）压缩版本文件体积小，网页加载速度快

  • jQuery引入

    • 在学习JavaScript时，我们学习过在HTML中导入*.js文件，将下载好的jQuery文件直接复制到项目的js文件夹下，通过引用外部js文件的方式导入即可，以上两种版本任选其一。
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>

  • jQuery基本语法

    • 在jQuery中，标识符$与jQuery是等价的，即jQuery == ， 为 了 书 写 简 单 方 便 ， 我 们 通 常 使 用 ，为了书写简单方便，我们通常使用 ，为了书写简单方便，我们通常使用替代jQuery。但jQuery是严格区分大小写的。
      例如：我们可以通过jQuery(选择器) 或 $(选择器)来查找元素。
  <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>jQuery引入</title>
    		<!-- 引入jQuery 和引入js文件方法相同 ，jQuery本质就是js的代码库 -->
    		<script type="text/javascript" src="../js/jquery-3.4.1.js" ></script>
    	</head>
    	<body>
    		<div>我是div</div>
    	</body>    	
    		<script>
    			/* jQuery对象的获取 */
    			console.log($);
    			console.log(jQuery);
    			/* di 表示获取的jQuery 对象 */
    			var di = $("div"); /* == */ var arr = document.querySelectorAll("div");
    		</script>
    </html>


- jQuery对象

  • 注意： 1、使用jQuery 先引入jQuery的js文件
    2、严格2区分大小写。
    3、在引入jQuery的script标签中不能写脚本。

  • jQuery页面加载

    • jQuery提供了ready()函数，用于页面加载成功后执行。与window.onload函数作用一致。写法有以下三种：

    • jQuery的三个准备函数

 <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>jQuery引入</title>
    		<!-- 引入jQuery 和引入js文件方法相同 ，jQuery本质就是js的代码库 -->
    		<script type="text/javascript" src="../js/jquery-3.4.1.js" ></script>
    		<script>    			
    			window.onload = function(){
    				var di = $("div");
    				console.log("onload : " + di.text()); /* text（）函数用于获取 元素中的文本内容 */
    			}    			
    			//1/准备函数
    			jQuery(document).ready(function(){
    				var di = $("div");
    				console.log(di.text()); /* text（）函数用于获取 元素中的文本内容 */
    			})    			
    			//2、准备函数
    			$(function(){
    				var di = $("div");
    				console.log("简写形式： " + di.text()); /* text（）函数用于获取 元素中的文本内容 */
    			})			
    			//3、第三种。
    			jQuery(function(){
    				var di = $("div");
    				console.log("第三种：" + di.text()); /* text（）函数用于获取 元素中的文本内容 */
    			});
    		</script>    	
    	</head>
    	<body>    		
    		<div>我是div</div>
    	</body>    ​		
    </html>

    - $(function(){
      脚本代码；
      })
    - $(document).ready(function(){
      console.log("完整的准备函数！！")
      })
    - jQuery(function(){
      console.log("页面加载完成执行的代码！！");
      })

DOM对象和jQuery对象转换

  • 概念

    • DOM对象：就是通过原生JavaScript方法获取到的对象就是DOM对象。
    • jQuery对象：就是通过jQuery包装DOM对象后产生的对象，或者是jQuery选择器获取的对象。

  • 语法：

    • DOM对象转jQuery对象，语法：jQuery(DOM对象); 或 $(DOM对象);
    • jQuery对象转DOM对象，语法：jQuery对象[index]; 或 jQuery对象.get(index);
    • 说明：1、 jQuery 对象都是数组
      2、jQuery的函数和js中的函数或者是属性是不能混搭的。
      3、jQuery 对象是可以直接调用jQuery函数的，原因是jQuery函数默认的包含了隐式内循环。

jQuery选择器

概述

  • jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的定位，从而完成元素属性和行为的处理。

基本选择器

  • id选择器 $("#id属性值")

    • 实例：

  • 类选择器 $(".class属性值")

    • 实例：
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-3.4.1.js" ></script>
<script>
$(function(){
//说明:将选择器以字符串的形式作为$()函数的参数来传递,返回jQuery对象
var div = $("#div2");
console.1og( div. length +":"+ div.text());
});
</script>
</head>
<body>
<div id="div1">id=div1</div>
<div id="div2">id=div2</div>
</body>

  • 标签选择器 $(“标签名称”)

  • 通配符选择器 $("*")

  • 分组选择器 $(“选择器1，选择器2，。。。。”)

    • 实例：
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src=" ../js/jquery-3.4.1.js" ></script>
<script>
$(function(){
//说明:将选择器以字符审的形式作为$()函数的参数来传递，近回jQuery对象
var cla = $(".cla");
console.1og( cla. length +":"+ cla.text());
});
</script>
</head>
<body>
<div class="cla">id=div1</div>
<div class="cla">id=div2</div>
</body>

层级选择器

  • 后代选择器 $(“父选择器 后代选择器”)

    • 后代选择器：
<title></title>
<script type= "text/javascript" src="../js/jquery-3.4.1.js" ></script>
<script>
$( function(){
//后代选择器
var li1 = $("#warp 1i");
console.1og(1i1.1ength +":"+ li1.text());
});
</script>
</head>
<body>
<ul type="none" id= "warp">
<li>列表1</li>
<li>别表2</li>
<1i>
列表3
<u1>
<li>列表3-1</li>
<li>列表3-2</li>
</ul>
</li>
</ul>

  • 子代选择器 $(“父选择器 > 子选择器”)

    • 子代选择器
$(function(){
console. 10og-="=====================");
//后代选择器
var 1i1 = $("#warp > li");
console.1og(1i1.1ength +”:”+ li1.text());
});
</script>
</head>
<body>
<ul type="none" id= "warp">
<li>列表1</li>
<li>别表2</li>
<li >
列表3
<ul>
<li>列表3-1</li>
<li>列表3-2</li>
</ul>
</li>
</ul>
  • 相邻兄弟选择器 $(“已知选择器 + 兄弟选择器”)
  • 兄弟选择器 $(“已知选择器 ~ 兄弟选择器”)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-3.4.1.js" ></script>
		<script>
			$(function(){
				var brother = $("#li1 + li"); //相邻兄弟选择器
				console.log(brother.length + " : " + brother.text());
			})
			$(function(){
			console.log("=================");
				var brother = $("#li1 ~ li"); //兄弟选择器
				console.log(brother.length + " : " + brother.text());
			})		
		</script>
	</head>
	<body>
		<ul type="none" id="warp">
			<li id="li1">列表1</li>
		<li>列表2</li>
			<li>
				列表3
				<ul>
					<li>列表3-1</li>
					<li>列表3-2</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

过滤选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-3.4.1.js" ></script>
		<script>
			$(function(){
				var li1 = $("li:first"); //获取第一个li 标签
				console.log(li1.text());
				console.log("===========li:last===============");
				var last = $("li:last");
				console.log(last.text());
				console.log("============li:eq(2)==============");
				var last = $("li:eq(2)");
				console.log(last.text());		
				console.log("============li:even==============");
				var last = $("li:even");
				console.log(last.text());
				console.log("============li:odd==============");
				var last = $("li:odd");
				console.log(last.text());			
				console.log("============li:lt(3)==============");
				var last = $("li:lt(3)"); //前三个，不包含指定的索引
				console.log(last.text());				
				console.log("============li:gt(4)==============");
				var last = $("li:gt(4)"); //后三个 不包含指定的索引
				console.log(last.text());			
				console.log("============li:not(#aa)==============");
				var last = $("li:not(#aa)"); //除列表3之外的li
				console.log(last.text());				
			})
		</script>
	</head>
	<body>
		<ul type="none" id="warp">
			<li>列表0</li>
			<li>别表1</li>
			<li>别表2</li>
			<li id="aa">别表3</li>
			<li>别表4</li>
			<li>别表5</li>
			<li>别表6</li>
			<li>别表7</li>
		</ul>
	</body>
</html>
  • $(":first") 选中第一个
  • $(":last") 选中最后一个
  • $(":eq(index)") 选中指定索引的元素
  • $("：even") 选中索引为偶数的元素
  • $(":odd") 选中索引为奇数的元素
  • $(":gt(index)") 选中索引大于索引的元素
  • $(":lt(index)") 选中小于索引的元素
  • $(":not(selector)") 选中不包含指定索引selector的元素

属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单验证</title>
		<script type="text/javascript" src="../js/jquery-3.4.1.js" ></script>
		<script type="text/javascript">
			$(function(){
				//选中有class属性的元素
				var inp = $("[class]");
				console.log(inp.length + " : " + inp.val()); /* 说明 val() 函数用于获取 输入域中value属性的值 */
			})			
			function verifyReg(){
				//选中有class属性的元素
				var inp = $("[class]"); //通过属性名来选中元素
				console.log(inp.length + " : " + inp.val()); /* 说明 val() 函数用于获取 输入域中value属性的值 */				
				//选中输入用户的名的元素并获取元素的值
				var usename = $("[name='username']");
				console.log(usename.length + " : " + usename.val()); /* 说明 val() 函数用于获取 输入域中value属性的值 */
				console.log("===========[type！='button']==========")
				var th = $("input[type!='button']"); //选中除type等于button的其他input标签
				console.log(th.length + " : " + th.val()); /* 如果选中多个元素，val() 函数只会返回第一个元素的值 */			
				console.log("===========input[name$='password']==========")
				//选中所有以anme属性以password结尾的元素
				var inp1 = $("input[name$='password']");
				console.log(inp1.length + " : " + inp1.val());		
				console.log("===========选中name属性以re开头的元素==========")				
				var inp1 = $("input[name^='re']");
				console.log(inp1.length + " : " + inp1.val());				
			}
		</script>
	</head>
	<body>
		<form action="#" method="get" id="form">
			<label>姓名：</label><input type="text" name="username"/><span id="user_mes"></span><br>
			<label>密码：</label><input type="password" name="password"/><span id="pwd_mes"></span><br>
			<label>确认密码：</label><input type="password" name="repassword"/><span id="repwd_mes"></span><br>
			<label>年龄：</label><input type="text" name="repassword" class="cla"/><br>
			<input type="button" value="注册" onclick="verifyReg()"/><br>			
		</form>		
	</body>
</html>
  • $("[attr]") 选中指定属性名的元素
  • $("[attr=‘value’]") 选中属性名等于属性值的元素
  • $("[attr!=value]") 选中属性不等于value的元素
  • ( " [ a t t r ("[attr ("[attr=‘xxx’]") 选中属性值以xxx结尾的元素
  • $("[attr^=‘xxx’]") 选中属性值以xxx开头的元素

表单选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单验证</title>
		<script type="text/javascript" src="../js/jquery-3.4.1.js" ></script>
		<script type="text/javascript">
			$(function(){
			console.log("============获取输入的密码=============");
			var pwd = $("input:password");
			console.log(pwd);
			console.log("============获取所有的input元素=============");
			var put = $(":input");
			console.log(put.length);
			console.log("============获取被选中的性别并获取值=============");
			var ch = $(":checked");
			console.log(ch.length + " : " + ch.val());
			console.log("============获取被selected的的元素即获取爱好=============");
			var ch1 = $("option:checked");
			console.log(ch1.length + " : " + ch1.val());
			console.log("============获取不可用的元素=============");
			var dis = $("input:disabled");
			console.log(dis.length + dis.val());
			})
		</script>
	</head>
	<body>
		<form action="#" method="get" id="form">
			<label>姓名：</label><input type="text" name="username"/><br>
			<label>密码：</label><input type="password" name="password"/><br>
			<label>确认密码：</label><input type="password" name="repassword"/><br>
			<label>年龄：</label><input type="text" name="repassword" class="cla"/><br>
			<label>性别：</label><input type="radio" name="sex" value="男" checked="checked"/>男
			<label>年龄：</label><input type="radio" name="sex" value="女"/>女<br>
			<label>爱好：</label><select name="hobby">
				<option>rap</option>
				<option selected="selected">playGame</option>
				<option>打篮球</option>
			</select><br>
			</label><input type="password" name="repassword"/><br>
			<!--disabled="disabled" 表示按钮不可用 -->
			<input type="button" value="注册" onclick="verifyReg()" disabled="disabled"/><br>			
		</form>		
	</body>
</html>
  • $("：input") 选中所有表单中的input
  • $("：password") 表单中type类型为input
  • $("：selected") 下拉菜单中的option 被选中的元素
  • $("：disable") 表示表单中被禁用的元素
  • $("：checked") 表示有checked属性的元素

jQuery特效

（一）知识点介绍： 主要是jQuery 封装了js的一些函数可以实现对元素的显示和隐藏的一些好看的效果。

（二）案例-广告特效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			img{
				width: 300px;
				height: 300px;
				position: fixed;
				right: 20px;
				bottom: 30px;
				display: none;
			}
		</style>
	</head>
	<body>
		<img src="../img/3.jpg" />
	</body>
	<script type="text/javascript" src="../js/jquery-3.4.1.js" ></script>
	<script>
		setTimeout(function(){
			var img = $("img");
			//让图片由隐藏状态显示出来
			img.slideDown(2000);
		},3000)
	</script>
</html>
  • 显示和隐藏
  <!DOCTYPE html>
  <html>
  	<head>
  		<meta charset="UTF-8">
  		<title></title>
  		<style>
  			div{
  				width: 200px;
  				height: 200px;
  				background-color: #FF0000;
  			}
  		</style>
  		<script type="text/javascript" src="../js/jquery-3.4.1.js" ></script>
  		<script>
  			$(function(){
  				//获取div元素
  				var jq = $("button");
  				//将jq对象转为DOM对象
  				jq[0].onclick = function(){
  					var div = $("div"); //找到需要显示的div对象
  					div.show(2000,function(){ //调用显示的动画函数
  					alert("div显示完成！！");
  					});
  				}  				
  				jq[1].onclick = function(){
  					var div = $("div"); //找到需要显示的div对象
  					div.hide(2000); /* 回调函数可以省略 */
  				}  				
  				jq[2].onclick = function(){
  					var div = $("div"); //找到需要显示的div对象
  					div.toggle(2000); /* 省略回调函数 ，表示div显示和隐藏的时间为2000毫秒*/
  				}
  			})  ​			
  		</script>  		
  	</head>
  	<body>
  		<button>显示</button><button>隐藏</button><button>隐藏/显示</button>
  		<div></div>
  	</body>
  </html>

  • show(sppend,[callback]);
    说明： sppend : 表示元素显示出来的的时间，单位毫秒
    callback: 表示显示动画执行完的回调函数。

  • hide(sppend,[callback]); 让元素隐藏

  • toggle(sppend,[callback]); 让元素在隐藏和显示之间切换

  • 滑动效果

  <!DOCTYPE html>
  <html>
  	<head>
  		<meta charset="UTF-8">
  		<title></title>
  		<style>
  			div{
  				width: 200px;
  				height: 200px;
  				background-color: #FF0000;
  			}
  		</style>
  		<script type="text/javascript" src="../js/jquery-3.4.1.js" ></script>
  		<script>
  			$(function(){
  				//获取div元素
  				var jq = $("button");
  				//将jq对象转为DOM对象
  				jq[0].onclick = function(){
  					var div = $("div"); //找到需要显示的div对象
  					div.slideDown(2000,function(){ //调用显示的动画函数
  					alert("div显示完成！！");
  					});
  				} 				
  				jq[1].onclick = function(){
  					var div = $("div"); //找到需要显示的div对象
  					div.slideUp(2000); /* 回调函数可以省略 */
  				}  				
  				jq[2].onclick = function(){
  					var div = $("div"); //找到需要显示的div对象
  					div.slideToggle(2000); /* 省略回调函数 ，表示div显示和隐藏的时间为2000毫秒*/
  				}
  			})  ​			
  		</script>  		
  	</head>
  	<body>
  		<button>下滑</button><button>上滑</button><button>切换</button>
  		<div></div>
  	</body>
  </html>
  • slideDown([speed],[callback])
    下滑效果。
  • slideUp([speed],[callback])
    上滑效果。
  • slideToggle([speed],[callback])
    上下滑切换。
  • 淡入和淡出
    • fadeIn(speed,[callback]); 淡入效果;
    • fadeOut(speed,[callback]); 淡出效果;
    • fadeToggle(speed,[callback]); 淡入淡出切换效果;

jQuery操作CSS

（一）知识点介绍： 使用jQuery提供的函数来操作元素的css样式。

  • jQuery操作元素样式的方法

    • addClass(类名) 表示给元素添加一个class选择器的样式
    • removeClass(class名称);移除一个class选择器的样式。
    • toggleClass(类名1 类名2) 样式在两个class设置的样式之间切换。
    • css(“样式属性名”,“属性值”) 设置元素单个样式
    • css({“样式名1”：“样式值1”,“样式名2”：“样式值2”,…}) 一次设置多个样式样式

（二）案例-表格隔行变色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.odd{
				background-color: blue;
			}
			.even{
				background-color: gray;
			}
			.newColor{
				background-color: cyan;
			}
		</style>
	</head>
	<body>
		<table border="1" width="600px" cellspacing="0" align="center">
			<tr>
				<th>编号</th><th>姓名</th><th>密码</th><th>年龄</th>
			</tr>
			<tr class="even" >
				<td>1</td><td>白眉鹰王</td><td>123456</td><td>29</td>
			</tr>
			<tr class="odd" >
				<td>1</td><td>金毛狮王</td><td>1234</td><td>219</td>
			</tr>
			<tr class="even" >
				<td>1</td><td>紫衫龙王</td><td>1456</td><td>99</td>
			</tr>
			<tr class="odd" >
				<td>1</td><td>青翼蝠王</td><td>1256</td><td>100</td>
			</tr>
			<tr class="even" >
				<td>1</td><td>东海龙王</td><td>3456</td><td>290</td>
			</tr>			
		</table>
	</body>
	<script src="../js/jquery-3.4.1.js" type="text/javascript"></script>
	<script>
		/*$("tr:first").css("background-color","orchid");*/
		$("tr:gt(0)").css("text-align","center");
		/* js中的事件名和jQuery事件名的区别是，jquery事件名没有js事件名的前缀on */
		$("tr").mouseover(function(){ /*鼠标进入行上显示亮色*/
			$(this).addClass("newColor"); /* 在改变之前需要提前定义好改类名要改变的样式*/			
		});		
		$("tr").mouseleave(function(){ /* 移除清除亮色 */
			$(this).removeClass("newColor");
		})		
		//点击窗口任何位置实现表格奇数和偶数行颜色切换
		$(document).click(function(){
			$("tr").toggleClass("even odd");
		})
		/* jQuery 函数提供的设置元素的多个样式的方法 */
		$("tr:first").css({"background-color":"orchid","color":"white","font-size":"20px"})
	</script>
</html>

jQuery操作属性

（一）知识点介绍

（二）案例-全选/全不选

jQuery操作DOM

（一）知识点介绍

  • 操作DOM的属性

    • prop操作属性

      • jQuery获取属性的值： jQuery对象.prop(“属性名”)
      • jQuery设置属性的值： jQuery对象.prop(“属性名”，“属性值")
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery操作元素的属性</title>
		<script type="text/javascript" src="../js/jquery-3.4.1.js" ></script>
		<script>
			$(function(){
				var a1 = $("a");
				var att = a1.prop("href"); /* 获取元素的属性值*/
				console.log(att);
				/* 设置元素的属性 */
				a1.prop("href","http://www.baidu.com");
			})
		</script>
	</head>
	<body>
		<a href="../index.html">点我</a>
	</body>
</html>

全选/全部选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.odd{
				background-color: blue;
			}
			.even{
				background-color: gray;
			}			
			.newColor{
				background-color: cyan;
			}
		</style>
	</head>
	<body>
		<table border="1" width="600px" cellspacing="0" align="center">
			<tr>
				<th><input type="checkbox" />全选/全不选</th><th>编号</th><th>姓名</th><th>密码</th><th>年龄</th>
			</tr>
			<tr class="even" >
				<td><input type="checkbox" /></td><td>1</td><td>白眉鹰王</td><td>123456</td><td>29</td>
			</tr>
			<tr class="odd" >
				<td><input type="checkbox" /></td><td>1</td><td>金毛狮王</td><td>1234</td><td>219</td>
			</tr>
			<tr class="even" >
				<td><input type="checkbox" /></td><td>1</td><td>紫衫龙王</td><td>1456</td><td>99</td>
			</tr>
			<tr class="odd" >
				<td><input type="checkbox" /></td><td>1</td><td>青翼蝠王</td><td>1256</td><td>100</td>
			</tr>
			<tr class="even" >
				<td><input type="checkbox" /></td><td>1</td><td>东海龙王</td><td>3456</td><td>290</td>
			</tr>			
		</table>
	</body>
	<script src="../js/jquery-3.4.1.js" type="text/javascript"></script>
	<script>
		/*$("tr:first").css("background-color","orchid");*/
		$("tr:gt(0)").css("text-align","center");
		/* js中的事件名和jQuery事件名的区别是，jquery事件名没有js事件名的前缀on */
		$("tr").mouseover(function(){ /*鼠标进入行上显示亮色*/
			$(this).addClass("newColor"); /* 在改变之前需要提前定义好改类名要改变的样式*/			
		});		
		$("tr").mouseleave(function(){ /* 移除清除亮色 */
			$(this).removeClass("newColor");
		})		
		//点击窗口任何位置实现表格奇数和偶数行颜色切换
		$(document).click(function(){
			$("tr").toggleClass("even odd");
		})
		/* jQuery 函数提供的设置元素的多个样式的方法 */
		$("tr:first").css({"background-color":"orchid","color":"white","font-size":"20px"});		
		var fir = $("input:first");
		fir.click(function(){
			/* 获取元素的属性*/
			var ch = fir.prop("checked");
			console.log(ch);
			/* 给元素设置属性值 */
			$("input:gt(0)").prop("checked",ch);
		})			
	</script>
</html>

  • attr操作属性

    • jQuery获取属性的值： jQuery对象.attr(“属性名”)
    • jQuery设置属性的值： jQuery对象.attr(“属性名”，“属性值")

  • jQuery操作css

    • 操作单个css样式 jQuery对象.css(“样式名”,“样式值”)
    • 一次操作多个css样式 jQuery对象.css({“样式名1”：“样式值1”,“样式名2”:“样式值2”,…,“样式名n”:“样式值n”})
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<a href="#">点我</a>
	</body>
	<!--创建一个a 标签实现 并通过 属性操作给a标签一个地址，并且a 标签显示的提示信息颜色为红色，字体大小为18px -->
	<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
	<script>
		var a1 = $("a");
		a1.attr("href","form表单1.html");
		a1.css({"color":"red","font-size":"18px"});
	</script>
</html>
  • 对表单中value属性的操作
    • 获取表单中的value属性值：var 值 = jQuery对象.val();
    • 设置表单中的value属性值：jQuery对象.val(新值);
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-3.4.1.js" ></script>
		<script>
			$(function(){
				/* 获取值*/
				var va = $("input:first").val();
				console.log(va);				
				$("button").click(function(){
					/* 获取表单的value值*/
					var demo = $("input:first").val();
					/* 设置表单的value值 */
					$("input:eq(1)").val(demo);					
				})
			})			
		</script>
	</head>
	<body>
		<input type="text" name="name" value="历史"/><br>
		<input type="text" /><br>
		<button>点我获取值</button>
	</body>
</html>

  • 操作DOM的文本

    • 操作文本内容
      • 获取文本 var text = jQuery对象.text()
      • 设置文本 jQuery对象.text(“新文本内容”)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
		<script>
			$(function(){
				/* 获取标签中的文本*/
				var text = $("div").text();
				console.log(text);
				/* 设置标签中的文本，
				 注意： 在设置内容时会覆盖原来标签中的所有内容。、
				 */
				$("div").text("新的文本内容");
			})		
		</script>
	</head>
	<body>		
		<div>我是div</div>
	</body>
</html>
  • 操作html内容
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
		<script>
			$(function(){
				/* 回去标签中的html 内容 */
				var htm = $("div").html();
				console.log(htm);
				/* 设置标签中的html内容*/
				$("div").html("图片：<img src='../img/1.jpg'/>")
			})
		</script>
	</head>
	<body>
		<div>我是div<a href="全选和全不选.html">全选实例</a></div>
	</body>
</html>

- 获取html内容 var html = jQuery对象.html()
- 设置html内容  var text = jQuery对象.html("html内容")

  • 对DOM进行增删操作

    • 追加内容到标签内

      • 在父标签的后面追加内容 父元素.append(“子标签内容”)
      • 在父标签的最前面追加内容 父元素prepend(“子标签内容”)

    • 在同级标签前后添加元素

      • 在参考标签的后面添加内容 参考标签.after(“标签内容”);
      • 在参考标签的前面添加内容 参考标签.before(“标签内容”);
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-3.4.1.js" ></script>
		<script>
			$(function(){
				var ul = $("ul");				
				$("button:first").click(function(){
					ul.append("<li>列表3</li>");
				})				
				$("button:eq(1)").click(function(){
					ul.prepend("<li>列表0</li>");
				})				
				$("button:eq(2)").click(function(){
					ul.after("<p>我是后面的一个段落</p>");
				})				
				$("button:eq(3)").click(function(){
					ul.before("<p>我是前面的一个段落</p>");
				})				
			})			
		</script>
	</head>
	<body>		
		<ul>			
			<li>列表1</li>
			<li>列表2</li>			
		</ul>
		<button>append</button><button>prepend</button><button>after</button>			 <button>before</button>
	</body>
</html>

删除标签

- 删除标签包含标签本身    jQuery对象.remove()
- 清空标签中的内容  jQuery对象.empty();

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-3.4.1.js" ></script>
		<script>
			$(function(){
				var ul = $("ul");
				$("button:eq(0)").click(function(){
					ul.remove(); /* 删除元素包含元素本身*/
				})				
				$("button:eq(1)").click(function(){
					ul.empty(); /* 清空元素中的内容 */
				})				
			})
		</script>
	</head>
	<body>
		<ul>			
			<li>列表1</li>
			<li>列表2</li>
		</ul>
		<button>remoove</button><button>empty</button>
	</body>
</html>

（二）案例-省市联动

each的两种语法结构对数组的遍历

数组对象.each(function(index,ele)脚本})；
说明： 数组对象是使用jQuery遍历的数组；
index: 表示遍历数组的索引；
ele: 表示遍历的每个元素，
index 和ele参数可以省略。

$.each(数组对象,function(index,ele){脚本})；
说明： 数组对象是使用jQuery遍历的数组；
index: 表示遍历数组的索引；
ele: 表示遍历的每个元素，
index 和ele参数可以省略。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-3.4.1.js" type="text/javascript"></script>
		<script>
			$(function(){
				var province = ["四川省","河北省","陕西省","山西省"];
				var citys = [["成都市","绵阳市","宜宾市","乐山市"],["保定市","张家口","石家庄","沧州"],["西安","宝鸡","渭南","咸阳"],["太原","运城","大同"]];			
				$(province).each(function(index,ele){
					$("#pro").append("<option value="+ index +">"+ ele +"</option>");
				})				
				$("#pro").change(function(){
					var va = $("#pro").val();
					console.log(va);
					var city = citys[va]; /* 取出二维数组中和省对应的市*/				
					/*$("#city").empty();*/				
					$("#city").html("<option>请选择市</option>");				
					$(city).each(function(){
						/* this 表示当前遍历的数组元素 */
						$("#city").append("<option>"+ this +"</option>"); 
					})
				})
			})
		</script>
	</head>
	<body>
		省：<select id="pro">
			<option>请选择省</option>	
		</select>
		市：<select id="city">
			<option>请选择市</option>
		</select>
	</body>

</html>

表单验证

（一）知识点介绍

（二）案例-注册表单验证

步骤：
1、下载validation工具。
2、导入工具jquery-3.4.1.js、jquery.validate.js、messages_zh.js。
3、编写form表单信息并在脚本中给form表单绑定validate验证方法。
4、在form表单元素中逐个指定校验规则。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单验证</title>
		<!-- 引入js文件的顺序是固定的 -->
		<script type="text/javascript" src="../js/jquery-3.5.1.js" ></script>
		<script type="text/javascript" src="../js/jquery.validate.js" ></script>
		<script type="text/javascript" src="../js/messages_zh.js" ></script>
		<style type="text/css">
			.tab{
				width: 800px;
				height: 300px;
			}
			.tab,.tab tr td{
				border: 1px solid darkgray;
			}
			.tab tr th{
				color: green;
			}
			.t_right{
				text-align: right;
				width: 15%;
			}
		</style>		
		<script>
			$(function(){
				console.log("================");
				$("#regist").validate();
			})
		</script>		
	</head>
	<body>
		<form id="regist" action="#" method="get">
			<table border="1" class="tab" cellspacing="0">
				<tr>
					<th colspan="2">用户注册</th>
				</tr>
				<tr>
					<td class="t_right">用户名:</td>
					<td><input type="text" name="username" required="true" rangelength="[2,6]"/></td>
				</tr>
				<tr>
					<td class="t_right">密码:</td>
					<td><input type="password" id="pwd1" name="pwd1" required="true" maxlength="16" minlength="6"/></td>
				</tr>
				<tr>
					<td class="t_right">确认密码:</td>
					<td><input type="password" name="pwd2" required="true" maxlength="16" minlength="6" equalTo="#pwd1" /></td>
				</tr>
				<tr>
					<td class="t_right">Email:</td>
					<td><input type="text" name="email" email="email" required /></td>
				</tr>
				<tr>
					<td class="t_right">出生日期:</td>
					<td><input type="text" name="birthday" required="required" dateISO="yyyy-MM-dd" /></td>
				</tr>
				<tr style="text-align: center;">
					<td colspan="2"><input type="submit" name="sub" value="注&nbsp;&nbsp;册"/></td>
				</tr>
			</table>	
		</form>
	</body>
</html>

（三）优化注册表单验证

<!DOCTYPE html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单验证</title>
		<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
		<script type="text/javascript" src="../js/jquery.validate.js"></script>
		<script type="text/javascript" src="../js/messages_zh.js" ></script>
		<style type="text/css">
			.tab {
				width: 800px;
				height: 300px;
			}
			.error{
				color: red;
			}
			.tab,
			.tab tr td {
				border: 1px solid darkgray;
			}			
			.tab tr th {
				color: green;
			}			
			.t_right {
				text-align: right;
				width: 15%;
			}
		</style>
		<script>
			$(function() {
				$("#regist").validate({
					rules: { //使用js设置校验规则
						username: "required",
						pwd1: {
							required: true,
							minlength: 6,
							maxlength: 16
						},
						pwd2: {
							required: true,
							minlength: 6,
							maxlength: 16,
							equalTo: "#pwd1"
						},
						email: {
							required: true,
							email: true
						},
						birthday: {
							required: true,
							dateISO: "yyyy-MM-dd"
						},
						agree:{
							required:true,
							equalTo: "同意"
						} 
					},
					messages: { //设置提示信息
						username: "用户名不能为空",
						pwd1: {
							required: "密码不能为空",
							minlength: "长度不能小于6",
							maxlength: "长度不能超过16"
						},
						pwd2: {
							required: "密码不能为空",
							minlength: "长度不能小于6",
							maxlength: "长度不能超过16",
							equalTo: "两次输入和密码必须一致"
						},
						email: {
							required: "邮箱必须填写",
							email: "必须符合邮箱规范"
						},
						birthday: {
							required: "生日不能为空",
							dateISO: "生日格式必须符合yyyy-MM-dd 的格式"
						},
						agree:{
							required:"不能为空",
							equalTo: "必须为同意"
						} 
					}
				});
			})
		</script>
	</head>
	<body>
		<form id="regist" action="#" method="post">
			<table border="1" class="tab" cellspacing="0">
				<tr>
					<th colspan="2">用户注册</th>
				</tr>
				<tr>
					<td class="t_right">用户名:</td>
					<td><input type="text" name="username" /></td>
				</tr>
				<tr>
					<td class="t_right">密码:</td>
					<td><input type="password" id="pwd1" name="pwd1" /></td>
				</tr>
				<tr>
					<td class="t_right">确认密码:</td>
					<td><input type="password" name="pwd2" equalTo="#pwd1"/></td>
				</tr>
				<tr>
					<td class="t_right">Email:</td>
					<td><input type="text" name="email" email="email" /></td>
				</tr>
				<tr>
					<td class="t_right">出生日期:</td>
					<td><input type="text" name="birthday" /></td>
				</tr>
				<tr>
					<td class="t_right">是否同意:</td>
					<td><input type="text" name="agree" /></td>
				</tr>
				<tr style="text-align: center;">
					<td colspan="2"><input type="submit" name="sub" value="注&nbsp;&nbsp;册" /></td>
				</tr>
			</table>
		</form>
	</body>
</html>

在这里插入图片描述

骑恐龙去钓鱼
关注
jQuery的基本使用方法
qq_52990325的博客
07-30 1万+
jQuery基本使用
jQuery中的AjaxSubmit使用讲解
10-21
下面将详细讲解jQuery中的AjaxSubmit的使用方法及其与AjaxForm的区别，以及一些关键选项的设置。 首先，我们需要引入jQuery库以及jQuery Form插件。jQuery Form插件包含了AjaxSubmit和AjaxForm等方法，因此在使用前...
jquery.path.js
03-22
可以使用此js做一些网页运动，如转圈等。。
jQuery的五种初始化加载写法
Thinkingcao的专栏
12-18 1256
$就等价于jQuery 1、$(document).ready(function(){ ----------原始------- //jQuery代码 }); 2、$(function(){ ----------缩写------- //jQuery代码 }); 3、$().ready(function(){...
jQuery
乃智的博客
06-29 718
jQuery jQuery基本介绍 jQuery是一款主流浏览器的JavaScript库，封装了JavaScript相关方法调用，简化JavaScript对HTML DOM操作，做事件、动画、ajax处理等。 官方地址：https://jquery.com/ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aGWNnu0Y-1624926353747)(C:\Users\naizhi\AppData\Roaming\Typora\typora-user-images\ima
注意jQuery文件的版本问题以及存放位置
weixin_44227395的博客
10-12 954
这是第一篇学习记录笔记。 需求：实行网页中固定导航栏的功能，随着页面的下拉滚动，导航条始终保 持在页面内可见。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固定导航栏</title> <...
jquery加密java解密_jQuery--base64前台加密解密
weixin_32601635的博客
02-19 456
关于加密，很多人想到encodeURI和escape。这个对加密url，尤其是带中文参数的url很有用。如果只是想做加密解密，类似于java的DES，网上jQuery有个jquery.base64.js。(关于js的md5加密可以用jquery.md5.js，有兴趣可以找来测试一下)。下面是测试：[html]加密后：加密后：varpath=document.getElementById("pat...
jQuery介绍及案例讲解（01）
m0_56947432的博客
07-08 1156
JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。
jQuery介绍及案例讲解（02）
m0_56947432的博客
07-08 2214
用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index =“1”。语法注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）
jQuery介绍及案例讲解（03）
m0_56947432的博客
07-08 916
/ 1. 文本框里面输入内容，按下回车，就可以生成待办事项。// 2. 点击待办事项复选框，就可以把当前数据添加到已完成事项里面。// 3. 点击已完成事项复选框，就可以把当前数据添加到待办事项里面。// 4. 但是本页面内容刷新页面不会丢失。​。
JQuery用法及ajax的JQuery写法讲解
wfl1486409520的博客
03-04 1755
JQuerydom对象和jquery对象dom对象和jquery对象相互的转换。dom对象转为jqueryjquery对象转为dom对象选择器基本选择器id选择器class选择器标签选择器所有选择器组合选择器表单选择器过滤器通用过滤器表单属性过滤器函数valtextattrremoveemptyappendhtmleacheach循环json事件ajax jQuery是一款跨主流浏览器的JavaScript库，封装了JavaScript相关方法调用，简化 JavaScript对 HTML DOM操作 dom
jQuery事件blur()方法的使用实例讲解
10-17
本文将详细介绍jQuery中blur()方法的使用，包括其定义、用途、语法以及如何在实际中应用这一事件处理器来执行特定的代码。 ### jQuery blur()方法的定义和用途 blur()方法在jQuery中用于绑定事件处理器到指定的...
在vue项目中使用Jquery-contextmenu插件的步骤讲解
10-17
Jquery-contextmenu是一个使用jQuery实现的右键菜单插件，它能够很便捷地为网页元素添加右键上下文菜单功能。Vue.js是一款流行的前端框架，它通过数据驱动和组件化的开发方式帮助开发者高效构建用户界面。将Jquery-...
jQuery 入门讲解1
10-30
jQuery 是一个广泛使用的JavaScript库，它的出现极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。本文将深入讲解jQuery的入门知识，包括其优点、构造函数以及一些基本的DOM操作方法。 首先，...
CSS 的user-select属性，控制用户是否能够选中文本内容
读心悦
09-29 322
CSS的属性是一个在CSS3 UI规范中新增的功能，用于控制用户是否能够选中文本内容。这个属性在保护网站内容不被轻易复制、提高用户体验等方面有重要作用。以下是关于。
css 下拉框展示：当hover的时候展示下拉框 z-index的用法解释
jjw_zyfx的博客
09-26 529
css 下拉框展示：当hover的时候展示下拉框
CSS-Day2
m0_74039531的博客
09-26 873
padding: 0;} 移除列表前面的标记。
在线css像素px到rem的转换器
最新发布
key12315的专栏
09-30 124
在线css像素px到rem的转换器
CSS元素显示样式
qyk666的博客
09-24 313
1.块元素 2.行内元素 3.行内块元素
jQuery验证插件使用教程
本手册主要针对jQuery Validation插件的使用进行详细讲解。 首先，引入jQuery库和jQuery Validation插件是使用的基础。在HTML代码中，需要添加jQuery的核心库文件`jquery-1.3.2.min.js`和jQuery Validation的打包...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值