jQuery 安装

jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：

<head><script src="jquery-1.10.2.min.js"></script>
</head>

提示： 将下载的文件放在网页的同一目录下，就可以使用jQuery。

jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

美元符号定义 jQuery，即$=jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素 //this代表当前元素

$("p").hide() - 隐藏所有段落 //p代表段落元素

$("p .test").hide() - 隐藏所有 class="test" 的段落 . 代表类选择器

$("#test").hide() - 隐藏所有 id="test" 的元素 # 代表id选择器

文档就绪事件

在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){// 开始写 jQuery 代码...});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

jQuery 选择器

jQuery 中所有选择器都以美元符号开头：$()。

元素选择器

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有 <p> 元素:

$("p")

#id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下：

$("#test")

.class 选择器

jQuery 类选择器可以通过指定的class查找元素。

语法如下：

$(".test")

CSS 选择器

jQuery CSS 选择器可用于改变 HTML元素的CSS 属性。

实例

下面的例子把所有 p 元素的背景颜色更改为红色：

$("p").css("background-color","red");

jQuery 事件

常见 DOM 事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

jQuery 事件方法语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件：

$("p").click();

下一步是定义什么时间触发事件。您可以通过一个事件函数实现：

$("p").click(function(){        // action goes here!!
});

常用的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。

click()

click() 方法是当按钮点击事件被触发时会调用一个函数。

该函数在用户点击 HTML 元素时执行。

dblclick() //dbl是double的缩写

当双击元素时，会发生 dblclick 事件。

dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数

mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数

mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件。

mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数

mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数

mouseup()

当在元素上松开鼠标按钮时，会发生 mouseup 事件。

mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数

hover()

hover()方法用于模拟光标悬停事件。

当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

focus()

当元素获得焦点时，发生 focus 事件。

当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数

blur()

当元素失去焦点时，发生 blur 事件。

blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数

jQuery教程（整理自W3CSchool）（第一部分）相关推荐

W3School 教程整理
离线版大部分整理自 w3cschool ,少部分整理自w3school ,由本人整理. 感谢 w3cschool 站长的无私奉献. 由于本人精力有限,此处的列表不一定能够及时更新,最新版本请到本人博客 ...
jquery教程_jQuery教程
jquery教程 I have written a lot of jQuery tutorial articles. This is an index post for all the jQuery ...
html页面forEach用法,jQuery教程之使用模板动态添加html元素，相当于jstl里的foreach...
本篇文章探讨了jQuery教程之使用模板动态添加html元素,相当于jstl里的foreach,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < 1.开发的时候有时候要循 ...
W3School教程整理
W3School 教程整理前端教程合集在线浏览 AngularJS教程 Bootstrap教程 CSS参考手册 Foundation 教程 Highcharts 教程 HTML教程 CSS教程 F ...
jQuery-w3school（2020.2.16）【二、jQuery教程】
二.jQuery教程 (一)jQuery简介 1.jQuery 是一个 JavaScript 库.jQuery 极大地简化了 JavaScript 编程. 2. jQuery 库可以通过一行简单的标记 ...
【jQuery 教程系列第 10 篇】jQuery 中的过滤选择器（基本筛选器）
这是[jQuery 教程系列第 10 篇],如果觉得有用的话,欢迎关注专栏. jQuery 中除了一些基本选择器 ,也有一些过滤选择器,本篇博客仅挑选其中的几个简单说明一下,其它的大家可以点击 jQ ...
Pytorch 官方文档教程整理 (一)
Pytorch 官方文档教程整理 (一) 对应官方的 Instuction to Pytorch 前半部分运行的Python版本:3.9.12 所使用的库: numpy 1.23.0 pandas ...
html图片点击局部放大,jQuery教程 css+jQuery实现图片局部放大预览
本篇教程介绍了jQuery教程 css+jQuery实现图片局部放大预览,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < 今天有时间开始动手,使用css+jquer ...
jQuery教程8-特效函数
文章目录一.特效函数二.源码三.效果图篇章一.特效函数 jQuery框架提供了很多的特效函数. $(selector).slideDown(time,callBack) || $(selec ...
jQuery教程2---隐藏p标签内容-按钮
<head> <title>jQuery教程2---隐藏p标签内容</title> <script src="js/jQuery.js&qu ...

jQuery教程（整理自W3CSchool）（第一部分）