常用的选择器:
#id 根据给定的id匹配
.classname 根据给定的类名匹配
name 根据给定的元素名匹配
*匹配所有的元素
select1,select2 将每一个匹配到的元素合并后一起返回
s1s2 选取s1元素里所有的s2元素 子孙
parent>child获取parent元素下的child元素 儿子
prev+next 选取紧接在prev元素后的next元素
prev~siblings选取prev之后所有的siblings元素
常用的过滤选择器:
:first 选取第一个元素
:last 选取最后一个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 选取索引值为偶数的元素,从0开始
:odd 选取索引值为奇数的元素
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配大于给定索引值的元素
:lt(index) 匹配小于给定索引值的元素
:header 选择h1,h2....一类的标签
:animated 匹配正执行动画效果的元素
常用的内容过滤选择器:
:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has(selector) 匹配含有选择器所匹配元素的元素
:parent 选取含有子元素或文本的元素
:hidden 选取所有不可见元素
:visible 选取所有可见元素
常用的属性过滤选择器(跟在元素后面用,过滤器):
【attr】 选取拥有此属性的元素
【arrt=val】等于val 【arrt!=val】不等于val 【arrt^=val】以val开始的
【arrt$=val】以val结束的 【arrt*=val】 包含val的 【arrt~=val】 包含val且以空格隔开【attr1】【attr2】... 多个属性选择器合并成一个复合属性选择器
常用的表单选择器(直接使用):
:input 选取所有<input>、<textarea>、<select>、<button>元素
:text 选取所有的单行文本框
:password 选取所有的密码框
:radio 选取所有的单选按钮
:checkbox 选取所有的复选框
:submit 选取所有的提交按钮
:image 选取所有的图像按钮
:reset 选取所有的重置按钮
:button 选取所有的按钮
:file 选取所有的上传域
常用的表单对象属性过滤选择器:
:disabled 选取所有不可用元素
:enabled 选取所有可用元素
:checked 选取所有被选中的元素
:selected 选取所有被选中的选项元素
管理选择器得到的结果:
size()获取选择器中元素的个数
index(element)查找元素在集合中的位置
add()给集合添加元素
not()去除元素集合中的某个元素
filter()筛选去除元素集合中的元素获得新集合
find()通过查询获取新的元素集合
each()对选择器中的元素进行遍历
end()回到操作对象的上一个对象
andself()将前面的对象进行组合后共同处理
创建元素节点:
用$()来创建节点
var $node = $(“<p title=”hello”> hello </p>”);
插入元素节点:
append()向每个匹配的元素内部追加子元素内容 appendTo()
prepend()向每个匹配的元素内容前置子元素内容 prependTo()
after()在每个匹配元素后插入同辈内容 insertAfter()
before()在每个匹配元素之前插入内容 insertbefore()
删除元素节点:
remove()
var$remove_li = $(“ul li:eq( 1 )”).remove( ); 删除ul第2个li,返回被删除的li对象
$(“ulli”).remove(“ li[ title=’ a ’ ] ”); 通过参数来选择性删除
detach()
var $remove_li =$(“ul li:eq( 1 )”).detach( ); 和remove类似,但绑定的事件、附加的数据会保留下来
empty()
$(“ulli:eq( 1 )”).remove( ); 清空所选元素中所有的后代元素内容
复制元素节点:
clone()
$(“li:eq(1)”).clone(true).appendTo(“ul”);复制第二个li元素插入到ul中,并传递了一个参数true代表复制元素同时复制元素中绑定的事件。
替换元素节点:
replaceWith()
$(“li:eq(1)”).replaceWith(“<li>c</li>”);替换掉第二个li元素
replaceAll()
和replaceWith()颠倒语法
包裹元素节点:
wrap() 用参数标签把外面的标签包裹起来
$(“li”).wrap(“<i></i>“);
wrapAll()用参数标签把多个标签整体包裹起来,如其中有其他标签则放到包裹元素后
wrapInner()把匹配到元素内部的内容用参数标签包裹起来
节点属性操作:
attr()获取前面元素的参数中的属性,参数可以kv对用来设置属性
removeAttr()删除属性
节点样式操作:
addClass()追加参数中的类选择器,不同会叠加,相同会覆盖
removeClass()删除类选择器
toggleClass()重复切换参数中的类选择器,有就去除,没有就使用
hasClass()判断是否含有参数中的类选择器样式,返回boolean值
设置获取值:
html() 设置内容会解析html语句,无参数时获取
text()设置内容不会解析语句,无参数时获取
val() 设置input元素value值,下拉框选中项,下拉列表多选项(需要用【】括起来,逗号分开多个值),复选框选中项,单选框选中项,无参数时获取
遍历节点操作:
children()取得匹配元素的子元素集合
next()取得后面紧邻的同辈元素
prev()取得前面紧邻的同辈元素
parent()取得匹配元素的父级元素
parents()取得匹配元素的先辈元素的集合
siblings()取得匹配元素前后所有的同辈元素
closest()取得最近的匹配元素,先取自身如果自身不存在,则向父元素取最近的一个先辈
CSS-DOM技术:
不加参数是获取,加参数是修改
$(“p”).css({color”:”#ff0000”,”background”:”blue”});
scrollTop()和scrollLeft()设置相对滚动条顶部和左侧的偏移
offset()获取和设置元素在当前视窗的相对偏移
$(“#dv”).offset({top:10,left:30});
var$offset=$(“#dv”).offset();
$(“#dv”).html(“left : ”+$offset.left+”,top:”+$offset.top);
position()获取匹配元素相对父元素的偏移