选择器:
基本选择器:
*
选择document中的所有元素
.class
class选择器
#id
id选择器
element
标签选择器
selector1,selector2,selector3
在文档中从上到下遍历每一个元素,然后匹配所有的并列的选择器,只要其中一个选择器匹配成功,这个元素就被选择了。
层次选择器
parent > child
首先用parent选择器匹配出元素集合,然后对这个元素集合进行遍历,找到每个元素中包含的匹配child选择器的子元素。
ancestor descendent
首先用ancestor选择器匹配出元素集合,然后对这个元素集合进行遍历,找到每个元素中包含的匹配descendent选择器的后代元素。
(子元素和孙元素都是后代元素)
prev + next
首先用prev选择器匹配出元素集合,然后对这个元素集合进行遍历,找到与每个元素同级的并且处在这个元素后面的的第一个相邻元素,然后测试是否
匹配next选择器。
prev ~ siblings
首先用prev选择器匹配出元素集合,然后对这个元素集合进行遍历,找到与每个元素同级的并且在处于这个元素后面的的所有兄弟元素,然后测试是否
匹配siblings选择器。
筛选选择
包含基本筛选,内容筛选,可见性筛选,子元素筛选, 表单元素筛选,属性筛选
(1)元素集合的基本筛选
:animated
在匹配的元素集合中筛选所有正在动画过程中的元素
:eq(index)
在匹配的元素集合中筛选索引等于index的元素 (索引从0开始,可是是-1,代表倒数第一个元素)
:gt(index)
在匹配的元素集合中筛选索引大于inex的所有元素(索引从0开始,可是是-1,代表倒数第一个元素)
:lt(index)
在匹配的元素集合中筛选索引大于inex的所有元素(索引从0开始,可是是-1,代表倒数第一个元素)
:not(selector)
在匹配的元素集合中去除selector选择器匹配的元素后的元素集合。
jQuery( ":lang(language)" )
在匹配的元素集合中筛选lang属性值等于anguage(或者以language开头后面直接跟着横杠的,例如en匹配en或者en-us)的所有元素,
然后遍历每一个元素的后代元素选择是元素集合中某个类型的所有元素。
:even
在匹配集合中筛选索引是偶数的所有元素(0,2,4,6,8,10都是偶数)
:odd
在匹配的元素集合中筛选索引是奇数的所有元素( 1,3,5,7,9都是奇数)
:first
在匹配的元素集合中筛选第一个元素。
:last
在匹配的元素集合中筛选最后一个元素。
:header
在匹配的元素集合中筛选元素类型是标题类型的元素,例如:h1,h2,h3,h4等
:root
文档的根元素,var z=$(":root").get(), z[0]永远等于document.documentElement(html元素)
:target
在匹配的元素集合中选择URL中的片段标识符与id属性值相等的元素。
内容筛选
:contains(“text")
在匹配的元素集合中筛选包含指定文本的元素.
:empty
在匹配的元素集合中筛选不包含任何子元素(包括文本节点)的元素.
:has("selector")
在匹配的元素集合中筛选包含至少一个子元素匹配指定选择器的元素。
:parent
在匹配的元素集合中筛选包含有至少一个子节点(或者元素或者文件节点)的元素
可见性筛选
:hidden
在匹配的元素集合中筛选隐藏的元素.(在布局中不占据空间)
:visible
在匹配的元素集合中筛选可见的元素.(在布局中占据空间)
属性筛选
可见性筛选
Jquery DOM操作
--------------------------------------------------------------------------------------------------------
DOM 拷贝
.clone()
创建jquery选择器匹配的元素集合的一个深复制。
DOM 包裹
.wrap(selector|html string|dom object | jquery object)
在jquery选择器返回的jquery元素集合中,给每一个元素外层包上一个html结构。
.wrapAll(selector|html string | dom object | jquery object)
在jquery选择器返回的jquery元素集合中,给所有元素外层包上一个html结构,这个元素集合中的所有元素会以第一个元素为参考点在dom中放到一块.
.warpInner
(selector|html string | dom object | jquery object)
在jquery选择器返回的jquery元素集合中,给每一个元素的内容包上一个html结构
DOM 内部插入
.append( content [, content ] )
content类型: html String or DOM Element or Array of elements or jQuery object
后置插入内容:遍历jquery选择器返回的jquery元素集合,在每个元素的最后一个子元素的后面插入参数指定的内容。
.appendTo( target )
target类型:
selector,
element, HTML string, array of elements, or jQuery object
后置插入内容:
遍历jquery选择器返回的jquery元素集合,把每个元素插入到target的最后一个子元素的后面。
.prepend( content [, content ] )
content Type: htmlString or Element or Array or jQuery
前置插入内容:
遍历jquery选择器返回的jquery元素集合,在每个元素的第一个子元素之前插入参数指定的内容。
.prependTo( target )
target类型:Selector or htmlString or Element or Array or jQuery
前置插入内容:
遍历jquery选择器返回的jquery元素集合,把每个元素插入到target的第一个子元素之前。
.text()Returns: String
.text() 遍历jquery选择器返回的jquery元素集合,组合每个元素的text内容,包含它们的后代元素的text内容.
.text(text) 遍历jquery选择器返回的jquery元素集合,设置每个元素的内容为指定的text.
.html()Returns: String
.html()遍历jquery选择器返回的jquery元素集合,把第一个元素的html内容返回。
.html(htmlString) 遍历jquery选择器返回的jquery元素集合,把每个元素的html内容设置为指定的htmlString。
外部插入
.after( content [, content ] )返回: jQuery
content类型:htmlString or Element or Array or jQuery
后置插入内容:遍历jquery元素集合,在每个元素的后面插入指定的内容
.before( content [, content ] ) 返回 jQuery
content类型:htmlString or Element or Array or jQuery
前置插入内容:遍历jquery元素集合,在每个元素的前面插入指定的内容。
.insertAfter( target )
后置插入内容:遍历jquery元素集合,把每个元素插入到target之后.
.
.insertBefore( target )Returns: jQuery
target类型:Selector or htmlString or Element or Array or jQuery
后置插入内容:遍历jquery元素集合,把每个元素插入到target之前.
DOM删除
.detach( [selector ] )Returns: jQuery
从HTML DOM中分离jquery元素集合中的所有元素(保留data和event 结构)并返回。
.empty()Returns: jQuery
遍历jquery元素集合,删除每个元素的所有子节点(也删除data和event结构)。
.unwrap()Returns: jQuery
遍历jquery元素集合,移除每个元素的父元素,保持元素在它们的原来位置不变。
DOM替代
.replaceAll( target )Returns: jQuery
target Type: Selector or jQuery or Array or Element
用jquery元集集合取代每个target元素。
.replaceWith( newContent )
Returns: jQuery
newContent Type: htmlString or Element or Array or jQuery
用newContent取代jquery元素集合中的每一个元素,返回被删除的元素集合。
遍历
---------------------------------------------------------------------------------------------------------
------------------------------------筛选-----------------------------------------------
.filter(selector | elements | jquery | function(index,element))
要过滤的 jquery对象是这个过滤方法的context,在这个context中筛选参数指定的元素。
.has(selector | elements )
遍历jquery元素集合,每个元素是selector的context, 在这个元素context的 子孙后代中测试selector是否存在。
.is(selector | elements | jquery | function (index.element))
参数的selector选择器的上下文为document,不是jquery元素集合,如果jquery元素集合中至少一个元素匹配参数指定的元素,那么这个方法返回true.
.map(function(index,element))
遍历jquery元素集合,通过回调函数映射每个元素为新的返回值。
.not(selector | jquery | function)
要过滤的jquery集合对象是这个过滤方法的context,在这个context中除去参数指定的元素
.slice(startindex,endindex)
选取jquery对象集合中索引从startindex到endindex-1的元素。
---------------------------------各种遍历----------------------------------------
.add()
.add(selector | elements | html string | jquery object )
.add(selector,context)
添加元素到jquery元素集合中。
.contents()
遍历jquery元素集合,返回每个元素的所有直接子元素。
.each(function(index,element){ } )
遍历jquery元素集合,对每个元素进行函数处理。
.end()
结束在当前链的最近的过滤操作,返回jquery元素集合到前一个状态。
----------------------------树遍历--------------------------------------------------
.addBack([selector])
加栈中的前一个jquery元素集合到当前jquery元素集合。
.children([selector])
遍历jquery元素集合,以每个元素为context, 在每个元素的子元素中(不包含text node 和comment node) 筛选和selector匹配的元素
.closest(selector | element | jquery)
遍历jquery元素集合,查找每个元素及其父元素,只返回最近匹配参数指定元素的第一个元素。
.find(selector | element | jquery)
遍历Jquery元素集合,查找每个元素的后代元素,返回与参数指定元素匹配的所有元素。
.siblings( [selector])
遍历jquery元素集合,查找每个元素的所有兄弟姐妹元素。