文档操作
内部插入
A.append(B) 在A的末尾插入B
B.appendTo(A) 在A的末尾插入B
A.prepend(B) 在A的开头插入B
B.prependTo(A) 在A的开头插入B
外部插入
A.after(B) 在A之后插入B
B.insertAfter(A) 在A之后插入B
A.before(B) 在A之前插入B
B.insertBefore(A) 在A之前插入B
包裹
A.wrap(B) 给A添加父元素B
A.unwrap() 移除A的父元素
替换
A.replaceWith(B) 把A替换成B
B.replaceAll(A) 用B替换A
移除
empty() 清空
remove() 移除
复制
clone() 克隆 clone(true) 克隆结构以及事件处理函数
===============================================
常用事件类型:
click() 不传参数代表触发该事件
传一个函数作为参数,代表给这个事件绑定函数
dblclick()
表单事件
blur()
focus()
change()
submit()
鼠标事件
mouseover()
mousemove()
mouseout()
mousedown()
mouseup()
keydown()
keyup()
resize()
scroll()
on() 绑定事件 on('click',function(){});
off() 移除事件 off('事件类型') 移除该事件类型上的所有函数
off('事件类型',fn) 移除该事件类型上的fn
trigger('事件类型') 触发事件
================================================
基本选择器
#id .class *(通配符) element sel1 sel2(后代) sel1>sel2(子代)
sel1,sel2,sel3(群组)
prev+next 匹配所有prev后面的next元素
prev~siblings 匹配所有prev后面的sibling元素
基本筛选
:first
:last
:not(selector)
:even 索引为偶数的
:odd 索引为奇数的
:gt(index)
:lt(index)
:eq(index)
内容筛选:
:contains(text) 筛选集合中包含指定字符串的元素
:empty 筛选集合中为空的元素,没有任何节点
:parent 筛选集合中不为空的元素(包含文本或子元素)
:has(selector) 筛选集合中包含指定选择器的元素的元素
可见性:
:hidden display:none的元素 行内元素没有内容 type为hidden的input
:visible 除了:hidden的元素
属性选择器:
[attr] 筛选包含attr属性的元素[class]带有class属性的元素
[attr^=val] 筛选包含attr属性并且以val开头的元素
[attr$=val] 筛选包含attr属性并且以val结尾的元素
[attr*=val] 筛选包含attr属性并且包含val的元素
[attr!=val] 筛选包含attr属性并且不等于val的元素
[attr1][attr2][attr3] 筛选同时包含多个属性的元素
子元素选择器:
:first-child p:first-child 匹配 <p> 的父元素的第一个<p>元素
选择器匹配其父元素中的第一个子元素。
ul(空格):first-child ul中的第一个元素以及ul后代元素的第一个元素
:last-child 最后一个子元素
选择器用来匹配父元素中最后一个子元素。
:nth-child(n) n从1开始/选择器匹配父元素中的第n个子元素。
:only-child 选择器匹配属于父元素中唯一子元素的元素。
:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。
:before 每个 <p>元素之前插入内容:
p:before
{
content:"Read this: ";
}
表单:
:input 选择input、select、textarea标签
:text
:password
:radio
:checkbox
:file
:submit
:reset
:image
:button
表单状态:
:enabled
:disabled
:checked 所有选中的元素 包括复选框,单选框
内部插入
A.append(B) 在A的末尾插入B
B.appendTo(A) 在A的末尾插入B
A.prepend(B) 在A的开头插入B
B.prependTo(A) 在A的开头插入B
外部插入
A.after(B) 在A之后插入B
B.insertAfter(A) 在A之后插入B
A.before(B) 在A之前插入B
B.insertBefore(A) 在A之前插入B
包裹
A.wrap(B) 给A添加父元素B
A.unwrap() 移除A的父元素
替换
A.replaceWith(B) 把A替换成B
B.replaceAll(A) 用B替换A
移除
empty() 清空
remove() 移除
复制
clone() 克隆 clone(true) 克隆结构以及事件处理函数
===============================================
常用事件类型:
click() 不传参数代表触发该事件
传一个函数作为参数,代表给这个事件绑定函数
dblclick()
表单事件
blur()
focus()
change()
submit()
鼠标事件
mouseover()
mousemove()
mouseout()
mousedown()
mouseup()
keydown()
keyup()
resize()
scroll()
on() 绑定事件 on('click',function(){});
off() 移除事件 off('事件类型') 移除该事件类型上的所有函数
off('事件类型',fn) 移除该事件类型上的fn
trigger('事件类型') 触发事件
================================================
基本选择器
#id .class *(通配符) element sel1 sel2(后代) sel1>sel2(子代)
sel1,sel2,sel3(群组)
prev+next 匹配所有prev后面的next元素
prev~siblings 匹配所有prev后面的sibling元素
基本筛选
:first
:last
:not(selector)
:even 索引为偶数的
:odd 索引为奇数的
:gt(index)
:lt(index)
:eq(index)
内容筛选:
:contains(text) 筛选集合中包含指定字符串的元素
:empty 筛选集合中为空的元素,没有任何节点
:parent 筛选集合中不为空的元素(包含文本或子元素)
:has(selector) 筛选集合中包含指定选择器的元素的元素
可见性:
:hidden display:none的元素 行内元素没有内容 type为hidden的input
:visible 除了:hidden的元素
属性选择器:
[attr] 筛选包含attr属性的元素[class]带有class属性的元素
[attr^=val] 筛选包含attr属性并且以val开头的元素
[attr$=val] 筛选包含attr属性并且以val结尾的元素
[attr*=val] 筛选包含attr属性并且包含val的元素
[attr!=val] 筛选包含attr属性并且不等于val的元素
[attr1][attr2][attr3] 筛选同时包含多个属性的元素
子元素选择器:
:first-child p:first-child 匹配 <p> 的父元素的第一个<p>元素
选择器匹配其父元素中的第一个子元素。
ul(空格):first-child ul中的第一个元素以及ul后代元素的第一个元素
:last-child 最后一个子元素
选择器用来匹配父元素中最后一个子元素。
:nth-child(n) n从1开始/选择器匹配父元素中的第n个子元素。
:only-child 选择器匹配属于父元素中唯一子元素的元素。
:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。
:before 每个 <p>元素之前插入内容:
p:before
{
content:"Read this: ";
}
表单:
:input 选择input、select、textarea标签
:text
:password
:radio
:checkbox
:file
:submit
:reset
:image
:button
表单状态:
:enabled
:disabled
:checked 所有选中的元素 包括复选框,单选框
:selected select中选中的元素
==============================
核心操作
length 集合的长度 $('li').length
get(index) 获取集合中对应索引的DOM对象
get()把DOM对象全部获取出来放在数组里面
each() 遍历集合
<ul>
<li class="li1">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
$('li').get()//[li.li1, li, li, li]
$('li').each(function (index,item) {//index代表每个对象的索引
函数里的this代表每次遍历的对象
//item === this,可不写
$(item).prop('id','li'+(index+1));
})
on()&off()
on('事件类型',fn1)
on('事件类型',fn2)绑定事件
可以做事件委托
on('click','span',function(){this指向改为span})
off('事件类型') 移除该事件的所有处理函数
off('事件类型',fn1) 移除该事件的fn1