选择器归纳、DOM遍历和事件处理、DOM完全操作和动画——w3cdream|前端学习-开发

'I'm W3cdream,创造',前·所·未·有
选择器归纳、DOM遍历和事件处理、DOM完全操作和动画

发布作者:萧强   发布时间:2015-07-28   阅读次数:7497

JQuery总结一:选择器归纳


1、基本选择器


选择符 匹配元素
* 所有元素
id 给定ID的元素
element 给定类型的所有元素
.class 给定类的所有元素
a,b 与a或b匹配的元素
a b a的后代元素中与b匹配的元素
a>b a的直接子元素中与b匹配的元素
a+b a的直接同辈元素中与b匹配的元素
a~b a的同辈元素中与b匹配的元素


2、位置选择器


选择符 匹配元素
a b:nth-child(index) a的子元素中,第index个与b匹配的元素(从1开始计数)
a b:nth-child(even) a的子元素中,第偶数个与b匹配的元素(从1开始计数)
a b:nth-child(odd) a的子元素中,第奇数个与b匹配的元素(从1开始计数)
a b:nth-child(2n+2) a的子元素中,第2n+2个与b匹配的元素(从1开始计数),n为自然数
a b:nth-last-child() 同:nth-child(),从最后一个元素开始计数
a b:first-child a的子元素中,第1个与b匹配的元素
a b:last-child a的子元素中,最后一个个与b匹配的元素
:only-child 作为其父元素唯一一个子元素的元素
a b:nth-of-type() 同:nth-child(),只计同类元素
a b:nth-last-of-type() 同:nth-last-child(),只计同类元素
a b:first-of-type() 同:first-child(),只计同类元素
a b:last-of-type() 同:last-child(),只计同类元素
a b:only-of-type() 没有同名元素的元素


3、属性选择器


选择符 匹配元素
[attr] 带有属性attr的元素
[attr="value"] attr属性值为value的元素
[attr!="value"] attr属性值不为value的元素)
[attr^="value"] attr属性值以value开头的元素
[attr$="value"] attr属性值以value结尾的元素
[attr*="value"] attr属性值包含value字符串的元素
[attr~="value"] attr属性值是空格分隔的字符串,其中一个字符串值是value的元素
[attr|="value"] attr属性值等于value或value后跟一个连字符(-)的元素


4、表单选择器


选择符 匹配元素
:input 所有、、和元素
:text type=”text”的元素
:password type=”password”的元素
:file type=”file”的元素
:radio type=”radio”的元素
:checkbox type=”checkbox”的元素
:submit type=”submit”的元素
:image type=”image”的元素
:reset type=”reset”的元素
:button type=”button”的元素
:enabled 启用的表单元素
:disabled 禁用的表单元素
:checked 选中的复选框和单选按钮
:selected 选中的元素


5、过滤选择器


选择符 匹配元素
:root 文档根元素
:header 标题元素,h1~h6
:animated 动画正在运行的元素
:contains(text) 包含文本text的元素
a:empty 不包含子节点的a元素
a:has(b) 至少包含一个b元素匹配的a元素(返回父元素a而非子元素b)
:parent 与:empty相反,返回包含子节点的元素
:hidden 隐藏的元素,包括
:visible 可见元素
:focus 获得焦点的元素
:lang(language) 给定语言代码的元素
:target URI标识符指向的目标元素,具体见::target用法


6、用于结果集中的选择器


这类选择器在CSS中不存在,但可以用于JQuery的结果中进行筛选。


选择符 匹配元素
:first 结果集中的第一个元素,对应方法为first(),如$("a b:first")<==>$("a b").first()
:last 结果集中的最后一个元素,对应方法为last(),如$("a b:last")<==>$("a b").last()
:not(a) 结果集中不与a匹配的元素,对应方法为not(),如$("a b:not(c)")<==>$("a b").not(c)
:even 结果集中索引是偶数的元素(从0开始),如$("a b:even")
:odd 结果集中索引是奇数的元素(从0开始),如$("a b:odd")
:eq(index) 结果集中索引是index的元素(从0开始),对应方法是eq(index),如$("a b:eq(2)")<==>$("a b").eq(2)
:gt(index) 结果集中索引大于index的元素(从0开始),如$("a b:gt(2)")
:lt(index) 结果集中索引小于index的元素(从0开始),如$("a b:lt(2)")


JQuery总结二:DOM遍历和事件处理


1、筛选元素


方法 返回的元素
.filter(selector) 与selector匹配的元素
.filter(callbaxk) callback中返回true的元素
.eq(index) 从0开始计数的第index个选中元素
.first() 选中元素中的第一个元素
.last() 选中元素的最后一个元素
.slice(start[,end]) 从0开始计数的给定范围内的选中元素
.not(selector) 与selector不匹配的元素
.has(selector) 与selector匹配的的后代元素


2.后代元素


方法 返回的元素
.find(selector) 与selector匹配的后代元素
.contents() 子节点(包括文本节点)
.children([selector]) 子节点,可传入selector进行筛选


3.同辈元素


方法 返回的元素
.next([selector]) 每个选中元素紧邻的下一个元素,可传入selector进行筛选
.nextAll([selector]) 每个选中元素后的所有同辈元素,可传入selector进行筛选
.nextUntil([selector],[filter]) 每个选中元素之后、直至但不包含第一个和selector匹配的元素,可传入filter进行筛选
.prev([selector]) 每个选中元素紧邻的上一个元素,可传入selector进行筛选
.prevAll([selector]) 每个选中元素前的所有同辈元素,可传入selector进行筛选
.prevUntil([selector],[filter]) 每个选中元素之前、直至但不包含第一个和selector匹配的元素,可传入filter进行筛选
.siblings([selector]) 所有同辈元素,可传入selector进行筛选


4.祖先元素


方法 返回的元素
.parent([selector]) 每个选中元素的父元素,可传入selector进行筛选
.parents([selector]) 每个选中元素的所有祖先元素,可传入selector进行筛选
.parentsUntil([selector],[filter]) 每个选中元素的所有祖先元素、直至但不包含第一个和selector匹配的元素,可传入filter进行筛选
.closest(selector) 与selector匹配的第一个元素,从元素自身开始沿DOM数向上搜索祖先元素
.offsetParent() 选中元素的第一个被定为的父元素(relative或absolute)


5.集合操作


方法 说明
.add([selector]) 将与selector匹配的元素添加原对象集合中
.addBack() 选中的元素加上JQuery内部栈中之前选中的元素
.end() 内部JQuery栈中之前选中的元素
.map(callback) 对每个选中调用回调函数callback之后的结果
.pushStack() 指定的元素


6.操作选中的元素


方法 说明
.is(selector) 确定匹配的元素中是否有传入的与selector匹配的元素
.index() 取得匹配元素相对其同辈元素的索引
.index(element) 取得匹配元素中与指定元素对象的DOM节点的索引
$.contains(a,b) 确定DOM节点a是否包含DOM节点b
.each(callback) 迭代匹配元素,对每个元素执行callback
.length 取得匹配元素的数量
.get() 取得与匹配元素对应的DOM节点列表
.get(index) 取得匹配元素中与指定索引对应的DOM节点
.toArray() 取得与匹配元素对应的DOM节点列表


7.事件绑定


方法 说明
.ready(handler) DOM和CSS完全加载后之间handler
.on(type,[selector],[data],handler) 绑定type事件,并指定事件处理程序handler;如果指定selector则执行事件委托
.on(events,[selector],[data]) 根据events对象的事件绑定多个事件处理程序
.off(type,[selector],handler) 解除on给元素绑定的事件处理程序
.bind(type,[data],handler) 绑定type事件,并指定事件处理程序handler
.one(type,[data],handler) 绑定type事件,并指定事件处理程序handler,handler被调用后立即解除绑定
.unbind([type],[handler]) 解除bind给元素绑定的指定事件处理程序(不指定则解除所有指定)
.delegate(selector,type,[data],handler) 给与selector匹配的元素绑定type事件,并指定事件处理程序handler
.delegate(selector,handlers) 给与selector匹配的元素绑定type事件,并指定事件处理程序handlers
.undelegate(selector,type,[handler]) 解除delegate给元素绑定的指定事件处理程序


8.其它方法


方法 说明
.trigger(type,[data]) 触发元素上的事件并执行事件的默认操作
.triggerHandler(type,[data]) 触发元素上的事件,但不执行事件的默认操作
$.proxy(fn,context) 创建一个新的在指定上下文中执行的函数。


JQuery总结三:DOM完全操作和动画


特性和属性


方法 说明
.attr(key) 取得特性key的值
.attr(key,value) 设置特性key的值为value
.attr(key,fn) 将fn的返回值作为key的值
.attr(obj) 根据传入的键值对象参数设置特性的值
.removeAttr(key) 删除特性key的值
.prop(key) 取得属性key的值
.prop(key,value) 设置属性key的值为value
.prop(key,fn) 将fn的返回值作为key的值
.prop(obj) 根据传入的键值对象参数设置属性的值
.removeProp(key) 删除属性key的值
.addClass(class) 为匹配元素添加传入的类
.removeClass(class) 为匹配元素删除传入的类
.toggleClass(class) 对于匹配元素,如果存在类则删除,不存在则添加
.hasClass(class) 匹配元素中至少一个包含传入的类则返回true
.val() 获取第一个匹配元素的value属性值
.val(value) 设置每个匹配元素的value属性


关于特性和属性:DOM元素的特性(Attribute)和属性(Property)


内容操作


方法 说明
.html() 获取第一个匹配元素的HTML内容
.html(value) 将每个匹配元素的HTML内容设置为value
.text() 获取所有匹配元素的文本,以字符串返回
.text(value) 将每个匹配元素的文本设置为value

常用昵称:萧强,全端布道者

姓名:“刘晓强”,W3CDream创始人,目前就职于易点付。专注于web前端和移动端方面知识的研究,熟练掌握photoshop和AI,喜爱Flat UI设计和Metro UI风格,熟练掌握CSS3+HTML5技术、LESS CSS和Sass CSS,还有jQuery框架方面及一些前端框架bootstrap响应式设计等。新浪微博
友荐云推荐

JQuery新手练习场

热点文章

新闻资讯

标签云

友情赞助