jQuery 简介
jQuery是一个快速，轻量级且功能丰富的JavaScript库，它基于“少写多做”的原则。
jQuery简化了HTML文档的遍历，事件处理，动画和Ajax交互，从而实现了快速的Web开发。
jQuery的目的是使在网站上使用JavaScript更加容易。
<!DOCTYPE html>
<html>
<title>JQuery入门示例</title>
<head>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>如果您单击我，我将会消失。</p>
<p>如果您单击我，我将会消失。</p>
<p>点击我也会消失!</p>
</body>
</html>
jQuery的优点
如果您不熟悉jQuery，您可能想知道是什么使jQuery如此特别。
jQuery简化了JavaScript中的许多复杂内容，例如AJAX调用和DOM操作。
jQuery库包含以下功能：
HTML / DOM操作
CSS操作
事件处理
效果和动画
AJAX支持
实用工具(Utilities)
插件(Plugins)
跨浏览器支持
信息：在JavaScript中，您通常需要编写几行代码来选择和操作HTML文档中的元素，但是使用jQuery强大的选择器机制，您可以遍历DOM树并以简单有效的方式选择元素以执行任何操作。
jQuery可以做什么？
您可以使用jQuery做更多的事情：
jQuery可以轻松选择元素
jQuery可以轻松更改元素的样式（CSS）和位置
jQuery可以轻松操纵DOM元素及其属性
jQuery可以轻松创建效果，例如显示或隐藏元素，滑动过渡等
jQuery可以使用更少的代码轻松创建复杂的CSS动画
jQuery可以轻松地遍历整个DOM树以查找任何元素
jQuery只需一行代码即可轻松地对元素执行多项操作
jQuery可以轻松获取或设置HTML元素的尺寸
列表并没有结束，您可以使用jQuery完成许多其他有趣的事情。
需要的基础知识
在开始学习jQuery之前，您应该具有以下基本知识：
HTML
CSS
JavaScript
jQuery 入门
将jQuery添加到您的网页，有两种使用jQuery的方法：
1.下载jQuery库
有两种版本的jQuery可下载：
压缩版本-适用于您的实时网站，因为它已被缩小和压缩
未压缩版本-用于测试和开发（未压缩且可读的代码）
可以从以下网址下载这两个版本：https : //jquery.com/download/。
2.包含CDN中的jQuery
Staticfile CDN：
<head>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</head>
Microsoft CDN：
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
</head>
使用jQuery CDN的优势：
访问另一个站点时，许多用户已经从Staticfile或Microsoft下载了jQuery。因此，当他们访问您的网站时，将从缓存中加载该文件，从而缩短了加载时间。而且，大多数CDN都会确保用户一旦请求文件，就会从距离他们最近的服务器提供文件，这也将缩短加载时间。
jQuery 语法
jQuery语法是通过使用HTML元素选择器进行的，并对元素执行一些操作。
jQuery基本语法：
$(selector).action()
$ 标志定义jQuery
(selector) 用于查找HTML元素
action() 用于对元素执行操作
示例：
$(this).hide()：用于隐藏当前元素
$("p").hide()：用于隐藏所有<p>元素
$(".para").hide()：用于隐藏所有带有class="para"的元素
$("#para").hide()：用于隐藏id="para"的元素
文档就绪事件
您可能已经注意到我们示例中的所有jQuery方法都在document.ready事件中：
$(document).ready(function(){
// jQuery方法（DOM就绪时执行）
});
这是为了防止文档加载完成之前运行任何jQuery代码。
正确的做法是等待文档完全加载并准备就绪，然后再使用它。
这也使您可以在文档正文的开头部分获取JavaScript代码。
jQuery还为document.ready事件提供了一个更短的方法：
$(function(){
// jQuery方法,与以上写法效果相同
});
在$(document).ready()更容易阅读代码时理解。
注意：这$(document).ready()是一个事件，该事件用于使用jQuery安全地操纵页面（此事件中的代码仅在DOM准备就绪后才运行）。
jQuery 选择器
jQuery的最基本概念是“选择一些元素并对其进行处理”。
jQuery选择器使您可以“查找”（或选择）网页中的HTML元素。
jQuery支持大多数CSS3选择器，以及一些非标准选择器。
jQuery中的所有选择器都以美元符号和括号：开头$()。
元素选择器
jQuery元素选择器可用于根据元素名称选择元素。
您可以在页面上选择所有<p>元素，如下所示：
$("p")
当用户单击按钮时，以下jQuery代码将选择并突出显示所有<p>元素：
示例
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color", "yellow");
});
});
id选择器
jQuery #id选择器使用HTML标记的id属性来查找特定元素。
元素的ID在页面中应该是唯一的，因此ID选择器用于选择一个唯一的元素。
要查找具有特定ID的元素，请写一个井号（#）字符，后跟HTML元素的ID：
$("#demo")
当用户单击按钮时，以下jQuery代码将选择并突出显示具有id="demo"的元素：
示例
$(document).ready(function(){
$("button").click(function(){
$("#demo").css("background-color", "yellow");
});
});
.class选择器
jQuery .class选择器查找具有特定类名的元素。
要查找具有特定类的元素，请写一个句点（.）字符，后跟类的名称：
$(".demo")
当用户单击按钮时，以下jQuery代码将选择并突出显示class="demo"的所有元素：
示例
$(document).ready(function(){
$("button").click(function(){
$(".demo").css("background-color", "yellow");
});
});
多个选择器
您可以根据需要选择多个选择器。只需用逗号分隔选择器。
多重选择器选择所有指定选择器的组合结果：
$("selector1, selector2, selectorN")
以下jQuery代码将选择每个<h2>，<div>和<span>元素：
示例
$(document).ready(function(){
$("h2, div, span").css("background-color", "lightgreen");
});
jQuery选择器的示例
jQuery提供了多种选择特定HTML元素的方法。
句法 描述
$("*") 选择所有元素
$(this) 选择当前元素
$("p.demo") 选择所有带有class="demo"的<p>元素
$("p:first") 选择第一个<p>元素
$("div p:first-child") 选择每个<div>元素的第一个<p>元素
$("[target]") 选择具有target属性的每个元素
$("a[href='/CSS3/']") 选择每个<a>元素的href属性值等于“ /CSS3/”
$("a[href!='/CSS3/']") 选择每个<a>元素的href属性值不等于“ /CSS3/”
$(":text") 选择类型为“text”的所有<input>元素
$("tr:even") 选择所有偶数<tr>元素
$("tr:odd") 选择所有奇数<tr>元素
jQuery 事件方法
事件是Web应用程序可以检测到的操作。
jQuery提供了将事件处理程序附加到选择的简单方法。
发生事件时，将执行提供的函数。
事件方法的jQuery语法
在jQuery中，大多数DOM事件具有等效的jQuery方法。
要将点击事件分配给页面上的所有段落，请执行以下操作：
$("p").click();
下一步是定义事件发生时应发生的情况。您必须将一个函数传递给事件：
$("p").click(function(){
// 需要执行的动作...
});
此示例在单击页面时隐藏页面上的段落：
示例
$("p").click(function(){
$(this).hide();
});
本示例将一个“changeSize”函数附加到click事件：
示例
$(document).ready(function(){
$("p").click(changeSize);
});
function changeSize() {
$(this).animate({fontSize: "+=5px"});
}
常用的jQuery事件方法
$（document）.ready()
jQuery $(document).ready()方法指定在DOM完全加载时要执行的函数。
以下示例在加载DOM时显示一条消息：
示例
$(document).ready(function(){
$("p").text("现在已经加载了DOM，可以对其进行操作.");
});
click()
jQuery click()方法将事件处理程序函数附加到所选元素。
当用户单击该元素时，将执行该函数：
示例
$("p").click(function(){
$(this).css({"background-color":"#007FFF", "color":"white"});
});
mouseenter()
jQuery mouseenter()方法将事件处理程序函数附加到所选元素。
当鼠标指针进入该元素时，将执行该函数：
示例
<head>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).css("background-color", "yellow");
});
$("p").mouseleave(function(){
$(this).css("background-color", "lightblue");
});
});
</script>
</head>
<body>
<p>将鼠标指针移到该段落上。</p>
</body>
mouseleave()
jQuery mouseleave()方法将事件处理程序函数附加到所选元素。
当鼠标指针离开该元素时，将执行该函数：
示例
$("p").mouseleave(function(){
$(this).css("background-color", "lightblue");
});
mousedown()
jQuery mousedown()方法将事件处理程序函数附加到所选元素。
当用户在元素上按下鼠标按钮时，将执行该函数：
示例
$("p").mousedown(function(){
$(this).after("<p style='color:red;'>按下鼠标键</p>");
});
mouseup()
jQuery mouseup()方法将事件处理程序函数附加到所选元素。
当鼠标悬停在该元素上时，释放鼠标按钮，将执行该函数：
示例
$("p").mouseup(function(){
$(this).after("<p style='color:green;'>释放鼠标键</p>");
});
keydown()
jQuery keydown()方法将事件处理程序函数附加到所选元素。
当用户按下键盘上的键时，将执行该函数：
示例
$("input").keydown(function(event){
$(this).css("background-color", "yellow");
$("span").text(event.type);
});
keyup()
jQuery keyup()方法将事件处理程序函数附加到所选元素。
当用户释放键盘上的键时，将执行该函数：
示例
$("input").keyup(function(event){
$(this).css("background-color", "lightblue");
$("span").text(event.type);
});
hover（）
jQuery hover()方法具有两个函数，并且是mouseenter()和mouseleave()方法的组合。
下面的示例将鼠标指针悬停在上方时更改所有<p>元素的背景颜色：
示例
$("p").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "lightblue");
});
on()方法
jQuery提供了on()一种方法来响应所选元素上的任何事件。
使用on()方法，我们可以为所选元素附加一个或多个事件处理程序。
下面的示例将click事件附加到所有<p>元素：
示例
$("p").on("click", function(){
$(this).css("background-color", "coral");
});
下面的示例将mouseenter事件附加到所有<p>元素：
示例
$("p").on("mouseenter", function(){
$(this).css("background-color", "coral");
});
以下示例将多个事件处理程序附加到<div>元素：
示例
$("div").on("mouseenter mouseleave click", function(){
$(this).text(Math.random());
});
off()方法
jQuery off() 方法删除该on()方法附带的一个或多个事件处理程序。
下面的示例从<div>元素中删除mousemove事件：
示例
$("button").click(function(){
$("div").off("mousemove");
});
事件对象
jQuery的事件系统根据W3C标准标准化事件对象。
确保将事件对象传递给事件处理程序。
每个事件处理函数都会接收一个事件对象，其中包含许多属性和方法。
示例
$("div").on("click", function(event){
alert("Event type is " + event.type);
alert("Target : " + event.target.innerHTML);
});
下表显示了所有事件对象的方法和属性：
方法/属性 描述
event.currentTarget 事件冒泡阶段中的当前DOM元素
event.data 包含绑定当前执行处理程序时传递给事件方法的可选数据
event.delegateTarget 返回附加当前调用的jQuery事件处理程序的元素
event.isDefaultPrevented() 返回是否event.preventDefault()为事件对象调用
event.isImmediatePropagationStopped() 返回是否event.stopImmediatePropagation()为事件对象调用
event.isPropagationStopped() 返回是否event.stopPropagation()为事件对象调用
event.metakey 表示事件触发时是否按下了META键
event.namespace 返回触发事件时指定的名称空间
event.pageX 返回鼠标相对于文档左边缘的位置
event.pageY 返回相对于文档顶部边缘的鼠标位置
event.preventDefault() 阻止浏览器执行所选元素的默认操作
event.relatedTarget 返回鼠标移动时要输入或退出的元素
event.result 包含由指定事件触发的事件处理程序返回的最后一个/上一个值
event.stopImmediatePropagation() 防止其他事件处理程序被调用
event.stopPropagation() 防止事件使DOM树冒泡，防止任何父处理程序收到该事件的通知
event.target 返回哪个DOM元素触发了事件
event.timeStamp 返回创建事件的时间（相对于纪元的毫秒数）
event.type 返回触发了哪种事件类型
event.which 返回事件按下的键盘键或鼠标按钮
网友评论