1、ajax()方法及参数
●url：String类型的参数，（默认为当前页地址）发送请求的地址。
●type：String类型参数，请求方式为post或get（默认get）。其他方法如put、delete仅部分浏览器支持。
●timeout：Number类型参数，设置请求超过时间（毫秒），该设置将覆盖$.ajaxSetup()方法的全局设置。
●async：Boolean类型参数，默认为true，表示所有请求均为异步请求，同步请求为false。需注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
●cache：Boolean类型参数，默认true（当dataType为script时，默认为false）。设置false将不会从浏览器缓存中加载请求信息。
●data：String或Object类型参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看processData选项。对象必须为key/value格式，如{foo1: "bar1", foo2: "bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对用同一个名称，如{foo:["bar1", "bar2"]}转换为&foo1=bar1&foo=bar2。
●dataType：String类型参数，预期服务器返回数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递，可用类型如下：
xml：返回XML文档，可用JQuery处理；
html：返回纯文本HTML信息，包含的script标签会插入DOM时执行；
script：返回纯文本JavaScript代码，不会自动缓存结果，除非设置cache参数。需注意在远程请求时（不同一个域下），所有post请求都将转为get请求；
text：返回纯文本字符串；
json：返回JSON数据；
jsonp：JSONP格式，使用SONP形式调用函数，如myurl?callback=?，JQuery将自动替换为一个“？”为正确的函数名以执行回调函数。
●beforeSend：Function类型参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是唯一的参数——function（XMLHttpRequest）{ this; //调用本次ajax请求时传递的options参数 }。
●complete：Function类型参数，请求完成后调用的回调函数（请求成功或失败时均调用），参数为XMLHTTPRequest对象和一个描述成功请求类型的字符串——function（XMLHttpRequest， textStatus）{ this; //调用本次ajax请求时传递的options参数 }
●success：Function类型参数，请求成功后调用的回调参数，有以下两个参数：
success: function（data， textStatus）{ }——参数表示服务器返回数据、返回状态；
1.由服务器返回，并根据dataType参数进行处理后的数据；
2.描述状态的字符串——function（data，textStatus） { this; //解释同上 ，data可能是XMLDOC、jsonObj、html、text、etc }。
●error：Function类型参数，请求失败是被调用的函数，有参数XMLHttpRequest对象、错误信息、捕获的错误信息对象[可选]——function（XMLHTTPRequest，textStatus，errorThrown）{ this； //参数同上 }，通常情况textStatus和errorThrown只有其中一个包含信息。
XMLHttpRequest.readyState状态码：
0：（未初始化）还没有调用send（）方法；
1：（初始化[载入]）已调用send（）方法，正在发送请求；
2：（发送数据[载入完成]）send（）方法执行完成，已经接收到全部响应内容，但是当前的状态及http头未知；
3：（数据传送中[交互]）正在解析响应内容，已经接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误；
4：（完成）响应内容解析完成，可以在客户端调用，通过responseBody和responseText获取完整的回应数据；
●contentType：String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。
●dataFilter：Function类型参数，给Ajax返回的原始数据进行预处理函数，提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数，函数返回的值将由jQuery进一步处理——function（data，type）{ return：data; // 返回处理后的数据 }。
●global：Boolean类型参数，默认为true，表示触发全局ajax事件，false为不会触发全局ajax事件，ajaxStart或ajaxStop可用于各种ajax事件。
●ifModified：Boolean类型参数，默认为false，仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。
●jsonp：String类型参数，在一个jsonp请求中重写回调函数的名字。该值用来代替在“callback=？”这种GET或POST请求中URL参数里的“callback”部分，例如{jsonp：‘onJsonPLoad’}会导致将“onJsonPLoad=？”传给服务器。
●username：String类型参数，用于响应HTTP访问认证请求的用户名。
●password：Strung类型参数，用于响应HTTP访问认证请求的密码。
●processData：Boolean类型参数，默认true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencodedd"。如果要发送DOM树信息或者其他不希望转换的信息，则设置为false。
●scriptCharset：String类型参数，只有当请求时dataType为“jsonp”或“script”，并且type是GET时才会强制修改字符集（charset）,通常在本地和远程的内容编码不同时使用。
2、each()
为每个匹配元素规定运行的函数，是对数组，json和dom结构等的遍历，返回false可用于及早停止循环，语法：$(selector).each(function(index, element){})。参数function（index，element）{ } 是必需的，参数及使用方法介绍如下：
selector：选择器（可以是数组、json、dom等结构的元素）；
index：选择器的下标（遍历数组的下标）；
element：当前元素（数组下标对应的值），既然是元素，那就可以获取该元素下的属性值，如element.id；
1.遍历一维数组
<script type="text/javascript" src="jquery-3.2.1.min.js" ></script> <script> var arr1 = ['aa', 'bb', 'cc', 'dd']; $.each(arr1, function(i, val) { // 一维数组arr1的遍历，输出结果如下：0---aa 1---bb 2---cc 3---dd console.log(i + '---' + val); }); </script>
2.遍历二维数组
<script> var arr2 = [ ["aa", "aa"], ["bb", "bb"], ["cc", "cc"] ] $.each(arr2, function(i, items) { // i:数组下标，item一维数组中的每一个数组 // 输出一维数组arr2中的下标、参数数组，结果如下：0---aa,aa 1---bb,bb 2---cc,cc console.log(i + '---' + items); // 对作为参数的数组items进行遍历输出,结果如下： 0——aa 1——aa 0——bb 1——bb 0——cc 1——cc $.each(items, function(i, val) { console.log(i + '——' + val); }) }); </script>
3.遍历json对象
<script> var json1 = { key1: "aaa", key2: "bbb", key3: "ccc" }; // 遍历json格式的键值对，输出结果：key1——aaa key2——bbb key3——ccc $.each(json1, function(key, value) { console.log(key + '——' + value); }); </script>
4.数组中的json对象
<script> // 数组中有json对象时 var arr3 = [ {name: 'n1', age: 18}, {name: 'n2', age: 20}, {name: 'n3', age: 22} ]; $.each(arr3, function(i, val) { // 1、 遍历数组——arr3,输出结果如下：0---[object Object] 1---[object Object] 2---[object Object] console.log(i + '---' + val); // 2、获取每一个json对象里的name值，输出结果如下：n1 n1 n2 n2 n3 n3（表达式效果相同） console.log(val.name); console.log(val["name"]); // 3、获取json对象键/值对,输出结果如下：name——n1 age——18 name——n2 age——20 name——n3 age——22 $.each(val, function(key, val2) { console.log(key + '——' + val2); }) }); </script>
5.遍历dom元素
<head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="jquery-3.2.1.min.js" ></script> <script> $(function(){ // 使用这个函数，等页面加载完再执行js语句，不然控制台没有数据，或者把代码放在</body>前 $.each($('input:hidden'),function(i,val){ console.log(i + '——' + val); // 0——[object HTMLInputElement] 1——[object HTMLInputElement] 2——[object HTMLInputElement] console.log(val.name+'——'+val.value); // aa——a11 bb——b22 cc——c33 }); // 另一种遍历元素的写法: $("input:hidden").each(function(i, val) { }); }); </script> </head> <body> <input name="aa" type="hidden" value="a11" /> <input name="bb" type="hidden" value="b22" /> <input name="cc" type="hidden" value="c33" /> </body>
3、html()
用于设置或返回当前jQuery对象所匹配的DOM元素内的html内容，相当于设置或获取DOM元素的innerHML属性值。该方法用于返回内容时，则返回第一个匹配元素的内容；用于设置时，则重写所有匹配元素的内容（如只需设置或返回被选元素的文本内容，可使用text（）方法），语法：
返回内容：$(selector).html()，但会第一个匹配元素的html内容。
设置内容：$(selector).html(htmlString)，无论htmlString是字符串String还是函数Function类型，都表示设置所有匹配元素的html内容，如果HTMLString不是字符串或函数类型，则会被转换为字符串类型（toString()）,如果参数为null或undefined，则将其视为空字符串（“”）。
参数是函数时，html()将根据匹配的所有元素遍历执行该函数，函数中的this将指向对应的DOM元素，html()还会为函数传入两个参数，第一个参数是该元素在匹配元素中的索引下标，第二个参数是该元素当前的html内容，函数的返回值是匹配元素被重写的html内容。
html()函数的返回值是String/jQuery类型，返回值的实际类型取决于html()函数所执行的操作，如果html()函数执行的是获取操作，将返回第一个匹配元素的html内容，该值为字符串。如果执行的是设置操作，则返回当前jQuery对象本身。
jQuery过程中有两类对象，一类jQuery对象（通过本身自带的方法获取页面DOM元素的对象），一类DOM对象（通过传统的javascript方法访问页面中的元素放入对象），如：
<div id="divOut"></div>
var oDiv=$("#divOut")——jQuery对象、
var oDiv=document.getelementById("divOut")——DOM对象
<script src="jquery-3.2.1.min.js"></script> <script> $(document).ready(function(){ var $n2 = $("#n2"); alert( $n2.html() ); // 弹出Hello $n2.html("<strong>Hello World</strong>"); // 先弹出Hello， 界面的Hello被设置成Hello World var $n3 = $("#n3"); alert( $n3.html() ); /* 弹出内容： CodePlayer <span id="n4">专注于编程开发技术分享</span> <span id="n5"></span> */ $("span").html(""); // 会把所有span元素的html内容设置为空字符,页面中，段落内容专注于编程开发技术分享被清空 $("p").html( function(index, currentHtml) { alert(currentHtml); /* 因为上面对id为$n2的p元素设置了新的html内容，所以弹出的第一个p元素所包含的内容有： * <strong>Hello World</strong> * 因为上面将span标签的内容设置了空字符，所以第二个p元素包含的html内容有： * CodePlayer * <span id="n4"></span> * <span id="n5"></span> */ return "第<em>" + (index + 1) + "</em>个p元素， id为" + this.id; /* 效果等同以上表达 * var html = "第<em>" + (index + 1) + "</em>个p元素， id为" + this.id; * return html; * * html(function(){})方法中，函数的返回值是将元素的html内容改为返回值的内容 * 页面执行完上面操作后，页面最终内容是 * 第1个p元素， id为n2 * 第2个p元素， id为n3 */ }); }); </script> <div id="n1"> <p id="n2">Hello</p> <p id="n3"> CodePlayer <span id="n4">专注于编程开发技术分享</span> <span id="n5"></span> </p> </div>
4、append()
该函数用于向每个匹配元素内部的末尾位置追加指定的内容，是在所匹配元素的结束标签前，而不是之后追加。指定的内容可以是html字符串、DOM元素（或数组）、jQuery对象、函数（返回值），语法：append（content 1 [, content2 [, contentN] ]）。参数的类型均可以为String、Element、jQuery类型，但如果存在函数类型，只能放在第一个位置content1中，如果之后的参数也为函数，则调用其toString()方法，将其转换为字符串，并视为html内容。需注意：如果追加的内容是当前页面中的某些元素，那么这些元素将会从原来的位置消失，相当于剪切移动操作，不是复制。
参数为函数时，append()将根据匹配的所有元素遍历执行该函数，函数中的this指向的是对应元素（当前元素）的DOM元素。append()会为函数传入两个参数，第一个参数是当前元素所在匹配元素中的索引下标，第二个参数是该元素当前的内部html内容（innerHTML），函数的返回值是为该元素追加的内容——html字符串、DOM元素、jQuery对象。
<script> $(document).ready(function(){ // 追加结果：append()追加的是到相应的元素的结束标签之前Not So Happy——追加日期2019.5.28 $("p").append("——追加日期2019.5.28") }); </script> <p>append()追加的是到相应的元素的结束标签之前<i>Not So Happy</i></p>
<script> $(document).ready(function(){ var $n1 = $("#n1"); $n1.append( "<strong>——追加内容</strong>" ); // 将一个strong标签追加到n1内部的末尾位置 /* * CodePlayer ——追加内容 * p元素中的strong标签1 label标签的测试内容 * p元素中的strong标签2 i标签的测试内容 */ $n1.append(document.getElementsByTagName("label"), $("i")); /* * CodePlayer ——追加内容label标签的测试内容i标签的测试内容 * p元素中的strong标签1 * p元素中的strong标签2 */ var $p = $("p"); $p.append( function(index, html){ return "<span>追加元素" + (index + 1) + "<span"; } ); /* * CodePlayer ——追加内容label标签的测试内容i标签的测试内容追加元素1 * p元素中的strong标签1 追加元素2 * p元素中的strong标签2 追加元素3 */ }); </script> <body> <p id="n1"> <span id="n2">CodePlayer</span> </p> <p id="n3"> <strong>p元素中的strong标签1</strong> <label class="moves">label标签的测试内容</label> </p> <p id="n4"> <strong>p元素中的strong标签2</strong> <i>i标签的测试内容</i> </p> <!-- CodePlayer p元素中的strong标签1 label标签的测试内容 p元素中的strong标签2 i标签的测试内容 --> </body>
1486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
