一.dom对象和jq对象
1.对象含义
- dom对象:js方法获取元素,将dom对象存储在变量中
- jq对象:jq方法获取元素的jq对象,将jq对象存储在变量中
- 相互之间不能使用另外一个对象的任何属性和方法
2.相互之间的转化
- a.jq转为dom:
get([index])
方法:不带参数时,返回一个dom对象的数组; 带参数时,返回第(index+1)个元素的dom对象(索引从0开始);[index]
:直接通过索引
- b.dom转为jq:
$(dom对象)
:只需用$()将dom对象包装起来
3.this:表示dom对象;事件方法中表示事件源.
$(selector),$(dom),$(html)
二.jq中的dom操作
对元素属性,内容,值和CSS样式的操作
如何创建节点,插入节点,复制节点,删除节点和遍历节点
-
元素修改:
-
a.元素样式
css() – 增加style属性值 css({name:value,name:value}),css(name,value)
addClass() – 增加css类(class属性值),多个类用空格分隔(保留了原有的类别)
removeClass() – 删除类别,没参数时,删除所有类样式
toggleClass() – 类样式切换(增加/删除类别),检测是否有该类别 -
b.元素内容及value值
html() – 获取第一个匹配元素
html(content) – 设置所有匹配的元素
text() – 获取所有匹配的元素的文本内容
text(content) – 设置所有匹配的元素的文本内容
val([val]) – 获取或设置元素的值 -
c.元素属性
attr()
–attr({name:value,name:value}),
attr(name,value),attr(name),attr(name,function(){})
prop()
– 当属性值为布尔型时,如checked,selected
removeAttr(name)
– 删除属性
-
-
元素节点
-
a.元素创建
$(html) – 动态创建页面元素
-
b.元素插入
append() – A内部附加B
prepend() – A内部前置附加B
after() – A之后插入B
before() – A之前插入B -
c.元素替换
replaceWith(content) – 用括号中内容替换jq对象
replaceAll(selector) – jq对象去替换括号中的元素 -
d.元素复制
clone([true]) – 带true参数时,元素全部行为也会复制
-
e.元素删除
remove() – 删除节点
empty() – 清空节点的html内容,不删除自身节点
-
-
元素遍历
each(callback) – 先获取匹配元素的集合,在遍历
$.each(obj,callback) – 全局的,obj为遍历对象