JQuery-00-笔记

Posted 2021-07-15 寻7

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery-00-笔记相关的知识，希望对你有一定的参考价值。

JQuery-系列-笔记

一、JQuery快速入门
二、JQuery的学习内容

一、JQuery快速入门

1.1、JQuery介绍

jQuery 是一个 javascript 库。
所谓的库，就是一个 JS 文件，里面封装了很多预定义的函数，比如获取元素，执行隐藏、移动等，目的就是在使用时直接调用，不需要再重复定义，这样就可以极大地简化了 JavaScript 编程。
jQuery 官网：https://www.jquery.com

1.2、JQuery快速入门

下载JQuery
- 目前jQuery有三个大版本：
  1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，
  功能不再新增。因此一般项目来说，使用1.x版本就可以了，
  最终版本：1.12.4 (2016年5月20日)
  2.x：不兼容ie678，很少有人使用，官方只做BUG维护，
  功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，
  最终版本：2.2.4 (2016年5月20日)
  3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，
  一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。
  目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）
- jquery-xxx.js 与 jquery-xxx.min.js区别：
  1. jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
  2. jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快
导入JQuery的js文件：导入min.js文件
开发思路

编写 html 文档。
引入 jQuery 文件。
使用 jQuery 获取元素。
使用浏览器测试。

代码实现

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>快速入门</title>
	</head>
	<body>
	    <div id="div">我是div</div>
	</body>
	<!--引入 jQuery 文件-->
	<script src="js/jquery-3.3.1.min.js"></script>
	<script>
		//JavaScript和JQuery两种方式获取元素对比：
	    //1. JS方式，通过id属性值来获取div元素
	    let jsDiv = document.getElementById("div");
	    //alert(jsDiv);
	    //alert(jsDiv.innerHTML);
	
	    //2. jQuery方式，通过id属性值来获取div元素
	    let jqDiv = $("#div");
	    alert(jqDiv);
	    alert(jqDiv.html());
	</script>
</html>