JQuery学习笔记

最新推荐文章于 2023-11-17 11:13:31 发布

weixin_30454481

最新推荐文章于 2023-11-17 11:13:31 发布

阅读量422

点赞数

文章标签： json javascript 后端 ViewUI

原文链接：http://www.cnblogs.com/jacobb/p/6814256.html

版权

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(方法)：

callbacks.add()
向回调函数列表中增加一个回调函数或回调函数集合。
callbacks.remove()
从回调函数列表中删除一个回调函数或回调函数的集合。
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，并作为回调函数参数传递。
可用的类型如下：

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

转载于:https://www.cnblogs.com/jacobb/p/6814256.html

weixin_30454481

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery学习笔记

jQuery 库 - 特性jQuery 是一个 JavaScript 函数库。jQuery 库包含以下特性：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities优点：简化JS的复杂操作不再需要关心兼容性提供大量实用方法jQuery 语法jQuery 语法是为 ...
复制链接

扫一扫