一.选择器(同css)
1.基本选择器
$("div") 通过标签名获取标签
$("#id") 通过id获取标签
$(".class") 通过class获取标签
2.高级选择器
$("div p") 后代选择器
$("div ,p") 组合选择器
3.属性选择器
$("[type]") 有type属性的
$("[type=text]") type属性为text的
二.筛选器
筛选器就是经过选择器选择后再次筛选
1.基本筛选器
$("ul li:first") 选取ul标签中的li后再筛选出第一个
:last 最后一个
:eq(index) 索引筛选
:even 索引为偶数的
:odd 索引为奇数的
:gt(index) 大于索引的
:lt(index) 小于索引的
:not(选择器) 不满足选择器的
:has(选择器) has后的选择器是子级标签中的
2.表单筛选器(多用于form表单)
:text type=text的标签
:password password类型的标签
:file file类型的标签
:radio radio类型的标签
:checkbox checkbox类型的标签
:submit submit类型的标签
:button button类型的标签
:reset reset类型的标签
:enable 可用的标签
:disable 你可用的标签
:checked 被选择的标签
:selected 被选中的标签
三.筛选器方法
1.下一个标签
$("#id").next()
$("#id").nextAll() 往下所有同级元素
$("#id").nextUntil("#id2") 从id开始到id2的元素,开区间
2.上一个标签
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#id2")
3.父级标签
$("#id").parent() 父级标签
$("#id").parents() 父级及以上标签
$("#id").parentsUntil("#id2")
4.子级和兄弟标签
$("#id").children() 所有子级标签
$("#id").siblings() 所有兄弟标签
5.查找标签
$("div").find("p") 等价于$("div p")
6.筛选标签
$("div").filter(".c1") 从所有div标签中筛选class=c1的标签
四.样式操作
1.class操作
.addClass(cls) 添加类
.removeClass(cls) 删除类
.hasClass(cls) 判断类存在不存在
.toggleClass(cls) 切换类,有就移除,没有就添加
2.css样式操作
.css("color","red") 直接修改
.css({"width":"100px","height":"100px"}) 修改多个值
五.位置操作
1.获取位置和设置位置
offset() 获取元素在当前窗口的相对偏移
offset({top:100,left:100}) 设置标签位置
position() 获取元素相对(有relative或absolute)父级标签的偏移
$(window).scrollTop() 获取上下滚轮的位置,参数可以设置滚轮位置
$(window).scrollTop(0) 设置上下滚轮的位置
$(window).scrollLeft() 获取左右滚轮的位置,参数可以设置滚轮位置
2.尺寸
.height() 盒子模型中content的大小
.width()
.innerHeight() 内容高度+2padding高度
.innerWidth()
.outerHeigt() 内容高度+2padding高度+2border宽度
.outerWidth()
六.文本操作
.html() 获取标签的内容,包含标签
.html(val) 设置标签文本内容,能识别标签
.text() 获取标签文本,不包含标签
.text(val) 设置标签文本内容,不能识别标签
.val() 获取标签的value
.val("value") 给标签设置value值
.val(["v1","v2"]) 给标签设置多个value值
七.属性操作
1.多用于自定义属性
.attr(属性) 获取属性的值
.attr(属性,值) 给标签设置或修改属性值
.attr({属性1:值1,属性2:值2}) 设置多个属性值
.removeAttr(属性) 删除属性
2.多用于固有属性
.prop(属性) 获取属性
.removeProp(属性) 删除属性
八.文档处理
1.追加到标签子级后面
$("div").append(a)
$(a).appendTo($("div"))
2.添加到标签子级前面
$("div").prepend(a)
$(a).prependTo($("div"))
3.添加到标签前面(before),后面(after)
$("div").before(a)
$(a).insertBefore($("div"))
4.删除和清空标签
.remove() 删除标签
.empty() 清空标签里面的内容
5.替换
$("div").replaceWith(a)
$(a).replaceAll("div")
6.克隆
.clone(true) 克隆标签,带上true参数可以把事件也克隆