jQuery基本语法
$(selector).action()
基本选择器:$("#id")
标签选择器:$("tagName")
class选择器:$(".className")
配合使用:$("div.c1")
所有元素选择器:$("*")
组合选择器:$("#id,.className,tagName")
层级选择器:
$("x y") x的所有后代y(子子孙孙)
$("x>y") x的所有儿子(儿子)
$("x+y") 找到所有紧挨在x后面的y
$("x~y") x之后所有的兄弟y
基本筛选器
:first 第一个
:last 最后一个
:eq(index) 索引等于index的那个元素
:even 匹配所有索引值为偶数的元素,从0开始计数
:odd 匹配所有索引值为奇数的元素,从0开始计数
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:not 移除所有满足not条件的标签
:has 选取所有包含一个或多个标签在其内的标签
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
属性选择器
[attribute]
[attribute=value] 属性等于
[attribute!=value] 属性不等于
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
表单筛选器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
$(":checkbox") // 找到所有的checkbox
表单对象属性
:enabled
:disabled
:checked
:selected
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:enabled") // 找到可用的input标签
<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">广州市</option>
<option value="shenzhen">深圳市</option>
</select>
$(":selected") // 找到所有被选中的option
筛选器方法
下一个元素:
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
上一个元素:
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntill
父亲元素:
$("#id").parent()
$("#id").parents() 查找当前元素的所有的父亲元素
$("#id").parentsUntil() 查找当前元素的所有的父亲元素,直到匹配的那个元素为止
儿子和兄弟元素:
$("#id").children() 儿子们
$("#id").siblings() 兄弟们
查找:搜索所有与指定表达式匹配的元素,这个函数是找出正在处理的元素的后代元素的好方法
$("div").find("p") 等价于$('div p')
筛选:筛选出与指定表达式匹配的元素集合
$("div").filter(".c1") 从结果集中过滤出有c1样式类的 等价于$("div.c1")
操作标签
样式类:
addClass(): 添加指定的css类名
removeClass(): 移除指定的css类名
hasClass(): 判断样式存不存在
toggleClass(): 切换css类名,如果有就移除
示例:开关灯和模态框
css("color","red")
$("p").css("color","red");
位置操作:
offset(): 获取匹配元素在当前窗口的相对偏移或设置元素位置
position():获取匹配元素相对父元素的偏移
scrollTop():获取匹配元素相对滚动条顶部的偏移
srollLeft():获取匹配元素相对滚动条左侧的偏移
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
文本操作
html代码
html():取的第一个匹配元素的html内容
html(val):设置所有匹配元素的html内容
文本值
text():取得所有匹配元素的内容
text(val):设置所有匹配元素的内容
值
val():取得第一个匹配元素的当前值
val(val):设置所有匹配元素的值
val([val1,val2]) 设置多选的checkbox,多选select的值
<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球
select multiple id="s1"
option value="1"1/option
option value="2"2/option
option value="3"3/option
/select
$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])
属性操作
用于id等自定义属性
attr(attrName) 返回第一个匹配的属性值
atrr(attrName,attrValue) 为所有匹配元素设置一个属性值
attr({k1:v1,k2:v2}) 为所有匹配元素设置多个属性值
removeAttr() 从每一个匹配的元素中删除一个属性
用于checkbox和radio
pop 获取属性
removeProp() 移除属性
文档处理: