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获取属性
- $(“select”).attr(“property”) 可以获取任何在标签内的属性
- $(“select”).prop(“property”) 无法获取自定义属性
2.1.2设置属性
- $(“select”).attr({“property” : “value”,“property” : “value”…})
- $(“select”).prpo({“property” : “value”,“property” : “value”…})
2.2 偏移量(获取距离文档的偏移量)
2.2.1获取偏移量
- $(“select”).offset().left
- $(“select”).offset().top
2.2.2设置偏移量
-
$("select").offset({"left":200})
2.2.3注意
- 一般写top和left;
- 一旦定位,就默认变成了相对定位;
- 偏移量的距离是不算margin的;
- 偏移量不会改变margin。
2.3 滚动距离
2.3.1 获取滚动距离
- $(“select”).scrollTop();
- $(“select”).scrollLeft();
2.3.2 设置滚动距离
- $(“select”).scrollTop(number)
- $(“select”).scrollLeft(number)
2.4 尺寸操作
2.4.1 获取尺寸
- 第一种尺寸
- $(“select”).height();
- $(“select”).width()
- 不包含 padding border margin
- 第二种尺寸
- $(“select”).innerHeight()
- $(“select”).innerWidth()
- 包含padding , 不含 border 和 margin
- 第三种尺寸
- $(“select”).outerHeight()
- $(“select”).outerWidth()
- 包含 padding 和 border
- 第四种尺寸
- $(“select”).outerWidth(true)
- 包含 padding border margin
3 类方法
1.增加类:$("对象").addClass("类1 类2 .....");
2.删除类:$("对象").removeClass("类1 类2 .....");
3.没有的话增加类.有的话删除类:$("对象").toggleClass("类1 类2 .....");
4.设置表单value的值(如果val的小括号里什么也不写的话就是读取值):$("对象").val(“str”)