JS模块（JQuery）
文章目录
简介
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程
什么是jQuery
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
为什么使用jQuery
目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。
很多大公司都在使用 jQuery， 例如:
Google
Microsoft
IBM
Netflix
引入jQuery的方法
- 引入JQuery库文件
<!-- 引入JQuery库文件 -->
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
- CDN的方式 引入网络上的JQuery库文件
<!-- CDN的方式 引入网络上的JQuery库文件 -->
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.min.js"></script>
使用步骤
//1.下载Jquery可库文件
//2.在页面上引入库文件 <script src="js/jquery.js" type="text/javascript" charset="utf-8"/>
//3.使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 引入JQuery库文件 -->
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('button').click(function(){
alert("一树梨花压海棠");
})
})
</script>
</head>
<body>
<button type="button">one</button>
</body>
</html>
语法解释
$表示JQuery对象
$是 JQuery对象的缩写形式
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏 id="test" 的元素
文档就绪
$(document).ready(function(){
//jQuery 代码...
});
$(function(){
// jQuery 代码...
});
- 目的：防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作 如果在文档没有完全加载之前就运行函数，操作可能失败
jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()
- 元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p> 元素:
$("p")
<p> 元素隐藏
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
- id选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器
通过 id 选取元素语法：
$("#test")
id="test" 属性的元素将被隐藏
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
- .class选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下：
$(".test")
class="test" 属性的元素都隐藏
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
其他
| $("*") | 选取所有元素 |
|---|---|
| $(this) | 选取当前 HTML 元素 |
| $(“p.intro”) | 选取 class 为 intro 的 元素 |
| $(“p:first”) | 选取第一个 元素 |
| $(“ul li:first”) | 选取第一个
|
| $(“ul li:first-child”) | 选取每个
|
| $("[href]") | 选取带有 href 属性的元素 |
| $(“a[target=’_blank’]”) | 选取所有 target 属性值等于 “_blank” 的 元素 |
| $(“a[target!=’_blank’]”) | 选取所有 target 属性值不等于 “_blank” 的 元素 |
| $(":button") | 选取所有 type=“button” 的 元素 和 元素 |
| $(“tr:even”) | 选取偶数位置的 |
| $(“tr:odd”) | 选取奇数位置的 |
jQuery事件
jQuery 是为事件处理特别设计的
什么是事件？
页面对不同访问者的响应叫做事件
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
- 在元素上移动鼠标。
- 选取单选按钮
- 点击元素
常见 DOM 事件：
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload hover
jQuery 事件方法语法
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法
页面中指定一个点击事件：
$("p").click();
下一步是定义什么时间触发事件。您可以通过一个事件函数实现：
$("p").click(function(){ // 动作触发后执行的代码!! });
常见方法事件方法
$(document).ready()
$(document).ready() 方法允许我们在文档完全加载完后执行函数
click()
click() 方法是当按钮点击事件被触发时会调用一个函数
该函数在用户点击 HTML 元素时执行
$("p").click(function(){
$(this).hide();
});
//隐藏p
dblclick()
当双击元素时，会发生 dblclick 事件。
dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：
$("p").dblclick(function(){ $(this).hide(); });
mouseenter()
当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：
$("#p1").mouseenter(function(){ alert('您的鼠标移到了 id="p1" 的元素上!'); });
mouseleave()
当鼠标指针离开元素时，会发生 mouseleave 事件。
mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：
$("#p1").mouseleave(function(){ alert("再见，您的鼠标离开了该段落。"); });
mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：
$("#p1").mousedown(function(){
alert("鼠标在该段落上按下！");
});
mouseup()
当在元素上松开鼠标按钮时，会发生 mouseup 事件。
mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：
$("#p1").mouseup(function(){ alert("鼠标在段落上松开。"); });
hover()
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)
$("#p1").hover( function(){ alert("你进入了 p1!"); }, function(){ alert("拜拜! 现在你离开了 p1!"); } );
focus()
当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数
$("input").focus(function(){ $(this).css("background-color","#cccccc"); });
blur()
当元素失去焦点时，发生 blur 事件。
blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数
$("input").blur(function(){ $(this).css("background-color","#ffffff"); });
jQuery（DOM）获取内容和属性
jQuery 中非常重要的部分 就是操作 DOM
DOM = Document Object Model（文档对象模型） DOM 定义访问 HTML 和 XML 文档的标准： "W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。"
获得内容 - text()、html() 以及 val()
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
获取属性 - attr()
jQuery attr() 方法用于获取属性值。
$("button").click(function(){ alert($("#runoob").attr("href")); });
jQuery - 设置内容和属性
设置内容 - text()、html() 以及 val()
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("RUNOOB");
});
text()、html() 以及 val() 的回调函数
text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
});
});
设置属性 - attr()
- jQuery attr() 方法也用于设置/改变属性值
$("button").click(function(){
$("#runoob").attr("href","http://www.runoob.com/jquery");
});
- attr() 方法也允许您同时设置多个属性
$("button").click(function(){
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
});
});
attr() 的回调函数
jQuery 方法 attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串
$("button").click(function(){
$("#runoob").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
jQuery - 添加元素
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
jQuery append() 方法
jQuery append() 方法在被选元素的结尾插入内容（仍然在该元素的内部）。
$("p").append("追加文本");
jQuery prepend() 方法
jQuery prepend() 方法在被选元素的开头插入内容。
$("p").prepend("在开头追加文本");
通过 append() 和 prepend() 方法添加若干新元素
append() 和 prepend() 方法能够通过参数接收无限数量的新元素 可以通过 jQuery 来生成文本/HTML 或通过 JavaScript 代码和 DOM 元素
function appendText(){
var txt1="<p>文本-1。</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本-2。");//使用jQuery创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本-3。";//使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3);// 追加新元素
}
jQuery after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
$("img").after("在后面添加文本");
$("img").before("在前面添加文本");
通过 after() 和 before() 方法添加若干新元素
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素
function afterText()
{
var txt1="<b>I </b>"; // 使用 HTML 创建元素
var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素
var txt3=document.createElement("big"); // 使用 DOM 创建元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在图片后添加文本
}
总结
append/prepend 是在选择元素内部嵌入
after/before 是在元素外面追加
包裹节点
| **方法名 ** | **描述 ** |
|---|---|
| wrap(html) | 向指定元素包裹一层 html 代码 |
| wrap(element) | 向指定元素包裹一层 DOM 对象节点 |
| wrap(function (index) {}) | 使用匿名函数向指定元素包裹一层自定义内容 |
| unwrap() | 移除一层指定元素包裹的内容 |
| wrapAll(html) | 用 html 将所有元素包裹到一起 |
| wrapAll(element) | 用 DOM 对象将所有元素包裹在一起 |
| wrapInner(html) | 向指定元素的子内容包裹一层 html |
| wrapInner(element) | 向指定元素的子内容包裹一层 DOM 对象节点 |
| wrapInner(function (index) {}) | 用匿名函数向指定元素的子内容包裹一层 |
除了创建、插入和包裹节点，jQuery 还提供了一些常规的节点操作方法：复制、替换和删除节点。
//复制节点
$(‘body’).append($(‘div’).clone(true)); //复制一个节点添加到 HTML 中
注意：clone(true)参数可以为空，表示只复制元素和内容，不复制事件行为。而加上 true参数的话，这个元素附带的事件处理行为也复制出来。
//删除节点
$(‘div’).remove(); //直接删除 div 元素
注意：.remove()不带参数时，删除前面对象选择器指定的元素。
带选择符参数的，比如：
$(‘div’).remove(‘#box’);只删除 id=box 的 div。//保留事件的删除节点
$(‘div’).detach(); //保留事件行为的删除注意：.remove()和.detach()都是删除节点，而删除后本身方法可以返回当前被删除的节点对象，但区别在于前者在恢复时不保留事件行为，后者则保留。//清空节点
$(‘div’).empty(); //删除掉节点里的内容//替换节点
$(‘div’).replaceWith(‘<span>节点</span>’); //将 div 替换成 span 元素
$(‘<span>节点</span>’).replaceAll(‘div’); //同上
注意：节点被替换后，所包含的事件行为就全部消失了。
jQuery - 删除元素
通过 jQuery，可以很容易地删除已有的 HTML 元素
删除元素/内容
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
jQuery remove() 方法
jQuery remove() 方法删除被选元素及其子元素
$("#div1").remove();
jQuery empty() 方法
jQuery empty() 方法删除被选元素的子元素
$("#div1").empty();
过滤被删除的元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
//删除 class="italic" 的所有 <p> 元素
$("p").remove(".italic");
jQuery - 获取并设置 CSS 类
通过 jQuery，可以很容易地对 CSS 元素进行操作。
jQuery 操作 CSS
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
jQuery addClass() 方法
向不同的元素添加 class 属性
在添加类时，您也可以选取多个元素
$("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); });
您也可以在 addClass() 方法中规定多个类
$("button").click(function(){
$("body div:first").addClass("important blue"); });
jQuery removeClass() 方法
在不同的元素中删除指定的 class 属性
$("button").click(function(){ $("h1,h2,p").removeClass("blue"); });
jQuery toggleClass() 方法
对被选元素进行添加/删除类的切换操作
$("button").click(function(){ $("h1,h2,p").toggleClass("blue"); });
jQuery css() 方法
css() 方法设置或返回被选元素的一个或多个样式属性。
返回 CSS 属性
返回指定的 CSS 属性的值
css("*propertyname*");
返回首个匹配元素的 background-color 值
$("p").css("background-color");
设置 CSS 属性
设置指定的 CSS 属性
css("*propertyname*","*value*");
为所有匹配元素设置 background-color 值
$("p").css("background-color","yellow");
设置多个 CSS 属性
设置多个 CSS 属性
css({"*propertyname*":"*value*","*propertyname*":"*value*",...});
为所有匹配元素设置 background-color 和 font-size
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery 尺寸方法
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
$("button").click(function(){
var txt="";
txt+="div 的宽度是: " + $("#div1").width() + "</br>";
txt+="div 的高度是: " + $("#div1").height();
$("#div1").html(txt);
});
$("button").click(function(){
var txt="";
txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
txt+="div 高度，包含内边距: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
$("button").click(function(){
var txt="";
txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
jQuery 遍历
向上遍历 DOM 树
- parent()
- parents()
- parentsUntil()
jQuery parent() 方法
parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
返回每个 <span> 元素的直接父元素
$(document).ready(function(){ $("span").parent(); });
jQuery parents() 方法
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
返回所有 <span> 元素的所有祖先
$(document).ready(function(){ $("span").parents(); });
使用可选参数来过滤对祖先元素的搜索。
返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素
$(document).ready(function(){ $("span").parents("ul"); });
jQuery parentsUntil() 方法
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
返回介于 <span> 与 <div> 元素之间的所有祖先元素
$(document).ready(function(){ $("span").parentsUntil("div"); });
事件对象
事件对象就是 event 对象，通过处理函数默认传递接受。之前处理函数的 e 就是 event 事件对象，event 对象有很多可用的属性和方法
//通过处理函数传递事件对象
$(‘input’).bind(‘click’, function (e) {
//接受事件对象参数
alert(e); });
事件对象 event的属性
| **属性名 ** | **描述 ** |
|---|---|
| type | 获取这个事件的事件类型，例如：click |
| target | event.target 得到的是触发元素的 DOM对象 比如一个子层,在外层里面,给外层绑定了事件 那么你移入到子层,子层也能触发这个事件,那么event.targe获取到的是这个子层对象,因为他是触发事件的对象 |
| currentTarget | currentTarget 得到的是监听元素的DOM对象,等同与 this e. currentTarget 获取到的是,谁绑定的事件,那就是谁 |
| relatedTarget | 获取移入移出目标点,离开或进入的那个 DOM 元素 |
| data | 获取事件调用时的额外数据 |
| which | 获取鼠标的左中右键(1,2,3)，或获取键盘按键 |
事件之冒泡和默认行为
默认行为:一些元素本身就具有的行为,比如 a 标签的页面跳转行为 提交按钮的 提交表单行为,就是默认行为
冒泡行为:页面中重叠了多个元素，并且重叠的这些元素都绑定了同一个事件，那么就会出 现冒泡问题
我給 A B C 三个元素都设置了点击事件,那么当我点击C时 ,C,B,A 依次都会执行各自的点击事件,这种现象,称之为冒泡行为
| preventDefault() | 取消某个元素的默认行为 |
| stopPropagation() | 取消事件冒泡 |
| isDefaultPrevented() | 判断是否调用了 preventDefault()方法 |
| isPropagationStopped() | 判断是否调用了 stopPropagation()方法 |
| stopImmediatePropagation() | 取消事件冒泡，并取消该事件的后续事件处理函数 |
| isImmediatePropagationStopped() | 判断是否调用了 stopImmediatePropagation()方法 |
高级事件 on off one
目前绑定事件和解绑的方法 在 jQuery1.7 以后推出了.on()和.off()方法彻底摒弃bind()和unbind()。
老方式 绑定事件 bind() 新方式 on()
老方式 解绑事件 unbind() 新方式 off()
以后推荐使用新方式来绑定和解绑事件
//替代.bind()方式
$('.button').on('click', function () {alert('替代.bind()');});
//替代.bind()方式，并使用额外数据和事件对象
$('.button').on('click', {user : 'Lee'}, function (e) {
alert('替代.bind()' + e.data.user);
});
//替代.bind()方式，并绑定多个事件
$('.button').on('mouseover mouseout', function () {
alert('替代.bind()移入移出！');
});
//替代.bind()方式，以对象模式绑定多个事件
$('.button').on({
mouseover : function () {
alert('替代.bind()移入！');
},
mouseout : function () {
alert('替代.bind()移出！');
}
});
//替代.bind()方式，阻止默认行为并取消冒泡
$(‘form’).on(‘submit’, function () {
return false;//返回false 阻止默认行为和冒泡行为
});
或
$('form').on('submit', false);
//替代.bind()方式，阻止默认行为
$('form').on('submit', function (e) {
e.preventDefault();
});
//替代.bind()方式，取消冒泡
$('form').on('submit', function (e) {
e.stopPropagation();
});
//替代.unbind()方式，移除事件
$('.button').off('click');
$('.button').off('click', fn);
$('.button').off('click.abc');
One 表示事件执行一次
//类似于.bind()只触发一次
$('.button').one('click', function () {
alert('one 仅触发一次！');
});
例子:事件委托 給button的父元素 设置点击事件,让里面动态生成的子元素也具有点击事件
<div id="box">
<button>一个按钮</button>
</div>
//on普通事件委托
$('#box').on('click', 'button', function () {
$(this).clone().appendTo('#box');
});
//取消事件委托
$('#box').off('click', 'button');
高级事件 trigger和triggerHandler
- 浏览器一打开自动触发我们绑定的事件
$('button').bind('click', function() {
alert("点击了");
}).trigger('click');
- Trigger 传递数据
$('button').bind('click', function(e,data1,data2,data3) {
alert("取出trigger传过来的数据"+data1+"和"+data2[0]+"和"+data3.name);
}).trigger('click',['abc',[2,3],{name:'hello'}]);
//注意多个数据用[ ] 括起来,data1 ,data2,data3 指的就是[ ]中的数据
那么bind在绑定事件的时候也能传递数据,这里要跟trigger传递的数据区分一下
如果是bind传递的数据我们用事件对象e中的data属性取数据
$('button').bind('click',{age:'23'},function(e,data1,data2,data3) {
alert("取出trigger传过来的数据"+data1+"和"+data2[0]+"和"+data3.name+"和bind中传递的数据要用事件对象e中的data属性去取"+e.data.age);
}).trigger('click',['abc',[2,3],{name:'hello'}]);
- 自定义事件
$('button').bind('myEvent',function(){
alert('自定义事件');
}).trigger('myEvent');
- trigger 简写方案
.trigger()方法提供了简写方案，只要想让某个事件执行模拟用户行为，直接再调用一个
空的同名事件即可。
$('button').bind('click', function() {
alert("点击了");
}).trigger('click');
//上面的可以简写为如下的:
$('input').click(function () {
alert('我的第一次点击来自模拟！');
}).click(); //空的 click()执行的是 trigger()
这种便捷的方法，jQuery 几乎个所有常用的事件都提供了。
blur focusin mousedown resize
change focusout mousenter scroll
click keydown mouseleave select
dblclick keypress mousemove submit
error keyup mouseout unload
focus load mouseover
//注意为了语义性更加好,一般不推荐简写方案,当然你要使用也是没有问题的
- triggerHandler()
jQuery 还提供了另外一个模拟用户行为的方法：.triggerHandler()；这个方法的使用
和.trigger()方法一样。
$('input').click(function () {
alert('我的第一次点击来自模拟！');
}).triggerHandler('click');
- trigger和triggerHandler的区别
区别1:
1..triggerHandler()方法并不会触发事件的默认行为，而.trigger()会
<form action="123.html" method="get">
<input type="submit" value="提交" />
</form>
$('form').trigger('submit'); //模拟用户执行提交，并跳转到执行页面
$('form').triggerHandler('submit'); //模拟用户执行提交，并阻止的默认行为
如果我们希望使用.trigger()来模拟用户提交，并且阻止事件的默认行为，则需要这么写：
$('form').submit(function (e) {
e.preventDefault(); //阻止默认行为
}).trigger('submit');
区别2..triggerHandler()方法只会影响第一个匹配到的元素，而.trigger()会影响所有。
例如:我给三个按钮都设置了点击事件 用trigger会弹三次 用triggerHandler只弹一次
<body>
<button>一个按钮</button>
<button>一个按钮</button>
<button>一个按钮</button>
</body>
$('button').bind('click',function(){
alert(‘弹了’);//弹三次
}).trigger('click');
$('button').bind('click',function(){
alert(‘弹了’); //弹一次
}). triggerHandler('click');
区别3..triggerHandler()方法会返回当前事件执行的返回值，如果没有返回值，则返回undefined；而.trigger()则返回当前包含事件触发元素的 jQuery 对象(方便链式连缀调用)。
$('button').bind('click',function(){
alert("弹了");
}).trigger(‘click’).css({‘background’:‘red’});//返回的是这个按钮对象可以连调
alert($('input').click(function () {
return 123;
}).triggerHandler('click')); //返回 123，没有 return 返回
区别4..trigger()在创建事件的时候，会冒泡。但这种冒泡是自定义事件才能体现出来，是jQuery 扩展于 DOM 的机制，并非 DOM 特性。而.triggerHandler()不会冒泡。
<body>
<div>
<div>一个按钮</div>
</div>
</body>
$('div').bind('myEvent', function() {
alert(“div弹了”); //不会冒泡弹一次
}).triggerHandler('myEvent');
$(function() {
$('div').bind('myEvent', function() {
alert(“div弹了”);//会冒泡 弹三次
}).trigger('myEvent');
});
jQuery 遍历
向下遍历 DOM 树
下面是两个用于向下遍历 DOM 树的 jQuery 方法：
- children()
- find()
jQuery children() 方法
children() 方法返回被选元素的所有直接子元素 该方法只会向下一级对 DOM 树进行遍历
下面的例子返回每个 <div> 元素的所有直接子元素
$(document).ready(function(){ $("div").children(); });
使用可选参数来过滤对子元素的搜索。
返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素
$(document).ready(function(){ $("div").children("p.1"); });
jQuery find() 方法
find() 方法返回被选元素的后代元素 一路向下直到最后一个后代
返回属于 <div> 后代的所有 <span> 元素
$(document).ready(function(){ $("div").find("span"); });
返回 <div> 的所有后代
$(document).ready(function(){ $("div").find("*"); });
jQuery 遍历同胞(siblings)
在 DOM 树中水平遍历
- siblings()
- next()
- nextAll()
- nextUntil()
- prev()
- prevAll()
- prevUntil()
jQuery siblings() 方法
siblings() 方法返回被选元素的所有同胞元素
返回 <h2> 的所有同胞元素
$(document).ready(function(){ $("h2").siblings(); });
使用可选参数来过滤对同胞元素的搜索。
返回属于 <h2> 的同胞元素的所有 <p> 元素：
$(document).ready(function(){ $("h2").siblings("p"); });
jQuery next() 方法
next() 方法返回被选元素的下一个同胞元素 该方法只返回一个元素
返回 <h2> 的下一个同胞元素
$(document).ready(function(){ $("h2").next(); });
jQuery nextAll() 方法
nextAll() 方法返回被选元素的所有跟随的同胞元素
返回 <h2> 的所有跟随的同胞元素
$(document).ready(function(){ $("h2").nextAll(); });
jQuery nextUntil() 方法
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素
返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
$(document).ready(function(){ $("h2").nextUntil("h6"); });
jQuery prev(), prevAll() & prevUntil() 方法
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）
jQuery 遍历- 过滤
缩小搜索元素的范围
first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素
filter() 和 not() 选取匹配或不匹配某项指定标准的元素
jQuery first() 方法
first() 方法返回被选元素的首个元素
选取首个 <div> 元素内部的第一个 <p> 元素
$(document).ready(function(){ $("div p").first(); });
jQuery last() 方法
last() 方法返回被选元素的最后一个元素。
选择最后一个 <div> 元素中的最后一个 <p> 元素
$(document).ready(function(){ $("div p").last(); });
jQuery eq() 方法
eq() 方法返回被选元素中带有指定索引号的元素。
选取第二个 <p> 元素（索引号 1）
$(document).ready(function(){ $("p").eq(1); });
jQuery filter() 方法
filter() 方法允许您规定一个标准 不匹配这个标准的元素会被从集合中删除 匹配的元素会被返回
返回带有类名 "url" 的所有 <p> 元素
$(document).ready(function(){ $("p").filter(".url"); });
jQuery not() 方法
not() 方法返回不匹配标准的所有元素 not() 方法与 filter() 相反
返回不带有类名 "url" 的所有 <p> 元素
$(document).ready(function(){ $("p").not(".url"); });
jQuery - AJAX 简介
AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新
什么是 AJAX？
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）
在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示
jQuery load() 方法
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法:$(selector).load(URL,data,callback);
必需的 *URL* 参数规定您希望加载的 URL
可选的 *data* 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 *callback* 参数是 load() 方法完成后所执行的函数名称
把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中
$("#div1").load("demo_test.txt");
把 jQuery 选择器添加到 URL 参数
把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中
$("#div1").load("demo_test.txt #p1");
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
- *responseTxt* - 包含调用成功时的结果内容
- *statusTXT* - 包含调用的状态
- *xhr* - 包含 XMLHttpRequest 对象
load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示"外部内容加载成功！"，而如果失败，则显示错误消息：
$("button").click(function(){ $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert("外部内容加载成功!"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); }); });
jQuery - AJAX get() 和 post() 方法
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据
#### HTTP 请求：GET vs. POST
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
- GET - 从指定的资源请求数据
- *POST* - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得数据 GET 方法可能返回缓存数据
POST 也可用于从服务器获取数据 POST 方法不会缓存数据 并且常用于连同请求一起发送数据
#### jQuery $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
### 语法：
$.get(*URL*,*callback*);
必需的 *URL* 参数规定您希望请求的 URL。
可选的 *callback* 参数是请求成功后所执行的函数名。
$.get() 方法从服务器上的一个文件中取回数据
$("button").click(function(){ $.get("demo_test.php",function(data,status){ alert("数据: " + data + "\n状态: " + status); }); });
$.get() 的第一个参数是我们希望请求的 URL（"demo_test.php"）。
第二个参数是回调函
第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态
jQuery $.post() 方法
$.post() 方法通过 HTTP POST 请求向服务器提交数据。
**语法:**
$.post(*URL,data,callback*);
必需的 *URL* 参数规定您希望请求的 URL。
可选的 *data* 参数规定连同请求发送的数据。
可选的 *callback* 参数是请求成功后所执行的函数名。
使用 $.post() 连同请求一起发送数据
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php", { name:"菜鸟教程", url:"http://www.runoob.com" }, function(data,status){ alert("数据: \n" + data + "\n状态: " + status); }); });
$.post() 的第一个参数是请求的 URL ("demo_test_post.php")。
然后连请求（name 和 url）一起发送数据。
"demo_test_post.php" 中的 PHP 脚本读取这些参数，对它们进行处理，然后返回结果
第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态
jQuery noConflict() 方法
- noConflict() 方法会释放对 $ 标识符的控制 其他脚本就可以使用它
- 可以通过全名替代简写的方式来使用 jQuery
$.noConflict(); jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery 仍然在工作!"); }); });
- 创建自己的简写 noConflict() 可返回对 jQuery 的引用
var jq = $.noConflict(); jq(document).ready(function(){ jq("button").click(function(){ jq("p").text("jQuery 仍然在工作!"); }); });
- jQuery 代码块使用 $ 简写，可以把 $ 符号作为变量传递给 ready 方法 函数内使用 $ 符号 而在函数外 不得不使用 “jQuery”
$.noConflict(); jQuery(document).ready(function($){ $("button").click(function(){ $("p").text("jQuery 仍然在工作!"); }); });
jQuery 效果
- jQuery hide() 和 show() 隐藏和显示 HTML 元素：
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称
$("button").click(function(){
$("p").hide(1000);
});
$(document).ready(function(){
$(".hidebtn").click(function(){
$("div").hide(1000,"linear",function(){
alert("Hide() 方法已完成!");
});
});
});
- jQuery toggle() 切换 hide() 和 show() 方法 显示被隐藏的元素，并隐藏已显示的元素
$("button").click(function(){
$("p").toggle();
});
- jQuery fadeIn() 用于淡入已隐藏的元素
语法:
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒
可选的 callback 参数是 fading 完成后所执行的函数名称。
有不同参数的 fadeIn() 方法：
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
- jQuery fadeOut() 方法用于淡出可见元素
语法:
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
有不同参数的 fadeOut() 方法：
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
- jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
- 如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果
- 如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果
语法:
$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
有不同参数的 fadeToggle() 方法：
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
- jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
语法:
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
有不同参数的 fadeTo() 方法：
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
- jQuery slideDown() 方法用于向下滑动元素
语法:
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
$("#flip").click(function(){
$("#panel").slideDown();
});
- jQuery slideUp() 方法用于向上滑动元素
语法:
$(selector).slideUp(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
$("#flip").click(function(){
$("#panel").slideUp();
});
- jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换
- 如果元素向下滑动，则 slideToggle() 可向上滑动它们
- 如果元素向上滑动，则 slideToggle() 可向下滑动它们
$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
$("#flip").click(function(){
$("#panel").slideToggle();
});
- jQuery animate() 方法用于创建自定义动画
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
<div> 元素往右边移动了 250 像素：
$("button").click(function(){
$("div").animate({left:'250px'});
});
jQuery animate() - 操作多个属性
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
jQuery animate() - 使用相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
jQuery animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
jQuery animate() - 使用队列功能
编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
<div> 元素往右边移动了 100 像素，然后增加文本的字号：
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
- jQuery stop() 方法用于停止动画或效果，在它们完成之前 stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画
语法:
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画
不带参数：
$("#stop").click(function(){ $("#panel").stop(); });
- jQuery Callback 方法 Callback 函数在当前动画 100% 完成之后执行
$("p").hide("slow")
speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。
在隐藏效果完全实现后回调函数:
使用 callback 实例
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
});
没有回调函数，警告框会在隐藏效果完成前弹出：
没有 callback(回调)
$("button").click(function(){
$("p").hide(1000);
alert("段落现在被隐藏了");
});
- jQuery - 链(Chaining)
- Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）如需链接一个动作，您只需简单地把该动作追加到之前的动作上
"p1" 元素首先会变为红色，然后向上滑动，再然后向下滑动：
实例
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
jQuery 会抛掉多余的空格，并当成一行长代码来执行上面的代码行
jQuery 事件方法总览
| 方法 | 描述 |
|---|---|
| bind() | 向元素添加事件处理程序 |
| blur() | 添加/触发失去焦点事件 |
| change() | 添加/触发 change 事件 |
| click() | 添加/触发 click 事件 |
| dblclick() | 添加/触发 double click 事件 |
| delegate() | 向匹配元素的当前或未来的子元素添加处理程序 |
| die() | 在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序 |
| error() | 在版本 1.8 中被废弃。添加/触发 error 事件 |
| event.currentTarget | 在事件冒泡阶段内的当前 DOM 元素 |
| event.data | 包含当前执行的处理程序被绑定时传递到事件方法的可选数据 |
| event.delegateTarget | 返回当前调用的 jQuery 事件处理程序所添加的元素 |
| event.isDefaultPrevented() | 返回指定的 event 对象上是否调用了 event.preventDefault() |
| event.isImmediatePropagationStopped() | 返回指定的 event 对象上是否调用了 event.stopImmediatePropagation() |
| event.isPropagationStopped() | 返回指定的 event 对象上是否调用了 event.stopPropagation() |
| event.namespace | 返回当事件被触发时指定的命名空间 |
| event.pageX | 返回相对于文档左边缘的鼠标位置 |
| event.pageY | 返回相对于文档上边缘的鼠标位置 |
| event.preventDefault() | 阻止事件的默认行为 |
| event.relatedTarget | 返回当鼠标移动时哪个元素进入或退出 |
| event.result | 包含由被指定事件触发的事件处理程序返回的最后一个值 |
| event.stopImmediatePropagation() | 阻止其他事件处理程序被调用 |
| event.stopPropagation() | 阻止事件向上冒泡到 DOM 树，阻止任何父处理程序被事件通知 |
| event.target | 返回哪个 DOM 元素触发事件 |
| event.timeStamp | 返回从 1970 年 1 月 1 日到事件被触发时的毫秒数 |
| event.type | 返回哪种事件类型被触发 |
| event.which | 返回指定事件上哪个键盘键或鼠标按钮被按下 |
| event.metaKey | 事件触发时 META 键是否被按下 |
| focus() | 添加/触发 focus 事件 |
| focusin() | 添加事件处理程序到 focusin 事件 |
| focusout() | 添加事件处理程序到 focusout 事件 |
| hover() | 添加两个事件处理程序到 hover 事件 |
| keydown() | 添加/触发 keydown 事件 |
| keypress() | 添加/触发 keypress 事件 |
| keyup() | 添加/触发 keyup 事件 |
| live() | 在版本 1.9 中被移除。添加一个或多个事件处理程序到当前或未来的被选元素 |
| load() | 在版本 1.8 中被废弃。添加一个事件处理程序到 load 事件 |
| mousedown() | 添加/触发 mousedown 事件 |
| mouseenter() | 添加/触发 mouseenter 事件 |
| mouseleave() | 添加/触发 mouseleave 事件 |
| mousemove() | 添加/触发 mousemove 事件 |
| mouseout() | 添加/触发 mouseout 事件 |
| mouseover() | 添加/触发 mouseover 事件 |
| mouseup() | 添加/触发 mouseup 事件 |
| off() | 移除通过 on() 方法添加的事件处理程序 |
| on() | 向元素添加事件处理程序 |
| one() | 向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次 |
| $.proxy() | 接受一个已有的函数，并返回一个带特定上下文的新的函数 |
| ready() | 规定当 DOM 完全加载时要执行的函数 |
| resize() | 添加/触发 resize 事件 |
| scroll() | 添加/触发 scroll 事件 |
| select() | 添加/触发 select 事件 |
| submit() | 添加/触发 submit 事件 |
| toggle() | 在版本 1.9 中被移除。添加 click 事件之间要切换的两个或多个函数 |
| trigger() | 触发绑定到被选元素的所有事件 |
| triggerHandler() | 触发绑定到被选元素的指定事件上的所有函数 |
| unbind() | 从被选元素上移除添加的事件处理程序 |
| undelegate() | 从现在或未来的被选元素上移除事件处理程序 |
| unload() | 在版本 1.8 中被废弃。添加事件处理程序到 unload 事件 |
| contextmenu() | 添加事件处理程序到 contextmenu 事件 |
| $.holdReady() | 用于暂停或恢复.ready() 事件的执行 |
jQuery 选择器总览
| 选择器 | 实例 | 选取 |
|---|---|---|
| * | $("*") | 所有元素 |
| #id | $("#lastname") | id=“lastname” 的元素 |
| .class | $(".intro") | class=“intro” 的所有元素 |
| .class,.class | $(".intro,.demo") | class 为 “intro” 或 “demo” 的所有元素 |
| element | $(“p”) | 所有 元素 |
| el1,el2,el3 | $(“h1,div,p”) | 所有 、
元素 |
| :first | $(“p:first”) | 第一个 元素 |
| :last | $(“p:last”) | 最后一个 元素 |
| :even | $(“tr:even”) | 所有偶数 |
| :odd | $(“tr:odd”) | 所有奇数 |
| :first-child | $(“p:first-child”) | 属于其父元素的第一个子元素的所有 元素 |
| :first-of-type | $(“p:first-of-type”) | 属于其父元素的第一个 元素的所有 元素 |
| :last-child | $(“p:last-child”) | 属于其父元素的最后一个子元素的所有 元素 |
| :last-of-type | $(“p:last-of-type”) | 属于其父元素的最后一个 元素的所有 元素 |
| :nth-child(n) | $(“p:nth-child(2)”) | 属于其父元素的第二个子元素的所有 元素 |
| :nth-last-child(n) | $(“p:nth-last-child(2)”) | 属于其父元素的第二个子元素的所有 元素，从最后一个子元素开始计数 |
| :nth-of-type(n) | $(“p:nth-of-type(2)”) | 属于其父元素的第二个 元素的所有 元素 |
| :nth-last-of-type(n) | $(“p:nth-last-of-type(2)”) | 属于其父元素的第二个 元素的所有 元素，从最后一个子元素开始计数 |
| :only-child | $(“p:only-child”) | 属于其父元素的唯一子元素的所有 元素 |
| :only-of-type | $(“p:only-of-type”) | 属于其父元素的特定类型的唯一子元素的所有 元素 |
| parent > child | $(“div > p”) |
元素的直接子元素的所有
元素 |
| parent descendant | $(“div p”) |
元素的后代的所有
元素 |
| element + next | $(“div + p”) | 每个
元素相邻的下一个
元素 |
| element ~ siblings | $(“div ~ p”) |
元素同级的所有
元素 |
| :eq(index) | $(“ul li:eq(3)”) | 列表中的第四个元素（index 值从 0 开始） |
| :gt(no) | $(“ul li:gt(3)”) | 列举 index 大于 3 的元素 |
| :lt(no) | $(“ul li:lt(3)”) | 列举 index 小于 3 的元素 |
| :not(selector) | $(“input:not(:empty)”) | 所有不为空的输入元素 |
| :header | $(":header") | 所有标题元素 ,… |
| :animated | $(":animated") | 所有动画元素 |
| :focus | $(":focus") | 当前具有焦点的元素 |
| :contains(text) | $(":contains(‘Hello’)") | 所有包含文本 “Hello” 的元素 |
| :has(selector) | $(“div:has§”) | 所有包含有 元素在其内的
元素
|
| :empty | $(":empty") | 所有空元素 |
| :parent | $(":parent") | 匹配所有含有子元素或者文本的父元素。 |
| :hidden | $(“p:hidden”) | 所有隐藏的 元素 |
| :visible | $(“table:visible”) | 所有可见的表格 |
| :root | $(":root") | 文档的根元素 |
| :lang(language) | $(“p:lang(de)”) | 所有 lang 属性值为 “de” 的 元素 |
| [attribute] | $("[href]") | 所有带有 href 属性的元素 |
| [attribute=value] | $("[href=‘default.htm’]") | 所有带有 href 属性且值等于 “default.htm” 的元素 |
| [attribute!=value] | $("[href!=‘default.htm’]") | 所有带有 href 属性且值不等于 “default.htm” 的元素 |
| [attribute$=value] | ( " [ h r e f ("[href ("[href=’.jpg’]") | 所有带有 href 属性且值以 “.jpg” 结尾的元素 |
| [attribute|=value] | $("[title|=‘Tomorrow’]") | 所有带有 title 属性且值等于 ‘Tomorrow’ 或者以 ‘Tomorrow’ 后跟连接符作为开头的字符串 |
| [attribute^=value] | $("[title^=‘Tom’]") | 所有带有 title 属性且值以 “Tom” 开头的元素 |
| [attribute~=value] | $("[title~=‘hello’]") | 所有带有 title 属性且值包含单词 “hello” 的元素 |
| [attribute*=value] | $("[title*=‘hello’]") | 所有带有 title 属性且值包含字符串 “hello” 的元素 |
| [name=value][name2=value2] | ( " i n p u t [ i d ] [ n a m e ( "input[id][name ("input[id][name=‘man’]" ) | 带有 id 属性，并且 name 属性以 man 结尾的输入框 |
| :input | $(":input") | 所有 input 元素 |
| :text | $(":text") | 所有带有 type=“text” 的 input 元素 |
| :password | $(":password") | 所有带有 type=“password” 的 input 元素 |
| :radio | $(":radio") | 所有带有 type=“radio” 的 input 元素 |
| :checkbox | $(":checkbox") | 所有带有 type=“checkbox” 的 input 元素 |
| :submit | $(":submit") | 所有带有 type=“submit” 的 input 元素 |
| :reset | $(":reset") | 所有带有 type=“reset” 的 input 元素 |
| :button | $(":button") | 所有带有 type=“button” 的 input 元素 |
| :image | $(":image") | 所有带有 type=“image” 的 input 元素 |
| :file | $(":file") | 所有带有 type=“file” 的 input 元素 |
| :enabled | $(":enabled") | 所有启用的元素 |
| :disabled | $(":disabled") | 所有禁用的元素 |
| :selected | $(":selected") | 所有选定的下拉列表元素 |
| :checked | $(":checked") | 所有选中的复选框选项 |
| .selector | $(selector).selector | 在jQuery 1.7中已经不被赞成使用。返回传给jQuery()的原始选择器 |
| :target | $( “p:target” ) | 选择器将选中ID和URI中一个格式化的标识符相匹配的 元素 |
jQuery HTML / CSS 方法总览
| 方法 | 描述 |
|---|---|
| addClass() | 向被选元素添加一个或多个类名 |
| after() | 在被选元素后插入内容 |
| append() | 在被选元素的结尾插入内容 |
| appendTo() | 在被选元素的结尾插入 HTML 元素 |
| attr() | 设置或返回被选元素的属性/值 |
| before() | 在被选元素前插入内容 |
| clone() | 生成被选元素的副本 |
| css() | 为被选元素设置或返回一个或多个样式属性 |
| detach() | 移除被选元素（保留数据和事件） |
| empty() | 从被选元素移除所有子节点和内容 |
| hasClass() | 检查被选元素是否包含指定的 class 名称 |
| height() | 设置或返回被选元素的高度 |
| html() | 设置或返回被选元素的内容 |
| innerHeight() | 返回元素的高度（包含 padding，不包含 border） |
| innerWidth() | 返回元素的宽度（包含 padding，不包含 border） |
| insertAfter() | 在被选元素后插入 HTML 元素 |
| insertBefore() | 在被选元素前插入 HTML 元素 |
| offset() | 设置或返回被选元素的偏移坐标（相对于文档） |
| offsetParent() | 返回第一个定位的祖先元素 |
| outerHeight() | 返回元素的高度（包含 padding 和 border） |
| outerWidth() | 返回元素的宽度（包含 padding 和 border） |
| position() | 返回元素的位置（相对于父元素） |
| prepend() | 在被选元素的开头插入内容 |
| prependTo() | 在被选元素的开头插入 HTML 元素 |
| prop() | 设置或返回被选元素的属性/值 |
| remove() | 移除被选元素（包含数据和事件） |
| removeAttr() | 从被选元素移除一个或多个属性 |
| removeClass() | 从被选元素移除一个或多个类 |
| removeProp() | 移除通过 prop() 方法设置的属性 |
| replaceAll() | 把被选元素替换为新的 HTML 元素 |
| replaceWith() | 把被选元素替换为新的内容 |
| scrollLeft() | 设置或返回被选元素的水平滚动条位置 |
| scrollTop() | 设置或返回被选元素的垂直滚动条位置 |
| text() | 设置或返回被选元素的文本内容 |
| toggleClass() | 在被选元素中添加/移除一个或多个类之间切换 |
| unwrap() | 移除被选元素的父元素 |
| val() | 设置或返回被选元素的属性值（针对表单元素） |
| width() | 设置或返回被选元素的宽度 |
| wrap() | 在每个被选元素的周围用 HTML 元素包裹起来 |
| wrapAll() | 在所有被选元素的周围用 HTML 元素包裹起来 |
| wrapInner() | 在每个被选元素的内容周围用 HTML 元素包裹起来 |
| $.escapeSelector() | 转义CSS选择器中有特殊意义的字符或字符串 |
| $.cssHooks | 提供了一种方法通过定义函数来获取和设置特定的CSS值 |
jQuery 遍历方法总览
| 方法 | 描述 |
|---|---|
| add() | 把元素添加到匹配元素的集合中 |
| addBack() | 把之前的元素集添加到当前集合中 |
| andSelf() | 在版本 1.8 中被废弃。addBack() 的别名 |
| children() | 返回被选元素的所有直接子元素 |
| closest() | 返回被选元素的第一个祖先元素 |
| contents() | 返回被选元素的所有直接子元素（包含文本和注释节点） |
| each() | 为每个匹配元素执行函数 |
| end() | 结束当前链中最近的一次筛选操作，并把匹配元素集合返回到前一次的状态 |
| eq() | 返回带有被选元素的指定索引号的元素 |
| filter() | 把匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素 |
| find() | 返回被选元素的后代元素 |
| first() | 返回被选元素的第一个元素 |
| has() | 返回拥有一个或多个元素在其内的所有元素 |
| is() | 根据选择器/元素/jQuery 对象检查匹配元素集合，如果存在至少一个匹配元素，则返回 true |
| last() | 返回被选元素的最后一个元素 |
| map() | 把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象 |
| next() | 返回被选元素的后一个同级元素 |
| nextAll() | 返回被选元素之后的所有同级元素 |
| nextUntil() | 返回介于两个给定参数之间的每个元素之后的所有同级元素 |
| not() | 从匹配元素集合中移除元素 |
| offsetParent() | 返回第一个定位的父元素 |
| parent() | 返回被选元素的直接父元素 |
| parents() | 返回被选元素的所有祖先元素 |
| parentsUntil() | 返回介于两个给定参数之间的所有祖先元素 |
| prev() | 返回被选元素的前一个同级元素 |
| prevAll() | 返回被选元素之前的所有同级元素 |
| prevUntil() | 返回介于两个给定参数之间的每个元素之前的所有同级元素 |
| siblings() | 返回被选元素的所有同级元素 |
| slice() | 把匹配元素集合缩减为指定范围的子集 |
jQuery AJAX 方法总览
| 方法 | 描述 |
|---|---|
| $.ajax() | 执行异步 AJAX 请求 |
| $.ajaxPrefilter() | 在每个请求发送之前且被 $.ajax() 处理之前，处理自定义 Ajax 选项或修改已存在选项 |
| $.ajaxSetup() | 为将来的 AJAX 请求设置默认值 |
| $.ajaxTransport() | 创建处理 Ajax 数据实际传送的对象 |
| $.get() | 使用 AJAX 的 HTTP GET 请求从服务器加载数据 |
| $.getJSON() | 使用 HTTP GET 请求从服务器加载 JSON 编码的数据 |
| $.getScript() | 使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript |
| $.param() | 创建数组或对象的序列化表示形式（可用于 AJAX 请求的 URL 查询字符串） |
| $.post() | 使用 AJAX 的 HTTP POST 请求从服务器加载数据 |
| ajaxComplete() | 规定 AJAX 请求完成时运行的函数 |
| ajaxError() | 规定 AJAX 请求失败时运行的函数 |
| ajaxSend() | 规定 AJAX 请求发送之前运行的函数 |
| ajaxStart() | 规定第一个 AJAX 请求开始时运行的函数 |
| ajaxStop() | 规定所有的 AJAX 请求完成时运行的函数 |
| ajaxSuccess() | 规定 AJAX 请求成功完成时运行的函数 |
| load() | 从服务器加载数据，并把返回的数据放置到指定的元素中 |
| serialize() | 编码表单元素集为字符串以便提交 |
| serializeArray() | 编码表单元素集为 names 和 values 的数组 |
jQuery 杂项方法总览
| 方法 | 描述 |
|---|---|
| data() | 向被选元素附加数据，或者从被选元素获取数据 |
| each() | 为每个匹配元素执行函数 |
| get() | 获取由选择器指定的 DOM 元素 |
| index() | 从匹配元素中搜索给定元素 |
| $.noConflict() | 释放变量 $ 的 jQuery 控制权 |
| $.param() | 创建数组或对象的序列化表示形式（可在生成 AJAX 请求时用于 URL 查询字符串中） |
| removeData() | 移除之前存放的数据 |
| size() | 在版本 1.8 中被废弃。返回被 jQuery 选择器匹配的 DOM 元素的数量 |
| toArray() | 以数组的形式检索所有包含在 jQuery 集合中的所有 DOM 元素 |
| pushStack() | 将一个DOM元素集合加入到jQuery栈 |
| $.when() | 提供一种方法来执行一个或多个对象的回调函数 |
jQuery 实用工具总览
| 方法 | 描述 |
|---|---|
| $.boxModel | 在版本 1.8 中被废弃。检测浏览器是否使用W3C的CSS盒模型渲染当前页面 |
| $.browser | 在版本 1.9 中被废弃。返回用户当前使用的浏览器的相关信息 |
| $.contains() | 判断另一个DOM元素是否是指定DOM元素的后代 |
| $.each() | 遍历指定的对象和数组 |
| $.extend() | 将一个或多个对象的内容合并到目标对象 |
| $.fn.extend() | 为jQuery扩展一个或多个实例属性和方法 |
| $.globalEval() | 全局性地执行一段JavaScript代码 |
| $.grep() | 过滤并返回满足指定函数的数组元素 |
| $.inArray() | 在数组中查找指定值并返回它的索引值（如果没有找到，则返回-1） |
| $.isArray() | 判断指定参数是否是一个数组 |
| $.isEmptyObject() | 检查对象是否为空（不包含任何属性） |
| $.isFunction() | 判断指定参数是否是一个函数 |
| $.isNumeric() | 判断指定参数是否是一个数字值 |
| $.isPlainObject() | 判断指定参数是否是一个纯粹的对象 |
| $.isWindow() | 判断指定参数是否是一个窗口 |
| $.isXMLDoc() | 判断一个DOM节点是否位于XML文档中，或者其本身就是XML文档 |
| $.makeArray() | 将一个类似数组的对象转换为真正的数组对象 |
| $.map() | 指定函数处理数组中的每个元素(或对象的每个属性)，并将处理结果封装为新的数组返回 |
| $.merge() | 合并两个数组内容到第一个数组 |
| $.noop() | 一个空函数 |
| $.now() | 返回当前时间 |
| $.parseHTML() | 将HTML字符串解析为对应的DOM节点数组 |
| $.parseJSON() | 将符合标准格式的JSON字符串转为与之对应的JavaScript对象 |
| $.parseXML() | 将字符串解析为对应的XML文档 |
| $.trim() | 去除字符串两端的空白字符 |
| $.type() | 确定JavaScript内置对象的类型 |
| $.unique() | 在jQuery 3.0中被弃用。对DOM元素数组进行排序，并移除重复的元素 |
| $.uniqueSort() | 对DOM元素数组进行排序，并移除重复的元素 |
| $.data() | 在指定的元素上存取数据，并返回设置值 |
| $.hasData() | 确定一个元素是否有相关的jQuery数据 |
| $.sub() | 创建一个新的jQuery副本，其属性和方法可以修改，而不会影响原来的jQuery对象 |
| $.speed | 创建一个包含一组属性的对象用来定义自定义动画 |
| $.htmlPrefilter() | 通过jQuery操作方法修改和过滤HTML字符串 |
| $.readyException() | 处理包裹在jQuery()中函数同步抛出的错误 |
jQuery 回调对象总览
jQuery 1.7 版本中新增的 jQuery.Callbacks() 函数,返回一个多功能对象，此对象提供了一种强大的方法来管理回调列表。它能够增加、删除、触发、禁用回调函数
| 方法 | 描述 |
|---|---|
| $.Callbacks() | 一个多用途的回调列表对象，用来管理回调函数列表 |
| callbacks.add() | 在回调列表中添加一个回调或回调的集合 |
| callbacks.disable() | 禁用回调列表中的回调函数 |
| callbacks.disabled() | 确定回调列表是否已被禁用 |
| callbacks.empty() | 从列表中清空所有的回调 |
| callbacks.fire() | 传入指定的参数调用所有的回调 |
| callbacks.fired() | 确定回调是否至少已经调用一次 |
| callbacks.firewith() | 给定的上下文和参数访问列表中的所有回调 |
| callbacks.has() | 判断回调列表中是否添加过某回调函数 |
| callbacks.lock() | 锁定当前状态的回调列表 |
| callbacks.locked() | 判断回调列表是否被锁定 |
| callbacks.remove() | 从回调列表中的删除一个回调或回调集合 |
jQuery 延迟对象总览
Deferred 延迟对象，它是通过调用 jQuery.Deferred() 方法来创建的可链接的实用对象。它可注册多个回调函数到回调列表，调用回调列表并且传递异步或同步功能的成功或失败的状态
延迟对象是可链接的，类似于一个 jQuery 对象可链接的方式，区别于它有自己的方法。在创建一个 Deferred 对象之后，直接链接到通过调用一个或多个的方法创建或保存的对象。
| 方法 | 描述 |
|---|---|
| $.Deferred() | 返回一个链式实用对象方法来注册多个回调 |
| deferred.always() | 当Deferred（延迟）对象被受理或被拒绝时，调用添加的处理程序 |
| deferred.done() | 当Deferred（延迟）对象被受理时，调用添加的处理程序 |
| deferred.fail() | 当Deferred（延迟）对象被拒绝时，调用添加的处理程序 |
| deferred.isRejected() | 从jQuery1.7开始已经过时，确定 Deferred 对象是否已被拒绝 |
| deferred.isResolved() | 从jQuery1.7开始已经过时，确定 Deferred 对象是否已被解决 |
| deferred.notify() | 给定一个参数，调用正在延迟对象上进行的回调函数( progressCallbacks ) |
| deferred.notifyWith() | 给定上下文和参数，调用正在延迟对象上进行的回调函数( progressCallbacks ) |
| deferred.pipe() | 过滤 and/or 链式延迟对象的工具方法 |
| deferred.progress() | 当Deferred（延迟）对象生成进度通知时，调用添加处理程序 |
| deferred.promise() | 返回 Deferred(延迟)的 Promise 对象 |
| deferred.reject() | 拒绝 Deferred（延迟）对象，并根据给定的参数调用任何 failCallbacks 回调函数 |
| deferred.rejectWith() | 拒绝 Deferred（延迟）对象，并根据给定的 context 和 args 参数调用任何 failCallbacks 回调函数 |
| deferred.resolve() | 解决Deferred（延迟）对象，并根据给定的参数调用任何 doneCallbacks 回调函数 |
| deferred.resolveWith() | 解决Deferred（延迟）对象，并根据给定的context 和 args 参数调用任何 doneCallbacks 回调函数 |
| deferred.state() | 确定一个Deferred（延迟）对象的当前状态 |
| deferred.then() | 当Deferred（延迟）对象解决，拒绝或仍在进行中时，调用添加处理程序 |
| .promise() | 返回一个 Promise 对象，观察某种类型被绑定到集合的所有行动，是否已被加入到队列中 |
jQuery 属性总览
| 方法 | 描述 |
|---|---|
| context | 在版本 1.10 中被废弃。包含被传递到 jQuery 的原始上下文 |
| jquery | 包含 jQuery 的版本号 |
| jQuery.fx.interval | 改变以毫秒计的动画运行速率 |
| jQuery.fx.off | 对所有动画进行全局禁用或启用 |
| jQuery.support | 包含表示不同浏览器特性或漏洞的属性集（主要用于 jQuery 的内部使用） |
| length | 包含 jQuery 对象中元素的数目 |
| jQuery.cssNumber | 包含所有可以不使用单位的CSS属性的对象 |
扫一扫
5037
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
