JQuery选择器总结

一、基本选择器

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("")