一、 jQuery介绍
本文只简单介绍jQuery基本用法,更多信息可以参考菜鸟教程
1. jQuery概述
jQuery是一个快速、简洁的JavaScript库。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。JQuery封装了JavaScript常用的功能代码,提供了一套易于使用的API,可以跨多种浏览器工作,使HTML文档的遍历和操作、事件处理、动画设计和Ajax交互等操作变得更加简单。
2. jQuery的下载与引入
-
jQuery的官方下载地址:http://www.jquery.com
-
jQuery的引入
在需要使用jQuery的html中使用js的引入方式进行引入,如下:
<script type="text/javascript" src="jquery-x.x.x.js></script>
-
jQuery引入成功的测试
$(function(){ 代码 })
关键代码解释:
-
是指 $(document).ready(function(){}) 的简写
-
用来在DOM加载完成之后,自动执行一系列预先定义好的函数。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery引入</title> <script src="js/jquery-1.12.4.min.js" type="text/javascript" ></script> <script type="text/javascript"> <!-- Jquery引入的测试 --> $(function(){ alert("执行Jquery的语法成功"); }) </script> </head> <body> </body> </html>
3. jQuery对象与js对象之间的转换
jQuery本质上虽然也是js,但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象,而不是js方式获得的DOM对象,二者的API方法不能混合使用,若想使用对方的API,需要进行对象的转换。
使用js方式获取的对象是js的DOM对象,使用jQuery方式获取的对象是jQuery对象。两者的转换关系如下:
-
js的DOM对象转换成jQuery对象,语法:
$(js的DOM对象)
-
jQuery对象转换成js对象,语法:
jquery对象[索引] 或 jquery对象.get(索引)
-
代码演示:
-
演示使用js的DOM对象方式、jquery对象方式获取div中的文本数据
-
演示将js的DOM对象 转换成 jquery对象,再使用转换后的jquery对象方式获取div中的数据
-
演示将jquery对象 转换成 js的DOM对象, 再使用转换后js的DOM对象方式获取div中的数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.12.4.min.js"></script> <script> $(function () { // 需求: 获取div标签中的内容 // 1 js 传统方式 var html1 = document.getElementById("mydiv").innerHTML; console.info("js 传统方式: " + html1); // 2 jquery方式 var html2 = $("#mydiv").html(); console.info("jquery 方式 : " + html2); // 问题: js对象可以调用jquery对象的属性和方法吗? 不能 // var html3 = $("#mydiv").innerHTML; // console.info("jquery对象调用js对象的属性: 不能 ==== " + html3); //var html4 = document.getElementById("mydiv").html(); //console.info("js对象调用jquery对象的属性: 不能 ==== " + html4); //结论1: jquery对象 不能直接调用 js对象的属性和方法 //结论2: js对象 不能直接调用 jquery对象的属性和方法 // 解决: jquery对象调用js对象的属性和方法问题: 将jquery对象 转成 js对象 // how: jquery对象封装了js对象, 将jquery对象理解成一个数组,其中第一个元素就是js对象 var html5 = $("#mydiv")[0].innerHTML; console.info("html5:" + html5); // 解决2: js对象 就想调用 jquery对象的属性和方法 // how ? 将js对象转化成 jquery对象, $(js对象) var html6 = $(document.getElementById("mydiv")).html(); console.info("html6: " + html6); }); </script> </head> <body> <div id="mydiv">绝不后退</div> </body> </html>
-
将上述代码总结得到:
-
js的DOM对象转换成jQuery对象,语法:
$(js的DOM对象)
var jsDomEle = document.getElementById("myDiv"); //js的DOM对象 var $jQueryEle = $(jsDomEle); //js的DOM对象 转换成 jquery对象
-
jQuery对象转换成js对象,语法:
jquery对象[索引] 或 jquery对象.get(索引)
var $jQueryEle = $("#myDiv"); //jQuery对象 var jsDomEle = $jQueryEle[0]; //jquery对象 转换成 js的DOM对象
-
提示:JQuery对象变量名前面的
$
符号,主要作用是便于我们区分该变量是 JsDOM对象 与 jQuery对象,并无特殊含义。写$
符号代表jQuery对象是行业书写规范,不加$
,代码也没有错误。
二、 jQuery选择器
1. 基本选择器
-
语法
选择器名称 | 语法 | 解释 |
---|---|---|
标签选择器(元素选择器) | $(“html标签名”) | 获得所有匹配标签名称的于元素 |
id选择器 | $("#id的属性值") | 获得与指定id属性值匹配的元素 |
类选择器 | $(".class的属性值") | 获得与指定的class属性值匹配的元素 |
现有如下需求:
-
改变 id 为 one 的元素的背景色为 红色
-
改变元素名为<div> 的所有元素的背景色为 红色
-
改变 class 为 mini 的所有元素的背景色为 红色
-
改变所有的<span>元素和 id 为 two 的元素的背景色为红色
代码实现:
<script type="text/javascript"> $(function() { //<input type="button" value="改变 id 为 one 的元素的背景色为 红色" id="b1"/> $("#b1").click(function() { $("#one").css("backgroundColor", "red"); }); //<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色" id="b2"/> $("#b2").click(function() { $("div").css("backgroundColor", "red"); }); //<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色" id="b3"/> $("#b3").click(function() { $(".mini").css("backgroundColor", "red"); }); //<input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色" id="b4"/> $("#b4").click(function() { $("span,#two").css("backgroundColor", "red"); }); }) </script>
2. 层级选择器
-
语法
选择器名称 | 语法 | 解释 |
---|---|---|
后代选择器 | $("A B ") | 选择A元素内部的所有B元素 |
子选择器 | $(“A > B”) | 选择A元素内部的所有B子元素 |
现有如下需求:
-
改变 <body> 内所有<div> 的背景色为红色
-
改变 <body> 内 子 <div> 的背景色为 红色
实现:
代码基于01-jquery选择器目录下 层次选择器.html
进行编写
<script type="text/javascript"> $(function() { //<input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色" id="b1"/> $("#b1").click(function() { $("body div").css("backgroundColor", "red"); }) //<input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色" id="b2"/> $("#b2").click(function() { $("body>div").css("backgroundColor", "red"); }); }) </script>
3. 表单属性选择器
-
语法
选择器名称 语法 解释 可用元素选择器 :enabled 获得可用元素 不可用元素选择器 :disabled 获得不可用元素 选中选择器 :checked 获得单选/复选框选中的元素 选中选择器 :selected 获得下拉框选中的元素
现有如下需求:
-
利用 jQuery 对象的 val() 方法改变表单内可用 元素的值
-
利用 jQuery 对象的 val() 方法改变表单内不可用 元素的值
-
利用 jQuery 对象的 length 属性获取多选框选中的个数
-
利用 jQuery 对象的 text() 方法获取下拉框选中的内容
实现
<script type="text/javascript"> $(function() { //<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/> $("#b1").click(function() { var $inputs = $("input[type='text']:enabled"); //$inputs内部有两个input的js的dom对象 for (var i = 0; i < $inputs.length; i++) { console.log($($inputs[i]).val()); } }); // <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/> $("#b2").click(function() { var $inputs = $("input[type='text']:disabled"); //$inputs内部有两个input的js的dom对象 for (var i = 0; i < $inputs.length; i++) { console.log($($inputs[i]).val()); } }); //<input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/> $("#b3").click(function() { var $checkedInputs = $("input[type='checkbox']:checked"); console.log($checkedInputs.length); }); // <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/> $("#b4").click(function() { var $options = $("option:selected"); //$options内部有多个下拉框选中的js的dom对象 for (var i = 0; i < $options.length; i++) { console.log($($options[i]).text()); } }); }) </script>
三、 jQuery的DOM操作
1. jQuery对DOM树中的文本和值进行操作
-
语法
API方法 | 解释 |
---|---|
val([value]) | 获得/设置元素value属性相应的值 |
text([value]) | 获得/设置元素的文本内容 |
html([value]) | 获得/设置元素的标签体内容 |
-
代码演示
<script type="text/javascript"> //页面加载完成 $(function(){ //获取迪丽热巴 console.log( $("#myinput").val() ); //获得mydiv的文本内容 console.log( $("#mydiv").text() ); //获取mydiv的标签体内容 console.log( $("#mydiv").html() ); }); </script> <body> <input id="myinput" type="text" name="username" value="迪丽热巴" /><br /> <div id="mydiv"> <p><a href="#">标题标签</a></p> </div> </body>
-
attr与prop的注意问题
-
checked 和 selected 使用prop获取
-
其他使用attr获取 获取不到换成prop
-
四、 jQuery的遍历
jQuery对象本身就是数组对象,通过jQuery选择器获得的都是满足该选择器条件的元素对象的集合体。因此常常需要对jQuery对象进行遍历。
1. 原始方式遍历
-
语法
for(var i=0;i<元素数组.length;i++){ 元素数组[i]; }
-
代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { var $lis = $("#city li"); for (var i = 0; i < $lis.length; i++) { console.log($($lis[i]).html()); } }); </script> </head> <body> <ul id="city"> <li>北京</li> <li>上海</li> <li>天津</li> <li>重庆</li> </ul> </body> </html>
2. jquery对象方法遍历
-
语法
jquery对象.each(function(index,element){}); 其中, index:就是元素在集合中的索引 element:就是集合中的每一个元素对象
-
代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { $("#city li").each(function(index, element){ //index, 就是元素在集合中的索引 //element,就是集合中的每一个dom元素对象 console.log(index +"==="+ $(element).html()); }); }); </script> </head> <body> <ul id="city"> <li>北京</li> <li>上海</li> <li>天津</li> <li>重庆</li> </ul> </body> </html>
3. jquery的全局方法遍历
-
语法
$.each(jquery对象,function(index,element){}); 其中, index:就是元素在集合中的索引 element:就是集合中的每一个元素对象
-
代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ var $lis = $("#city li"); $.each($lis, function(index, element){ //index, 就是元素在集合中的索引 //element,就是集合中的每一个dom元素对象 console.log(index +"==="+ $(element).html()); }); }); </script> </head> <body> <ul id="city"> <li>北京</li> <li>上海</li> <li>天津</li> <li>重庆</li> </ul> </body> </html>
文章知识点与官方知识档案匹配,可进一步学习相关知识
五、 jQuery的常用方法
1.自执行函数(三种)
$(function(){ // do something })
$(document).ready(function(){ //do something })
$().ready(function(){ //do something })
表示文档结构已经加载完成(不包含图片等非文字媒体文件),onload则指示页面包含图片等文件在内的所有元素都加载完成。
2.text() html() val()
text() 方法设置或返回被选元素的文本内容。
当该方法用于返回内容时,则返回所有匹配元素的文本内容(会删除 HTML 标记)。
当该方法用于设置内容时,则重写所有匹配元素的内容。
语法:
返回文本内容:
$( selector).text()
设置文本内容:
$( selector).text( content)
使用函数设置文本内容:
$( selector).text(function (index,currentcontent))
-
index - 返回集合中元素的 index 位置。
-
currentcontent - 返回被选元素的当前内容。
html() 方法设置或返回被选元素的内容(innerHTML)。
当该方法用于返回内容时,则返回第一个匹配元素的内容。
当该方法用于设置内容时,则重写所有匹配元素的内容。
语法:
返回内容:
$( selector).html()
设置内容:
$( selector).html( content)
使用函数设置内容:
$( selector).html(function (index,currentcontent))
-
index - 返回集合中元素的 index 位置。
-
currentcontent - 返回被选元素的当前内容。
val() 方法返回或设置被选元素的 value 属性。
当用于返回值时: 该方法返回第一个匹配元素的 value 属性的值。
当用于设置值时: 该方法设置所有匹配元素的 value 属性的值。
注意:val() 方法通常与 HTML 表单元素一起使用。
语法
返回 value 属性:
$( selector).val()
设置 value 属性:
$( selector).val( value)
通过函数设置 value 属性:
$( selector).val(function (index,currentvalue))
3.css()
css() 方法设置或返回被选元素的一个或多个样式属性。
如需返回指定的 CSS 属性的值(无指定则返回第一个),请使用如下语法:
css(" propertyname");
如需设置指定的 CSS 属性(无指定则设置全部),请使用如下语法
css(" propertyname"," value");
4.get() 非ajax用法
get() 方法获取由选择器指定的 DOM 元素。
语法
$( *selector*).get( *index*)
5.parent() children() parents() find()
parent() 方法返回被选元素的直接父元素。
$(selector).parent(filter)
children() 方法返回被选元素的所有直接子元素
$(selector).children(filter)
parents() 方法返回被选元素的所有祖先元素。
$(selector).parents(filter)
find() 方法返回被选元素的后代元素。
$(selector).find(filter)
6.eq() siblings() index()
eq() 方法返回带有被选元素的指定索引号的元素。
索引号从 0 开头,所以第一个元素的索引号是 0(不是 1)
$(selector).eq(index)
siblings() 方法返回被选元素的所有同级元素。同级元素是共享相同父元素的元素。
$( selector).siblings( filter)
index() 方法返回指定元素相对于其他指定元素的 index 位置。
$( *selector*).index()
获得元素相对于选择器的 index 位置。
$( selector).index( element)
7.height() width()
height() 方法设置或返回被选元素的高度。
当该方法用于返回高度时, 则返回第一个匹配元素的高度。
当该方法用于设置高度时,则设置所有匹配元素的高度。
返回高度:
$( *selector*).height()
设置高度:对于em, pt, etc要使用"",px为默认单位,直接写数值
$( *selector*).height( *value*)
使用函数设置高度:
$( selector).height(function (index,currentheight))
value | 当设置高度时是必需的。规定元素的高度,单位为 px、em、pt 等。 默认单位是 px。 |
---|---|
function(index,currentheight) | 可选。规定返回被选元素新高度的函数。index - 返回集合中元素的 index 位置。currentheight - 返回被选元素的当前高度。 |
width() 方法设置或返回被选元素的宽度。方法同height()
8.addClass() removeClass() hasClass()
addClass() 方法向被选元素添加一个或多个类名。
该方法不会移除已存在的 class 属性,仅仅添加一个或多个类名到 class 属性。
提示:如需添加多个类,请使用空格分隔类名。
函数添加类语法:
$(selector).addClass(classname,function(index,oldclass))
classname | 必需。规定一个或多个要添加的类名称。 |
---|---|
function(index,currentclass) | 可选。规定返回一个或多个待添加类名的函数。index - 返回集合中元素的 index 位置。currentclass - 返回被选元素的当前类名。 |
removeClass() 方法从被选元素移除一个或多个类。
注意:如果没有规定参数,则该方法将从被选元素中删除所有类。
$(selector).removeClass(classname,function(index,currentclass))
classname | 可选。规定要移除的一个或多个类名称。如需移除若干个类,请使用空格分隔类名称。 注意: 如果该参数为空,则将移除所有类名称。 |
---|---|
function(index,currentclass) | 可选。返回要移除的一个或多个类名称的函数。index - 返回集合中元素的 index 位置。currentclass - 返回被选元素的当前类名。 |
hasClass() 方法检查被选元素是否包含指定的类名称。
如果被选元素包含指定的类,该方法返回 "true"。
$(selector).hasClass(classname)
9.toggle() toggleClass()
toggle() 方法在 jQuery 版本 1.8 中被废弃,在版本 1.9 中被移除。
toggle() 方法添加两个或多个函数,以响应被选元素的 click 事件之间的切换。
当在元素上点击时调用第一个指定函数,当再次点击时调用第二个函数,以此类推。
注意:还存在一个名为 toggle() 的 jQuery 效果方法。根据不同的参数决定调用哪个方法。
$(selector).toggle(function)
toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。这就是所谓的切换效果。
然而,通过使用 "switch" 参数,您能够规定只删除或只添加类。
$(selector).toggleClass(classname,function(index,currentclass),switch)
classname | 必需。规定添加或移除的一个或多个类名。如需规定若干个类,请使用空格分隔类名。 |
---|---|
function(index,currentclass) | 可选。规定返回需要添加/删除的一个或多个类名的函数。index - 返回集合中元素的 index 位置。currentclass - 返回被选元素的当前类名。 |
switch | 可选。布尔值,规定是否仅仅添加(true)或移除(false)类。 |
10.show() hide()
show() 方法显示隐藏的被选元素。
注意:show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素(不适用于通过 visibility:hidden 隐藏的元素)。
$(selector).show(speed,easing,callback)
speed | 可选。规定显示效果的速度。可能的值:毫秒 "slow" "fast" |
---|---|
easing | 可选。规定在动画的不同点上元素的速度。默认值为 "swing"。可能的值:"swing" - 在开头/结尾移动慢,在中间移动快"linear" - 匀速移动提示:扩展插件中提供更多可用的 easing 函数。 |
callback | 可选。show() 方法执行完之后,要执行的函数。 |
hide() 方法隐藏被选元素。
提示:这与 CSS 属性 display:none 类似。
注释:隐藏的元素不会被完全显示(不再影响页面的布局)。
语法和参数同上
11.trim()
$.trim() 函数用于去除字符串两端的空白字符。
注意:$.trim()函数会移除字符串开始和末尾处的所有换行符,空格(包括连续的空格)和制表符。如果这些空白字符在字符串中间时,它们将被保留,不会被移除
$.trim( str )
12.slideUp() slideDown() slideToggle()
slideUp() 方法以滑动方式隐藏被选元素。
$(selector).slideUp(speed,easing,callback)
slideDown() 方法以滑动方式显示被选元素。
注意:slideDown() 适用于通过 jQuery 方法隐藏的元素,或在 CSS 中声明 display:none 隐藏的元素(不适用于通过 visibility:hidden 隐藏的元素)。
$(selector).slideDown(speed,easing,callback)
slideToggle() 方法在被选元素上进行 slideUp() 和 slideDown() 之间的切换。
该方法检查被选元素的可见状态。如果一个元素是隐藏的,则运行 slideDown(),如果一个元素是可见的,则运行 slideUp() - 这会造成一种切换的效果。
$( selector ).slideToggle( speed,easing,callback )
13.attr()
14.add() remove() append() appendTo() prepend() prependTo()
add() 方法把元素添加到已存在的元素组合中。
$(selector).add(element,context)
element | 必需。规定要添加到已存在的元素集合的选择器表达式、jQuery 对象、一个或多个元素、HTML 片段。 |
---|---|
context | 可选。规定选择器表达式在文档中开始进行匹配的位置。 |
remove() 方法移除被选元素,包括所有的文本和子节点。
该方法也会移除被选元素的数据和事件。
提示:如需移除元素,但保留数据和事件,请使用 detach() 方法代替。
提示:如只需从被选元素移除内容,请使用 empty() 方法。
$(selector).remove()
append() 方法在被选元素的结尾插入指定内容。
提示:如需在被选元素的开头插入内容,请使用 prepend() 方法。
$(selector).append(content,function(index,html))
appendTo() 方法在被选元素的结尾插入 HTML 元素。
提示:如需在被选元素的开头插入 HTML 元素,请使用 prependTo() 方法。
$(content).appendTo(selector)
15.on() 事件委托
$( selector).on( event,childSelector,data,function)
event | 必需。规定要从被选元素移除的一个或多个事件或命名空间。 由空格分隔多个事件值,也可以是数组。必须是有效的事件。 |
---|---|
childSelector | 可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。 |
data | 可选。规定传递到函数的额外数据。 |
---|---|
function | 可选。规定当事件发生时运行的函数。 |
16.extend()
jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。
注意:1. 如果只为$.extend()指定了一个参数,则意味着参数target被省略。此时,target就是jQuery对象本身。通过这种方式,我们可以为全局对象jQuery添加新的函数。(也就是说可以往JQuery上添加方法) 2.如果多个对象具有相同的属性,则后者会覆盖前者的属性值。(合并对象)
$.extend( target [, object1 ] [, objectN ] )
指示是否深度合并(false(默认)浅拷贝;true深拷贝)
$.extend( [deep ], target, object1 [, objectN ] )
deep | 可选。 Boolean类型 指示是否深度合并对象,默认为false。如果该值为true,且多个对象的某个同名属性也都是对象,则该"属性对象"的属性也将进行合并。 |
---|---|
target | Object类型 目标对象,其他对象的成员属性将被附加到该对象上。 |
object1 | 可选。 Object类型 第一个被合并的对象。 |
---|---|
objectN | 可选。 Object类型 第N个被合并的对象。 |
17.next() nextAll() nextUntil()
next() 方法返回被选元素的后一个同级元素。
同级元素是共享相同父元素的元素。
注意:该方法只返回一个元素。
DOM 树:该方法沿着 DOM 元素的后一个同级元素向前遍历。
相关方法:
-
nextAll() - 返回被选元素之后的所有同级元素
-
nextUntil() - 返回两个给定参数之间的每个元素之后的所有同级元素
$(selector).next(filter)
18.each()
each() 方法为每个匹配元素规定要运行的函数。
提示:返回 false 可用于及早停止循环。
$(selector).each(function(index,element))
19.get() post() ajax()
$.get() 方法使用 HTTP GET 请求从服务器加载数据。
$.get( URL,data,function(data,status,xhr),dataType)
$.post() 方法使用 HTTP POST 请求从服务器加载数据。
$( selector).post( URL,data,function(data,status,xhr),dataType)
URL | 必需。规定将请求发送到哪个 URL。 |
---|---|
data | 可选。规定连同请求发送到服务器的数据。 |
$.ajax() 方法用于执行 AJAX(异步 HTTP)请求。
所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
$.ajax( {name:value, name:value, ... })
名称 | 值/描述 |
---|---|
async | 布尔值,表示请求是否异步处理。默认是 true。 |
beforeSend(xhr) | 发送请求前运行的函数。 |
cache | 布尔值,表示浏览器是否缓存被请求页面。默认是 true。 |
complete(xhr,status) | 请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后)。 |
contentType | 发送数据到服务器时所使用的内容类型。默认是:"application/x-www-form-urlencoded"。 |
context | 为所有 AJAX 相关的回调函数规定 "this" 值。 |
data | 规定要发送到服务器的数据。 |
dataFilter(data,type) | 用于处理 XMLHttpRequest 原始响应数据的函数。 |
dataType | 预期的服务器响应的数据类型。 |
error(xhr,status,error) | 如果请求失败要运行的函数。 |
global | 布尔值,规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。 |
ifModified | 布尔值,规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。 |
jsonp | 在一个 jsonp 中重写回调函数的字符串。 |
jsonpCallback | 在一个 jsonp 中规定回调函数的名称。 |
password | 规定在 HTTP 访问认证请求中使用的密码。 |
processData | 布尔值,规定通过请求发送的数据是否转换为查询字符串。默认是 true。 |
scriptCharset | 规定请求的字符集。 |
success(result,status,xhr) | 当请求成功时运行的函数。 |
timeout | 设置本地的请求超时时间(以毫秒计)。 |
traditional | 布尔值,规定是否使用参数序列化的传统样式。 |
type | 规定请求的类型(GET 或 POST)。 |
url | 规定发送请求的 URL。默认是当前页面。 |
username | 规定在 HTTP 访问认证请求中使用的用户名。 |
xhr | 用于创建 XMLHttpRequest 对象的函数。 |
20.trigger()
trigger() 方法触发被选元素上指定的事件以及事件的默认行为(比如表单提交)。
该方法与 triggerHandler() 方法类似,不同的是 triggerHandler() 不触发事件的默认行为。
$( *selector*).trigger( *event,eventObj,param1,param2,...*)
参数 | 描述 |
---|---|
event | 必需。规定指定元素上要触发的事件。 可以是自定义事件,或者任何标准事件。 |
param1,param2,... | 可选。传递到事件处理程序的额外参数。 额外的参数对自定义事件特别有用。 |