jQuery 教程
jQuery 技术文档
前言
jQuery 可能是目前最受欢迎的 JavaScript 库之一。它简化了在网页中操作和遍历 HTML 文档、处理事件以及执行动画等任务的方法。 本文将介绍 jQuery 的主要语法和概念,如何使用它来访问和修改 HTML 内容和样式,并处理事件。
语法
语法基本结构如下:
$(selector).action()
$
定义 jQuery。selector
(选择器)查询 HTML 元素。action()
执行操作(比如添加文本)。
其中,$ 符号名为 jQuery 或者别名,使用时常就是 jquery()
或 $()
。\
jQuery 语法基于 CSS 选择器,可以使用 CSS 选择器的大部分语法来查询 HTML 元素,如下所示:
$(this)
当前 HTML 元素。$("p")
所有<p>
元素。$("p:first")
第一个<p>
元素。$("ul li:first")
第一个<ul>
元素下的第一个<li>
元素。
基本事件绑定
$(selector).event(function(){
// event code
});
可以使用 jQuery 绑定事件,以及向元素添加或从元素删除事件处理程序。
$(document).ready(function())
当 页面文档加载完毕后才执行的代码。$(this).click(function() {})
当用户点击当前元素时执行代码。$("button").on("click", function() {})
当用户单击所有<button>
元素时执行代码。\
操作 HTML 元素
常用方法:
.html()
设置或获取所选元素的 HTML 内容。.text()
设置或获取所选元素的文本内容。.val()
获取或设置表单字段的值。
$("p").html(); // 获取 p 标签的 HTML 内容
$("p").html("Hello World!"); // 设置 HTML 内容
$("a").attr("href"); // 获取 href 属性值
$("input").val(); // 获取 input 的值
操作 CSS 样式
常用方法:
.addClass()
添加类.removeClass()
删除类.toggleClass()
如果类存在则删除,不存在则添加。
$("p").addClass("highlight"); // 添加类
$("p").removeClass("highlight"); // 删除类
$("p").toggleClass("highlight"); // 添加或删除类
jQuery 动画效果
常用方法:
.hide()
隐藏所选的元素。.show()
显示所选的元素。.toggle()
切换元素的可见状态。.fadeIn()
淡入元素。.fadeOut()
淡出元素。.slideUp()
向上滑动元素。.slideDown()
向下滑动元素。
$("p").hide(); // 隐藏 p 元素
$("p").show(); // 显示 p 元素
$("p").toggle(); // 切换 p 元素的可见性
$("p").fadeIn(); // 减弱 p 元素的 opacity 属性,使其淡入
$("p").fadeOut(); // 增加 p 元素的 opacity 属性,使其淡出
总结
本文介绍了 jQuery 的主要语法和概念,以及如何使用它来访问和修改 HTML 内容和样式,并处理事件。通过深入了解 jQuery,开发人员能够更有效地编写 JavaScript 代码,加速网站的开发和维护。