选择器
基本
$("#id") 选择id
$(“element”) 选择标签
$(".class") 选择类
$("*") 全部
$(“1,2,3”) 多个选择
层级
$(“p1 p2”) 找到p1中的所有p2
$(“p1 > p2”) 找到p1第一代子元素p2
$(“p1 + p2”) 找到紧跟在p1后面的第一个p2
$(“p1 ~ p2”) 找到p1后的所有p2(同辈)
基本
:first 匹配中的第一个
:last 匹配中的最后一个
:not(selector) 去除满足条件的
:even 偶数
:odd 奇数
:eq(index) 找到index元素
:gt(index) 比index大的所有
:lt(index) 比index小的所有
:header 标题(h1~h5)
:focus 获取焦点的元素
内容
:contains(text) 包含给定文本的
:empty 不包含子元素或文本的空元素
:has(selector) 含有选择器的
:parent 含有子元素或文本的//与empty刚好相反
可见性
:hidden 不可见或type=hidentype为hidden的元素
:visible 所有的可见元素
属性
[attribute] 包含给定属性的元素
[attribute=value] 给定的属性是某个特定值的元素
[attribute!=value] 不含有指定的属性,或者属性不等于特定值的元素
[attribute^=value] 给定的属性是以某些值开始的元素
[attribute$=value] 给定的属性是以某些值结尾的元素
[attribute*=value] 给定的属性是以包含某些值的元素
[selector1][selector2][selectorN] 复合属性选择器,需要同时满足多个条件时使用
子元素
:nth-child(n) 其父元素下的第N个子或奇偶元素
:first-child 第一个子元素
:last-child 最后一个子元素
:only-child 如果某个元素是父元素中唯一的子元素,那将会被匹配。如果父元素中含有其他元素,那将不会被匹配
表单
:input 匹配所有 input, textarea, select 和 button 元素
:text 所有的单行文本框(<input type=“text” >)
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
表单对象属性
:enabled 所有可用元素
:disabled 所有不可用元素
:checked 所有选中的被选中元素(复选框、单选框等,不包括select中的option)
:selected 所有选中的option元素
一些方法
attr(name|pro|key,value|fn) 设置或返回被选元素的属性值
- 返回文档中所有图像的src属性值
$("img").attr("src");``$("img").attr("src");
- 为所有图像设置src和alt属性
$("img").attr({ src: "test.jpg", alt: "Test Image" });
- 把src属性的值设置为title属性的值
$("img").attr("title", function() { return this.src });
removeAttr(name) 从每一个匹配的元素中删除一个属性
prop(name|properties|key,value|fn) 获取在匹配的元素集中的第一个元素的属性值
removeProp(name) 用来删除由.prop()方法设置的属性集
addClass(class|fn) 添加指定的类名
removeClass([class|fn]) 删除全部或者指定的类
html([val|fn]) 取得第一个匹配元素的html内容
text([val|fn]) 取得所有匹配元素的内容
val([val|fn|arr]) 获得匹配元素的当前值
css(name|pro|[,val|fn]) 匹配元素的样式属性
height([val|fn]) 高度
width([val|fn]) 宽度
文档处理
内部插入
-
append(content|fn) 向每个匹配的元素内部追加内容(尾部)
-
appendTo(content) //与append添加的方向,即前添加到后,content为父,由子使用该函数
-
prepend(content) 向每个匹配的元素内部追加内容(头部)
-
prependTo(content)
外部插入
-
after() 获取到的元素的后面插入一个值
-
before() 获取到的元素的前面插入一个值
-
insertAfter() 把获取到的元素插入一个元素的后面
-
insertBefore() 把获取到的元素插入一个元素的前面
替换
-
replaceWith(content|fn) 将所有匹配的元素替换成指定的HTML或DOM元素
-
replaceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素
包裹
-
wrap(html|element|fn) 把所有匹配的元素用其他元素的结构化标记包裹起来(每一个匹配的元素都包裹一次)
-
unwrap() 移出元素的父元素
-
wrapAll(html|ele) 将所有匹配的元素用单个元素包裹起来
复制
clone([Even[,deepEven]]) 克隆匹配的DOM元素并且选中这些克隆的副本
筛选
查找
-
children([expr]) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
-
closest(expr,[context]|object|element) 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素
-
find(expr|obj|ele) 搜索所有与指定表达式匹配的元素
-
next([expr]) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
-
nextAll([expr]) 查找当前元素之后所有的同辈元素
-
parent([expr]) 取得一个包含着所有匹配元素的唯一父元素的元素集合
-
parents([expr]) 取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选
-
prev([expr]) 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
-
add(expr|ele|html|obj[,con]) 把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集
-
contents() 查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容
事件
在DOM加载完成时运行的代码,可以这样写:
$(document).ready(function(){
// 在这里写你的代码...
});
事件处理
- on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数
events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略,当它到达选定的元素,事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。 - off(events,[selector],[fn]) 在选择元素上移除一个或多个事件的事件处理函数
- bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数
- unbind(type,[data|fn]])
- one(type,[data],fn) 为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数
- trigger(type,[data]) 在每一个匹配的元素上触发某类事件
- hover([over,]out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态
事件
- blur 当元素失去焦点时触发 blur 事件
- change 当元素的值发生改变时,会发生 change 事件
- click 点击事件
- dblclick 双击事件
- focus 当元素获得焦点时,触发 focus 事件
- keydown 当键盘或按钮被按下时,发生 keydown 事件(如果在文档元素
- 进行设置,则无论元素是否获得焦点,该事件都会发生)
- keypress 与 keydown 事件不同,每插入一个字符,就会发生 keypress 事件(发生在当前获得焦点的元素上)
- keyup 当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上(如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生)
- mousedown 当鼠标指针移动到元素上方,并按下鼠标按键时,会发生mousedown 事件(mousedown 与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生)
- mouseenter 当鼠标指针穿过元素时(只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件)
- mouseleave 当鼠标指针离开元素时(只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件)
- mousemove 当鼠标指针在指定的元素中移动时(如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件)
- mouseout 当鼠标指针从元素上移开时(如果鼠标指针离开任何子元素,同样会触发 mouseout 事件)
- mouseover 鼠标指针位于元素上方时(不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件)
- mouseup 当在元素上放松鼠标按钮时
- resize 调整浏览器窗口的大小时
- scroll 用户滚动指定的元素时(适用于所有可滚动的元素和 window 对象(浏览器窗口))
- unload
- 点击某个离开页面的链接
- 在地址栏中键入了新的 URL
- 使用前进或后退按钮
- 关闭浏览器
- 重新加载页面