一、jQuery对DOM 操作
样式操作
内容和value操作
节点操作
节点和属性遍历
节点遍历
CSS-DOM操作
1,使用css()为指定的元素添加样式值或获取样式值
css(name,value) css(name)
2,使用addClass()为元素追加样式
addClass("class1 class2 class3......classN");
3,使用removeClass()移除样式
removeClass("class1 class2 class3......classN");
4,toggleClass()切换样式:模拟addClass和removeClass实现样式的添加和移除过程
.toogleClass(class);
5,hasClass()用来判断是否是否包含指定的样式
.hasClass(class);、
html代码操作:html()可以对HTML代码进行操作,类似于js中innerHTML(识别标签)
获取:.html()
设置:.html( "<li></li>"); //设置元素中间的HTML代码
text()可以获取或时设置元素的文本内容(但是并不识别标签)、
获取:.text()
设置:.text( 文本内容 )
val()可以设置或获取元素的value属性值
获取:.val()
设置:.val(value)
节点操作:
工厂函数$()用于获取或创建节点
1 通过选择器获取节点 $(“div”)
2 将DOM节点转化成jQuery节点 $( objDOM)
3 使用 HTML 字符串创建节点 $(“<div></div>”)
插入节点:
append(content) A.append(B) 将把B追加到A中
appendTo(content) A.appendTo(B) 将把A追加到B中
parepend(content) A.parepend(B) 将把B前置插入到A中
parependTo(content) A.parependTo(B) 将把A前置插入到B中
after A.after(B) 在A后面添加同级元素B
befor A.befor(B) 在A前面添加同级元素B
/ $("input").click(function () { // var strLi="<li>这是最后一个admin</li>"; // var getLi=$(strLi); //在ul之后添加同级元素 // $("ul").after(getLi) // getLi.insertAfter("ul"); //在ul之前添加同级元素 // $("ul").before(getLi); //替换replaceWith,replaceAll 替换当前对象;
移除节点:
remove() 删除整个节点
empty()清空整个节点
detach()删除整个节点,保留元素的绑定事件、附加的数据
替换节点:
replaceWith() 和 replaceAll() 两者的关系类似于append和appendTo的关系
复制某个节点:、
clone()用于复制某个节点 可已添加元素true和false
当追加的元素为true时,复制时间处理,false反之
clone(true)
获取与设置属性:
attr( “name”) 与 attr( { [name1:value1] [name1:value1] [name1:value1]})
removeAttr(_)用来删除元素的属性
removeAttr(name)
节点的遍历
遍历子节点:
children() 可以获取元素的所有子元素
next()获取紧邻其后的元素
prev()获取紧邻匹配元素之间的元素
silbings() 用于获取同辈的其它所有元素
遍历父辈元素
parent()获取父级元素
parents()获取元素的祖先元素
each()类似于for 循环遍历每个匹配元素规定的运行函数
end()将元素还原成之前的状态
遍历数组
$(document).ready(function () {
var newList=[[1,2,3],[4,5,6],[7,8,9]];
$.each(newList,function () { $.each(this,function () { document.write(this); }) })
*:css()还有获取元素高度,宽度等的样式操作 方法
$("ul").find("li:eq(2)").end().css({"border":"2px red solid"})