Git操作指令

php特性

  返回  

前端-jQuery

2021/7/20 21:30:08 浏览:

文章目录

  • 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, :hidden
  • 5 jQuery常用函数
    • 5.1 与标签内容相关的函数
    • 5.2 与标签属性相关的函数
    • 5.3 与css相关的函数
  • 6 jQuery中的事件
    • 6.1 常用的DOM事件列表
  • 7 jQuery操作DOM
    • 7.1 增加元素
    • 7.2 元素克隆、替换、删除
  • 8 效果
    • 8.1 隐藏和显示
    • 8.2 淡入淡出
  • 9 动态表格
  • 10 全选与全不选


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事件列表

鼠标事件键盘事件表单事件文档/窗口事件
clickkeydownsubmitload
dbclickkeyupchange
mouseoverfocus
mouseoutblur
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>

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号