web_day09_jQuery介绍

最新推荐文章于 2024-07-25 11:19:30 发布

冰蓝心灵

最新推荐文章于 2024-07-25 11:19:30 发布

阅读量104

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_35537301/article/details/83043164

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、jQuery的介绍

1. 简介

jQuery是一个跨浏览器，快速、简洁的JavaScript框架
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情
jQuery封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互
jQuery2.0以后，不兼容IE6/7/8

2. 作用

可以简化html和js之间的操作

2、jQuery使用

1.导入jQuery文件

script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>

2.编写jQuery代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>获取jQuery对象</title>
		<script src="../js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var $username = $("#username");
				alert("jQuery对象"+$username.val());
                                //var $username = jQuery("#username");
		                //alert($username.val());
			})
			
		</script>
	</head>
	

	<body>
		<input type="text" id="username" value="jack" />
	</body>

</html>

3、jQuery语法

3.1 获取对象

jQuery(选择器)或者$(选择器)
严格区分大小写

3.2 获取value

jQuery对象.val()

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>获取jQuery对象</title>
		<script src="../js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var $username = $("#username");
				alert("jQuery对象"+$username.val());
			})
			window.onload = function(){
				var username = document.getElementById("username");
				alert("JavaScript对象"+username.value);
			}
		</script>
	</head>
	

	<body>
		<input type="text" id="username" value="jack" />
	</body>

</html>

3.3 jQuery对象和JavaScript对象的转换

3.3.1 JavaScript对象转换成jQuery对象

$(JavaScript对象)

3.3.2 jQuery对象转换成JavaScript对象

第一种方式
- jquery对象[index]
第二种方式
- jquery对象.get(index)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
	<script src="../js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var username = document.getElementById("username");
			alert("js---->jQuery  "+$(username).val());
		})
		window.onload =function (){
			var $username = $("#username");
//			var usernameObj = $username[0];
//			alert("jQuery--->js 方式1  "+usernameObj.value);
			var usernameObj = $username.get(0);
			alert("jQuery--->js 方式2  "+usernameObj.value);
		}
	</script>
<body>
	<input type="text" id="username" value="jack"/>
</body>
</html>

4、jQuery事件

4.1 页面加载

$(document).ready(function(){
  // 在这里写你的代码...
});

$(function($) {
  // 你可以在这里继续使用$作为别名...
});

JavaScript只能给onload赋一次值,后面的会覆盖前面的(只能弹出一个)

jQuery能够赋值多次(全部弹出)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>页面加载事件</title>
		<script src="../js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript">
			window.onload = function (){
				alert("JavaScript页面加载事件");
			}
			$(document).ready(function(){
				alert("jQuery页面加载事件");
			})
		</script>
	</head>
	<body>
		
	</body>
</html>

4.2常用的事件

事件名称	说明
click	单击
submit	表单提交事件
change	内容改变触发的事件
focus	获取焦点
blur	失去焦点

4.3 jQuery事件和函数的绑定

$(选择器).事件名称(function(){
    函数体
})

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery的事件和函数的绑定</title>
		<script src="../js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#bId").click(function(){
					alert("事件绑定");
				})
			})
		</script>
	</head>
	<body>
		<input type="button" id="bId" value="点击查看" />
	</body>
</html>

4.4 常见的事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>常见事件</title>
		<style type="text/css">
			#e02{
				border: 1px solid #000000;
	  			height: 200px;
	 			width: 200px;
			}
			
		</style>
		<script src="../js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#e01").blur(function(){
					$("#textMsg").html("文本框失去焦点：blur");
				}).focus(function(){
					$("#textMsg").html("文本框获得焦点：focus");
				}).keydown(function(){
					$("#textMsg").append("键盘按下：keydown");
				}).keypress(function(event){
					$("#textMsg").append("键盘按：keypress");
				}).keyup(function(){
					$("#textMsg").append("键盘弹起：keyup");
				});
				
				var i = 0;
				$("#e02").mouseover(function(){
					$("#divMsg").html("鼠标移上：mouseover");
				}).mousemove(function(){
					//$("#divMsg").html("鼠标移动：mousemove , " + i++ );
				}).mouseout(function(){
					$("#divMsg").html("鼠标移出：mouseout");
				}).mousedown(function(){
					$("#divMsg").html("鼠标按下：mousedown");
				}).mouseup(function(){
					$("#divMsg").html("鼠标弹起：mouseup");
				});
				
				$("#e03").click(function(){
					$("#buttonMsg").html("单击：click");
				}).dblclick(function(){
					$("#buttonMsg").html("双击：dblclick");
				});
				
			});
			
			
			
			
			
		</script>
		
	</head>
	<body>
		<input id="e01" type="text" /><span id="textMsg"></span> <br/>
		<hr/>
		<div id="e02" ></div><span id="divMsg"></span> <br/>
		<hr/>
		<input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/>
	</body>
</html>

5、jQuery效果

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>效果</title>
		<style type="text/css">
			div {
				border: 1px solid #000;
				width: 100px;
				height: 100px;
			}
		</style>
		<!-- 导入js库 ，注意：使用src属性之后，标签体中不能写入内容-->
		<script src="../js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				// 隐藏和显示
				$("#b1").click(function() {
					// 隐藏
					// $("#b1Div").hide(1000);
					// 显示
					// $("#b1Div").show(1000);
					// 切换
					$("#b1Div").toggle(1000);
				});
				
				//滑入和滑出
				$("#b2").click(function(){
					//滑出
					//$("#b2Div").slideUp(1000);
					//滑入
					//$("#b2Div").slideDown(1000);
					//切换
					$("#b2Div").slideToggle(1000);
				});
				
				//淡入和淡出
				$("#b3").click(function(){
					//淡出
					//$("#b3Div").fadeOut(1000);
					//淡入
					//$("#b3Div").fadeIn(1000);
					//切换
					//$("#b3Div").fadeToggle(1000);
					//
					$("#b3Div").fadeTo(1000,0,function(){
						alert("淡化成功");
					})
				})

			});
		</script>
	</head>

	<body>
		<input type="button" id="b1" value="显示/隐藏 b1Div" />
		<div id="b1Div"></div> <br/>
		<input type="button" id="b2" value="滑出/滑入b2Div" />
		<div id="b2Div"></div> <br/>
		<input type="button" id="b3" value="淡出/淡入b3Div" />
		<div id="b3Div"></div>

	</body>

</html>