使用JQuery操作DOM

最新推荐文章于 2024-09-06 16:38:23 发布

weixin_40544803

最新推荐文章于 2024-09-06 16:38:23 发布

阅读量243

点赞数

本文链接：https://blog.csdn.net/weixin_40544803/article/details/80096002

版权

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-DOM操作。

样式操作

在JQuery中，对元素的样式操作主要有直接设置样式值，获取样式值，追加样式，移除样式和切换样式

1、设置和获取样式

语法：

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"});

2、追加样式和移除样式

1）追加样式

$(selector).addClass(class);

或

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

注：class为类样式名称。

例如：

//CSS类样式:

.text{ padding:10px;}

.content {background-color:#FFFF00; }

.border {border:1px dashed #333; }

 

//JQeury代码：

$("h2").mouseover(function() {

     $("p").addClass("content border");

});

注：使用addClass()方法仅是追加类样式，即它依旧保存原有的类样式，在此基础上追加新样式。

2）移除样式

语法：

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

或

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

其中参数class为类样式名称，该名称是可选的，当选某个类游戏名称时，则移除该类样式，要移除多个类样式时，与addClass()方法语法类似，每个类样式之间用空格隔开。

例如：

$("h2").mouseout(function() {

        $("p").removeClass("text content");

});

3、切换样式

toggleClass()

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

语法：

$(selector).toggleClass(class) ;

例如：

$("h2").click(function() {

    $("p").toggleClass("content  border");

});

4、判断是否含指定的样式

hasClass( )方法来判断是否包含指定的样式

语法：

$(selector). hasClass(class);

其中参数class为类样式名称，该名称是可选的，规定指定元素中查找的类名，返回值为布尔值，如果包含查找的类则返回true，否则返回false。

例如：

$("h2").mouseover(function() {

    if(!$("p").hasClass("content ")){

$("p").addClass("content ");

}

});

$("h2").mouseout(function() {

      if($("p").hasClass("content ")) {

$("p").removeClass("content ");

    }

});

内容操作

JQuery提供了对元素内容操作的方法，即对HTML代码（包含标签和标签内容）、标签内容和属性值内容三者的操作。

1、HTML代码操作

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

语法：

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

或

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

2、标签内容操作

text()可以获取或设置元素的文本内容

语法：

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

或

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

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

语法格式	参数说明	功能描述
html( )	无参数	用于获取第一个匹配元素的HTML内容或文本内容
html(content)	content为元素的HTML内容	用于设置所有匹配元素的HTML内容或文本内容
text( )	无参数	用于获取所有匹配元素的文本内容
text (content)	content为元素的文本内容	用于设置所有匹配元素的文本内容

3、属性值操作

val()可以获取或设置元素的value属性值

语法：

$(this).val();//获取元素的value属性值

或

$(this).val(value);//设置元素的value属性值

例如：

  <script>

  $(document).ready(function(){

  $("#searchtxt").focus(function(){         // 搜索框获得鼠标焦点

  var txt_value =  $(this).val();   // 得到当前文本框的值

  if(txt_value=="电风扇"){

  $(this).val("");              // 如果符合条件，则清空文本框内容

  }

  });

  $("#searchtxt").blur(function(){	  // 搜索框失去鼠标焦点

  var txt_value =  $(this).val();   // 得到当前文本框的值

  if(txt_value==""){

  $(this).val("电风扇");    // 如果符合条件，则设置内容

  }

  });

  });

  </script>

节点与属性操作

节点操作

创建节点

语法：

$(selector)

或

$(element)

或

$(html)

$()的参数说明

参数	描述
selector	选择器，使用JQuery选择器匹配元素
element	DOM元素，以DOM元素来创建JQuery对象
html	HTML代码，使用HTML字符串创建JQuery对象

例如：

var $newNode=$("<li></li>");

 var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");

var $newNode2=$("<li title='last'>北京申办冬奥会是再合适不过了！</li>");

插入节点

从插入方式上主要分为两大类，内部插入节点和外部插入节点

元素内部插入子节点

语法	功能
append(content)	$(A).append(B)表示将B追加到A中如：$("ul").append($newNode1);
appendTo(content)	$(A).appendTo(B)表示把A追加到B中如：$newNode1.appendTo("ul");
prepend(content)	$(A). prepend (B)表示将B前置插入到A中如：$("ul"). prepend ($newNode1);
prependTo(content)	$(A). prependTo (B)表示将A前置插入到B中如：$newNode1. prependTo ("ul");

例如：

    var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");

    var $newNode2=$("<li title='last'>北京申办冬奥会是再合适不过了！</li>");

    $("ul").append($newNode1);

$("ul").prepend($newNode2);

元素外部插入同辈节点

语法	功能
after(content)	$(A).after (B)表示将B插入到A之后如：$("ul").after($newNode1);
insertAfter(content)	$(A). insertAfter (B)表示将A插入到B之后如：$newNode1.insertAfter("ul");
before(content)	$(A). before (B)表示将B插入至A之前如：$("ul").before($newNode1);
insertBefore(content)	$(A). insertBefore (B)表示将A插入到B之前如：$newNode1.insertBefore("ul");

例如：

    var $newNode3=$("<li>北京冬残会筹备工作在京举行</li>");

    var $newNode4=$("<li>北京奥匹克塔奥运五环标志落成！</li>");

    $("ul").after($newNode3);

$("ul").before($newNode4);

删除节点

remove()：删除整个节点

语法：

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

empty()：清空节点内容

语法：

$(selector).empty();

例如：

$(".gameList li:eq(1)").remove();

$(".gameList li:eq(1)").empty();

替换节点

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

例如：

var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");

//replaceWith()

$(".gameList li:eq(2)").replaceWith($newNode1);

//replaceAll()

$($newNode1).replaceAll(".gameList li:eq(2)");

复制节点

若要对节点进行复制，则可以使用clone()方法，该方法能够生成被选元素的副本，包含子节点，文本和属性。

语法：

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

参数[includeEvents]为可选值，为布尔值ture或flase, true复制事件处理，false时反之

例如：

$(".gameList li:eq(1)").click(function(){

     $(this).clone(true).appendTo(".gameList");

    })

$(".gameList li:eq(2)").click(function(){

     $(this).clone(false).appendTo(".gameList");

    })

属性操作

在JQuery中，属性操作的方法有两种，即获取与设置元素属性的attr()方法和删除元素属性的removeAttr()方法。

1、获取与设置元素属性

语法：

$(selector).attr([name]) ;//获取属性值

或

$(selector).attr({[name1:value1]…[nameN:valueN]}) ;//设置多个属性的值

例如：

    $(".contain img").click(function(){

        alert($(this).attr("alt"));//获取属性值

})

//设置属性值

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

2、删除元素属性

removeAttr()用来删除元素的属性

语法：

$(selector).removeAttr(name) ;

例如：

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

节点遍历

JQuery中不仅能够对获取到的元素进行操作，还能通过已获取到的元素，获取与其相邻的兄弟元素、祖先元素等，进行操作。

遍历子元素

children()方法可以用来获取元素的所有子元素

语法：

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

例如：

//获取<section>的子元素，但不包含子元素的子元素

var $section =$("section").children();

alert($section.length);

遍历同辈元素

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");

遍历前辈元素

parent()：获取元素的父级元素

parents()：元素元素的祖先元素

语法：

$(selector).parent({selector})

$(selector).parents({selector})

其中两者的参数selector均是可选的，表示被匹配元素的选择器表达式。

例如：

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

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

其他变量方法

1、each()方法

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

语法：

$(selector).each(function(index,element)) ;

index：选择器位置

element：当前的元素

例如：

$("img").click(function(){

       $("li").each(function(){

           var str=$(this).text()+"<br>";

           $("section").append(str);

       })

   });

2、end()方法

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

语法：

.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");

CSS-DOM操作

除css()外，还有获取和设置元素高度、宽度等的样式操作方法

CSS-DOM相关操作方法说明

语法	功能
css()	设置或返回匹配元素的样式属性
height([value])	设置或返回匹配元素的高度
width([value])	设置或返回匹配元素的宽度
offset([value])	返回以像素为单位的top和left坐标。仅对可见元素有效
offsetParent( )	返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素
position( )	返回第一个匹配元素相对于父元素的位置
scrollLeft([position])	参数可选。设置或返回匹配元素相对滚动条左侧的偏移
scrollTop([position])	参数可选。设置或返回匹配元素相对滚动条顶

例如：

<script>

$(document).ready(function(){

var adverTop=parseInt($("#adver").css("top"));

var adverLeft=parseInt($("#adver").css("left"));

$(window).scroll(function(){

var scrollTop = parseInt($(this).scrollTop());//获取滚动条翻上去的距离

var scrollLeft = parseInt($(this).scrollLeft());//获取滚动条向右的距离

$("#adver").offset({top:scrollTop+adverTop});

$("#adver").offset({left:scrollLeft+adverLeft});

});

})

</script>