What is JQuery?
jQuery是一个简洁快速的JavaScript脚本库，它允许我们在网页上简单的操作文档、处理事件、运行动画效果或者添加异步交互。
JQuery version of the mental journey:
How to use JQ?
- Can be downloaded from the official website and used locally
从jQuery的官方网站（http://jquery.com）下载jQuery的脚本文件。
将下载的文件放置到项目的指定文件夹中，通常放在js文件夹中，然后在需要应用jQuery的页面中使用下面的语句，将其引用到文件中。
<script language="javascript" src="js/jquery-1.11.1.min.js"></script>
或者
<script type="text/javascript“ src="js/jquery-1.11.1.min.js"></script>
注意：引用jQuery的<script>标签，必须放在所有的自定义脚本文件的<script>之前，否则在自定义的脚本代码中找不到jQuery脚本库。
-
The other is to directly quote the jq file under the html file, which comes from a server on the Internet, and an error is reported if there is no network.
This is just one of them, there are various CDNs.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
Use with bootstrap:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>
Write the first JQuery script:
(1) Create a folder named js, and copy jquery-1.11.1.min.js to the folder.
(2) <script language="javascript" src="js/jquery-1.11.1.min.js"></script>
Quote in html page:
<script>
$(document).ready(function(){
alert("我的第一个jQuery脚本！");
});
</script>
or:
<script>
$(function(){
alert("我的第一个jQuery脚本！");
});
</script>
The difference between window.load() method and $(document).ready() method:
$window.load()方法：在页面所有的内容都载入完毕后才会执行。
$(document).ready()方法：在DOM元素载入就绪后执行 。
注意：
在一个页面中可以放置多个$(document).ready()方法，而window.load()方法在页面上只允许放置一个 。
$(document).ready()方法比window.load()方法载入速度更快。
JQuery object:
Although the jQuery object is generated after wrapping the DOM object, jQuery cannot use any method of the DOM object, and similarly, the DOM object cannot use the methods in jQuery.
Use #id as the selector to get the jQuery object, and use document.getElementById("id") to get the DOM object. The two are not equivalent.
Convert jQuery object to DOM object:
or:
Convert DOM objects to jQuery objects:
jQuery library is imported after other libraries
The jQuery library is imported after other libraries, and the jQuery.noConflick() method is used to transfer the control of the variable $ to other libraries.
Three ways:
The use of JQuery plug-in:
(1) Include the downloaded plug-in in the markup and make sure it is located after the main jQuery source file.
(2) Include a custom JavaScript file and use plug-in creation or extension methods in it.