Jquery（一）——Jquery简介

最新推荐文章于 2022-05-27 23:59:56 发布

程序员的时光

最新推荐文章于 2022-05-27 23:59:56 发布

阅读量328

点赞数

分类专栏： ● 富客户端技术 ------【jQuery】文章标签： Jquery

本文链接：https://blog.csdn.net/qq_37084904/article/details/98989858

版权

● 富客户端技术同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

------【jQuery】

6 篇文章 0 订阅

订阅专栏

目录

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/

点击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"/>&nbsp;&nbsp;<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"/>&nbsp;&nbsp;<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"/>&nbsp;&nbsp;<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"/>&nbsp;&nbsp;<input type="button" id="actionButton" value="获取内容"/>
</body>
</html>

程序员的时光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery（一）——Jquery简介

目录1.Jquery简介；2. Jquery下载；3.Jquery版"Hello World!"；1.Jquery简介；百度百科：Jquery百度百科总结：1. Jquery是一个JavaScript函数库；2.Jquery封装了常用的JavaScript功能代码，提供一种简便的JavaScript设计模式；3.Jquery使代...
复制链接

扫一扫