前端必备——JQuery基础知识体系详解
Posted 蓝桥云课精选
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端必备——JQuery基础知识体系详解相关的知识，希望对你有一定的参考价值。
下面是课程第一节的内容：
jQuery 介绍
一、实验介绍
1.1 实验内容
由于实验楼使用是 WebIDE 的在线环境，所以有不熟悉对同学请阅读：实验楼 WebIDE 使用指南 的前端部分。
1.2 实验知识点
什么是 jQuery
jQuery 特色
为什么要学习 jQuery
配置 jQuery 环境
jQuery 语法
jQuery 代码风格
jQuery 对象和 DOM 对象
解决 jQuery 和其他库的冲突
1.3 实验环境
Theia: 一款前后端分离的、基于 web 的 云 IDE。MiniBrowser：浏览器，右键点击目标 html 文件，选择 open with 下的 Mini Browser 即可在 IDE 中打开浏览器。
二、jQuery 简介
2.1 什么是 jQuery
2.2 特色
-
使用多浏览器开源选择器引擎 Sizzle（jQuery 项目的派生产品）进行 DOM 元素选择 -
基于 CSS 选择器的 DOM 操作，使用元素的名称和属性（如 id 和 class）作为选择 DOM 中节点的条件 -
事件 -
特效和动画 -
Ajax -
Deferred 和 Promise 对象来控制异步处理 -
JSON 解析 -
通过插件扩展 -
工具函数，如特征检测 -
现代浏览器中本地的兼容性方法，但对于旧版浏览器需要后备（fallback）方法，比如 inArray()和 each() -
多浏览器（不要与跨浏览器混淆）支持
三、为什么要学习 jQuery
用 querySelectorAll 来查询 DOM 节点
使用 fetch 代替 ajax（在不支持的浏览器上使用 XHR）
使用代理事件来进行事件处理
为一些尚未实现的 DOM 标准写了 polyfill
更多地使用自定义元素 (CustomElement)
3.1 jQuery 的辉煌
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
轻量级。
强大的选择器。
出色的 DOM 操作的封装。
可靠的事件机制。
完善的 ajax。
不污染顶级变量。
出色的浏览器兼容性。
链式操作方式。
隐式迭代。
行为层与结构层的分离。
丰富的插件支持。
完善的文档。
开源。
四、配置 jQuery 环境
http://jquery.com/,可以下载最新的 jQuery 文件到本地，然后再引入到项目即可。
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
wget http://labfile.oss.aliyuncs.com/courses/22/jquery-3.3.1.js
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>
五、jQuery 语法
$(selector).action()
美元符号 $ 定义 jQuery。
选择符（selector）“查询”和“查找” HTML 元素。
jQuery 的 action() 执行对元素的操作。
$("#syl") 和
jQuery("#syl") 是等价的，
$.ajax 和
jQuery.ajax 是等价的，如果没有特别说明，程序中的
$ 符号都是 jQuery 的一个简写形式。
5.1 文档就绪函数
$(document).ready(function(){
});
// 可以简写成
$(funciton(){
});
试图隐藏一个不存在的元素。
获得未完全加载的图像的大小。
|
|
|
|
|
|
|
|
window.onload = function(){
alert("test1");
};
window.onload = function(){
alert("test2");
};
//结果只会输出 test2。
$(document).ready(function(){
alert("test1");
})
$(document).ready(function(){
alert("test2");
})
//结果两次都输出
5.2 编写我们的第一个 jQuery 程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- Google 的 CDN 的方式加载jQuery，请大家自行修改为本地 -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
//等待dom元素加载完毕
$(document).ready(function(){
//弹出一个框:显示hello syl
alert("hello syl");
});
</script>
</body>
</html>
请大家将加载 jQuery 的 Google 的 CDN 改为我们之前讲到的引入本地的 jQuery 文件，请大家将它下载下来然后做一个替换，因为在环境内无法访问到这些 CDN，之后的实验中同理，不再赘述。 修改内容为，将 <scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>修改为<scripttype="text/javascript"src="jquery.min.js"></script>。这里需要使用前面的命令，将 jquery.min.js 下载到与代码文件同一路径目录下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
</head>
<body>
<div class="box">
<ul class="menu">
<li class="level1">
<a href="#">春天</a>
<ul class="level2">
<li>春意盎然</li>
<li>春意盎然</li>
<li>春意盎然</li>
<li>春意盎然</li>
</ul>
</li>
<li class="level1">
<a href="#">夏天</a>
<ul class="level2">
<li>夏日炎炎</li>
<li>夏日炎炎</li>
<li>夏日炎炎</li>
<li>夏日炎炎</li>
</ul>
</li>
<li class="level1">
<a href="#">秋天</a>
<ul class="level2">
<li>秋高气爽</li>
<li>秋高气爽</li>
<li>秋高气爽</li>
<li>秋高气爽</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
//等待dom元素加载完毕
$(document).ready(function() {
$(".level1>a").click(function() {
$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();
return false;
})
});
</script>
</body>
</html>
removeClass("current"))，并且将紧邻它们后面的元素都隐藏。
$(document).ready(function() {
$(".level1>a").click(function() {
$(this).addClass("current")//给当前元素添加"current"样式
.next().show()//下一个元素显示
.parent().siblings().children("a").removeClass("current")//父元素的同辈元素的子元素a移除"current"样式
.next().hide();//它们的下一个元素隐藏
return false;
})
});
七、jQuery 对象和 DOM 对象
7.1 DOM 对象
<h1></h1>
<p></p>
<ul>
<li></li>
</ul>
document.getElementById()，
document.getElementsByTagName() 等来获取元素节点，像这样获取的 DOM 元素就是 DOM 对象，DOM 对象可以使用 JavaScript 中的方法，比如：
var domObj = document.getElementById("id");//获取DOM对象
var objHtml = domObj.innerHTML;//使用JavaScript中的属性innerHTML
7.2 jQuery 对象
$("#syl").html();//获取id为syl的元素内的html代码，html()是jQuery中的方法
document.getElementById("syl").innerHTML;
$("#syl").innerHTML; 之类的写法是错的，可以使用
$("#syl").html(); 之类的 jQuery 方法来代替，同样的道理，DOM 对象也不能使用 jQuery 里的方法，例如:
document.getElementById("syl").html();也是会报错的。
#id 作为选择符取得的是 jQuery 对象而并非
document.getElementById("id"); 所得到的 DOM 对象，两者并不等价。我们一定要从开始就树立这样的一个观念：jQuery 对象和 DOM 对象是有区别的，它们并不是等价的。
以上是关于前端必备——JQuery基础知识体系详解的主要内容，如果未能解决你的问题，请参考以下文章