使用jQuery操作 DOM
DOM操作分为三类:
1)DOM Core:任何一种支持DOM的编程语言都可以使用它,如getElementById()
2)HTML-DOM:用于处理HTML文档,如document.forms
3)CSS-DOM:用于操作CSS,如element.style.color="green"
注释:JavaScript用于对(x)html文档进行操作,它对这三类DOM操作都提供了支持
设置和获取样式值:{
}
追加和移除样式:{
追加样式:
移除样式:
}
切换样式:{
toggleClass():
模拟了addClass()与removeClass()实现样式切换的过程
$(selector).toggleClass(class) ;
}
判断是否含指定的样式:{
hasClass( )方法来判断是否包含指定的样式
$(selector). hasClass(class);
}
HTML代码操作:{
html()可以对HTML代码进行操作,类似于JS中的innerHTML
}
标签内容操作{
text()可以获取或设置元素的文本内容
}
html( ) 和text( )方法的区别:{
}
属性值操作:{
val()可以获取或设置元素的value属性值
}
节点操作:{
创建节点元素:{
工厂函数$()用于获取或创建节点
1)$(selector):通过选择器获取节点
2)$(element):把DOM节点转化成jQuery节点
3)$(html):使用HTML字符串创建jQuery节点
}
插入节点:{
元素内部插入子节点:
元素外部插入同辈节点:
}
删除节点:{
jQuery提供了三种删除节点的方法:
remove():删除整个节点 $(selector).remove([expr]);
empty():清空节点内容 $(selector).empty();
detach():删除整个节点,保留元素的绑定事件、附加的数据
}
替换节点:{
replaceWith()和replaceAll()用于替换某个节点:
}
复制节点:{
}
}
属性操作:{
获取与设置元素属性:{
attr()用来获取与设置元素属性
}
删除元素属性:{
removeAttr()用来删除元素的属性
}
}
节点遍历:{
遍历子元素:{
children()方法可以用来获取元素的所有子元素
}
遍历同辈元素:{
jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素
}
遍历前辈元素:{
jQuery中可以遍历前辈元素 :
parent():获取元素的父级元素
parents():元素元素的祖先元素
注:parents(“selector”)可以选择某个祖先元素
}
find()、filter()
find:去找子元素
filter():过滤当前元素
each( ) :规定为每个匹配元素规定运行的函数
end( ):结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态
}
CSS-DOM操作{
除css()外,还有获取和设置元素高度、宽度等的样式操作方法
}