菜单 搜索
首页 前端知识 jQuery总结

jQuery总结

2024-03-11 10:03:12 前端知识 前端哥 279 927 我要收藏

一、 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(索引)

  • 代码演示：

  1. 演示使用js的DOM对象方式、jquery对象方式获取div中的文本数据

  2. 演示将js的DOM对象 转换成 jquery对象，再使用转换后的jquery对象方式获取div中的数据

  3. 演示将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，且多个对象的某个同名属性也都是对象，则该"属性对象"的属性也将进行合并。
targetObject类型 目标对象，其他对象的成员属性将被附加到该对象上。
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,...可选。传递到事件处理程序的额外参数。 额外的参数对自定义事件特别有用。
转载请注明出处或者链接地址：https://www.qianduange.cn//article/3635.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！