jQuery 的下载安装
JQuery库下载：https://jquery.com/download/
JQuery导入页面：
1
<head><script src="jquery-1.10.2.min.js"></script></head>
或者使用CDN服务导入；
1
百度CDN：
2
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
3
新浪 CDN:
4
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
5
Google CDN:
6
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
7
Microsoft CDN:
8
<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
基本语法
Query 语法是 Xpath 和 CSS选择器语法的组合
基础语法： $(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
示例：
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("p .test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素
文档就绪事件
所有 jQuery 函数位于一个 document ready 函数中：
1
$(document).ready(function(){
2
//JQuery代码块
3
});
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
以上函数的简洁语法
1
$(function(){
2
//JQuery代码块
3
});
选择器
元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p> 元素:
1
$("p")
#id 选择器
#id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
1
$("#test")
.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
1
$(".test")
其他基于 xpath 的选择器
JQuery的选择器语法可以直接使用CSS选择器和xpath选择器
通用的语法如下：
1
$("css选择器或xpath路径")
以下是一些示例：
关于选择器的完整更多示例参见 w3cshool 的参考手册：https://www.w3cschool.cn/jquery/jquery-ref-selectors.html
事件
JQuery中，大多数DOM事件都有一个等效的JQuery方法，如click()事件等；
这些方法直接空参数调用，大多是直接触发元素该事件，添加 function 参数调用则是为元素该事件添加监听器，如以下示例：
这些方法直接空参数调用，大多是直接触发元素该事件，添加 function 参数调用则是为元素该事件添加监听器，如以下示例：
1
$("button").click(); //直接触发button元素的click()事件
2
3
$("button").click(function(){ //为button的click动作注册function方法，并不触发button，该事件监听方法可以独立独立出来
4
$("p").hide();
5
});
JQuery 同一个元素的事件方法注册可以叠加使用；
一般JQuery的元素事件注册和触发会放置在文旦加载后才进行，如下：
1
$(document).ready(function(){
2
$("button").click(function(){
3
$("p").hide();
4
});
5
$("button").click();
6
});
7
//或者使用简练语法
8
$(function){
9
$("button").click(function(){
10
$("p").hide();
11
});
12
$("button").click();
13
}
常用的Jquery事件如下：
更多事件参见w3cshool的参考手册：https://www.w3cschool.cn/jquery/jquery-ref-events.html
837
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
