jQuery的简单使用

通过jQuery注册事件

jQuery注册事件也很简单,通过选择器包装好标签对象后,调用相关的事件方法即可,调用事件方法时需要传递一个函数对象,当事件被触发就会执行函数里的代码。在jQuery里的事件名称并没有与html中的事件名称有多大区别,还是那个熟悉的味道熟悉的套路,示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
	<body>
		<button type="button" name="click" >单击事件</button>
		<button type="button" name="dbclick" >双击事件</button>
	</body>
	<script>
		$("button[name='click']").click(function(e){
			alert('单击事件!');
		});
		$("button[name='dbclick']").dblclick(function(e){
			alert('双击事件!');
		});
	</script>
</html>

函数中的参数就是事件源对象:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
	<body>
		<button type="button" name="click" >单击事件</button>
		<button type="button" name="dbclick" >双击事件</button>
	</body>
	<script>
		$("button[name='click']").click(function(e){
			alert(e.toString());
		});
		$("button[name='dbclick']").dblclick(function(e){
			alert(e.toString());
		});
	</script>
</html>

在函数中可以使用this来表示当前触发事件的对象,也可以通过选择器去获取当前对象:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
	<body>
		<button type="button" name="click" >单击事件</button>
		<button type="button" name="dbclick" >双击事件</button>
	</body>
	<script>
		$("button[name='click']").click(function(e){
			$("button[name='click']").html("Change");
		});
		$("button[name='dbclick']").dblclick(function(e){
			$(this).html("Change");
		});
	</script>
</html>

给标签添加/删除样式

在jQuery中有一个addClass方法,可以给标签添加类样式,相对的removeClass方法则是删除标签中的类样式:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
	<style>
		.text_p{
			color: royalblue;
			font-size: 22px;
		}
	</style>
	<body>
		<p>Hello World!</p>
		<p>Hello World!</p>
		<p>Hello World!</p>
	</body>
	<script>
		$("p").mousemove(function(){
			$(this).addClass("text_p");
		});
		$("p").mouseout(function(){
			$(this).removeClass("text_p");
		});
	</script>
</html>

除了以上的方法外,还有一个css方法可以添加样式,以键值的方式添加:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
	<body>
		<p>Hello World!</p>
		<p>Hello World!</p>
		<p>Hello World!</p>
	</body>
	<script>
		$("p").mousemove(function(){
			$(this).css("color","royalblue");
			$(this).css("font-size","22px");
		});
		$("p").mouseout(function(){
			$(this).css("color","black");
			$(this).css("font-size","16px");
		});
	</script>
</html>

如果css方法中传递的是键,那么就可以得到该键的值:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
	<style>
		.text_p{
			color: royalblue;
			font-size: 22px;
		}
	</style>
	<body>
		<p class="text_p">Hello World!</p>
		<p class="text_p">Hello World!</p>
		<p class="text_p">Hello World!</p>
	</body>
	<script>
		$("p").click(function(){
			alert($(this).css("color"));
			alert($(this).css("font-size"));
		});
	</script>
</html>

运行结果:

控制标签

通过jQuery可以很方便的控制标签,例如可以对某个标签增加子标签,或者删除某个标签等等,append方法就可以给某个标签添加一个子标签:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
	<body>
		<button type="button">添加标签</button>
		<div></div>
		<select></select>
	</body>
	<script>
		$("button").click(function(){
			$("div").append("<p>Hello Wolrd!</p>");
			$("select").append("<option>hello</option>");
		});
	</script>
</html>

remove方法可以删除某个标签:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

	<body>
		<button type="button">删除标签</button>
		<div>
			<p>hello world!</p>
			<p>hello world!</p>
			<p>hello world!</p>
			<p>hello world!</p>
			<p>hello world!</p>
		</div>
	</body>
	<script>
		$("button").click(function() {
			$("p").remove();
		});
	</script>

</html>

html方法类似于innerHTML方法,可以给开始和结束标签之间填充HTML或文本:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

	<body>
		<button type="button">添加HTML</button>
		<div></div>
	</body>
	<script>
		$("button").click(function() {
			$("div").html("<p>Hello Wolrd!</p>");
		});
	</script>
</html>

text方法可以给开始和结束标签之间填充纯文本内容,即便传的是HTML代码也会被转换成文本:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

	<body>
		<button type="button">添加文本</button>
		<p></p>
	</body>
	<script>
		$("button").click(function() {
			$("p").text("<p>Hello Wolrd!</p>");
		});
	</script>

</html>

val方法可以返回或设置被选元素的值,元素的值是通过 value 属性设置的。该方法大多用于 input 元素。如果该方法未设置参数,则返回被选元素的当前值:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

	<body>
		<button type="button">得到/设置value</button>
		<input type="text" value="test" />
	</body>
	<script>
		$("button").click(function() {
			alert($("input").val());
			$("input").val("Hello World!");
		});
	</script>

</html>

控制标签属性

attr方法可以控制标签的所有属性,通过这个方法可以给某个标签动态设置属性,也可以通过这个方法来获得某个属性的值,而removeAttr方法则可以删除指定的属性:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<style>
		.test_div{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	</style>
	<body>
		<div>
			<button type="button" id="add">设置属性</button>
			<button type="button" id="del">删除属性</button>
			<img />
		</div>
	</body>
	<script>
		$("button").click(function() {
			$("img").attr("src","img/TIM截图20180105215155.png");
			$("img").addClass("test_div");
		});
		$("#del").click(function(){
			$("img").removeAttr("src");
		});
	</script>

</html>

运行结果:

jQuery的显示/隐藏效果

show方法可以显示某个组件,hide方法则可以隐藏某个组件:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<style>
		.test{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	</style>
	<body>
		<div>
			<button type="button" name="show">显示</button>
			<button type="button" name="hide">隐藏</button>
			<img class="test" src="img/TIM截图20180105215155.png" />
		</div>
	</body>
	<script>
		$("button[name='show']").click(function() {
			$("img").show();
		});
		$("button[name='hide']").click(function(){
			$("img").hide();
		});
	</script>

</html>

show以及hide方法中都有可选的参数,第一个参数可以设置元素从隐藏到完全可见的速度,可以直接传递毫秒数,也可以传递字符串:slow、normal、fast等。在设置速度的情况下,元素从隐藏到完全可见的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度。第二个参数就是回调函数,show 函数执行完之后,要执行的函数,示例:

<script>
		function show_img(){
			alert("显示完成!");
		}
		function hide_img(){
			alert("隐藏完成!");
		}
		$("button[name='show']").click(function() {
			$("img").show(5000,show_img);
		});
		$("button[name='hide']").click(function(){
			$("img").hide(5000,hide_img);
		});
</script>

toggle方法可以切换元素的可见状态,如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素,同样的可以设置过程时间和回调函数:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<style>
		.test{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	</style>
	<body>
		<div>
			<button type="button" name="toggle">显示/隐藏</button>
			<img class="test" src="img/TIM截图20180105215155.png" />
		</div>
	</body>
	<script>
		function done(){
			alert("完成!");
		}
		$("button[name='toggle']").click(function() {
			$("img").toggle(3000,done)
		});
	</script>

</html>

想要有淡入淡出的效果可以使用以下四种fade方法: - fadeIn() 方法用于淡入已隐藏的元素 - fadeOut() 方法用于淡出可见元素 - fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换 - fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)

示例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<style>
		.test{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	</style>
	<body>
		<div>
			<button type="button" name="fadeIn">显示</button>
			<button type="button" name="fadeOut">隐藏</button>
			<button type="button" name="fadeToggle">显示/隐藏</button>
			<button type="button" name="fadeTo">淡出</button>
			<img class="test" src="img/TIM截图20180105215155.png" />
		</div>
	</body>
	<script>
		function fadeIn_img(){
			alert("显示完成!");
		}
		function fadeOut_img(){
			alert("隐藏完成!");
		}
		function done_img(){
			alert("完成!");
		}
		$("button[name='fadeIn']").click(function() {
			$("img").fadeIn(3000,fadeIn_img);
		});
		$("button[name='fadeOut']").click(function(){
			$("img").fadeOut(3000,fadeOut_img);
		});
		$("button[name='fadeToggle']").click(function(){
			$("img").fadeToggle(3000,done_img);
		});
		$("button[name='fadeTo']").click(function(){
			$("img").fadeTo("slow",0.5);
		});
	</script>

</html>

通过jQuery实现元素滑动效果可以使用以下三个方法: - slideDown() 方法用于向下滑动元素。
- slideUp() 方法用于向上滑动元素。 - slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

示例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
	<style>
		.test {
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	</style>

	<body>
		<button type="button" name="slideDown">向下滑动</button>
		<button type="button" name="slideUp">向上滑动</button>
		<button type="button" name="slideToggle">向下滑动/向上滑动</button>
		<div>
			<img class="test" src="img/TIM截图20180105215155.png" />
		</div>
	</body>
	<script>
		function slideDown_img() {
			alert("向下滑动完成!");
		}

		function slideUp_img() {
			alert("向上滑动完成!");
		}

		function done_img() {
			alert("完成!");
		}
		$("button[name='slideDown']").click(function() {
			$("div").slideDown(3000,slideDown_img);
		});
		$("button[name='slideUp']").click(function() {
			$("div").slideUp(3000,slideUp_img);
		});
		$("button[name='slideToggle']").click(function() {
			$("div").slideToggle(3000,done_img);
		});
	</script>

</html>