jQuery操作DOM

Posted duan-yf

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery操作DOM相关的知识,希望对你有一定的参考价值。

 

DOM操作分为哪些类型

 

 

技术图片

 

 

 

1.jQuery中的DOM操作

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

技术图片

 

 

 

2. 样式操作
①使用css()为指定的元素设置样式值或获取样式值
语法:
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");
});
⑤判断是否含指定的样式
hasClass( )方法来判断是否包含指定的样式
语法:
$(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

3.HTML代码操作

html()可以对HTML代码进行操作,类似于JS中的innerHTML

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

示例:

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

 4标签内容操作

text()可以获取或设置元素的文本内容
语法:
$("div.left").text();  //获取元素中的文本内容

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

 

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

 

html( ) 和text( )方法的区别:
 

语法格式

参数说明

功能描述

html( )

无参数

用于获取第一个匹配元素的HTML内容或文本内容

html(content)

content为元素的HTML内容

用于设置所有匹配元素的HTML内容或文本内容

text( )

无参数

用于获取所有匹配元素的文本内容

text (content)

content为元素的文本内容

用于设置所有匹配元素的文本内容

5.属性值操作
val()可以获取或设置元素的value属性值
语法:
$(this).val();   //获取元素的value属性值
 
$(this).val(value);   //设置元素的value属性值
$( this). val ("");
//清空需要添加引号,如果val方法括号中不添加任何内容,是获取val值
$(#search). focus ( );  //获得焦点的事件
$(#search). blur ( );//失去焦点的事件
6.节点操作
技术图片

 

 

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();
detach():删除整个节点,保留元素的绑定事件、附加的数据节点属性操作
$(selector).detach();

 4.替换节点

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中。

 

prepend和prependTo的区别

1.$(目标元素).prepend(content)  在。。。。首端的内部插入内容

 

    html:     <p>这是目标元素</p>

 

    jquery:  $("p").prepend("这是prepend插入的内容,")

 

那么执行后的结果就是:

 

    html: <p>这是prepend插入的内容,这是目标元素</p>

2.$(content).prependTo(目标元素)  把内容插入到。。。内部的首端

             jquery:  $("这是prependTo插入的内容,").appendTo("p")

 

 那么执行后的结果就是:

 

    html: <p>这是prependTo插入的内容,这是目标元素</p>

 

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.属性操作

获取与设置元素属性
attr()用来获取与设置元素属性
语法:
$(selector).attr([name]) ;   

 

$(selector).attr({[name1:value1]…[nameN:valueN]}) ; 
示例:
$(".contain img").attr({width:"200",height:"80"});   

删除元素属性

removeAttr()用来删除元素的属性
语法:
$(selector).removeAttr(name) ;

 

示例:
$(".contain img").removeAttr("alt");   

 8.节点遍历

技术图片

 

 

 

1.遍历子元素
children( )方法可以用来获取元素的所有子元素
语法:
$(selector).children([expr]);

 

示例:
var $section =$("section").children();   //获取<section>的子元素,但不包含子元素的子元素
alert($section.length);

2.遍历同辈元素

jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素

语法

功能

next([expr])

用于获取紧邻匹配元素之后的元素

$("li:eq(1)").next().addClass("orange");

prev([expr])

用于获取紧邻匹配元素之前的元素

$("li:eq(1)").prev().addClass("orange");

slibings([expr])

用于获取位于匹配元素前面和后面的所有同辈元素

$("li:eq(1)").siblings().addClass("orange");

示例:
$("li:eq(1)"). next ().addClass("orange");  //遍历获得同辈节点
$("li:eq(1)"). prev ().addClass("orange");
$("li:eq(1)"). slibings ().addClass("orange");
3.遍历前辈元素
jQuery中可以遍历前辈元素
parent():获取元素的父级元素
parents():元素元素的祖先元素
示例:
$("li:eq(1)").parent().addClass("orange");   
$("li:eq(1)").parents().addClass("orange");

4.其他遍历方法

each( ) :规定为每个匹配元素规定运行的函数

语法:
$(selector).each(function(index,element)) ;     //Index:选择器的位置  Element:当前的元素
 
示例:
$("img").click(function(){    //给图片添加点击事件
       $("li").each(function(){   //遍历每一个li元素
           var str=$(this).text()+"<br>";   //获取当前li元素中的内容
           $("section").append(str);   //把内容追加到section后面 
       })   
});

end( ):结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态

示例:

$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});
$(".gameList li").first().css("background","#b8e7f9").end().last().css ("background","#d3f4b5");
$(".gameList li:last").css("border","none");

9.css操作DOM:

技术图片

 

 

以上是关于jQuery操作DOM的主要内容,如果未能解决你的问题,请参考以下文章

jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段

实用代码片段将json数据绑定到html元素 (转)

jQuery学习之路-DOM操作

jquery DOM操作

jquery_操作dom

jQuery学习手册