最近重温了《锋利的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()不同,获得第一个父节点时并没有停止查找,而是继续查找最后返回多个节点
另一个 . c l o s e t ( ) 与 .closet()与 .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方法。采用链式写法以后,代码的可读性大大提高。
PS:更多前端资讯、技术干货,请关注公众号「前端新视界」,后台回复 “1” 获取100本PDF前端电子书
回复 “2” 获取小编精选的Python编程电子书