前端入门系列(一):jQuery核心总结

jQuery

最近重温了《锋利的jQuery》这本书,受益匪浅。

如果你和前端若只如初见,如果你和jQuery一见钟情,一纸文字铺满了你相恋的他(她)的所有。

我把整理出来的知识点用网状图串联了起来,并且每个部分分点概述,将一些类似的方法和属性排列在一起。其实最重要的区块就是5个部分。

根据用户交互的基本流程,通常代码是获取元素,然后绑定相应的事件,接着触发这个事件后可以选择不同的交互方式。比如增加节点改变Dom,或者对某个元素设置动画、亦或者进行aJax与后台进行数据交互。

知识点串联图

jQuery 选择器总结(继承CSS风格)#

常用

标签、Id、class选择器、群组选择器、后代选择器(只有Id返回单个元素)

层次选择器

后代选择器

选取祖先所有的后代元素(后代包括孙、曾孙.....) A B

子元素选择器

选取父元素的子元素(不包括子元素的子元素) A>B

后一个同辈元素

选取指定元素元素后一个同辈元素(集合) A+B 等价于next()方法

后面的所有同辈元素

选取指定元素后面的所有同辈元素(集合) A~B 等价于nextAll()方法

这里将siblings()方法与next()和nextAll()作对比,

siblings()是选取匹配元素前后所有同辈元素,与位置无关,结果不包含自己本身

过滤选择器

注意:在所有过滤选择其中,只有 :first和 :last和 :eq(index)返回单个元素,其他都返回集合元素

基本过滤选择器(index从0算起)

选择首元素

:first

选择末尾元素

:last

去除所有与给定选择器匹配的元素

:not(selector)

索引匹配

  • 索引从0开始,选择索引是偶数的所有元素
:even //若匹配元素的子元素也匹配,也要计算在内
  • 选择索引是奇数的所有元素
:odd
  • index从0开始,选择索引等于index的元素
:eq(index)
  • index从0开始,选择索引大于index的元素
:gt(index)     // gt是greater than的缩写
  • index从0开始,选择索引小于index的元素
:lt(index)

选取所有的标题元素

例如h1,h2,h3等

:header

选取当前正在执行动画的函数

:animated

选取当前获取焦点的元素

:forcus

内容过滤选择器

选取文本内容中含有text的元素

:contain(text)

选取含有选择器所匹配的元素的元素

:has(selector)

选取含有子元素或者文本的元素

:parent  //将文本元素计算在内

选取不包含子元素或者文本的元素

:empty  //将文本元素计算在内

可见性过滤选择器

选取所有不可见元素

:hidden    //包括display:none 和 visibility:hidden

选取所有可见元素

:visible

属性过滤选择器

选取拥有此属性的元素

[attribute]

选取属性值为value的元素

[attribute=value]

选取属性值不为value的元素

[attribute!=value]

选取属性值以value开始的元素

[attribute^=value]

选取属性值以value结束的元素

[attribute$=value]

选取属性值中含value的元素

[attribute*=value]

选取属性值等于value或者以value作为前缀(value后跟着连字符“-”)的元素

[attribute|=value]

用属性选择器合并成复合选择器

 [attribute1][attribute]...

子元素过滤选择器(index从1算起)###

选取每个父元素下的第index个子元素或者奇偶元素(index从1算起)####

//除了这三个参数,也可以写n的表达式,比如3n+1,n从1开始
:nth-child(index,odd,even) 

选取每个父元素下的第一个子元素

:first-child

选取每个父元素下的最后一个子元素

:last-child

这里与基本过滤选择器的:first和:last做对比,:first和:last只返回单个元素,且不是针对子元素。

选取某个元素是它父元素中的唯一的子元素

:only-child

表单对象属性过滤选择器

选取所有可用元素

:enabled

选取所有不可用元素

:disabled

选取所有被选中的元素(单选框、复选框)

:checked

选取所有被选中的选项元素(下拉列表中)

:selected

表单对象选择器

选取所有的input、textarea、select和button元素

匹配表单内上述4种元素

$.('#form1:input')

只匹配input元素

$.('#form1 input')

匹配单行文本框

:text

匹配所有密码框

:password

匹配所有的单选框

:radio

匹配所有的多选框

:checkbox

匹配所有的提交按钮

:submit

匹配所有的图像按钮

:image

匹配所有的重置按钮

:rest

匹配所有的按钮

:button

匹配所有的上传域

:file

匹配所有不可见元素

:hidden

jQuery事件总结

加载Dom事件

$(window).load() 或 $(document).ready()

事件绑定

常用绑定方法   bind(type [,data] , fn )             
//type类型有blue、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress和error等

简写的事件

比如click,mouseover,和mouseout

合成事件

hover() 事件

hover()事件是mouseenter和mouseleave的合成事件
hover()和mouseover、mouseout有区别。后者光标进入绑定元素的子元素时,会触发mouseout

toggle(fn1,fn2...)

用于模拟鼠标连续单击事件第一次触发fn1,第二次触发fn2。依次触发到最后一个,随后重复对这几个函数轮番调用

事件冒泡--阻止事件冒泡--事件对象

jQuery中不支持事件捕获,需要事件捕获应用js原生方法

阻止事件冒泡的方法

bind(type,function(event)) {}      //事件对象

bind方法中传入event对象并使用event.stopPropagation()
注意:如果你使用jQuery1.7版本或者更新,请使用on()方法,jQuery对绑定进行了封装,替代了原来的delegate()、live()、bind()方法

阻止默认行为

event.preventDefault()

两者都阻止

在事件处理函数中return false即可

事件对象的属性

获取事件的类型

event.type

阻止默认的事件行为

event.preventDefault()

阻止事件的冒泡行为

event.stopPropagation

获取触发事件的元素

event.target

获取光标相对于页面的x坐标和y坐标

event.pageX   和 event.pageY

获取鼠标单击事件(click)中鼠标的左、中、右键

event.which分别返回1、2、3

移除事件

$.unbind( [type] [fn])

注意:如果你使用jQuery1.7版本或者更新,off()替代unbind()方法

模拟操作

有时需要模拟用户操作来达到单击效果,例如在用户进入页面后,就触发click事件,而不需要用户主动单击。

$.trigger(type,[data]) //触发绑定的事件,默认执行浏览器操作
$.triggerHandler()  //  触发绑定的事件,而不执行浏览器默认操作

jQuery-Dom总结

基本操作--查找、创建、插入、删除、复制、替换、包裹(7种操作)##

查找元素节点

jQuery选择器

查找属性节点

$.attr()

创建元素节点

选择器的形式

$("html")

创建文本节点 (与元素节点一起创建)

$("html")  //将文本包含在html中

创建属性节点(与元素节点一起创建)

$("html") //为元素添加属性

追加元素

在每个匹配元素的内部追加内容

$.append()  或$.appendTo()

在每个匹配元素的内部前置内容

$.prepend()  或$.prependTo()

在每个匹配元素之后插入内容

$.after()        或$.insertAfter()

在每个匹配元素之前插入内容

$.before()    或$.insertBefore()

删除节点有三个方法

remove()、detach()、empty()

empty()不是真正意义上的删除,只是清空节点内部内容

remove()、detach()

相同点:清除后会返回该节点的引用,即可以继续插入该节点到Dom

不同点:detach()会保留节点绑定的事件、附加的数据

复制节点

$.clone([true])           //传入参数true可选,表示同时复制节点的绑定事件

替换节点

$.replaceWith()     和$.replaceAll()   //前者A用B来替换   后者A替换所有的B

将匹配元素进行单独的包裹

$.wrap() //A用B来包裹

将匹配元素用一个元素包裹

$.wrapAll 和 $.wrapInner

属性操作--获取与设置属性、删除属性

获取和设置属性

 $.attr()   和    $.attr({ })

删除属性

$.removeAttr()

样式操作--获取与设置样式、添加样式、删除样式、切换样式、判断是否含有某个样式

获取与设置样式

其实就是用属性操作中的$.attr()方法获或设置class的值

追加样式

$.addClass()            //设置是替换,追加是保留原来的class基础上增加

移除样式

$.removeClass([class1] [class2]..)       
//可以删除多个class,参数之间空格。无参数表示删除所有的class

切换样式

$.toggleClass([class1] [class2].. )          //原来有传入的样式名,则删除;无则添加

判断元素是否有某个样式

$.hasClass()        //有则返回true  无则返回false

文本操作--设置与获取HTML、文本和值

设置与获取HTML

$.html()

文本

$.text()       //通常用于内容标签

$.val()         //通常用于文本框 、下拉列表、单选框、多选框等;如果元素为多选,则返回一个包含所有值得数组

遍历访问节点(常用于事件处理中)##

获取匹配元素的所有子元素集合

$.children()                 //与$.parent()相反

这里还有一个$.parents()的方法,获得每个匹配元素的祖先元素,与parent()不同,获得第一个父节点时并没有停止查找,而是继续查找最后返回多个节点

另一个$.closet()与$.parent()类似,不同的是closet()返回匹配元素的最近的一个父节点

取得匹配元素后面紧邻的同辈元素

$.next()            后面紧邻所有   $.nextAll()

取得匹配元素前面紧邻的同辈元素

$.prev()            前面紧邻所有   $.prevAll()

取得匹配元素前后所有的同辈元素

$.siblings()

在当前选中元素中找到符合条件的后代,返回的是子元素###

$.find()

在当前选中元素中找到符合条件的当前元素集合,返回的是当前元素

$.filter()

对 jQuery 对象进行迭代,为每个匹配元素执行函数

$.each(function(){})

...省略的许多方法与jQuery选择器类似

CSS-DOM操作

获取或设置元素的样式属性

$.css()

获取或设置元素的宽度或高度

$. width(value)和$.height(value)//  $. css("width")也可以获取元素宽度,但与元素的样式设置有关,可能获取到为auto;

而$.width()获取的是元素的实际宽度

关于元素定位常用的方法

获取元素在当前视窗的相对偏移

$.offset().dir    //dir 可以为top right bottom left

获取元素相对于最近一个position样式属性设置为relative或者absolute父节点的相对偏移

$.position().dir  //dir 可以为top right bottom left

获取元素的滚动条(假如有的话,通常是那些设置了overflow:auto的元素,而内容过长)距离顶端或左侧的距离

$.scrollTop()
$.scrollLeft()       //通常上下布局的页面document一般都会有滚动条,这时候使用  $(document).scrollTop()可以很方便获取滚动条里页面顶部的距离

jQuery动画总结

基本动画 (速度参数 slow normal fast 自定义毫秒数)##

show()和hide()   //显示隐藏 两者组合 toggle()
fadeIn() 和 fadeOut() //淡入淡出两者组合 fadeToggle()
slideDown() 和slideUp  //向下滑动显示  向上滑动隐藏两者组合 slideToggle()

自定义动画

注意: css()方法并不会加入动画队列中,而会在动画开始就立即执行,要在动画执行完成后改变css样式,可以将css()写入回调函数中

animate 同时进行的动画 只需传入多个键值对
animate 进行分步动画 只需按jQuery链式写法就好

animate({ },speed,callback)  //实现累加累减动画只需在px前用+=或-=

停止正在进行的动画

stop([clearQueue],[gotoEnd])     //默认情况下  clearQueue 接gotoEnd都是false

要点:

  • stop() 停止当前正在进行的动画(只阻止链式动画队列中当前运行的那一步动画)

  • stop(true,false) 停止当前的动画队列(正在进行+未进行,即链式动画队列)

    使用情况:比如用户将光标移入某个元素,动画没结束就移出了。

  • stop(true,true) 停止当前的动画队列,并让动画直接到达结束状态

    使用情况: 通常用于后一个动画需要基于前一个动画的末状态的情况

判断元素是否处于动画状态(避免动画累计导致和用户的行为不一致)##

常用方法:

if(! $(element).is(":animated")){

//如果当前没有进行动画,则添加新动画

}

延迟动画的方法

delay(毫秒)

jQuery-ajax

说明:ajax仅做简要总结,更多可参考jQuery中文参考文档,包含了所有新版API或弃用API的说明。

jQuery.ajax([setting])方法

1.5.0以前版本

返回的是XHR对象

  • type:类型, "POST"或“GET”,默认为“Get”
  • url:发送请求的地址
  • data:是一个对象,连同请求发送到服务器的数据
  • dataType: 预期服务器返回的数据类型。如果不指定,jQuery将自动根据HTTP包MIME信息来只能判断,一般采用j- son格式,可以设置为"json"
  • success:是一个方法,请求成功后的回调函数。传入返回后的数据,以及包含成功代码的字符串
  • error:是一个方法,请求失败时调用此函数。传入XMLHttpRequest对象

1.5.0及更新版本

jQuery使用原生promise对象封装了一个deffered对象,因此你可以新版可以写成链式回调函数

$.ajax("test.html")
 .done(function(){ alert("yes"); })
 .fail(function(){ alert("no"); });

done()相当于success方法,fail()相当于error方法。采用链式写法以后,代码的可读性大大提高。

推荐阅读更多精彩内容