目录
整理:
操作文本与属性值内容
操作DOM节点
遍历DOM节点
操作CSS-DOM
---------------------------------------------------------
DOM操作分类
- DOM Core:任何一种支持DOM的编程语言都可以使用它,如getElementById()
- HTML-DOM:用于处理HTML文档,如document.forms
- CSS-DOM:用于操作CSS,如element.style.color="green"
jQuery中的DOM操作
- jQuery对JavaScript中的DOM操作进行了封装
- jQuery中的DOM操作
- 样式操作
- 内容及Value值操作
- 节点及节点属性操作
- 节点遍历
---------------------------------------------------------
设置和获取样式值
css(name,value) ;
或
css({name:value, name:value,name:value…}) ;
追加样式
$(selector).addClass(class);
或
$(selector).addClass(class1 class2 … classN);
移除样式
$(selector).removeClass("class") ;
或
$(selector).removeClass("class1 class2 … classN ") ;
切换样式
$(selector).toggleClass(class) ;
判断是否含指定的样式
$(selector). hasClass(class);
内容操作
HTML代码操作
html()可以对HTML代码进行操作,类似于JS中的innerHTML
获取:
$("div.left").html();
设置:
$("div.left").html("<div class='content'>…</div>");
标签内容操作
text()可以获取或设置元素的文本内容
获取:
$("div.left").text();
设置:
$("div.left").text("<div class='content'>…</div>");
html() 和 text()方法的区别
属性值操作
val()可以获取或设置元素的value属性值
获取:
$(this).val();
设置:
$(this).val(value);
节点操作
查找节点
略
创建节点
工厂函数$()用于获取或创建节点
- $(selector):通过选择器获取节点
- $(element):把DOM节点转化成jQuery节点
- $(html):使用HTML字符串创建jQuery节点
插入节点
元素内部插入子节点
元素外部插入同辈节点
删除节点
jQuery提供三种删除节点的办法
- remove():删除整个节点
$(selector).remove([expr]);
- empty():清空节点内容
$(selector).empty();
- detach():删除整个节点,保留元素的绑定事件、附加的数据
替换节点
replaceWith()和replaceAll()用于替换某个节点
复制节点
clone()用于复制某个节点
$(selector).clone([includeEvents]) ; //参数为true、false
属性操作
获取与设置元素属性
attr()用来获取与设置元素属性
获取:
$(selector).attr([name]) ;
设置:
$(selector).attr({[name1:value1]…[nameN:valueN]}) ;
删除元素属性
removeAttr()用来删除元素的属性
$(selector).removeAttr(name) ;
节点遍历
遍历子元素
children()方法可以用来获取元素的所有子元素
$(selector).children([expr]);
遍历同辈元素
jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素
遍历前辈元素
parent():获取元素的父级元素
parents():元素元素的祖先元素
其他遍历方法
$(selector).each(function(index,element)) ;
CSS-DOM操作
除css()外,还有获取和设置元素高度、宽度等的样式操作方法