6.6 Query中的事件与DOM操作

一、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"})

6.6 Query中的事件与DOM操作

猜你喜欢