锐客网

  1. 首页 > it技术 > >

jQuery学习知识总结

jQuery入口**
方式一：$(document).ready(function(){})
方式二：$(function () { })
jQuery函数
1.选择器
jQuery(selector,context)
selector:css选择器表达式
context：可选的选择器上下文
返回值：匹配DOM元素的jQuery对象

`

1 2 3 6 5

2.html片段:将html片段转换成Element元素，然后再封装成一个jQuery对象
jQuery(html,ownerDocument)
html:单标签或多层标签之间的嵌套
ownerDocument:创建新DOM元素的文档对象，不传入则默认为当前的文档对象
$('7').appendTo('body'); //单标签插入 $(` five`).appendTo('body'); //多标签嵌套插入

3.DOM元素/DOM数组
jQuery(element or elementsArray)
element：DOM元素
elementsArray：DOM数组
$('div').each(function (index, item) { console.log(this); $(this).css('color', 'red') })//传入DOM元素 var div = document.getElementsByTagName('div'); div = [].slice.call(div); var $div = $(div); $div.html('hello'); })//传入DOM数组6 5 6

4.对象
jQuery(object)
对象封装到jQuery对象中并返回
var obj = { name: 'lili' }; var $obj = $(obj); //封装成jQuery对象 //绑定自定义事件 $obj.on('say', function () { console.log(this.name); }); $obj.trigger('say');

5.函数
jQuery(callback)
callback:函数
在document对象上绑定一个ready事件监听函数，当DOM结构加载完成的时候执行
$(function () { }) $(document).ready(function () {})

6.jQuery()
不传入任何的参数，返回一个空的jQuery对象，属性length为0
注意：可以用来复用jQuery对象，可以创建一个空的jQuery对象，需要的时候手动修改其中的元素，在调用jQuery方法。从而避免重复创建jQuery对象。
jQuery选择器
1.基本选择器
id选择器 #id --> 匹配指定id名称
使用任何的元字符作为名称的文本部分， 它必须被两个反斜杠转义：\。
$('#myDiv'); id="notMe"
id="myDiv" //结果：id="myDiv"

元素选择器Element --> 匹配指定标签名
根据给定的元素标签名匹配所有元素
$('div'); id="notMe"
id="myDiv" //id="notMe"id="myDiv"

类型选择器 .class --> 匹配class属性的标签
根据给定的css类名匹配元素。
$(".myClass"); id="notMe"
id="myDiv"

通配符选择器 --> 匹配所有的选择器
找到每一个元素
$("*")

组合选择器 selector1,selector2,selectorN --> 即可匹配多个
$("div#myDiv,p")

2.层级选择器
ancestor descendant --> 在给定的祖先元素下匹配所有的后代元素
$('form input'); //找到表单中所有的input元素
//结果：

parent > child --> 在指定父元素下匹配所有的子元素
$("form > input"); //匹配表单中所有的子级input元素。
//结果：

prev + next --> 匹配所有紧挨着在 prev 元素后的 next 元素
$("label + input"); //匹配所有跟在 label 后面的 input 元素
//结果：,

3.伪类选择器
first --> 获取第一个元素
$('div:first'); //获取匹配的第一个元素1 2 3//1

:last --> 获取最后一个元素
$('div:last'); //获取匹配的最后一个元素1 2 3//3

:not(selector) --> 用于筛选的选择器(即取反)
$('input:not(:checked)'); //查找所有未选中的 input 元素 //

:even --> 匹配所有索引值为偶数的元素，从 0 开始计数
$("tr:even");
Header
Value 1
Value 2
// Header 1, Value 2

:odd --> 匹配所有索引值为奇数的元素，从 0 开始计数
$("tr:odd");
Header
Value 1
Value 2
//Value 1

4.属性选择器
[属性名] --> 匹配包含给定属性的元素
$('div[id]'); Hello!
//

[属性名=属性值] --> 匹配给定的属性是某个特定值的元素
$('input[name="newsletter"]').attr("checked", true); //, //

[属性名],[属性名] --> 可匹配多个
匹配属性有code1与code2的元素标签 --> $("li[code1],li[code2]");
属性选择器[属性选择器] --> 复合属性选择器，需要同时满足多个条件时使用
$("input[id][name$='man']"); //找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的 //

4.jQuery事件
1.jQuery事件类型
（1）$(document).ready()：文档完全加载完后执行函数
$(document).ready(function(){ // 在这里写你的代码... });

（2）click()
当按钮点击事件被触发时会调用一个函数
$("p").click(function(){ $(this).hide(); }); //当点击事件在某个 元素上触发时，隐藏当前的 元素：

(3)dblclick()
当双击元素时，会发生 dblclick 事件。
$("p").dblclick( function () { alert("Hello World!"); }); //给页面上每个段落的双击事件绑上 "Hello World!" 警告框双击鼠标左键的，我就消失。
双击我消失！
双击我也消失！

(4)mouseenter()
当鼠标指针穿过元素时，会发生 mouseenter 事件。
$('#p1').mouseenter(function () { alert('您的鼠标移到了id="p1"的元素上！'); }); 鼠标指针进入此处，会看到弹窗

(5)mouseleave()
当鼠标指针离开元素时，会发生 mouseleave 事件。
$("#p1").mouseleave(function(){ alert("再见，您的鼠标离开了该段落。"); }); 鼠标指针离开此处，会看到弹窗

（6）mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
$("#p1").mousedown(function(){ alert("鼠标在该段落上按下！"); }); 鼠标指针点击此处，会看到弹窗

（7）mouseup()
当在元素上松开鼠标按钮时，会发生 mouseup 事件。
$("#p1").mouseup(function(){ alert("鼠标在段落上松开。"); }); 鼠标指针松开此处，会看到弹窗

（8）hover()
模拟光标悬停事件。
//当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter); 当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。 $("#p1").hover( function(){ alert("你进入了 p1!"); }, function(){ alert("拜拜! 现在你离开了 p1!"); } );

(9)focus()
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点
$("input").focus(function(){ $(this).css("background-color","#cccccc"); });

(10)blur()
当元素失去焦点时，发生 blur 事件
$("input").blur(function(){ $(this).css("background-color","#ffffff"); });

2.jQuery事件方法语法
（1）on(events [, selector ] [, data ], handler(eventObject) )
events:一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"。
selector:一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素,选择器是 null 或忽略该选择器，那么被选中的元素总是能触发事件。
data:当一个事件被触发时，要传递给事件处理函数的[event.data]
在选定的元素上绑定一个或多个事件处理函数。
handler(eventObject):事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false
$('p').on('click', function () { alert($(this).text()); //当点击段落时，显示该段落中的文本 }); //取消表单的提交动作，并且通过返回 false 的方法来防止事件冒泡 $('form').on('submit',false); $("form").on("submit", function(event) { //通过使用 .preventDefault()，仅取消默认的动作。 event.preventDefault(); }); //通过使用 .stopPropagation()，防止提交事件的冒泡行为，但是并不禁止提交行为 $("form").on("submit", function(event) { event.stopPropagation(); });

(2).off( events [, selector ] [, handler(eventObject) ] )
移除用on()定的事件处理程序,当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除。
function aClick() { $("div").show().fadeOut("slow"); } $("#bind").click(function () { $("body").on("click", "#theone", aClick) .find("#theone").text("Can Click!"); }); $("#unbind").click(function () { $("body").off("click", "#theone", aClick) .find("#theone").text("Does nothing..."); }); $( "#foo" ).on( "click", function( event ) { alert( "This will be displayed only once." ); $( this ).off( event ); });

(3).one()
为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次。
div { width: 60px; height: 60px; margin: 5px; float: left; background: aquamarine; border: 10px outset; cursor: pointer; }p { color: red; margin: 0; clear: left; }var n = 0; $("div").one("click", function() { var index = $("div").index(this); $(this).css({ //改变样式，点击后变成图形凹进去 borderStyle:"inset", cursor:"auto" }); $("p").text("Div at index #" + index + " clicked." + "That's " + ++n + " total clicks."); }); click a green square

（4）.trigger( eventType [, extraParameters ] )
根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。
eventType：以后包含JavaScript事件类型的字符串，比如click 或 submit。
extraParameters：传递给事件处理程序的额外数组参数
当相应的事件发生时，任何通过.on()或一个快捷方法绑定的事件处理程序将被触发。但是，它们可以用.trigger()方法手动触发。调用 .trigger() 执行处理程序和用户自然的触发该事件，他们的执行顺序时相同的
$("button:first").click(function () { update($("span:first")); //更新第一个span的数量 }); $("button:last").click(function () { $("button:first").trigger('click'); //执行第一个函数 update($("span:last")); //更新第二个span的数量 }); function update(j) { var n = parseInt(j.text(), 10); j.text(n + 1); } 0 button #1 clicks. 0 button #2 clicks.

5.jQueryDOM操作
插入方法
【jQuery学习知识总结】.append(content [, content ])
.append( function(index, html) )
在每个匹配元素里面的末尾处插入参数内容。
DOM 元素，DOM元素数组，HTML字符串，或者jQuery对象，用来插在每个匹配元素里面的末尾
$(function () { $('.inner').append('Test
'); //创建内容然后同时插入到好几个元素里面 $('.container').append($('h2')); //选择一个元素然后插在另一个元素里面; 移动而不是复制 //有多个目标元素，内容将被复制然后按顺序插入到每个目标里面 })GreetingHello Goodbye

.appendTo( target )
target:选择符，元素，HTML字符串，DOM元素数组，或者jQuery对象；符合的元素们会被插入到由参数指定的目标的末尾。
$(function () { $('Test
').appendTo('.inner'); //创建内容然后同时插入到好几个元素里面 $('h2').appendTo($('.container')); //选择一个元素然后插在另一个元素里面; 移动而不是复制 })GreetingHello Goodbye

.prepend( content [, content ] )
将参数内容插入到每个匹配元素的前面
$('.inner').prepend('Test
'); $('.container').prepend($('h2')); GreetingsHello Goodbye

.prependTo()
将所有元素插入到目标前面
$('Test
').prependTo('.inner'); $('h2').prependTo($('.container')); GreetingsHello Goodbye

.after()
在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点*
$('.inner').after('Test
'); $('.container').after($('h2')); Greetings Hello Goodbye$("h2").after( document.createTextNode("Hello") ); //在所有的段落后插入一个DOM元素。

.before( content [, content ] )
根据参数设定，在匹配元素的前面插入内容
$('.inner').before('Test
'); $('.container').before($('h2')); Greetings Hello Goodbye

.insertBefore( target )
在目标元素前面插入集合中每个匹配的元素
$('Test
').insertBefore('.inner'); $('h2').insertBefore($('.container')); Greetings Hello Goodbye

.insertAfter( target )
在目标元素后面插入集合中每个匹配的元素
$('Test
').insertAfter('.inner'); $('h2').insertAfter($('.container')); Greetings Hello Goodbye

包裹方法
.wrap( wrappingElement )
wrappingElement：一个HTML片段，选择表达式，jQuery对象，或者DOM元素，用来包在匹配元素的外层。
注意：可以接受任何字符串或对象，可以传递给$()工厂函数来指定一个DOM结构。这种结构可以嵌套了好几层深，但应该只包含一个核心的元素。每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集，以便之后使用链式方法。
//在inner 外层插入一个HTML结构hello goodbye$('.inner').wrap(') /*结果：HelloGoodbye*///用函数做参数，返回DOM元素，HTML片段用来包裹匹配元素 $('.inner').wrap(function(){ return ' }) /*结果：HelloGoodbye*/

.unwrap():这个方法不接受任何参数
将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置
.wrapAll( wrappingElement )
*在所有匹配元素外面包一层HTML结构。
注意：1.结构可以嵌套多层，最内层只能有一个元素
? 2.接受任何字符串或对象
? 3.整体的外部用指定的 HTML 结构进行包裹
Hello Goodbye$('.inner').wrapAll('') /*Hello Goodbye*/

.wrapInner( wrappingElement )
在匹配元素里的内容外包一层结构
Hello Goodbye$('.inner').wrapInner('')//inner元素的内容外加一个新的元素 //用一个callback函数做参数，每次遇到匹配元素时，该函数被执行，返回一个DOM元素，jQuery对象，或者HTML片段，用来包住匹配元素的内容 $('.inner').wrapInner(function(){ return ''; }) /*HelloGoodbye*/

替换方法
.replaceAll( target )
用集合的匹配元素替换每个目标元素
Hello And Goodbye$('New heading').replaceAll('.inner'); /*结果： New heading New heading New heading */$('.first').replaceAll('.third'); /* And Hello */ //用来替换的元素从老地方移到新位置，而不是复制

.replaceWith( newContent )
用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。
注意：可以从DOM中移除内容，然后在这个地方插入新的内容
Hello And Goodbye$('div.second').replaceWidth('New heading')//指定的HTML替换第二个 inner /* Hello New heading Goodbye */$('.inner').replaceWidth('New heading') //一次性替换所有inner /* New heading New heading New heading *///选择一个元素当作替换的内容 $('div.third').replaceWidth('.first'); /* And Hello */ //用来替换的元素从老地方移到新位置，而不是复制

移除方法：empty、remove、detach
.empty() 这个方法不接受任何参数
从DOM中移除集合中匹配元素的所有子节点
注意：1.这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本；
2.为了避免内存泄漏，先移除子元素的数据和事件处理函数，然后移除子元素。
3.想删除元素，不破坏他们的数据或事件处理程序（这些绑定的信息还可以在之后被重新添加回来），使用.detach()
Hello Goodbye$('.hello').empty(); /*Hello文本被删除Goodbye */

.remove( [selector ] )
selector：过滤将被移除的匹配元素集合
注意：1.将匹配元素集合从DOM中删除。（注：同时移除元素上的事件及 jQuery 数据。）
? 2. 将元素自身移除时，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。
Hello Goodbye$('.hello').remove(); /*Goodbye*/ //第二种写法，同样的结果 $('div').remove('.hello');

.detach( [selector ] )
从DOM中去掉所有匹配的元素。
保存所有jQuery数据和被移走的元素相关联。当需要移走一个元素，不久又将该元素插入DOM
克隆方法：clone
.clone( [withDataAndEvents ] )/.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )
创建一个匹配的元素集合的深度拷贝副本
withDataAndEvents:一个Boolean值，表示是否会复制元素上的事件处理函数
deepWithDataAndEvents :一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制
注意：1.复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。出于性能方面的考虑，表单元素动态的状态（例如，用户将数据输入到input和 textarea，或者 用户在select中已经选中某一项）不会被复制到克隆元素。克隆操作将设置 这些字段为HTML中指定的默认值。
2.当我们用`.clone()方法时，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容。
3.使用.clone()可能产生id属性重复的元素的副作用，id应该是唯一的。在可能的情况下，建议，应避免克隆有此属性或标识符的元素，使用类（class）属性代替。
$('.hello').clone().appendTo('.goodbye'); Goodbye Hello/*HelloGoodbye Hello*/

jQuery 属性操作方法
(1)addClass() 方法
向被选元素添加一个或多个类。
该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。
注意：如需添加多个类，请使用空格分隔类名
//将此类名添加进了第一个p元素里，然后获得此样式 .intro{ font-size:120%; color:red; }this is a headingthis is a paragraph
this is a another

使用函数向被选元素添加类。
.par_0{ color:blue; } .par_1{ color:red; }this is a heading //第一个p元素会变成蓝色，第二个会变成红色this is a paragraph
this is another

（2）attr() 方法
设置或返回被选元素的属性值。
根据该方法不同的参数，其工作方式也有所差异
方法一：设置被选元素的属性和值
$(selector).attr(attribute,value)

jQuery学习知识总结
文章图片

用法二：返回被选元素的属性值
$(selector).attr(attribute)


方法三：使用函数来设置属性/值
$(selector).attr(attribute,function(index,oldvalue))


方法四：为被选元素设置一个以上的属性和值。
$(selector).attr({attribute:value, attribute:value ...})


(3)hasClass() 方法
检查被选元素是否包含指定的 class
this is a headingthis is a para
this is another

(4)html()方法
返回或设置被选元素的内容 (inner HTML)
如果该方法未设置参数，则返回被选元素的当前内容。
this is a para
this is another

方法二：当使用该方法返回一个值时，它会返回第一个匹配元素的内容
this is a paragraph

方法三：设置元素内容
使用该方法设置一个值时，它会覆盖所有匹配元素的内容
$(selector).html(content)

this is a para
this is another

方法四：使用函数来设置元素内容
$(selector).html(function(index,oldcontent))

这是一个段落。
这是另一个段落。

(5)removeAttr() 方法
从被选元素中移除属性
$(function(){ $('button').click(function(){ //从任何p元素中移除id属性 $('p').removeAttr('id'); }) })

（6）removeClass() 方法
从被选元素移除一个或多个类。
注意：如果没有规定参数，则该方法将从被选元素中删除所有类
$(function(){ $('button').click(function(){ $('p').removeClass('intro'); }); }).intro{ font-size:120%; color:red; }this is a headingthis is a paragraph

方法二：使用函数来移除类
$(selector).removeClass(function(index,oldclass))

$('button').click(function(){ $('ul li').removeClass(function(){ //删除以listitem_开头的类名样式 return 'listitem_' + $(this).index(); }) })

（6）toggleClass()
设置或移除被选元素的一个或多个类进行切换。检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。通过使用 "switch" 参数，您能够规定只删除或只添加类。
$(selector).toggleClass(class,switch)

switch：布尔值。规定是否添加或移除 class
$('button').click(function(){ $('p').toggleClass('main'); }) .main{ fon-size:120%; color:red; }this is a headingthis is a paragraph

方法二：使用函数来切换类
$(selector).toggleClass(function(index,class),switch)

$(function(){ $('button').click(function(){ //给ul下li添加类名及其对应的样式 $('ul li').toggleClass(function(){ return 'listitem_' + $(this).index()); }); }); })This is a heading
  • Apple
  • IBM
  • Microsoft
  • Google

（7）val()
元素的值是通过 value 属性设置的。该方法大多用于 input 元素。
如果该方法未设置参数，则返回被选元素的当前值。
方法一：返回 Value 属性
$(function(){ $('button').click(function(){ //返回input拥有text属性的val值 alert($('input:text').val()); //结果为Bill }); })Firstname:
Lastname:


方法二：设置 Value 属性的值
$(selector).val(value)

$(function(){ $('button').click(function(){ $('input:text').val('Bill Gates'); }); })Name:

方法三：使用函数设置 Value 属性的值
$(selector).val(function(index,oldvalue)) //oldvalue代表原来的值

$(function(){ $('button').click(function(){ $('input:text').val(function(n,c){ //返回原始值加Gates return c + "Gates"; }); }); })Name:

jQuery数组和对象操作
1.迭代
each(object,callback)
返回值:Object
注意:1.迭代函数中并不会改变当前元素的值, 无法改变返回后的对象
2.数组情况下：遍历数组中的每一个对象.第一个参数表示索引,第二个参数表示值, this表示当前遍历的元素, 可以通过返回false终止迭代
3.对象情况下：遍历对象的每一个属性, 即使函数返回false也依然会遍历完所有的属性, 第一个参数表示属性key(属性名称,是obejct类型),第二个参数表示值,this表示当前属性的值
//数组情况下 $.each(['a','b','c'],function(i,n){ alert('Item#'+i+":"+n); if(i>=1){ return false; //会终止 } });

$('#iterateObject').click(function(event){ $.each({ name:'zhangsan', sex:'male', age:12 },function(i,n){ alert("Item#"+i.toString()+":"+n); if(i>=1){ return false; //他仍然会接着遍历完所有属性，不会因为false而停止 } }) })

2.筛选
.grep( array, callback, [invert]
返回值: Array
使用过滤函数过滤数组元素。
此函数至少传递两个参数：待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。
讲解:
默认invert为false, 即过滤函数返回true为保留元素. 如果设置invert为true, 则过滤函数返回true为删除元素.
$.grep([0,1,2],function(n,i){ //演示如何过滤数组中索引小于0的元素 return n>0; })

3.转换
jQuery.map( array, callback )
返回值:Array
说明:
将一个数组中的元素转换到另一个数组中。
作为参数的转换函数会为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。转换函数可以返回转换后的值、null（删除数组中的项目）或一个包含值的数组，并扩展至原始数组中。
注意:此函数和each函数唯一的区别就是回调函数可以改变当前元素.返回null则删除当前元素.
var arr = ['a','b','c','d','e']; $('div').text(arr.join(',')); arr = $.map(arr,function(n,i){ return (n.toUpperCase()+i); //['A0','B1','C2','D3','E4'] }); $('p').text(arr.join(',')); arr = $.map(arr,function(a){ return a+a; //['aaaa','bbbb','cccc','dddd','eeee'] }); $('span').text(arr.join(','));

$.map([0,1,2],function(n){ //原数组中每个元素加 4 转换为一个新数组 return n + 4; })$.map([0,1,2],function(n){ //原数组中每个元素扩展为一个包含其本身和其值加 1 的数组，并转换为一个新数组 return [n,n+1]; }); $.map( [0,1,2], function(n){ //原数组中大于 0 的元素加 1 ，否则删除 return n > 0 ? n + 1 : null; });

4.合并
  • .extend([deep],target,object1,[objectN])
    说明：1.用一个或多个其他对象来扩展一个对象，返回被扩展的对象
    2.第一个参数设置true，返回一个深层次的副本，递归复制找到任何对象。
    3.定义的属性不会被复制，从对象原型继承的属性会被复制；
//合并 settings 和 options，修改并返回 settings var settings = { validate:false, limit:5, name:'foo' }; var options = { validate:true, name:'bar' }; $.extend(settings,options); //结果：settings == { validate: true, limit: 5, name: "bar" }

.inArray(value,array)
说明：确定第一个参数在数组中位置，从0开始计数，没找到返回-1
var arr = [4,'Pete',8,'John']; $.inArray('John',arr); //3 $.inArray(4,arr); //0

.merge(first,second)
说明：1.合并两个数组，会改变第一个合并的数组
? 2.返回结果修改第一个数组的内容
$.merge([0,1,2],[2,3,4])

.unique(array)
说明：删除数组中重复的元素。只出来删除DOM元素数组，不能出来字符串或者数字数组
$.unique(document.getElementByTagName('div'))//删除重复的div标签

测试工具函数
判断对象是否是某一种类型, 返回的都是Boolean值:
jQuery.isArray( obj )
jQuery.isFunction( obj )
字符处操作工具函数
jQuery.trim( str )
返回值: string
说明:去掉字符串起始和结尾的空格
$.trim(' hello,how are you? ');

Url操作工具函数
.param(obj)
返回值:string
说明:
将表单元素数组或者对象序列化。是.serialize()的核心方法。
数组或jQuery对象会按照name/value对进行序列化，普通对象按照key/value对进行序列化
var params = {width:1680,heoght:1050}; var str = jQuery.param(params); $('#results').text(str); //width=1680&height=1050

扩展工具函数与jQuery包装集函数
扩展工具函数只需要对jQuery(即"$")进行扩展. 通常开发工具函数或者插件的人希望在开发时使用"$"
(function($) { $.myExtendMethod = function(o) { alert(0); }; })(jQuery);

测试操作
$.isWindow()
?1. 作用：判断传入的对象是var否是window对象
?2. 参数：需要判断的的对象
?3. 返回值：true/false

$.isArray()
?1. 作用：判断传入的对象是否是array对象
?2. 参数：需要判断的的对象
?3. 返回值：true/false
function w(htnl){ document.body.innerHTML += '
'+html; }w($.isArray([10,25,3])); //true w($.isArray(new Array())); //true w($.isArray(null)); //false

$.isFunction()
  1. 作用：判断传入的对象是否是function函数
    1. 参数：需要判断的的对象
    2. 返回值：true/false
    3. 补充：jQuery框架本质上是一个函数，$.isFunction(jQuery); 结果为 true
    function w(html){ documnet.body.innerHTML +='
    ' +html; } function foo(){ alert('CodePlayer'); } w($.isFunction(foo)); //true w($.isFunction(function(){})); //true w($.isFunction(null)); //false

    $.isEmptyObject()
用于判断指定参数是否是一个空对象。
所谓”空对象”，即不包括任何可枚举(自定义)的属性。简而言之，就是该对象没有属性可以通过for…in迭代。
该函数属于全局jQuery对象
注意：既检测对象本身的属性，也检测从原型继承的属性
isEmptyObject:function(obj){ var name; for(name in obj){ return false; } return true; }

User.prototype.word = 'Hello'; //自定义的原型对象上的属性也是可枚举的 w($.isEmptyObject(new User())); //false //数组 w($.isEmptyObject([])); //true

$.type()
返回值：string
用于确定JavaScript内置对象的类型，并返回小写形式的类型名称
typeof运算符，可以确定数据的类型。不过，对于绝大多数对象而言，typeof运算符都返回”object”，无法区分具体的类型。jQuery.type()可以更加精确地确定JS内置对象的类型。
$.type(undefined); //undefined $.type(true); //boolean $.type(new Number(3)); //number $.type(function(){}); //function

$.isPlainObject()
返回值:Boolean
用于判断指定参数是否是一个纯粹的对象，就是该对象是通过‘{}’或‘new Object'创建，属于全局对象
//在当前页面内追加换行标签和指定的HTML内容 function w(html){ document.body.innerHTML +='
'+html; }w($.isPlainObject({ })); //true w($.isPlainObject(new Object())); //true w($.isPlainObject({name:'CodePlayer'})); //true w($.isPlainObject(true)); //false

$.isNumeric()
用于判断指定参数是否是一个数字值
返回值：Boolean，若指定的参数是一个数字值，则返回true，否则返回false。字符串形式的数字也符合条件。
w($.isNumeric(12)); //true w($.isNumeric(12.35)); //true w($.isNumeric('12')); //true w($.isNumeric(null)); //false

$.isXMLDoc()
说明：用于判断一个DOM节点是否位于XML文档中，或者其本身就是XML文档。
该函数主要用于判断指定文档是一个XML文档还是一个HTML(或XHTML)文档。
返回值：Boolean，若指定的DOM节点位于XML文档中(或者是一个XML文档)，则返回true，否则返回false。
w($.isXMLDoc(document)); //false w($.isXMLDoc(document.body)); //false w($.isXMLDoc(xmlDoc)); //true

$.contains()
该函数可以去除字符串开始和末尾两端的空白字符(直到遇到第一个非空白字符串为止)。它会清除包括换行符、空格、制表符等常见的空白字符。
返回值:Boolean，如果指定元素包含另一个元素，则返回true，否则返回false
CodePlayer
专注于编程开发技术分享
var n1 = document.getElementById('n1'); var n2 = document.getElementById('n2'); var n3 = document.getElementById('n3'); var n4 = document.getElementById('n4'); var span = document.getElementsByTagName('span'); //n1包含n2 w($.contains(n1,n2)); //true //n1不包含n4 w($.contains(n1,n4)); //false

字符串操作
param()
将表单元素数组或者对象序列化
var obj={name:"张三",age:12} var str = jQuery.param(obj); $("#results").text(str);

trim()
去掉字符串起始和结尾的空格,多用于用户数据的清洗
console.log('--'+$.trim(" hello, how are you? ")+'--');

AJAX
1.创建XMLHttpRequest对象
var request = new XMLHttpRequest();

2.使用open方法设置和服务器的交互信息
open()
参数：
1.指定HTTP方法或动作，这个字符串不区分大小写，通常大家用大写字母来匹配HTTP协议。
取值可以为：GET/POST/HEAD/DELETE/OPTIONS/PUT
GET:用于常规请求，适用于URL完全指定请求资源，请求对服务器没有任何副作用，服务器的响应是可缓存的
POST:用于HTML表单，它在请求主体中包含额外数据，且这些数据常存储到服务器上的数据库中。相同URL的重复POST请求从服务器得到的响应可能不同，同时不应该缓存使用这个方法的请求。
2.URL,请求的主题，是相对于文档的URL。跨域请求会报错。
3.Boolean类型的值，如果值为false代表同步请求，send()方法将阻塞直到请求完成。如果这个参数是 true 或省略，请求是异步的
request.open('get','https://api.muxiaoguo.cn/api/lishijr/');

3.设置requestHeader()
使用 setRequestHeader() 方法来添加 HTTP 头
setRequestHeader()方法需要在open()和send()方法之间调用
request.setRequestHeader(属性名称，属性值);

常用的数据格式(编码可带可不带)
1.发送json格式数据
request.setRequsetHeader('Content-type','application/json; charset=utf-8');
2.发送表单数据
request.setRequestHeader('Content-type','application/x-www-form-urlencoded; charset=utf-8');

3.发送纯文本数据,不指定Content-type时，此是默认值
request.setRequestHeader('Content-type','text/plain; charset=utf-8');

4.发送html文本
request.setRequestHeader('Content-type','text/html; charset=utf-8');

4.设置发送的数据，开始和服务器端交互
send()
参数： 请求主体内容，如果没有，为null，或者省略。
request.send(); //调用send()之后,请求就会发送到服务器

5.取得响应，注册事件
发送请求后，会收到响应，收到响应后，XHR对象的以下属性会被填充上数据。
  • responseText：作为响应体返回的文本。
  • responseXML：如果响应的内容类型是"text/xml"或"application/xml"，那就是包含响应数据的 XML DOM 文档。
  • status：响应的 HTTP 状态。
  • statusText：响应的 HTTP 状态描述。
  • readyState：返回HTTP请求状态
    0 open()尚未调用 UNSENT
    1 open()已调用 OPENED
    2 接收到头信息 HEADERS_RECEIVED
    3 接收到响应主体 LOADING
    4 响应完成 DONE
  • readystatechange 请求状态改变事件
    当readyState值改变为4或服务器的响应完成时，所有的浏览器都触发该事件
6.如果请求完成，并且响完成，可以获取到响应数据

常用请求使用
使用get请求发送有参请求

使用post发送有参请求

    推荐阅读


    上一篇：深入剖析RocketMQ源码-NameServer

    下一篇：《半岛铁盒》人物小传（1）