一、基本选择器
1.1 ID选择器
格式:$("#id")
1.2 类选择器
格式:$(".class")
1.3 元素选择器
格式:$(“元素名”)
1.4 选择器分组
格式:$(“选择器一,选择器二,选择器三”)
1.5 通配符选择器
格式:$("*")
二、层级选择器
2.1 儿子选择器
格式:$(“父元素 > 子元素”):找出所有子节点
2.2 儿孙选择器
格式:$(“父元素 任意子元素或孙子元素”):找出父元素下面的所有子元素和孙子元素
2.3 相邻兄弟选择器
格式:$(“选择器1 + 选择器2”):找出紧挨着自己的同级弟弟
2.4 兄弟选择器
格式:$(“选择器1 ~ 选择器2”):找出所有的弟弟
2.5 选择器.siblings()
找出所有的哥哥和弟弟
三、属性选择器
格式:$(“选择器[属性=‘属性值’]”)
如:$(“input[type=‘button’]”):找出所有的按钮输入项
四、基本过滤器(罗列常用的)
3.1 :first
格式:$(“选择器:first”):获取该选择器的第一个元素
$(“div:first”):找到第一个div
3.2 :even
格式:$(“选择器:even”):获取该选择器的基数列元素
$(“tr:even”):找出table表格的每一个偶数行
3.3 :odd
格式:$(“选择器:odd”):获取该选择器的偶数列元素
$(“tr:odd”):找出table表格的每一个基数行
3.4 :gt(index)
格式:$(“选择器:gt(index)”):获取匹配所有大于给定索引值的元素
$(“tr:even:gt(0)”):找出table表格的每一个索引值大于0的偶数行
3.5 :lt(index)
格式:$(“选择器:lt(index)”):获取匹配所有小于给定索引值的元素
五、表单选择器
常用举例:
:input
格式:$(":index"):获取所有index输入项,包括select和textera。
:checkbox
格式:$(":checkbox"):获取所有type为checkbox类型的input元素
:text
:radio
:image
:button
六、表单对象属性
:enable
:disable
:selected
格式:$(“select option:selected”):获取select元素中所有selected属性值为"selected"的option元素标签和文本的值
实例:查找所有被选中的选项元素及其内容
html代码:
<select>
<option value="1">Flowers</option>
<option value="2" selected="selected">Gardens</option>
<option value="3">Trees</option>
</select>
JQ代码:
$("select option:selected");
结果:
<option value="2" selected="selected">Gardens</option>
:checked
格式:$(“input :checked”)
实例:
html代码:
<form>
<input type="checkbox" name="newsletter" checked="checked" value="Daily" />
<input type="checkbox" name="newsletter" value="Weekly" />
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form>
JQ代码:
$("input :checked")
结果:
<input type="checkbox" name="newsletter" checked="checked" value="Daily" />,
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
常用函数:
1、prop():修改一个元素的属性
如果传入一个参数,就是获取。
如果传入两个参数,就是设置属性。
如:将所有的复选框的checked属性设置为checked值。
$(“input[type=‘checkbox’]).prop(“checked”,“checked”)
如:改变图片的路径
$(“img”).prop(“src”,”…/img/1.jpg").
2、html():修改html代码
3、text():修改文本值
4、css():修改css样式
如:$(“div”).css(“background-color”,“red”)
5、empty():清除所有子节点
如: $(“select”).empty():清除所有的option
6、append():添加子节点
如:$(“select”).append("")