jQuery选择器与属性操作

1 jQuery选择器

1.1基本选择器

• id选择器 $("#id值")；
• 类选择器 $(".类名")；
• 标签选择器 $(“标签名”)；
• 分组选择器 $(“E,F,G,H…”)；
• 通配符选择器 $(“div*”)；

1.2 包含选择器

• 如下图所示
  

1.3 过滤选择器

• $(“div:first”) ：获取第一个div
• $(“div:last”) ：获取最后一个div
• $(“div:gt(index)”) ：选择所有索引值大于 index 的div
• $(“div:lt(index)”) ：选择所有索引值小于 index 的div
• $(“div:eq(index)”) ：索引号为 index 的 div
• $(“F S:contains(‘text’)”) :选中父系 F 下的子系 S 里带有文本 text 的 元素

1.4 内容过滤选择器

• 如下图所示：
  
• :hidden ：选择所有不可见元素
• :visible ：选择所有可见元素

1.5 属性过滤选择器

• 具体如下图所示：
  

1.6 表单对象属性选择器

• 具体如下图所示：
  

1.7 表单选择器

• 如下图所示：
  

2 jQuery 属性操作

2.1 属性

2.1.1获取属性

1. $(“select”).attr(“property”) 可以获取任何在标签内的属性
2. $(“select”).prop(“property”) 无法获取自定义属性

2.1.2设置属性

1. $(“select”).attr({“property” : “value”,“property” : “value”…})
2. $(“select”).prpo({“property” : “value”,“property” : “value”…})

2.2 偏移量（获取距离文档的偏移量）

2.2.1获取偏移量

1. $(“select”).offset().left
2. $(“select”).offset().top

2.2.2设置偏移量

1. $("select").offset({"left":200})
   

2.2.3注意

1. 一般写top和left；
2. 一旦定位,就默认变成了相对定位；
3. 偏移量的距离是不算margin的；
4. 偏移量不会改变margin。

2.3 滚动距离

2.3.1 获取滚动距离

• $(“select”).scrollTop()；
• $(“select”).scrollLeft()；

2.3.2 设置滚动距离

• $(“select”).scrollTop(number)
• $(“select”).scrollLeft(number)

2.4 尺寸操作

2.4.1 获取尺寸

1. 第一种尺寸

• $(“select”).height();
• $(“select”).width()
• 不包含 padding border margin

2. 第二种尺寸

• $(“select”).innerHeight()
• $(“select”).innerWidth()
• 包含padding , 不含 border 和 margin

3. 第三种尺寸

• $(“select”).outerHeight()
• $(“select”).outerWidth()
• 包含 padding 和 border

4. 第四种尺寸

• $(“select”).outerWidth(true)
• 包含 padding border margin

3 类方法

1.增加类：$("对象").addClass("类1 类2 .....");
2.删除类：$("对象").removeClass("类1 类2 .....");
3.没有的话增加类.有的话删除类：$("对象").toggleClass("类1 类2 .....");
4.设置表单value的值（如果val的小括号里什么也不写的话就是读取值）：$("对象").val(“str”)