1、什么是jquery
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。
2、下载地址
image.png
第一个代表压缩版，就是里面的注释比较少，变量的命名都比较简单，不具有可读性
第二个是未压缩版
第三个是个map文件，主要是配合压缩版使用，调试用的
jqurey有三个比较大的版本
image.png
我们使用第一版的,可以下载下来放到本地，也可以使用网上的（可以减少自己服务器压力）
BootCDN：http://www.bootcdn.cn/
搜索jQuery
3、参考文档
官网地址：http://api.jquery.com/
中文翻译地址：https://www.jquery123.com/
还有个地址：http://jquery.cuishifeng.cn/
4、体验
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页的标题</title>
<!--如果js中要操作的元素位于js代码块的后面，需要这么写-->
<script type="text/javascript" src="js/jquery-1.12.4.min.js">
</script>
</head>
<body>
<input type="text" value="用户名" id="inputId" />
<script type="text/javascript">
//dom方式获取div标签的内容
var divTag=document.getElementById("inputId");
console.log(divTag.value);
//jqurey方式获取
var jdiv=$("#inputId");
console.log(jdiv.val());
</script>
</body>
</html>
网页显示：
image.png
5、判断是jQuery对象还是DOM对象
可以利用jQurey对象的nodeType属性或者jQurey对象的jquery属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页的标题</title>
<!--如果js中要操作的元素位于js代码块的后面，需要这么写-->
<script type="text/javascript" src="js/jquery-1.12.4.min.js">
</script>
</head>
<body>
<input type="text" value="用户名" id="inputId" />
<script type="text/javascript">
//dom方式获取div标签的内容
var divTag=document.getElementById("inputId");
console.log(divTag.value);
console.log("nodetype属性"+divTag.nodeType);
//jqurey方式获取
var jdiv=$("#inputId");
console.log(jdiv.val());
console.log("nodetype属性"+jdiv.nodeType);
</script>
</body>
</html>
网页显示：
image.png
DOM对象的nodeType属性值为1，jQuery对象的nodeType属性值没有
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页的标题</title>
<!--如果js中要操作的元素位于js代码块的后面，需要这么写-->
<script type="text/javascript" src="js/jquery-1.12.4.min.js">
</script>
</head>
<body>
<input type="text" value="用户名" id="inputId" />
<script type="text/javascript">
//dom方式获取div标签的内容
var divTag=document.getElementById("inputId");
console.log(divTag.value);
console.log("jquery属性"+divTag.jquery);
//jqurey方式获取
var jdiv=$("#inputId");
console.log(jdiv.val());
console.log("jquery属性"+jdiv.jquery);
</script>
</body>
</html>
网页显示：
image.png
DOM对象的jquery属性值没有，jQuery对象的jqurey属性值是版本号
6、jQuery对象和DOM对象互相转化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网页的标题</title>
<!--如果js中要操作的元素位于js代码块的后面，需要这么写-->
<script type="text/javascript" src="js/jquery-1.12.4.min.js">
</script>
</head>
<body>
<input type="text" value="用户名" id="inputId" />
<script type="text/javascript">
//dom方式获取div标签的内容
var divTag=document.getElementById("inputId");
console.log(divTag.value);
console.log("jquery属性"+divTag.jquery);
//jqurey方式获取
var jdiv=$("#inputId");
console.log(jdiv.val());
console.log("jquery属性"+jdiv.jquery);
//dom对象转换为jquery对象
var dom2jquery=$(divTag);
console.log(dom2jquery.jquery);
//jquery对象转换为dom对象,jdiv是个数组，这儿$("#inputId");根据id查的，只能查到一个，取第一个就行了
var jquery2dom=jdiv.get(0);
console.log(jquery2dom.nodeType);
</script>
</body>
</html>
网页显示：
image.png
网友评论