目录

 

1.Jquery简介;

2. Jquery下载; 

3.Jquery版"Hello World!";


​​​​​​​

1.Jquery简介;

百度百科:Jquery百度百科

总结:

1. Jquery是一个JavaScript函数库

2. Jquery封装了常用的JavaScript功能代码,提供一种简便的JavaScript设计模式

3. Jquery使代码简单化,宗旨是少写代码,做更多的事功能强悍

4.Jquery官网链接https://jquery.com/

 

2. Jquery下载; 

点击官网:https://jquery.com/

Jquery(一)——Jquery简介_jQuery

点击Download;

Jquery(一)——Jquery简介_动画效果_02

于是就可以下载了

 

3.Jquery版"Hello World!";

我们先来看一看用传统的js方法来获取对象;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function getContent(){
		var content=document.getElementById("content").value;
		alert(content);
	}
</script>
</head>
<body>
<input type="text" id="content"/>&nbsp;&nbsp;<input type="button" value="获取内容" onclick="getContent()"/>
</body>
</html>

Jquery(一)——Jquery简介_●  富客户端技术_03 

再来看一看用Jquery来实现获取方法; 

我们先要把下载的Jquery.js文件加载到项目中去,然后引入Jquery.js文件;

Jquery(一)——Jquery简介_jQuery_04

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
	function getContent(){
		//var content=document.getElementById("content").value;
		var content=$("#content").val();
		alert(content);
	}
</script>
</head>
<body>
<input type="text" id="content"/>&nbsp;&nbsp;<input type="button" value="获取内容" onclick="getContent()"/>
</body>
</html>

 Jquery(一)——Jquery简介_●  富客户端技术_05

 

 

再来看另一种方式获取对象;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	function init(){
		/* 给点击按钮添加一个事件 */
		document.getElementById("actionButton").onclick=function(){
			var content=document.getElementById("content").value;
			alert(content);
		}
	}
</script>
</head>
<body onload="init()">
<input type="text" id="content"/>&nbsp;&nbsp;<input type="button" id="actionButton" value="获取内容"/>
</body>
</html>

 

Jquery(一)——Jquery简介_Jquery_06

 

Jquery版本;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
	/* 当文档加载完毕才会执行里面的方法 */
	$(document).ready(function(){
		$("#actionButton").click(function(){
			alert($("#content").val());
		});
	});
</script>
</head>
<body>
<input type="text" id="content"/>&nbsp;&nbsp;<input type="button" id="actionButton" value="获取内容"/>
</body>
</html>

Jquery(一)——Jquery简介_DOM_07