一.选择器
1.id选择器 $("#div1") 选中id为div1的元素
2.class 类选择器 $(".hehe") 选中所有类为hehe的元素 可以是可以一次控制所有的类
3.element 元素选择器 $("div") 选中所有div元素
4.所有选择器 $("*") 选中所有元素
5.选择器多选 $(".hehe,#div1") 选中类为hehe id为div1的元素 多选的都会被选中
6.后代选择器 $("#div1 .hehe1") 选中在id为div1中的后代类为hehe1的元素 注：这个选择器会选择后代的所有类为hehe1的元素
7.直系后代选择器 $("#div1>.hehe1") 选中在id为div1中的儿子类为hehe1的元素
8.兄弟选择器 $(".hehe1 + div ") 选中兄弟的下一个 div元素 注：兄弟的下一个元素必须是有效的不然不会有反应
9.弟弟选择器 $("span ~ div") 选中span的所有弟弟（div）元素 注：哥哥不算
10.第一、最后选择器 $("div:first/last") 选中元素列表中的第一个/最后一个元素
11.偶数索引选择器 $("div:even")
12.奇数索引选择器 $("div:odd")
13.索引值选择器 $("#div1 div:eq(1)")
14.大于索引选择器 $("#div1 div:gt(1)") 也就是第二个之后的元素 不包含
15.小于索引选择器 $("#div1 div:lt(1)") 也就是第二个之前的所有元素 不包含
16.匹配当前获取焦点的元素 $(':focus')
17. 选中含有所匹配元素的元素选择器 $("div:has(p)") 选择div中有p的元素
18.不可见元素选择器 $("div:hidden") 查找不可见的div元素
19.可见元素选择器 $("div:visible") 查找可见的div元素
20.属性选择器 $("div[index]") 选中所有有index属性的div元素
21.属性等于选择器 $("div[index=2]") 选中所有index为2的元素
22.属性不是等于选择器 $("div:not([index=2])") 选中所有非index为2的元素 没有index也要选中
23.复合属性选择器 $("div[index=2][index=3][index=4]") 只可意会不可言谈
24.子元素选择器 一律使用别的方式
二.属性操作
1. attr 设置或者获取元素属性的值
$(".hehe3").attr("index") 返回元素的属性
如果传入一个参数 那么就返回他的属性值
如果传入两个参数 那么就给这个属性赋值
相对应的有赋值就有删除
$("#div1 #div1").removeAttr("index") 就是删除index属性
2. prop 设置或者获取元素属性的值 用法和attr一样
不同的是 在使用复选框的时候用 prop 其他事件用attr
3. class 方法 设置元素的类
$("#div1 #div1").addClass("divv") 添加divv的类
$("#div1 #div1").removeClass("divv") 删除名为divv的类 如果不传入参数 就删除整个 如果传入参数就删除相对应的
$("#div1 #div1").toggleaClass("divvvv") 检索类名 如果有就删除 如果没有就添加
4. html 获取元素的html值
$("#div1 #divv").html() 如果传入参数就设置元素的html 如果没有传入参数就获取元素的html
5. text 获取p元素的文本
$("#div1 #divv").text( ) 如果传入参数就设置text文本 如果没有传入参数就获取p元素的text文本
6. val 获取文本框的值
$("#div1 #divv").val( ) 如果传入参数就设置文本框的值 如果没有传入参数就获取文本框的值
三.css操作
1.获取css
$("#divv").css("background-color")
2.设置css
$("#divv").css("background-color","yellow")
设置css有很多种方式
传入两个参数 第一个参数是属性 第二个参数为值
传入一个列表 列表和css中书写相似不过属性要双引号
3.offset 返回盒子相对于视口的相对偏移
返回的是一个对象 {"top": 8,"left": 8} 可以通过 .top .left获取 返回的 数值没有px
4.position 返回盒子相对于
父级的相对偏移
返回的是一个对象 {"top": 8,"left": 8} 可以通过 .top .left获取 返回的 数值没有px
5.scrollTop scrollLeft 返回盒子相对于
滚动条的相对偏移
返回的 数值没有px
6.width height 获取元素宽高
$("#divv").height() $("#divv").width() 返回值没有px
7. innerWidth innerHeight 获取元素宽高 包括height width padding 不包括 border margin
$("#divv").innerHeight() $("#divv").innerWidth()
8.outerWidth outerHeight 获取元素宽高 包括 height width padding border 如果传入参数true 则包括margin 反之不包括
四.文档处理
1. append
$("#div1").appendTo($("#span")) 向div1 下面添加 id为span的元素
2.appendTo
一样的 就是倒过来
3.prepend
$("#div1").prepend($("#span")) 在div1下面的最前面添加
4.prependTo
一样的 就是倒过来
5.after
$("#div1").after($("#span")) 在div1后面添加
6.before
$("#div1").before($("#span")) 在div1前面添加
7. insertAfter
insertBefore 和 prependTo appendTo 换汤不换药
8. wrap
$(".hehe1").wrap($(".hehe3")) 用 hehe3把hehe1包裹起来 这种方法会每个都包裹一遍
9. unwrap
$(".hehe1").unwrap() 移除父元素
10.wrapall
$(".hehe1").wrapAll("<a></a>") 用a把所有的hehe1包裹起来 包裹在一起 看起来比较难处理
11. wrapInner
$(".hehe1").wrapInner("<a></a>") 用a把hehe1的内容包裹起来
12.replaceWith
$(".hehe1").replaceWith("<a></a>") 把hehe1替换成a
13. empty
删除子节点 所有包括文本节点 相当于 innerHtml = ""
14. remove
删除匹配到的元素 相当于 outerHtml = ""
15.detach
删除匹配到的元素 但是事件会被保留下来 点击事件还在
16.clone
复制元素 赋值给其他元素 var xxx = xxx.clone()
如果传入true 就不仅复制对象而且复制事件
如果传入false 就仅复制对象
如果复制了两个节点元素 就返回一个表格 可以通过[0] [1] 取得
浙公网安备 33010602011771号