前端-jQuery

最新推荐文章于 2024-07-06 22:48:04 发布

zhuixun1993

最新推荐文章于 2024-07-06 22:48:04 发布

阅读量133

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/u013165358/article/details/118927395

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1 概念

jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

jQuery库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

提示：除此之外，jQuery还提供了大量的插件。
目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。

2 jQuery安装

2.1 版本

jQuery版本有很多，分为1.x 2.x 3.x

1.x版本：能够兼容IE678浏览器
2.x版本：不兼容IE678浏览器

1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。

3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）

国内多数网站还在使用1.x的版本。

2.2 下载

jQuery有两个版本：生成环境使用的和开发测试环境使用的。

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

以上两个版本都可以从 jquery.com 中下载。

2.3 使用

jQuery本质山是一个js文件，只需要在html中导入即可。

<head>
	<script src="jquery-1.11.1.js"></script>
</head>

3 语法结构

jQuery通过选取html元素，并且对其进行相关操作。

3.1 基础语法：`$(selector).action()`

$(selector)用于选取元素。所有选取到的元素都是jQuery的对象。
.action()。类似于对象.方法的格式，这里相当于调用了jQuery对象的方法，实现对html元素的操作。

注意：如果选择器选取到的是一个list，则list中每一个元素仍然是html元素。此时如果想调用jquery的方法，必须先转化为jQuery对象。转换方法：$(htmlElement)。

3.2 文档就绪事件

本质上是替代了原来body标签中的onload事件响应方法。为了防止了文档在完全加载（就绪）之前运行jQuery 代码，我将所有执行的代码都放在这个函数里。

写法1：

$(document).ready(function(){
	//要执行的代码。
});

写法2（简写，推荐）：

$(function(){
	//开始写kQuery的代码
});

jQuery的ready方法与JavaScript中的onload相似，但是也有区别：

	window.onload	$(document).ready()
执行次数	只能执行一次，如果执行第二次，第一次的执行会被覆盖	可用执行多次，不会覆盖之前的执行
执行时机	必须等待网易全部加载挖完毕（包括图片等），然后再执行包裹的代码	只需要等待网页中的DOM结果加载完毕就可以执行包裹的代码
简写方式	无	$(function(){ })

4 选择器

4.1 标签、#id、.class、全局、并集、后代、子选择器

要点：以$("selector")的格式选取，其中selector字符串就是javascript在<script>标签中定义的格式。

$("p"); //标签选择器，选择了所有的段落
$("#userName"); //id选择器
$(".myDiv"); //class选择器
$("*"); //全局选择器
$("div, ul, li, .myDiv"); //并集选择器
$("form input"); //后代选择器
$("form > input"); //子选择器

4.2 相邻、同辈选择器

$("label + input"); //选取紧接在label后面的input元素
$("form ~ input"); //选取和form同一级别的，在它后面的所有的input元素。

4.3 属性选择器 [selector 1][selector 2]…[selctor n]

顾名思义，就是选择具有特定属性的元素。每一个中括号内限定一种属性，多个中括号放一起形成多属性限制。

$("div[id]");//获取所有有id属性的div的元素集合
$("div[class]");//获取所有有class属性的div的元素集合
$("input[name='userName']");//获取所有input标签中name属性是userName元素的集合
$("input[name^='user']");//获取所有input标签中name属性是user开头的元素的集合
$("input[name$='user']");//获取所有input标签中name属性是user结尾的元素的集合
$("input[name*='user']");//获取所有input标签中name属性包含了user的元素的集合
$("input[id][name^='user']");

4.4 可见性选择器 :visiable, :hidden

$("div:visible"); //选取可见的div元素。
$("input:hidden"); //选取不可见的input元素。这里的不可见是指：

注意：这里的不可见是指：

display: none的元素。
type: "hidden"的元素。

5 jQuery常用函数

通用原则：

所有的获得类函数，都只能得到第一个匹配的标签的内容/属性。所有的修改类函数，都是对所有匹配的标签进行操作。
修改类函数和取得类函数很多情况下都是一个函数，只不过是有参数和无参数的区别。
修改类函数的返回值是jQuery对象。因此理论上可以无限追加.action()进行一系列修改。

5.1 与标签内容相关的函数

.html()
.text()
.val()

var str1=$("div").html();//获取的是第一个匹配元素的围堵标签中的所有内容，包括了嵌套在内部的标签
var str2=$("div").text();//获取的是第一个匹配元素的围堵标签中的所有文本，不包含标签的内容
var str3=$("div").val();//val()只能用在表单项元素中，div不是表单元素，所以val()获取不到任何内容
var str4=$("input").val();//input是表单项元素，val()可以获取到

和内容相关的函数，如果没有参数表示获取这个参数值，如果有参数则表示给内容赋值。

5.2 与标签属性相关的函数

.attr(attrName[, attrVal]) 获得[设置]属性
removeAttr(attrName) 移除属性

function attrFun(){
	var img=$("img");
	//设置属性
	img.attr("src","img/cat.jpg");
	img.attr("title","不服！");
	//移除属性
	img.removeAttr("title");
	//获取属性
	var src=img.attr("src");
	var title=img.attr("title");
	console.log(src+"===="+title);
	//获取checked属性使用prop函数，获取到的值是boolean类型，表示是否被选中
	var list=$("input[type='radio']");
	for(var i=0;i<list.length;i++){
		var flag=$(list[i]).prop("checked");
		console.log("checked="+flag);
	}
}

5.3 与css相关的函数

addClass(className)
removeClass(className)
toggleClass(className)
.css() 直接添加样式

function cssFun(){
//给获取的元素添加、删除、切换已有的样式 PS：样式一定是在样式表中提前定义好的
	$("div").addClass("redBg");
	$("div").addClass("redBg fontColor");
	$("div").removeClass("fontColor");
	$("div").removeClass();//没有参数的时候直接移除所有的样式
	$("div").toggleClass("fontColor");//匹配元素如果有当前的样式就删除，如果没有就添加
	//给所有的元素添加样式，样式直接添加，无需提前定义
	$("input").css("border-color","blue");
	$("input").css({"color":"red","border-color":"green"});
}

6 jQuery中的事件

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。即：

DOM的onXxx -> jQuery的xxx 方法。

6.1 常用的DOM事件列表

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keydown	submit	load
dbclick	keyup	change
mouseover		focus
mouseout		blur
hover

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script>
			//页面加载事件
			$(function(){
				//给所有的button绑定单击事件
				$("button").click(function(){
					//alert(this);//this是当前对	象，哪个按钮触发的单击事件this就是那个按钮，this此时是JS对象
					$(this).css("color","red");//给当前的触发对象添加一个css
				});
				//给所有的超链接绑定鼠标移上事件
				$("a").mouseover(function(){
					var str=$(this).html();
					$(this).html("鼠标移上-"+str);
				});
				//给所有的超链接绑定鼠标移出事件
				$("a").mouseout(function(){
					var str=$(this).html();
					$(this).html(str.substr(5));
				});
				$("a").hover(function(){
					$(this).css("color","red");
				});
			});
		</script>
	</head>
	<body>
		<a href="#">首页</a> &nbsp;
		<a href="#">零食</a> &nbsp;
		<a href="#">鲜花</a> &nbsp;
		<button type="button">普通按钮1</button>
		<button type="button">普通按钮2</button>
		<button type="button">普通按钮3</button>
	</body>
</html>

7 jQuery操作DOM

7.1 增加元素

$(A).append(B) 在A的结尾插入内容B
- 等价于$(B).appendTo(A) (A是选择器的内容)
$(A).prepend(B) 在A的开头插入内容B
$(A).after(B) 在A之后插入内容B
$(A).before(B) 在A之前插入内容B

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，返回值是所有被追加的内容，而不仅仅是先前所选中的元素。所以，要选择先前选中的元素，需要使用end()方法。

7.2 元素克隆、替换、删除

克隆：$(selector).clone(includeEvents)；
includeEvents是布尔值，表示是否把关联的事件也同时克隆
替换：
- replaceWith() -将所有匹配的元素替换成指定的HTML或DOM元素。
- replaceAll()-用匹配的元素替换掉所有 selector匹配到的元素。
删除
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素

8 效果

8.1 隐藏和显示

语法：

$(selector).hide([speed,callback]);
$(selector).show([speed,callback]);
$(selector).toggle([speed,callback]);

参数说明：

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

8.2 淡入淡出

语法：

$(selector).fadeIn([speed,callback]);
$(selector).fadeOut([speed,callback]);
$(selector).fadeToggle([speed,callback]);

参数说明：

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

9 动态表格

添加行：

之前在JS中需要先insertRow添加空行，再填充内容
jQuery可以通过append直接添加一段html代码

删除行：

之前JS中需要得到删除按钮所在行的序号，再通过table的deleteRow实现删除此行。
jQuery中每个元素都有一个remove方法可以直接删除，不需要再找到行的父元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动态表格</title>
		<link rel="stylesheet" type="text/css" href="css/a.css"/>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script>
			$(function(){
				$("button[name='add']").click(function(){
					var tbody = $("table").children();
					var id =  parseInt(Math.random()*10 + 1);
					var str = "<tr>"+
									"<td>" + id + "</td>"+
									"<td>小熊饼干" + id + "</td>"+
									"<td>￥45</td>"+
									"<td>好吃的饼干</td>"+
									"<td><button type='button' name='delete'>删除</button></td>"+
							"</tr>";
					tbody.append(str);
				});
				
				// 这种方法对新添加的行不生效。因为这里的选择器选择的只是页面上已有的button
//				$("button[name='delete]").click(function(){
//					$(this).parent().parent().remove();
//				});
				
				$(document).on("click", "button[name='delete']", function(){
					$(this).parent().parent().remove();
				});
			});
			
		</script>
	</head>
	<body>
		<table>
			<tr>
				<th>
					编号
				</th>
				<th>名称</th>
				<th>单价</th>
				<th>描述</th>
				<th><button type="button" name="add">添加</button></th>
			</tr>
			<tr>
				<td>1</td>
				<td>小熊饼干1</td>
				<td>￥45</td>
				<td>好吃的饼干</td>
				<td><button type="button" name="delete">删除</button></td>
			</tr>
			<tr>
				<td>2</td>
				<td>小熊饼干2</td>
				<td>￥45</td>
				<td>好吃的饼干</td>
				<td><button type="button" name="delete">删除</button></td>
			</tr>
			<tr>
				<td>3</td>
				<td>小熊饼干3</td>
				<td>￥45</td>
				<td>好吃的饼干</td>
				<td><button type="button" name="delete">删除</button></td>
			</tr>
		</table>
	</body>
</html>

样式：

table {
	border-width: 1px;
	border-color: darkgray;
	background-color: lavender;
}

tr,
td,
th {
	background-color: lavenderblush;
	border-width: 1px;
	border-color: gray;
	padding: 10px;
	margin: 10px;
	width: 80px;
	height: 20px;
	line-height: 20px;
	text-align: center;
}

th {
	background-color: lightblue;
}

10 全选与全不选

要求：

点击全选，所有子项都选中；
对每个子项都选中，会自动将全选选中；
有一个子项没选中，则自动取消全选。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>全选测试</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script>
			$(function(){
				$("input[name='all']").click(function(){
					var oneArray = $("input[name='one']");
					var flag = $("input[name='all']").prop("checked");
					for(var i = 0; i < oneArray.length; i++){
						$(oneArray[i]).prop("checked", flag);
					}
				});
				
				$("input[name='one']").click(function(){
					var oneArray = $("input[name='one']");
					
					for(var i = 0; i < oneArray.length; i++){
						if($(oneArray[i]).prop("checked")==false){
							$("input[name='all']").prop("checked", false);
							return;
						}
					}
					$("input[name='all']").prop("checked", true);
				});
			});
		</script>
		<link rel="stylesheet" type="text/css" href="css/a.css"/>
	</head>
	<body>
		<table>
			<tr>
				<th>
					全选<input name="all" type="checkbox"></input>
				</th>
				<th>名称</th>
				<th>单价</th>
				<th>描述</th>
			</tr>
			<tr>
				<td>1<input name="one" type="checkbox"></td>
				<td>小熊饼干1</td>
				<td>￥45</td>
				<td>好吃的饼干</td>
			</tr>
			<tr>
				<td>2<input name="one" type="checkbox"></td>
				<td>小熊饼干2</td>
				<td>￥45</td>
				<td>好吃的饼干</td>
			</tr>
			<tr>
				<td>3<input name="one" type="checkbox"></td>
				<td>小熊饼干3</td>
				<td>￥45</td>
				<td>好吃的饼干</td>
			</tr>
		</table>
	</body>
</html>

zhuixun1993

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端-jQuery

文章目录1 概念2 jQuery安装2.1 版本2.2 下载2.3 使用3 语法结构3.1 基础语法：`$(selector).action()`3.2 文档就绪事件4 选择器4.1 标签、#id、.class、全局、并集、后代、子选择器4.2 相邻、同辈选择器4.3 属性选择器 [selector 1][selector 2]...[selctor n]4.4 可见性选择器 :visiable, :hidden5 jQuery常用函数5.1 与标签内容相关的函数5.2 与标签属性相关的函数5.3 与css
复制链接

扫一扫