jquery
选择器:
基本选择器:#id 、.class、*(匹配所有)
层次选择器:
$(div span) 选取<div>里的所有的<span>元素、
$(div>span) 选取<div>元素下的元素名是<span>的子元素
$(div+span) 选取div元素的下一个同辈元素
$(div~span) 选取div元素的后面所有同辈元素
过滤选择器
基本选择器:
:first $("div:first")选取所有<div>元素中第1个<div>元素
:last
:not(selector) $("input:not(.myclass)")选取clss不是muclass的input元素
:even 偶数 从0开始
:odd 奇数 从0开始
:eq(index) 选取索引等于index的元素 (index是从0开始) $("input:eq(1)")
:gt(index) 大于
:it(index) 小于
:header 选取所有有标题元素
:animated 选取当前正在执行动画的所有元素
:focus 选取当前获取焦点的元素
内容过滤选择器
:contains(text) 选取文本内容为"text"的元素 $("#div:contains('我')")
:empty 选取不包含子元素或者文本的空元素
:has(selector)选取含有选择器锁匹配的元素的元素 $("div:has(p)") 选取含有p元素的div
:parent 选取含有子元素或者文本的元素
可见性过滤选择器
:hidden :visible
属性过滤选择器
[attribute] 选取拥有此舒心的元素 $("div[id]")
[attribute=value] 选取属性的值为value 的元素 $("div[title=test]")
[arrtibute!=value] 选取属性的值不为value 的元素 $("div[title!=test]")
子元素过滤选择器
:first-child 选取每个父元素的第1个子元素 $("ul li:first-child")
:last-child
:nth-chid(index)
表单对象属性过滤选择器
:enabled 选取所有可用元素
:disabled 选取所有不可用元素
:checked
:selected
表单选择器
:input 选取所有<input>元素
:text
:password
:radio
:checkbox
:submit
:imgage
:reset 获取所有重置按钮
:button
:file 选取所有上传域
:hidden
show() 显示隐藏的匹配元素
css(name,value) 给元素设置样式
text(string)设置所有匹配元素的文本内容
filter(expr)筛选出指定表达式匹配的元素集合,其中expr可以是多个选择器的组合、 是对自身集合元素筛选
fint()会在元素内寻找匹配元素,对它的自己操作
例如:<div class="css">
<p class="rain">测试1</p>
</div>
<div class="rain">
<p>测试2</p>
</div>
var $find = $("div").find(".rain");
alert( $find.html() ) ; //输出测试2
var $filter = $("div").filter(".rain");
alert( $filter.html() ); ////输出测试 <p>测试2</p>
addClass(class)为匹配元素添加指定的类名
jquery DOM
增:
append() 向每个匹配元素内部追加内容
after()向每个匹配元素之后追加内容
before() 向每个匹配元素之前追加内容
删:
remove() $("ul li:eq(1)").remove();
清空:
empty() 清空节点 $("ul li:eq(1)").empty()
包裹:
wrap() 将某个节点用其他标记包裹起来 $("strong").wrap("<b></b>") // 用<b> 标签把<strong>元素包裹起来
属性操作
attr()方法来获取和设置元素属性。 var p=$("p").attr("tilte"); // 获取<p> 元素节点属性title
removeAttr() 方法来删除元素属性。
addClass() 追加样式
removeClass() 移除样式
hasClass() 是否包含样式
toggle() 交替一组动作
html() 获取元素的html内容,相当于innerhtml
text() 获取元素的文本内容,相当于innerText
val() 取值
遍历节点
children() 获取匹配元素的子元素集合
next() 获取匹配元素后面紧临的同辈元素
prev()获取匹配元素前面紧临的同辈元素
siblings获取匹配元素前后面紧临的同辈元素
parent 获取集合元素的父级元素
parents 获取集合元素的祖先元素
事件:
bind() //绑定事件
window.load() 与$(documnet).ready的区别
window.load()是需要页面中的说有元素、图片、链接都加载完成之后才可以触发。
而$(documnet).ready是不要求页面完全加载完,只需要加载完dom机构就可以触发