目录
1.Jquery简介;
百度百科:Jquery百度百科
总结:
1. Jquery是一个JavaScript函数库;
2. Jquery封装了常用的JavaScript功能代码,提供一种简便的JavaScript设计模式;
3. Jquery使代码简单化,宗旨是少写代码,做更多的事,功能强悍;
4.Jquery官网链接:https://jquery.com/
2. Jquery下载;
点击官网:https://jquery.com/
点击Download;
于是就可以下载了
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"/> <input type="button" value="获取内容" onclick="getContent()"/>
</body>
</html>
再来看一看用Jquery来实现获取方法;
我们先要把下载的Jquery.js文件加载到项目中去,然后引入Jquery.js文件;
<!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"/> <input type="button" value="获取内容" onclick="getContent()"/>
</body>
</html>
再来看另一种方式获取对象;
<!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"/> <input type="button" id="actionButton" value="获取内容"/>
</body>
</html>
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"/> <input type="button" id="actionButton" value="获取内容"/>
</body>
</html>