jQuery

最新推荐文章于 2023-04-30 16:53:42 发布
最新推荐文章于 2023-04-30 16:53:42 发布
阅读量1.2k 收藏 31
点赞数 2
分类专栏： # Web基础 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45615417/article/details/104176572
版权

文章目录

JQuery简介

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的avaScript框架。jQuery设计的宗旨是“write Less，Do More”，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

JQuery的作用

0.快速获取文档元素
1.简化js的Dom树的操作
2.将我们页面的JS代码和HTML页面代码进行分离
…

jQuery的引入

jQuery的官方下载地址

引入与测试：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 引入jQuery -->
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<!-- 测试jQuery -->
		<script>
			$(function(){
				alert("引入jQuery了");
			});
		</script>
	</head>
	<body>
		
	</body>
</html>
文档加载完成事件js与JQuery写法对比
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 引入jQuery -->
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<!-- 文档加载完成事件js与JQuery写法对比 -->
		<script>
			
			/*使用js，文档加载完成的事件*/
			window.onload = function(){
				alert("使用js，window.onload");
			}
			
			/*使用jQuery，文档加载完成的事件*/
			jQuery(document).ready(function(){
			 	alert("jQuery(document).ready(function()");
			});
		
			/*jQuery简写成 $ */
			$(document).ready(function(){
			 	alert("$(document).ready(function()");
			});
			
			/*最简单的写法 */
			$(function(){
				//写在这个函数中的代码，就是文档加载完毕之后执行的
				alert("$(function(){");
			});
				
		</script>
	</head>
	<body>
		
	</body>
</html>
JQuery使用的注意点：

1.使用jQuery的选择器获取到的对象就是jQuery对象，否则就是js对象。
2.针对jQuery对象的命名，前面加上一个$以示区分。
3.jQuery对象只能调用jQuery框架里面的方法，js对象调用js的方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<!--引入jQuery文件-->
<script src="../js/jquery-3.3.1.js"></script>
<!--使用jQuery来编写js代码-->
<script>
    //获取div中的文本内容
    $(function () {
    
       	//根据id获取div标签
       	/*
       	  使用jQuery的选择器获取到的对象就是jQuery对象，否则就是js对象
          针对jQuery对象的命名，前面加上一个$以示区分
       	*/
        var $d = $("#d1");
        
        //获取标签里面的文本，jQuery对象只能调用jQuery框架里面的方法
        var content = $d.html();
        alert(content)
    })
</script>
<body>
    <div id="d1">jQuery</div>
</body>
</html>
扩展：开发版本与生产版本（部署项目时用的版本）

开发版本与生产版本的源码是一样的，命名为jQuery-x.x.x.js为开发版本，命名为jQuery-x.x.x.min.js为生产版本。开发版本源码格式良好，方便开发人员查看源码，但体积大。而生产版本去掉了换行和空行，没有代码缩进和注释，不方便开发人员查看源码，体积小。

在这里插入图片描述

jQuery对象与js对象之间的转换

将js对象转换成jQuery对象: $(js对象)
示例：
var d = document.getElementById("d1");//js对象
var content=$(d).html();//js对象转换成jQuery对象并使用jQuery的方法得到其内容

将jQuery对象转换成js对象(jQuery对象是一个数组，这个数组里面的每一个元素都是js对象):遍历出来每一个元素
示例：
var $d = $("#d1");//jQuery对象
var content=$d[0].innerHTML;//jQuery对象转换成js对象并使用js的方法得到其内容

jQuery的选择器

基本选择器
选择器名称语法解释
标签选择器$(“html标签名”)获得所有匹配标签名称的元素
id选择器$("#id的属性值")获得与指定id属性值匹配的元素
类选择器$(".class的属性值")获得与指定的class属性值匹配的元素
层级选择器
选择器名称语法解释
后代选择器$("A B ")选择A元素内部的所有B元素(A内的B全选)
子选择器$(“A > B”)选择A元素内部的所有B子元素 (A内的儿子级的B才选，即儿子以下的不选)
相邻兄弟选择器（找同级的下一个）$("#one + div")找到 id 为 one 的下一个兄弟
找出后面同级元素$("#two ~ div")找到id为two的元素后面的所有兄弟
属性选择器
选择器名称语法解释
属性选择器$(“A[属性名]”)找包含指定属性名的元素
属性选择器$(“A[属性名=‘属性值’]”)找包含属性名等于该属性值的元素
属性选择器$(“标签[属性名!=‘属性值’]”)找包含属性名不等于该属性值的元素
属性选择器$(“标签[属性名 ^=‘属性值’]”)找包含属性名以该属性值开始的元素
属性选择器$(“标签[属性名 $=‘属性值’]”)找包含属性名以该属性值结束的元素
属性选择器$(“标签[属性名 *=‘属性值’]”)找包含属性名且含有该属性值的元素
复合属性选择器$(“A[属性名=值] [属性名 *= ‘xx’]…”)找包含多个属性条件的元素
基本过滤选择器
选择器名称语法解释
首元素选择器选择器 :first获得选择的元素中的第一个元素
尾元素选择器选择器:last获得选择的元素中的最后一个元素
非元素选择器选择器 :not(selecter)不包括指定内容的元素
偶数选择器选择器:even偶数，从 0 开始计数
奇数选择器选择器 :odd奇数，从 0 开始计数
等于索引选择器选择器 :eq(index)指定索引元素
大于索引选择器选择器 :gt(index)大于指定索引元素
小于索引选择器选择器:lt(index)小于指定索引元素
标题选择器选择器 :header获得标题元素，固定写法
表单属性选择器
选择器名称语法解释
可用元素选择器选择器 :enabled获得可用表单项
不可用元素选择器选择器:disabled获得不可用元素
选中选择器选择器（如：input:checkbox）:checked获得单选/复选框选中的元素
选中选择器选择器（如：option）:selected获得下拉框选中的元素

jQuery的DOM操作

jQuery对DOM树中的文本和值进行操作
API方法解释
val() / val(“value”)相当于js的value属性，获得/设置元素value属性相应的值(只能获取表单属性标签的value)
text() / text(“value”)相当于js的innerText属性，获得/设置元素中的文本内容(标签体)
html() / html(“value”)相当于js的innerHTML属性，获得/设置元素中的html内容 (标签体)

注：val（），text（），html（）不传入参数，就表示获取属性相应的值，传入参数，就表示设置属性。

jQuery对DOM树中的属性进行操作
API方法解释
attr(“属性名”) / attr(“属性名”,“属性值”)获得/设置属性的值,一般都使用这个方法
prop(“属性名”) / prop(“属性名”,“属性值”)获得/设置属性的值(checked，selected)，boolean类型的属性
removeAttr(“属性名”)移除某一个属性

注：attr()方法可以获取和设置任意标签的任意属性,但是如果该属性是boolean类型，则使用prop()方法

什么时候使用prop()方法: 获取和设置属性值为boolean类型的属性
什么时候使用attr()方法: 获取和设置属性值不为boolean类型的属性

使用jQuery操作标签的css样式
API方法解释
css(“属性名”," 属性值 ")设置指定的CSS样式
addClass(类样式名)给指定的对象添加新的类样式，指定类样式名字即可
removeClass(类样式名)删除指定的类样式
jQuery添加标签
API方法解释
append(element)添加到最后一个子元素后面，两者之间是父子关系
prepend(element)添加到第一个子元素前面，两者之间是父子关系
before(element)添加到当前元素的前面，两者之间是兄弟关系
after(element)添加到当前元素的后面，两者之间是兄弟关系

注：appendTo()方法，prependTo()方法是 某标签（调用者）调用该方法添加到一个标签中，而调用者应是jq对象。如是js对象，则可把js对象转为jq对象，即 $("<a></a>")（创建a元素的jQuery对象）。

......
<select id="city">
		<option value="">--选择市--</option>
</select>
......
$("<option></option>").html(江西).appendTo("#city");
jQuery删除标签
API方法解释
remove()删除指定元素
empty()清空指定元素的所有子元素
扩展
API方法解释
clone()复制一个标签
addClass(“类名”)添加类名
removeClass(“类名”)移除类名
toggleClass(“类名”)切换类名

jQuery的动画

使用方法效果
jQuery对象.show(毫秒值, 函数对象)显示
jQuery对象.hide(毫秒值, 函数对象)隐藏
jQuery对象.toggle(毫秒值, 函数对象)切换
jQuery对象.slideDown(毫秒值, 函数对象)滑动显示（窗帘效果）
jQuery对象.slideUp(毫秒值, 函数对象)滑动隐藏 （窗帘效果）
jQuery对象.slideToggle(毫秒值, 函数对象)滑动切换
jQuery对象.fadeIn(毫秒值, 函数对象)淡入显示
jQuery对象.fadeOut(毫秒值, 函数对象)淡出隐藏
jQuery对象.fadeToggle(毫秒值, 函数对象)淡入淡出切换

参数说明：
毫秒值：动画要用多长时间执行完成
函数对象：动画执行完毕之后，浏览器调用的函数对象（可不写）

jQuery的事件方法

js的事件jQuery的事件
onclick (点击事件)click(fn)
ondblclick (双击事件)dblclick(fn)
onmousedownmousedown(fn)
onmouseupmouseup(fn)
onmouseovermouseover(fn)
onmouseoutmouseout(fn)
onmousemovemousemove(fn)
onkeydown （当键盘按钮按下时，发生 keydown事件）keydown(fn)
onkeyup（当键盘按钮松开时，发生 keyup 事件）keyup(fn)
onkeypresskeypress(fn)
onsubmit (提交事件)submit(fn)
onchange (失去焦点后值改变了)change(fn)
onload (页面加载完成事件 )$(fn)
onfocusfocus(fn)
onblur （失去焦点）blur(fn)

参数说明：
fn：触发的响应行为作为对象传给jQuery的事件的方法中

jQuery事件和js事件对比：

  1. jQuery事件和js事件，写法不同，但是意义相同
  2. js事件名称带on；jQuery事件名称不带on
  3. js事件是属性；jQuery事件是方法
  4. js事件响应行为是属性值；jQuery事件响应行为是方法的实参
扩展：事件切换

鼠标移入移出切换函数写法：

jQuery对象.hover(fn1, fn2)
  说明：鼠标移入时，执行fn1， 鼠标移出时，执行fn2
jQuery对象.hover(fn)
  说明：鼠标移入、移出，使用共同的响应行为fn
jQuery的事件绑定与解绑
  • on绑定事件
jQuery元素对象.on(事件名称,function(){
    //逻辑代码
})
说明：事件名称是jQuery的事件方法的方法名称，例如：click。当响应是则执行逻辑代码
  • off解绑事件
jQuery元素对象.off(事件名称);
说明：参数事件名称如果省略不写，可以解绑该jQuery对象上的所有事件
  • 给后来添加的元素(未来元素)绑定或解绑事件（一个元素里的子元素绑定事件之后，又新增或了修改的新元素）
给未来元素绑定事件：jQuery对象.on("事件名称","给jQuery对象里的哪些元素绑定（写选择器）", fn)
给未来元素解绑事件：jQuery对象.off("事件名称","给jQuery对象里的哪些元素解绑（写选择器）")

jQuery的循环遍历

js的循环遍历
for(var i=0; i<<元素数组.length; i++){
   元素数组[i];
}
jQuery的循环遍历
1.jQuery框架的全局each方法：
$.each(jquery对象,function(index,element){});
说明：
index:就是元素在集合中的索引 
element：就是集合中的每一个元素对象
jQuery框架全局each方法可以循环遍历任何能够循环的对象，不论是js对象还是jQuery对象

示例：
$.each($("li"), function (index, element) {
       alert("索引：" + index + ",  元素内容：" + element.innerHTML)
})


2.jQuery对象的each方法：
jQuery对象.each(function(index, element){})




3.新增的遍历写法（jQuery3.0新特性for of语句遍历）：
for(var item of items){
   item;
}
说明：items：要遍历的元素数组  item：遍历出的元素

jQuery简单案例

网页定时弹出广告（定时器+JQ动画）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 引入jQuery -->
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<!--
		1. 导入JQ相关的文件
		2. 文档加载完成事件: $(function(){})   启动定时器  setTimeout
		3. 确定相关操作的事件:2秒后显示广告,过3秒隐藏广告
		4. 事件触发函数: slideDown();   slideUp();
		5. 函数里面再去操作相关的元素  $("#img1").slideDown();  $("#img1").slideUp();
		-->
		<script>
			//文档加载完成
			$(function(){
				setTimeout(function(){
					//2秒后显示广告
					$("#img1").slideDown();
					setTimeout(function(){
						//3秒后隐藏广告
						$("#img1").slideUp();
					},3000)
				},2000)
			})
		</script>
	</head>
	
	<body>
		<img src="img/show.jpg" id="img1" width="100%"  style="display: none"/>
	</body>
	
</html>
表格的隔行换色（JQ选择器）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script src="js/jquery-3.3.1.js"></script>
		
		<script>
			
			$(function(){
				//获得所有的行:层级选择器
								//偶数行变色（从0开始计数）：基本过滤选择器
								$("tbody > tr:even").css("background-color","red");
								//奇数行变色：基本过滤选择器
								$("tbody > tr:odd").css("background-color","blue");			
			});
	
		</script>
	</head>
	<body>
		<table border="1px" width="600px" id="tab" align="center">
				<thead>
					<tr >
						<td>
							<input type="checkbox" />
						</td>
						<td>分类ID</td>
						<td>分类名称</td>
						<td>分类商品</td>
						<td>分类描述</td>
						<td>操作</td>
					</tr>
				</thead>
				
				<tbody>
					<tr>
					<td>
						<input type="checkbox" />
					</td>
					<td>1</td>
					<td></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></td>
					<td><a href="#">修改</a>|<a href="#">删除</a></td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" />
					</td>
					<td>3</td>
					<td></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></td>
					<td><a href="#">修改</a>|<a href="#">删除</a></td>
				</tr>
				
				<tr>
					<td>
						<input type="checkbox" />
					</td>
					<td>5</td>
					<td></td>
					<td></td>
					<td></td>
					<td><a href="#">修改</a>|<a href="#">删除</a></td>
				</tr>
				</tbody>
			</table>
			
		</body>
</html>

在这里插入图片描述

全选-全不选-反选（选择器的使用+JQ对DOM树属性操作）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
		<script>
			
			//实现全选和全不选功能
			//给全选按钮绑定点击事件
			function checkAll(obj){
				//设置所有子选框的选中状态和全选框一样,即设置其"checked"属性
				$(".itemSelect").prop("checked",obj.checked)
			}
			
			//实现反选功能
			//给反选按钮绑定点击事件
			function reverseCheck(){
				//方法一
				// //遍历出每一个子选框
				// for (var i = 0; i < $(".itemSelect").length; i++) {
				// 	//设置该子选框的选中状态和原来的状态相反
				// 	$(".itemSelect")[i].checked=!$(".itemSelect")[i].checked
				// }
				
				//方法二
				//将所有的子选框每个都点击一遍，也可实现发选
				$(".itemSelect").click()
			}
			
			//解决问题：当所有子选框都选中的时候，全选框才选中，有一个子选框不选中那么全选框也不选中。
			//文档加载完成事件
			$(function(){
					//实现点击子选框控制全选框的选中状态
					//这里使用点击事件，实现反选功能时要使用方法二，这样反选时也能实现子选框控制全选框的选中状态效果
					$(".itemSelect").click(function(){
						//选中的子选框个数=总子选框个数,代表所有子选框都选中,则全选框也选中
						$("#all").prop("checked",$(".itemSelect").length == $(".itemSelect:checked").length)
					})				
			})
			
		</script>
	</head>
	<body>
			<table id="tab1" border="1" width="800" align="center" >
				<tr>
					<td colspan="5"><input type="button" id="reverse" onclick="reverseCheck()" value="反选"></td>
				</tr>
				<tr>
					<th><input type="checkbox" id="all" onclick="checkAll(this)" ></th>
					<th>分类ID</th>
					<th>分类名称</th>
					<th>分类描述</th>
					<th>操作</th>
				</tr>
				<tr>
					<td><input type="checkbox" class="itemSelect"></td>
					<td>1</td>
					<td></td>
					<td></td>
					<td><a href="">修改</a>|<a href="">删除</a></td>
				</tr>
				<tr>
					<td><input type="checkbox" class="itemSelect"></td>
					<td>2</td>
					<td></td>
					<td></td>
					<td><a href="">修改</a>|<a href="">删除</a></td>
				</tr>
				<tr>
					<td><input type="checkbox" class="itemSelect"></td>
					<td>3</td>
					<td></td>
					<td></td>
					<td><a href="">修改</a>|<a href="">删除</a></td>
				</tr>
				<tr>
					<td><input type="checkbox" class="itemSelect"></td>
					<td>4</td>
					<td></td>
					<td></td>
					<td><a href="">修改</a>|<a href="">删除</a></td>
				</tr>
			</table>
		</body>
</html>

在这里插入图片描述

省市联动效果（JQ遍历+JQ的DOM操作）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
		<script>
			
			var cities = [
				["深圳市","东莞市","惠州市","广州市"],//provinces[0] -->广东省的市
				["长沙市","岳阳市","株洲市","湘潭市"],//provinces[1] -->湖南省的市
				["厦门市","福州市","漳州市","泉州市"],//provinces[2] -->福建省的市
				["赣州市","南昌市","九江市","景德镇市"]//provinces[3] -->江西省的市
			];
			
			
			
			/*
				1. 导入JQ的文件
				2. 文档加载事件:页面初始化
				3. 确定事件: change事件
				4. 事件触发函数: 得到当前选中省份，根据选中的省份得到城市信息, 遍历城市数据，将遍历出来的城市添加到城市的select中
			*/
			$(function(){
				
				$("#province").change(function(){
					// alert(this.value); // select的索引，从0开始（广东省）
					//得到选中的省份的城市信息
					var citiesInSelectedProvinces = cities[this.value];
					
					//清空城市select中的option
					//采用JQ的方式清空
					$("#city").empty();  
					
					//遍历城市数据，参数i：citiesInSelectedProvinces的索引  参数n：对应索引的值（元素对象)
					$(citiesInSelectedProvinces).each(function(i,n){
						$("#city").append("<option>"+n+"</option>");
					});
				});
				
				//方法二：
				/*
				$("#province").change(function(){
					//清除掉city里原有的下拉选项，留一个提示选项
					$("#city").html("<option value=''>--选择市--</option>");
					
					//获取到省的值，根据省获取市的数据
					var myCities = cities[this.value];//字符串数组
					$(myCities).each(function(){
						//创建标签，把当前市的名称设置到option标签里
						$("<option></option>").html(this).appendTo("#city");
					});
				});
				*/
	
			});
	
		</script>
	</head>
	
	<body>
		<!--选择省份-->
		<select id="province">
			<option value="-1" >--选择省--</option>
			<option value="0">广东省</option>
			<option value="1">湖南省</option>
			<option value="2">福建省</option>
			<option value="3">江西省</option>
		</select>
		<!--选择城市-->
		<select id="city">
			<option value="-1">--选择市--</option>
		</select>
	</body>
	
</html>

在这里插入图片描述

抽奖案例（实现定时调用的函数+JQ的DOM操作）
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
</head>
<body>

<!-- 奖品变换框 -->
<div style="border-style:dotted;width:160px;height:100px">
    <img id="img1ID" src="img/00.png" style="width:160px;height:100px"/>
</div>

<!-- 获奖显示框 -->
<div style="border-style:double;width:430px;height:330px;position:absolute;left:300px;top:10px">
    <img id="img2ID" src="img/00.png" width="430px" height="330px"/>
</div>

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

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


<script language='javascript' type='text/javascript'>
    //准备一个一维数组，奖项图片
    var imgs = [
        "img/00.png",
        "img/01.png",
        "img/02.png",
        "img/03.png",
        "img/04.png",
        "img/04.png"
    ];
	var timer = null;
	   function imgStart() {
		//防止重复点击开始按钮，创建多个timer，点击停止时小像框还会变换。
	       if (timer === null) {
	       		//setInterval(code,millisec[,"lang"]) 方法可按照指定的周期（以毫秒计）来调用函数。 
	       			//参一(code )：必须有，要调用的函数或要执行的代码。参二(millisec)：必须有，周期性执行或调用 code 之间的时间间隔，以毫秒计。
	       			//返回值:一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
	           timer = setInterval(function () {
				//切换奖品变换框的图片：根据奖项图片数组的索引,通过Math随机生成奖项图片数组的索引值，通过索引值得到图片对象，使用attr(“属性名”,“属性值”)方法更改img标签的src属性，属性值即随机索引值得到图片对象。 
				//根据奖项图片数组得到索引index范围：[0, 5]  要使用整数取随机数 
				// Math.random()的范围是： [0, 1) * 6 ==> [0, 6) ==>向下取整 ==> [0, 5]
	             var index = Math.floor(Math.random() * 6);
	             var imgSrc = imgs[index];
	             $("#img1ID").attr("src", imgSrc);
	           }, 10);
	       }
	   }
	   function imgStop() {
	       clearInterval(timer);
	       timer = null;
	       //获取小像框里图片的路径， 把路径设置到大像框里
	       var imgSrc = $("#img1ID").attr("src");
	       $("#img2ID").attr("src", imgSrc);
	}
</script>
</body>
</html>

在这里插入图片描述

基于jQuery的表单校验插件validator
Thinking in Coder
关注
  • 2
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jquery1.8.3
09-26
jquery1.8.3官方包，包含jquery-1.8.3.min.js和jquery-1.8.3.js两个文件。
JQuery安装与下载教程
热门推荐
Muchen灬
05-25 12万+
jQuery安装与下载 JQuery 是一个javaScript库，是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery 极大地简化javaScript编程 --juery相比js优点： jquery的onload加载事件速度更快，并且多个加载并行 【jq绑定事件都是使用的事件函数，不需要加on】； js的onloa...
jQuery下载和安装详细教程
柯晓楠
01-15 3万+
下载jQuery 我们可以到jQuery的官网下载jQuery文件（PS：其实jQuery就是一个封装了很多函数的js文件，把这个js文件导入到网页中就可以了）。 jQuery官网地址： https://jquery.com/ 打开官网，即可看到jQuery的下载按钮，点击进入下载页面。有两个版本的jQuery可以下载： Production version - 用于实际的网站中，是已经被精简和...
一个小时学会jQuery<最通俗易懂的讲解>
chetianyao8457的博客
08-07 1450
最近一直在研读 jQuery 源码，初看源码一头雾水毫无头绪，真正静下心来细看写的真是精妙，让你感叹代码之美。 其结构明晰，高内聚、低耦合，兼具优秀的性能与便利的扩展性，在浏览器的兼容性（功能缺陷、渐进增强）优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹。 另外，阅读...
jQuery简介、引入jQuery、jQuery核心函数、jQuery对象、jQuery对象操作class、addclass补充、jQuery对象复制——jQuery
weixin_70320000的博客
11-29 3110
jQuery简介、引入jQuery、jQuery核心函数、jQuery对象、jQuery对象操作class、addclass补充、jQuery对象复制
JavaScript开发利器之jQuery
你好, 我在学java的博客
04-30 4351
基本选择器是jQuery中最常用的选择器, 也是最简单的选择器, 它通过id, class和标签名来查找DOM对象 1.5.2 jquery层次选择器 如果想要通过DOM元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器 1.5.3 基础过滤选择器 基础过滤选择器介绍: 1.5.4 内容过滤选择器 内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上 1.5.5 可见度过滤选择器 可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素
jquery-3.7.0.min.js（jQuery下载）
最新发布
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
jquery版本2.2.4
03-04
1、原生js使用太繁琐，使用jquery。 2、免费下载，希望大家爱上学习。 3、后面会出一个简单的使用方法。
jquery-migrate3.4版本
05-17
jquery-migrate3.4版本
前端+jQuery+实现烟花特效
05-02
前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...
jQuery源码 jQuery源码 jQuery源码
04-19
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
jquery验证码
10-19
jQuery实现web开发验证码，无需后台验证。简单方便实用
jquery1.7.2
08-28
jquery1.7.2中文文档，这是一个chw格式的中文文档，方便查询
jquery 3.5.1
10-27
jquery-3.5.1包含 jquery-3.5.1.js、 jquery-3.5.1.min.js两个文件
jQuery详解
亦翼的博客
07-10 5012
文章目录Bootstrap简介概念为什么使用Bootstrap下载与使用Bootstrap的使用表格丰富的标签好看的类样式情景色类样式响应式表格表单表单布局默认布局内联布局表单控件输入框文本框复选框复选按钮单选框单选按钮按钮图片下拉菜单组件分页组件栅格系统缩略图组件模态框组件两个案例首页轮播大图响应式导航条 Bootstrap简介 概念 Bootstrap 来自 Twitter，是目前最受欢迎的响应式前端框架。 Bootstrap 基于 HTML、CSS、JavaScript，简洁灵活，使得 Web 开发
jQuery看这一篇就够啦，jQuery基础大全，可用于快速回顾知识，面试首选
a2868221132的博客
03-27 3161
jQuery看这一篇就够啦，jQuery基础大全，可用于快速回顾知识，面试首选
一、Jquery入门（超详）
weixin_44009656的博客
05-02 4263
本文将带领大家了解 jQuery 的定义，它有什么作用，我们为什么要学它，以及如何使用它，它的语法是什么，最后对比了 jQuery 对象和 DOM 对象的区别。
jQuery基本介绍
m0_55836496的博客
09-15 2105
jQuery是一个快速的、轻量的、功能丰富的js库。 jQuery的官网 [http://jquery.com/](http://jquery.com/) jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。 js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js+）。 jquey和js的关系 1 就jq底层是计算，就是把js进行了封装。 2 jq能够很方便获取节点，发送ajax。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Thinking in Coder

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

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

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

打赏作者

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

抵扣说明：

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

余额充值