jQuery --(1)hello world

时间 2019-11-06

标签 jquery hello world 栏目 JQuery 繁體版

原文原文链接

1.下载jQuery，在浏览器中输入jquery官网地址
https://jquery.com/download/
2.有压缩(产品)/未压缩(开发，能够看见源码)两个版本我下载的是压缩版本，连接以下
https://code.jquery.com/jquery-3.1.0.min.js
3.在该页面直接ctrl+s保存便可，保存文件名称 jquery-3.1.0.min.js。
4.验证该js是否可用
1>在jquery-3.1.0.min.js文件同一个路径下面用sublime text编辑器编写以下html代码，命名为jquery01.htmljavascript

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<!-- 导入 jQuery库  -->
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript">
	//$(function(){})至关于window.onload
	$(function(){
		//1.选取对象，如:$("对象id")
		//2.为对象添加响应函数，如：$("对象id").函数
		$("button").click(function() {
			//函数体
			alert("Hello world");
		})
	})
</script>
</head>
<body>
	<button>click</button>
</body>
</html>

2>在火狐浏览器中打开jquery01.html，点击 click 按钮，弹框显示"Hello world"，即表示jquery-3.1.0.min.js下载成功，而且可用使用。
5.使用sts(eclipse)完成如上代码，毕竟开发多在sts下面。
1>新建 Static Web Project工程，命名jquery01。
2>在jquery01的WebContent目录下面建立jquery01.html文件，代码同上。
3>复制jquery-3.1.0.min.js文件到WebContent目录下，注意jquery-3.1.0.min.js文件要与jquery01.html处于同一个目录下面。
4>点击jquery01.html文件，右键-->Open With-->Web Browser，便会弹出浏览器，而后在点击 click 按钮，弹框显示"Hello world"。
备注：我点击click按钮，可是并未弹框"Hello world"，网上搜索一番后，以为是浏览器问题，因而修改sts(ecipse)默认浏览器，步骤以下：sts-->window-->web browser-->2 firefox。再次点击click 按钮，则弹框显示"Hello world"。html