JQuery学习笔记

jQuery 库 - 特性

jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

优点：

  • 简化JS的复杂操作
  • 不再需要关心兼容性
  • 提供大量实用方法

jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action()

  • 美元符号定义 jQuery
  • 选择符（selector）“查询”和“查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

用$获取的元素是获取到符合条件的一组，但读只能读到第一个元素（text()除外），写（赋值）可以赋值所有元素；

jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。

sizzle选择器

层级选择

>：选择直接子元素
+：选择下一个子元素
~：选择下面所有子元素

$('div > span').css('border','1px red solid');
//div下的span直接子元素
$('div > span').css('border','1px red solid');
//div的下一个span元素
$('p ~ span').css('border','1px red solid');
//div下面的所有span元素
基本筛选

div:animated 有运动的div元素
div:eq(num) 索引值未num的div元素
div:even div:odd 索引值为奇偶数的div元素
div:first div:last 第一个/最后一个div元素
div:gt(num) div:lt(num) 索引值大于/小于num的div元素

内容筛选

:contains() 选择有指定内容的元素
:empty 选择内容为空的元素
:parent 选择有内容的元素

可见性筛选

:hidden
:visible

子元素筛选

:first-child
:last-child
:first-of-type
:last-of-type
:nth-child()
:nth-of-type()
:only-child
:only-of-type

$('#div1 span:last-child').css('background','red'); 
//div1下面找span并且span要是第一个/最后一个子元素才选择到

$('#div1 span:first-of-type').css('background','red');
//div1下面的span集合并且选择到集合中第一个/最后一个span元素

$('#div1 span:nth-child(2)').css('background','red');
//div1下面找span并且span要是第二个子元素才选择到（索引是从1开始的）

$('#div1 span:nth-of-type(2)').css('background','red');
//div1下面的span集合并且选择到集合中第二个span元素（索引是从1开始的）

$('#div1 span:only-child').css('background','red');
//div1下面找span并且只有span一个子元素才选择到（只能有一个子元素）

$('#div1 span:only-of-type').css('background','red');
//div1下面找span并且子元素中只有一个span标签才选择到（可以有多个子元素）
表单筛选

:button 按钮
:checkbox 复选框
:radio 单选框
:checked 选中状态的
:disabled 被禁止操作的
:enabled 被允许操作的
:selected 下拉菜单被选中的

jQuery选择器

jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p")      //选取<p>元素。
$("p.intro")// 选取所有 class="intro" 的 <p> 元素。
$("p#demo") //选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]")    //选取所有带有 href 属性的元素。
$('input[value]')//选取所有带有 value 属性的input元素。
$("[href='#']")//OOO 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']")// 选取所有带有 href 值不等于 "#" 的元素。

$("[value^='.jpg']")//OOO 选取所有 value 值以 ".jpg" 开头的元素。
$("[href$='.jpg']")//OOO 选取所有 href 值以 ".jpg" 结尾的元素。
$("[href*='.jpg']")//OOO 选取所有 href 值含有 ".jpg" 的元素。
$("[href*=.jpg]")//像这样不带引号也可以，但有空格隔开时必须要带引号。如下：
$('div[class="box box2"]')

jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

$("p").css("background-color","red");

更多选择器实例看 jQuery 选择器参考手册

jQuery 事件

jQuery 是为事件处理特别设计的。
jQuery 事件处理方法是 jQuery 中的核心函数。

如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。

jQuery 名称冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用$符号。
jQuery 使用名为noConflict()的方法来解决该问题。

var jq=jQuery.noConflict();//帮助您使用自己的名称（比如 jq）来代替 $ 符号。

$()下的常用方法

filter()

将匹配元素集合缩减为匹配指定选择器的元素；

使用该方法的第二个形式是，通过函数而不是选择器来筛选元素。对于每个元素，如果该函数返回 true，则元素会被包含在已筛选集合中；否则，会排除这个元素。

not()

和filter()相反

has()

将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元素的后代的子集(类似于二次选择)

filter()和has()区别
filter()方法，筛选条件作用于自身；
has()方法，筛选条件是作用于它的后代元素中。
has和filter的作用范围不同而已

$("li").has(".topLine"), $("li").filter(".topLine");

has返回的是后代满足class=topLine的自身li对象；
filter则返回的是自身li 为class=topLine的元素；

first() last() OO

选择集合的第一个/最后一个；

next() prev() OOO

获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则在集合中再次匹配选择器的元素；

$("p").next(".selected").css("background", "yellow");
find()OOO children()OO

find()获得当前元素集合中每个元素的所有符合条件的后代，通过选择器、jQuery 对象或元素来筛选。

.find() 与 .children() 方法类似，不同的是后者仅沿着 DOM 树向下遍历单一层级（直接后代）

eq() OOO

:eq() 选择器选取带有指定 index 值的元素；
经常与其他元素/选择器一起使用，来选择指定的组中特定序号的元素

index() OOO

index() 方法返回指定元素相对于其他指定元素的 index 位置

$(selector).index(element)
//element可选；规定要获得 index 位置的元素
attr() OOO

attr() 方法设置或返回被选元素的属性值；

返回：
$(selector).attr(属性名)；
设置：
$(selector).attr(属性名,属性值)；

attr()和css()区别
css和attr都可以动态的修改html中元素的属性。
但css()是用来操纵元素style{}的，而attr()是用来操作元素固有的属性(如title等)，且attr()的权重比css()要大，它会覆盖css()的样式。

addClass() removeClass() toggleClass() OO

向被选元素添加/移除一个或多个类；

addClass()如需添加多个类，请使用空格分隔类名；
removeClass()如果没有规定参数，则该方法将从被选元素中删除所有类；
toggleClass()如果class已经有了则删除这个class，没有则添加；

一般可以用attr()来操作class；

width() innerWidth() outerWidth() OOO

width() 方法返回或设置匹配元素的宽度；
如果不为该方法设置单位，则默认以像素为单位；

innerWidth() 方法返回第一个匹配元素的内部宽度；（width + padding，但不包含 border 和 margin）
outerWidth() 方法返回第一个匹配元素的外部宽度；
（width + padding 和 border）
类似于js的offsetWidth，但offsetWidth获取不到隐藏元素的值
outerWidth(true) （width + padding + border + margin）

insertBefore() insertAfter() before() after() OOO

该方法在指定的已有子节点之前/之后插入新的子节点；（剪切）
区别：
a.insertBefore(b)

a在前，b在后,
b是一个自带的选择器（ 即不用$('') ）

<body>
<p class='p1'>p1:hello</p>
<p class='p2'>p2:wenwen</p>
</body>
<script>
$(function(){
    $('.p2').before('.p1');
})
</script>
得到：
p2:wenwen
p1:hello

a.before(b)

把元素添加到指定的节点的前面
a在后，b在前
a是页面上已有的选择器，b是你需要添加的内容
注意：是什么就是什么，会识别标签,b不是一个选择器

<body>
<p class='p1'>p1:hello</p>
<p class='p2'>p2:wenwen</p>
</body>
<script>
$(function(){
    $('.p2').before('.p1');
})
</script>
得到：
p1:hello
.p1
p2:wenwen
//因为这里的b不是选择器，如果想选到.p1这类，需要这样$('.p1')

调换位置（剪切）是说页面上已经存在的东西，这两个方法里面也可以加页面上没有的东西；

$('<p class='p3'>p3</p>').insertBefore('.p1');
appendTo() append() prependTo() prepend() OOO
$(content).appendTo(selector)
$(selector).append(content)
$(content).prependTo(selector)
$(selector).prepend(content)
参数 描述
content 必需。规定要插入的内容（可包含 HTML 标签）。
selector 必需。规定把内容追加到哪个元素上。

该方法在被选元素的结尾/开头（仍然在内部）插入指定内容
appendTo()和原生的appendChild()差不多；

appendTo()和append()的关系同insertBefore()和before()；

remove()OOO detach()O empty()O
$(selector).remove();
$(selector).detach();
$(selector).empty();

remove()和detach()方法移除被选元素，包括所有文本和子节点（包括元素本身的节点（标签）），但会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素；

remove()方法除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除；

detach() 会保留所有绑定的事件、附加的数据；

empty()方法只移除被选元素内的所有内容，但不包括元素本身的节点（标签）；

on() off() one() OOO

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。支持自定义事件；

$(selector).on(event,childSelector,data,function,map)；

绑定不同事件的不同操作：
$('div').on({
    'click' : function(){
        alert(123);
    },
    'mouseover' : function(){
        alert(456);
    }
});

另外有一种绑定事件方法：
$('div').click(function(){
    ....
})
参数 描述
event 必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
childSelector 可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data 可选。规定传递到函数的额外数据。
function 可选。规定当事件发生时运行的函数。
map 规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

off() 方法通常用于移除通过on()方法添加的事件处理程序。

$(selector).off(event,selector,function(eventObj),map)
参数 描述
event 必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
data 可选。规定传递到函数的额外数据。
function 可选。规定当事件发生时运行的函数。
map 规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。
one() 方法为被选元素添加一个或多个事件处理程序，并规定当事件发生时运行的函数。 
$(selector).one(event,data,function)
参数 描述
event 必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。
data 可选。规定传递到函数的额外数据。
function 可选。规定当事件发生时运行的函数。

当使用 one()方法时，每个元素只能运行一次事件处理程序函数。

scrollTop() OOO

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置;

$(selector).scrollTop(offset)
参数 描述
offset 可选。规定相对滚动条顶部的偏移，以像素计。

如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移;
该方法对于可见元素和不可见元素均有效;

Event对象pageX which stopPropagation() preventDefault() OOO

pageX() 属性是鼠标指针的位置，相对于文档的左边缘，pageY()同理

实例：
$(document).mousemove(function(e){
  $("span").text("X: " + e.pageX + ", Y: " + e.pageY);
});

ev.pageX和clientX区别
clientX是相对于可视区的
ev.pageX(相对于文档的) = clientX(相对于可视区) + 滚动条的距离

which 属性指示按了哪个键或按钮；和原生js的keyCode差不多，但不止记录键盘还还能记录鼠标，但触发事件不能用click，因为键盘也可以触发click；

event.which

stopPropagation() preventDefault()

event.stopPropagation()；//阻止冒泡的操作
event.stopImmediatePropagation()；//阻止冒泡和当前元素的事件操作，要放在被阻止事件的前面
event.preventDefault()；//阻止默认事件
return false;//阻止默认事件 + 阻止冒泡的操作
offset() position() offsetParent() OOO

offset()：获取到屏幕的左距离，直接到最顶级元素的距离；

原生js的offsetLeft是到定位父级的距离，想要到顶级元素的距离需要自己封装一个函数，这里的offset()就相当于封装好的函数；

position()：到有定位的父级的left/top值,把当前元素转化成类似定位的形式；此方法只对可见元素有效；而且不认margin值；

offsetParent()：返回最近的祖先定位元素

val()00 size()0 each()000

val() 方法返回或设置被选元素的值

size()方法返回被 jQuery 选择器匹配的元素的数量；
和length()差不多；

each() 方法规定为每个匹配元素规定运行的函数；

$(selector).each(function(index,element))
//function为必需。为每个匹配元素规定运行的函数。
//index - 选择器的 index 位置
//element - 当前的元素（也可使用 "this" 选择器）返回得到的element是原生JS；
if(...){
    return false;//跳出循环，类似原生JS的break；
}

注意和$.each()有区别：

$(selector).each()专用于jquery对象的遍历；
$.each()可用于遍历任何的集合；
一堆动画类

show() hide() OO

show()hide()比css的display好，因为行内元素隐藏了再显示还是行内元素，块元素还是块元素

fadeIn() fadeOut() fadeToggle() OO
slideDown() slideUp() slideToggle() OO

get() 000

get() 方法获得由选择器指定的 DOM 元素；（jQ换成原生的js）

$(selector).get(index)；
//index    可选。规定获取哪个匹配元素（通过 index 编号）。

当需要进行元素之间的比较（应该避免这样的比较），先转成原生JS再比较，JQ容易出错（即使是同一个元素也可能返回false）

var $div = $('#div1');
var $p = $('#div p');

$p.parent().children().eq(0) == $p//都选择到p标签，但是结果返回false；
$p.parent().children().eq(0).get(0) == $p.get(0)//所以应该先转成原生JS；

//类似于空json和空数组比较；因为json数组等是属于引用类型，保存的值其实是地址，所以比较的其实是地址，所以不相等；
{} == {} //false; 
[] == [] //false;
text()O

text() 方法方法设置或返回被选元素的文本内容；

html()、text()、val()区别：
html()：取得第一个匹配元素或设置每一个匹配元素的html内容（包括标签<>），这个函数不能用于XML文档，但可以用于XHTML文档；

text()：取得所有匹配元素或设置所有匹配元素的文本内容，包括后代元素，纯本文不包括标签，<>会被编码；
（特例：获取时是获取所有，其他都是只获取第一个）

val()：是用来读取表单元素的"value"值；

text()方法不能使用在表单元素上,而val()只能使用在表单元素上

parents()O parent()OO closest()OOO

parents()获得当前匹配元素集合中每个元素的祖先元素，使用选择器进行筛选是可选的；（返回零个、一个或多个）

parent() 获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的；（返回零个、一个或多个）

closest() 方法获得匹配选择器的第一个祖先元素（也包括自身），从当前元素开始沿 DOM 树向上；必须写参数（返回零个或一个）

注意：一个节点的父级的兄弟节点不是该节点的父级节点；

parentsUntil() nextUntil() prevUntil() O

parentsUntil() 获得当前匹配元素集合中每个元素的祖先元素，直到（但不包括）被选择器、DOM 节点或 jQuery 对象匹配的元素。
nextUntil()、prevUntil()同理；

siblings() nextAll() prevAll() OO

siblings() 获得匹配集合中每个元素的所有同胞（兄弟节点），通过选择器进行筛选是可选的；

nextAll() 获得匹配元素集合中每个元素的所有跟随的同胞元素，由选择器筛选是可选的；
next()是获得匹配元素集合中每个元素的下一个兄弟节点；

prevAll()同理；

clone() OO

clone() 方法生成被选元素的副本，包含子节点、文本和属性。

$(selector).clone(includeEvents)；
//includeEvents
//可选。布尔值。规定是否复制元素的所有事件处理。
//默认地，副本中不包含事件处理器。
wrap()OO wrapAll() wrapInner() unwrap() O

wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中。把选中的内容一个一个从原有标签外部再包一个标签

wrapAll() : 整体包装，把选中的内容整体用一个标签包起来

wrapInner() : 内部包装，把选中的内容一个一个从原有标签内部再包一个标签

unwrap() : 删除包装 ( 删除父级 : 不包括body )

slice()O add()

slice()把匹配元素集合缩减为指定的指数范围的子集。
add() 方法将元素添加到匹配元素的集合中。

$()OOO
$(function(){  //等DOM加载完就可以执行了 , 性能要好（不用等图片(src)、flash等），但需要用到图片的width等属性时，用这个可能出错，因为没加载完；
//当然可以给图片加load()
$('img').load(function(){
    alert( $('img').width() );
})
});

window.onload = function(){};//要等整个页面加载完才执行

//DOMContentLoaded（不兼容低版本浏览器，jQ也是用它）

$(document).ready(function(){//第一种是它的简写
});
serialize() serializeArray()

看不懂以后补充；

animate() OOO

animate() 方法执行 CSS 属性集的自定义动画。

$(selector).animate(styles,speed,easing,callback)；

第一个参数 : {} 运动的值和属性

第二个参数 : 时间(运动快慢的) 默认 : 400

第三个参数 : 运动形式 只有两种运动形式 ( 默认 : swing(慢快慢) linear(匀速) )

第四个参数 : 回调函数 也可以用链式操作实现

stop()OOO finish()O delay()O

stop() 方法停止当前正在运行的动画。

两个参数：
$(selector).stop()；//默认 : 只会阻止当前运动
$(selector).stop(true); //阻止后续的运动
$(selector).stop(true,true); //可以立即停止到当前运动指定的目标点
$(selector).finish();  //立即停止到所有指定的目标点

delay() 方法对队列中的下一项的执行设置延迟。

delegate()OOO事件委托 undelegate()OO

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。多用于提高性能
使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

委托中this是指被委托的元素；
可以用delegateGetTatget()得到主动委托的元素；
$('ul').delegate('li','click',function(ev){
    alert（ $(this) ）；//li
    alert（ $(ev.delegateTarget) ）;//ul
}

原理：是通过事件冒泡实现的；
好处：性能更好，事件只添加到一个父级身上而不是多个子节点；当用一般方法给子节点添加事件后，再添加子节点，新的子节点并没有事件，但用delegate()就有事件；

$(selector).delegate(childSelector,event,data,function)

childSelector    必需。规定要附加事件处理程序的一个或多个子元素。
event    必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data    可选。规定传递到函数的额外数据。
function    必需。规定当事件发生时运行的函数。
replaceWith() replaceAll() O

replaceWith() 方法用指定的 HTML 内容或元素替换被选元素

replaceWith() 与 replaceAll()作用相同。
差异在于语法：内容和选择器的位置，以及 replaceAll() 无法使用函数进行替换。

trigger()主动触发 OOO

trigger() 方法触发被选元素的指定事件类型，并执行事件的默认行为；（像focus事件的焦点会定在输入框里）；而triggerHandler()不会执行事件的默认行为；
和自定义事件配合使用；

$(selector).trigger(event,[param1,param2,...])
event    必需。规定指定元素要触发的事件。可以使自定义事件（使用 bind() 函数来附加），或者任何标准事件。
[param1,param2,...]    可选。传递到事件处理程序的额外参数。额外的参数对自定义事件特别有用。
ev.data ev.target ev.type

data() 方法向被选元素附加数据，或者从被选元素获取数据。
target 属性规定哪个 DOM 元素触发了该事件。

hover()OO
hover(function(){},function(){});

hover()不是调用mouseover()和mouseout()的，而是mouseenter()和mouseleave().

区别在于mouseenter()和mouseleave()鼠标进入相应元素的区域时就触发事件，不会被其他更高层级的子元素挡住；

focusin() focusout() O

当在元素或在其内的任意子元素上发生 focus 事件时，focusin() 方法添加要运行的函数；

与focus()区别：focusin() 方法在任意子元素获得焦点时也会触发，因为支持冒泡，而focus()不支持冒泡事件；
focusin() 只有当当前元素有焦点时才触发，所以不能绑定到不能得到焦点的元素上（如div）；

所以focusin()可以绑定到没有不能得到焦点但子元素可以的元素上；

data() prop() OO

data()向被选元素附加数据，或者从被选元素获取数据。

$("#btn1").click(function(){
  $("div").data("greeting", "Hello World");
});
$("#btn2").click(function(){
  alert($("div").data("greeting"));
});

和attr()区别：attr()是被元素设置自定义属性，而data()是把数据存到JQ内部一个集合中，没有直接加到元素身上；
当需要缓存大量数据时，用data()，可以防止缓存泄露；

prop()和attr()差不多，前者是通过oDiv.index = i；的方式，而后者则是通过setAttribute()的方式；

都有一个删除数据的操作：
removeAttr() removeProp() removeData()

$下的常用方法

$().css()  $().html()  $().val()  : 只能给JQ对象用；
$.xxx()  $.yyy()  $.zzz()  : 不仅可以给JQ用，也可以给原生JS用 : 叫做工具方法
$.type()OOO

$.type() : 也是判断类型，相比原生js typeof()可以判断更多的类型，typeof()很多判断出来的只是object；

$.isxxx() OO

判断类工具，是则返回true；

$.isFunction()判断是否函数；

$.isNumeric()判断是否数字；字符串类型的数字也返回true，这个知识判断是不是数字，不管类型；进一步判断可以用$.type()

$.isArray()判断是否数组；

$.isWindow()判断是否window；

$.isEmptyObject()判断是否空对象；一般用来判断JSON和数组。

$.isPlainObject()判断是否对象类型；像 对象自变量{}或 new Object出来的对象都是true。

$.isXMLDoc()O 判断是否XMLDoc格式；

$.extend()OOO

功能很多，现在先介绍拷贝功能；
拷贝

var a = {
    name : "hello"
};
var b = a;

b.name = 'hi';
alert( a.name );//输出hi 
//json、数组等对象类型（引用类型）通过赋值的方法时改变b，a也会改变，因为实际上传递的是保存对象的地址
//JavaScript中除了基本类型(number,string,boolean,null,undefined)之外就是引用类型了，也可以说是就是对象了

应该用$.extend进行拷贝；
var a = {
    name : "hello"
};
var b = {};

$.extend( b , a , {age:20} );
//第二个后面的参数都会拷贝给b
b.name = 'hi';
alert( a.name )；//输出hello
alert( b.age )；//输出20

上面是浅拷贝，有第二层的json还是会像赋值那样被改变
var a = {
    name : {age:20}
};
var b = {};

$.extend( true , b , a );//默认是浅拷贝的,true表深拷贝

b.name.age = 30;
alert( a.name.age );//20 如果没有true，则输出30

详细解释看js基本类型与引用类型

$.extend是扩展$下的插件；
$.fn.extend是扩展$()下的插件；
$.proxy()OO

改变this指向

$(selector).proxy(functionName,document)；
//这样写是让functionName函数的this指向document，但不会执行函数，要同时执行要在后面加上();
$(selector).proxy(functionName,document)()；
//如果改指向同时要传参：
$(selector).proxy(functionName,document)(3，4)；//传参同时执行；
$(selector).proxy(functionName,document，3，4)；//传参但不执行；
$(selector).proxy(functionName,document，3)(4)；//传参同时执行；这样写也是可以的

有时用下面这种方法更简便：

function(){
    var This = this;
    function(){
        This.style....
    };
};
$.trim()OO

$.trim() ：移除字符串两侧的空白字符或其他预定义字符。

$.inArray()O

$.inArray() ：搜索数组中是否存在指定的值。
类似于原生js的indexof()；

makeArray() O

把类数组转成数组

$.parseJSON()OOO

把JSON类型的字符串，转换成真正的JSON数据；

只能针对JSON类型的字符串，要是严格的JSON，安全性较好，因为只能转换JSON类型的字符串，可以避免木马病毒；

$.parseHTML()O

转化HTML的形式的字符串,转成DOM节点，放到一个数组中;

var a = '<div>div</div><span>span</span>';
var arr = $.parseHTML(a);

arr[1].innerHTML = 'hello';
$('body').append( arr[1] );
$.parseXML()O

把XML形式的字符串，转成真正的XML节点;
XML很早就有了，后来慢慢被JSON取代，不过现在也有人用，XML最大的特点是可以自定义标签；

var a = '<?xml version="1.0" encoding="utf-8"?><hello>nihao</hello>';
//<hello>是自定义的标签
//<?xml version="1.0" encoding="utf-8"?>是XML必要的头部信息
$.merge()O

合并两个数组，只能两个；源码中可以合并特殊的JSON对象；

var a = [1,2,3];
var b = [4,5,6];
var c = $.merge(a,b);
$.map()O
var arr = ['a','b','c'];
arr = $.map(arr,function(val,i){
    return val + i;
});
//['a0','b1','c2']
$.grep()O

一个查找满足过滤函数的数组元素的函数。原始数组不受影响，返回值为数组。

$.unique()O

针对DOM节点的去重

end() addBack() O

end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。

$('div').next().css('background','red').end().css('color','blue');
//div变蓝，div下一个节点变红；

addBack()方法用于将之前匹配的元素加入到当前匹配的元素中，并以新的jQuery对象的形式返回。

$('div').next().css('background','red').addBack().css('color','blue');
div字变蓝，div下一个节点背景变红，字变蓝；
$.queue() .dequeue() O

JQ中的队列，存储的都是函数,当进行出队的操作时候，会自动执行相应的函数;
默认队列名为fx；

queue() 方法显示或操作在匹配元素上执行的函数队列。
dequeue() 方法为匹配元素执行序列中的下一个函数。
当调用 .dequeue() 时，会从序列中删除下一个函数，然后执行它。

注意，当通过 queue() 添加函数时，我们应当确保最终调用了 dequeue()，这样下一个排队的函数才能执行;

回调对象 O

回调对象（Callbacks object）模块是JQuery中的一个很基础的模块，很多其他的模块（比如Deferred、Ajax等）都依赖于Callbacks模块的实现。

Callbacks提供如下四个配置(参数)使用：

  • once 保证所有回调函数只能执行一次。
  • memory 记录上一次调用回调函数的参数值。如果在调用回调函数之后又通过add新回调函数，那么会立即使用memory记录的值调用新增的回调函数。
  • unique 保证每个回调函数只能被添加一次，即回调函数列表中每个函数都唯一。
  • stopOnFalse 如果一个回调函数返回false，则终止调用其他剩余会回调函数。

通过以上配置的字符串组合（以空格分隔）初始化回调对象。

var callbacks = $.Callbacks('unique memory'); //回调函数列表中每个函数必须唯一，且要记录上一次调用的参数值

Callbacks提供如下API(方法)：

  1. callbacks.add()
    向回调函数列表中增加一个回调函数或回调函数集合。
  2. callbacks.remove()
    从回调函数列表中删除一个回调函数或回调函数的集合。
  3. callback.fire()
    指定参数调用列表中所有的回调函数。

更多API请看 回调对象

延迟对象 OO

看阮一峰的网络日志关于 deferred对象详解 吧！！

AJAX相关工具

$.ajax()OOO
$.ajax({
    url : 'user2.php',
    type : 'post',//默认get方式，get方式传输的可以写到url?后面，JQ中也可以写到data中
    data : { user : $(this).val() },
    //发送到服务器的数据，和下面的传递参数data不同
    dataType : 'json',
    //规定返回数据的类型，
    //后端要写成规定的类型，不然会请求失败，
    //前端中JQ会根据规定类型自动转换
    //规定为JSON时，数组也可以返回
    success : function(data){
        if(data == 1){
            $('#div1').html('可以注册');
        }
        else if(data == 0){
            $('#div1').html('已经注册过了，不能注册');
        }
    },
    error : function(err){
        console.log(err.status);
    }
});

url:（默认为当前页地址）发送请求的地址。

type:请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。

data:发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以把processData参数设置为false，且以POST方式发送。

对象必须为key/value格式，
例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。
如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

dataType:预期服务器返回的数据类型。指定类型后，服务器要返回对应的类型，不然会请求失败。同时前端会JQ会自动转换对应类型。规定为JSON时，数组也可以返回；

如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。
可用的类型如下：

  1. xml：返回XML文档，可用JQuery处理。
  2. html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
  3. script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
  4. json：返回JSON数据。
  5. jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
  6. text：返回纯文本字符串。

async:默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。
初始化数据时需要用到异步:要先等数据返回回来后才能继续执行下一行；
注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
success：请求成功后调用的回调函数，有两个参数。

function(data, textStatus){
    //data:由服务器返回，并根据dataType参数进行处理后的数据。
    //data可能是xmlDoc、jsonObj、html、text等等
    //textStatus:描述状态的字符串。
    this; //调用本次ajax请求时传递的options参数
}

error:请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。

function(XMLHttpRequest, textStatus, errorThrown){
    //通常情况下textStatus和errorThrown只有其中一个包含信息
    this; //调用本次ajax请求时传递的options参数
}

更多参数网上查；

$.get()/post() OOO

使用 HTTP GET/POST 请求从服务器加载数据。

$.get('xxx.php',{name:"hello"},function(data){
    console.log(data);
},'xml').error(function(err){
    console.log(err);
});
//参数格式：
//(后台地址,传递的数据,请求成功后的回调函数,规定返回的数据类型).error(请求失败后的回调函数)

POST方式差不多；

$.param()OO

创建数组或对象的序列化表示（例如像这种通过&拼接起来width=1680&height=1050），同时类型转换为字符串。

serialize()OO

把form中的name值和value值通过&拼接起来

serializeArray()OO

把form中的name值和value值变成[{},{}]形式；

load()O

通过 AJAX 请求从服务器加载数据，并把返回的数据放置到指定的元素中。

$('div').load(url,function);
//回调函数可选；

注意：还存在一个名为 load() 的 jQuery 事件方法。调用哪个，取决于参数

$.getScript()O

通过 AJAX 请求来获得并运行一个 JavaScript 文件(动态加载script标签);

$.getScript(url,function);
//回调函数可选；
$.getJSON()O

通过 HTTP GET 请求载入 JSON 数据;参数用法同上；

$.ajaxSetup()

修改$.ajax()默认配置;

一堆全局事件

$.ajaxStart()
$.ajaxStop()
$.ajaxSuccess()
$.ajaxError()
$.ajaxComplete()
$.ajaxSend()

实战技巧

命名的规范
var $div = $('div');
var $span = $('span');
var aLi = document.getElementsTagName('li');

命名JQ时前面加$符，防止分不清是JS定义的元素还是JQ定义的元素；

容错处理
var oDiv = document.getElementId('div1');
var $div = $('#div1');
//并不存在id = div1的元素
oDiv.onclick = function(){
    ...
};//报错
$div.click(function(){
    ...
});//不报错

JQ操作不存在的元素时不会报错，但原生JS会报错；

可以利用$div.length判断元素是否存在，如果为0则选择的元素不存在；

利用This改指向
$('#div1').on('click',function(){
    
    var This = this;
    
    setTimeout(function(){
        
        $(This).css('background','yellow');
        
    },1000);
//像这样的两层函数，可以把this赋值给This获得外层函数的this；
运动的队列问题

像这样执行多个animate()时，会一个一个按顺序执行，上一个执行完再执行下一个，这就是队列；

$('#div1').animate({width : 300},1000);
$('#div1').animate({height : 300},1000);
$('#div1').animate({left : 300},1000);

如果鼠标快速的mouseover和mouseout，会导致给对象添加了很多animate()，所以应该animate()前先shop()一下；

$('#div1').mouseover(function(){
    $(this).stop().animate({width:200,height:200});
}).mouseout(function(){
    $(this).stop().animate({width:100,height:100});
posted @ 2017-05-05 17:54  CHENJIAJIE  阅读(162)  评论(0)  编辑  收藏  举报