使用 jQuery 创建基于 Ajax 的应用程序变得非常简单和快速。
jQuery 最初由 John Resig 于 2006 年初创建。jQuery 项目目前由分布式开发人员组作为开源项目维护和维护。
使用 jQuery 可以节省大量时间和精力。 所以将此站点添加到您的收藏夹并继续阅读
您可以使用 jQuery 做更多的事情。
列表并没有就此结束，您可以使用 jQuery 做很多其他很酷的事情。
选择使用 jQuery 有几个优点：
首先，让我们先下载一份 jQuery，然后将其包含在我们的项目中。 有两个版本的 jQuery 可供下载： 片剂 e 未压缩 .
未压缩的文件更适合开发或调试； 同时，建议将缩小和压缩的文件用于生产，因为它可以节省带宽并由于文件较小而提高性能。
我们可以从这里下载 jQuery： https://jquery.com/download/
下载 jQuery 文件后，您可以看到它有一个 js 扩展名，即它是一个 JavaScript 文件。 事实上，JQuery 只不过是一个 JavaScript 库，因此您可以在 HTML 文档中包含 jQuery 文件和元素 就像您包含常规 JavaScript 文件一样。
<head>
<title>Simple HTML Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>请记住始终在自定义脚本之前包含 jQuery 文件； 否则，当您的 jQuery 代码尝试访问它们时，jQuery API 将不可用。
您可能已经注意到，我们在前面的示例中跳过了属性 type="text/javascript" 标签内. Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefi在 HTML5 和所有现代浏览器中完成。
作为替代方案，如果您不想下载文件，可以通过免费提供的 CDN（内容分发网络）链接将 jQuery 嵌入到您的文档中。
CDN 可以通过减少加载时间来提供性能优势，因为它们在世界各地的多个服务器上托管 jQuery，并且当用户请求该文件时，它将从最近的服务器提供服务。
这还有一个好处，如果您的网页访问者在访问其他站点时已经从同一个 CDN 下载了 jQuery 的副本，他们将不必再次下载它，因为它已经在他们的浏览器缓存中。
在这种情况下，你将不得不写：
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>除了 jquery 项目提供的 CDN 之外，您还可以通过以下方式包含 jQuery 谷歌 e 微软 CDN。
了解了 jQuery 库的目标以及如何将其包含在您的文档中之后，现在是将 jQuery 付诸实践的时候了。
现在让我们做一个简单的 jQuery 操作，将标题文本颜色从预置颜色更改为defi成品颜色为黑色至绿色。
<head>
<title>My First jQuery Web Page</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("h1").css("color", "#00ff00");
});
</script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>在代码中，我们通过更改标题（即元素）的颜色来执行简单的 jQuery 操作当文档就绪时使用 jQuery 元素的选择器和 css() 方法，称为文档就绪事件。
jQuery 语句通常以美元符号 ( $) 并以分号 ( ;).
在 jQuery 中，美元符号 ( $) 只是 jQuery 的别名。 请考虑以下演示最简单的 jQuery 语句的示例代码。
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>该示例仅显示一条警告消息“Hello I'm a JQuery sign”给用户。 让我们看看一些功能：
<script>: jQuery只是一个JavaScript库，jQuery代码可以放在元素里面 <script>，或者你可以把它放在一个外部的 JavaScript 文件中；$(document).ready(handler); 被称为就绪事件。 它在哪里 handler 它是一个传递给要执行的方法的函数，一旦文档准备就绪，即当 DOM 层次结构已完全构建时。jQuery 方法 ready() 它通常与匿名函数一起使用。 所以，上面的例子也可以简写成这样：
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>在函数内部，您可以编写 jQuery 语句来执行遵循基本语法的任何操作，例如：
$(selector).action();鸽子， $(selector) 它基本上从 DOM 树中选择 HTML 元素，因此可以对其进行操作和 action() 对所选元素应用一些操作，例如更改 CSS 属性的值，或设置元素的内容等。
现在让我们看另一个设置段落文本的例子：
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("p").text("Hello World!");
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>jQuery 例子是指选择器 p, 这会选择所有段落，然后是方法 text() 设置段落的文本内容为“Hello World!“。
当文档准备好时，上一个示例中的段落文本将被自动替换。 但是让我们看看如果您想在运行 jQuery 代码之前执行一个操作来替换段落的文本，该怎么做。
让我们考虑最后一个例子：
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("Hello World!");
});
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
<button type="button">Replace Text</button>
</body>
</html>在此示例中，仅当按钮上发生单击事件时才替换段落文本“Replace Text“，这仅表示用户单击此按钮时。
您可以使用 ID 选择器选择页面上具有唯一 ID 的单个项目。
例如，下面的 jQuery 代码将选择并突出显示具有 ID 属性的元素 id="markid", 当文档准备好时。
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>类选择器可用于选择具有特定类的元素。
例如，下面的 jQuery 代码将选择并突出显示具有 class 属性的元素 class="markclass", 当文档准备好时。
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>项目选择器可用于按项目名称选择项目。
例如，下面的 jQuery 代码将选择并突出显示所有段落，即元素 "<p>" 文档准备就绪时。
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>您可以使用属性选择器根据其 HTML 属性之一选择元素，例如链接属性 target或输入的属性 type等。
例如，下面的 jQuery 代码将选择并突出显示所有文本输入，例如元素 "<input>" 同 type="text", 当文档准备好时。
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>您还可以结合 CSS 选择器使您的选择更加精确。
例如，您可以将类选择器与元素选择器结合使用，以在文档中查找具有特定类型和类的元素。
<script>
$(document).ready(function(){
// Highlight only paragraph elements with class mark
$("p.mark").css("background", "yellow");
// Highlight only span elements inside the element with ID mark
$("#mark span").css("background", "yellow");
// Highlight li elements inside the ul elements
$("ul li").css("background", "red");
// Highlight li elements only inside the ul element with id mark
$("ul#mark li").css("background", "yellow");
// Highlight li elements inside all the ul element with class mark
$("ul.mark li").css("background", "green");
// Highlight all anchor elements with target blank
$('a[target="_blank"]').css("background", "yellow");
});
</script>除了选择器之外 definiti，jQuery提供了自己的自定义选择器来进一步增强选择页面上元素的能力。
<script>
$(document).ready(function(){
// Highlight table rows appearing at odd places
$("tr:odd").css("background", "yellow");
// Highlight table rows appearing at even places
$("tr:even").css("background", "orange");
// Highlight first paragraph element
$("p:first").css("background", "red");
// Highlight last paragraph element
$("p:last").css("background", "green");
// Highlight all input elements with type text inside a form
$("form :text").css("background", "purple");
// Highlight all input elements with type password inside a form
$("form :password").css("background", "blue");
// Highlight all input elements with type submit inside a form
$("form :submit").css("background", "violet");
});
</script>事件通常由用户与网页的交互触发，例如单击链接或按钮、在输入框或文本区域中输入文本、在选择框中进行选择、按下键盘上的某个键、移动鼠标指针时， ETC。 在某些情况下，浏览器本身可以触发事件，例如页面加载和下载事件。
jQuery 通过为大多数本机浏览器事件提供事件方法改进了基本事件处理机制，其中一些方法是 ready(), click(), keypress(), focus(), blur(), change()等。
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>一般来说，事件可以分为四大类：
当用户点击某个项目、移动鼠标指针等时会触发鼠标事件。
下面是一些常用的 jQuery 方法来处理鼠标事件。
click()该方法 click() 将事件处理函数附加到事件的选定元素“click“。 链接函数在用户单击该项目时执行。 以下示例将隐藏元素 <p> 单击时在页面上。
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()该方法 dblclick() 将事件处理函数附加到事件的选定元素“dblclick“。 链接函数在用户双击该项目时执行。 以下示例将隐藏元素 <p> 当您双击它们时。
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()该方法 hover() 将一个或两个事件处理函数附加到选定元素，当鼠标指针移入和移出元素时执行。 第一个函数在用户将鼠标指针放在某个项目上时运行，而第二个函数在用户将鼠标指针从该项目上移开时运行。
以下示例将突出显示项目 <p> 当您将光标放在其上时，当您移除光标时，突出显示将被移除。
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()该方法 mouseenter() 将事件处理函数附加到选定元素，当鼠标进入元素时执行。 下面的例子会给元素添加class高亮 <p> 当您将光标放在它上面时。
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()该方法 mouseleave() 将事件处理函数附加到鼠标离开项目时运行的选定项目。 以下示例将从元素中删除类突出显示 <p> 当您从中删除光标时。
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>当用户按下或释放键盘上的键时，将引发键盘事件。 让我们看看一些常用的 jQuery 方法来处理键盘事件。
keypress()该方法 keypress() 将事件处理函数附加到选定元素（通常是表单控件），该函数在浏览器接收到用户的键盘输入时运行。 以下示例将在触发事件时显示一条消息 keypress 以及当您按下键盘上的键时它被触发了多少次。
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keypress 事件类似于 keydown 事件，不同之处在于修改键和非打印键（例如 Shift、Esc、Backspace 或 Delete、箭头键等）会被触发。 他们触发按键事件但不触发按键事件。
keydown()该方法 keydown() 将事件处理函数附加到选定项（通常是表单控件），该函数在用户首次按下键盘上的键时执行。 以下示例将在触发事件时显示一条消息 keydown 以及当您按下键盘上的键时它被触发了多少次。
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()该方法 keyup() 将事件处理函数附加到选定元素（通常是表单控件），该函数在用户释放键盘上的键时执行。 以下示例将在触发事件时显示一条消息 keyup 以及当您按下并释放键盘上的某个键时它会被触发多少次。
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>当表单控件获得焦点或失去焦点时，或者当用户更改表单控件值时触发表单事件，例如在文本输入中键入文本、在选择框中选择选项等。 下面是一些常用的 jQuery 方法来处理表单事件。
change()该方法 change() 将事件处理函数附加到元素 <input> 并在其值更改时执行。 下面的示例在下拉选择框中选择一个选项时将显示一条警告消息。
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>对于单击框、复选框和单选按钮，当用户进行鼠标选择时事件立即触发，但对于文本输入和文本区域，事件在元素失去焦点后触发。
focus()该方法 focus() 将事件处理函数附加到选定元素（通常是控件和表单绑定），该函数在获得焦点时执行。 以下示例将在文本输入获得焦点时显示一条消息。
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()该方法 blur() 附加一个事件处理函数来形成元素，例如 <input>, <textarea>, <select> 当它失去焦点时执行。 以下示例将在文本输入失去焦点时显示一条消息。
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()该方法 submit() 将事件处理函数附加到元素 <form> 当用户尝试提交表单时运行。 以下示例将根据尝试提交表单时输入的值显示一条消息。
<script>
$(document).ready(function(){
$("form").submit(function(event){
var regex = /^[a-zA-Z]+$/;
var currentValue = $("#firstName").val();
if(regex.test(currentValue) == false){
$("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
// Preventing form submission
event.preventDefault();
}
});
});
</script>这些事件也会在 DOM（文档对象模型）页面准备就绪或用户调整大小或滚动浏览器窗口等情况下触发。 下面是一些常用的 jQuery 方法来处理此类事件。
ready()该方法 ready() 指定在 DOM 完全加载时执行的函数。
一旦 DOM 层次结构完全构建并准备好进行操作，以下示例将替换段落文本。
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()该方法 resize() 将事件处理函数附加到 window 元素，该函数在浏览器窗口的大小发生变化时运行。
当您尝试通过拖动窗口的角来调整浏览器窗口大小时，以下示例将显示浏览器窗口的当前宽度和高度。
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()该方法 scroll() 将事件处理函数附加到窗口或 iframe 以及每当项目的滚动位置发生变化时运行的可滚动项目。
以下示例将在滚动浏览器窗口时显示一条消息。
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.