初识JQuery。

JQuery是在JavaScript的基础上进行了封装，之前在学习JavaScript时候，有三种在html文档中引用js的方法，其中<script src=xxx.js ></script> 这种方法中的xxx.js文件就可以看做是一个小的jquery，也就是说，jquery是javaScript的脚本库（函数库）。

而我们一般用的这个脚本库，并不需要我们自己去写，JQuery官网上可以下载到，里面基本上囊括了我们经常会用到的方法，当然如果有需要可以自定义方法到juqery.js文件中，这个文章后面会讲到。

和JavaScript外部引用方式一样，jquery也是通过<srcipt src ="xxx.js URL">进行引入的，不同的是：

引用JQuery官网的最新在线版本

 <script src="https://jquery.com/jquery.min.js"></script>

1.必须在网的条件下进行

2.必须保证URL地址是正确的，更改域名后便会访问不到

3.实时更新，无需下载最新版本，新增功能便可以使用

引用本地的JQuery脚本

  <script src="js/jquery-1.11.1/jquery.min.js"></script>

1.稳定，无需网络，随时随地访问

2.如果需要新版本的功能，则需要下载最新版本替换旧版本

说到版本问题，官网上有两种常用的版本,一种是min版（压缩版），一种是uncompressed（未压缩版），两种版本实现的效果是一样的。

不同点：文件大小，有无注释，代码的格式是否规范。

举一个简单例子说明一下jquery中的基本语法格式：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>初识JQuery</title>
	<script  src="../JQuery/jquery-3.3.1.js"></script>
		<script type="text/javascript">	
		$(document).ready(function(){
			$("p").click(function(){
				$(this).hide();
		});
	</script>
</head>
<body>
	<p>一点，我就消失了</p>
</body>
</html>

$(document)是jquery是HTML的文档对象；

ready()事件在文档对象就绪时触发，这个和onload作用效果是一样的，但是要比onload加载更快；

$("p")是一个JQuery选择器,用来选中文档中的p标签，

$("p").click为当前选中的对象添加一个click事件，

$("this")表示当前的HTML对象，这里指的是p标签，

hide()方法为实现效果，将p标签在单击后内容隐藏。

DOM对象要区分于JQuery对象

//通过js获取的对象是DOM对象
var domObj=document.getElementById("id");

//通过jquery获取的对象是jquery对象
var jqObj=$("#id");

//DOM对象向JQuery对象的转化
var jqObj=$(domObj);

DOM对象是W3C标准，适用于JQuery和Javascript；但JQuery对象只能在JQuery程序中使用。

DOM对象要区分于JQuery对象

猜你喜欢