DOM操作分为哪些类型

1.jQuery中的DOM操作

jQuery对JavaScript中的DOM操作进行了封装

css(name,value) ;    //设置单个属性　　

css({name:value, name:value,name:value…}) ;    //同时设置多个属性

$(this).css("border","5px solid #f5f5f5");
或
$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});  //opacity：设置透明度

语法：

$(selector).addClass(class);

$(selector).addClass(class1 class2 … classN);

示例：

$("h2").mouseover(function() {
  $("p").addClass("content border");
});

③移除样式

语法：

$(selector).removeClass("class") ;

$(selector).removeClass("class1 class2 … classN ") ;

示例：

$("h2").mouseout(function() {
$("p").removeClass("text content"); });

④切换样式

toggleClass()：模拟了addClass()与removeClass()实现样式切换的过程

语法：

$(selector).toggleClass(class) ;

示例：

$("h2").click(function() {
  $("p").toggleClass("content border");
});

$(selector). hasClass(class);

$("h2").mouseover(function() {
      if(!$("p").hasClass("content ")){ 
$("p").addClass("content ");    }    
});
  //鼠标移入，判断p元素是否含有content，不含有就添加content

$("h2").mouseout(function() {
      if($("p").hasClass("content ")) {       
  $("p").removeClass("content ");    }   
 });   
//鼠标移出，判断p元素是否含有content，含有就移除content

$("div.left").html(); //获取元素中的html代码

$("div.left").html("<div class=‘content‘>…</div>");  //设置元素中的html代码

$("div.left").html("");//清空需要添加引号，如果html方法括号中不添加任何内容，是获取html代码

$("div.left").text();  //获取元素中的文本内容

$("div.left").text("<div class=‘content‘>…</div>");   //设置元素中的文本内容

$("div.left"). text ("");
//清空需要添加引号，如果text方法括号中不添加任何内容，是获取文本内容

 

 

1.查找节点

使用选择器来查找节点

2创建节点元素

工厂函数$()用于获取或创建节点：

$(selector)：通过选择器获取节点
 $(element)：把DOM节点转化成jQuery节点
 $(html)：使用HTML字符串创建jQuery节点
例如：

var $newNode=$("<li></li>");
var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
var $newNode2=$("<li title=‘last‘>北京申办冬奥会是再合适不过了！</li>");
               

 

 

 

3.删除节点

remove()：删除整个节点

$(selector).remove([expr]);

empty()：清空节点内容

$(selector).empty();

$(selector).detach();

replaceWith()和replaceAll()用于替换某个节点

示例：

var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
$(".gameList li:eq(2)").replaceWith($newNode1);
$($newNode1).replaceAll(".gameList li:eq(2)");

replaceWith( )和replaceAll( )两者的关系类似于append( )和appendTo( )

补充：append( )和appendTo( )的区别

1. append(content)方法

方法作用：向每个匹配的元素内部追加内容。

参数介绍：content (<Content>): 要追加到目标中的内容。

用法示例：

HTML代码为<p>I come from </p><p>I love  </p>

向所有p标签中追加一个单词china，则写法为 $("p").append("china");

结果为：<p>I come from china</p><p>I love china </p>

2. appendTo(expr)方法

方法作用：把所有匹配的元素追加到指定的元素元素集合中。

参数介绍：expr (String): 用于匹配元素的jQuery表达式。

用法示例：

HTML代码为<b>I love china </b><p></p>

把标签b追加到p元素中，写法为$("b").appendTo("p");

结果为：><p><b>I love china </b></p>

使用appendTo这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

5.复制节点

clone()用于复制某个节点

语法：

$(selector).clone([includeEvents]) ;

includeEvents：参数ture或flase, true复制事件处理，flase时只能复制节点不能复制事件处理

示例：

$(".gameList li:eq(1)").click(function(){
 $(this).clone(true).appendTo(".gameList");
})
$(".gameList li:eq(2)").click(function(){
$(this).clone(false).appendTo(".gameList");
})

7.属性操作

$(selector).attr([name]) ;   

$(selector).attr({[name1:value1]…[nameN:valueN]}) ; 

$(".contain img").attr({width:"200",height:"80"});   

$(selector).removeAttr(name) ;

$(".contain img").removeAttr("alt");   

jQuery操作DOM