使用jQuery快速高效制作网页交互特效——08 第八章 使用jQuery操作DOM

1、DOM操作:

DOM操作分为三类:

  DOM Core:任何一种支持DOM的编程语言都可以使用它,如getElementById()、getElementsByName;

  HTML-DOM:用于处理HTML文档,如document.forms;

  CSS-DOM:用于操作CSS(获取和设置style对象的各种属性),如element.style.color="green";

JavaScript用于对(x)html文档进行操作,它对这三类DOM操作都提供了支持;

2、 jQuery中的DOM操作:

在jQuery中的DOM操作主要可分为样式操作、文本和value属性值操作、节点操作;

节点操作又包含属性操作、节点遍历和CSS-DOM操作。

其中最核心的部分是节点操作和节点遍历。

 

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

jQuery中的DOM操作:

      1、 样式操作

  2、内容及Value值操作

  3、节点操作

  4、节点属性操作

  5、节点遍历

  6、CSS-DOM操作

◆设置和获取样式:

  ★使用css()为指定的元素设置样式值或获取样式值;

       设置样式的语法: $(selector).css(name,value);    //设置单个属性值

                             $(selector).css({name:value,…..nameN:valueN});     //设置多个属性值

                    Eg:$(this).css("border","5px solid #f5f5f5");

             或

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

获取样式的语法:$(selector).css(name);     //获取属性name的值

参数

说明

name

必须:规定CSS属性的名称。该参数可以是任何CSS属性;eg:background等

value

必须:规定CSS属性的值,该参数可以是任何CSS属性值;eg:#000000、24px等;

 

◆追加和移除样式:

     ★追加样式:除了使用css()方法可以为元素添加样式外,还能使用addClass()方法为元素追加类样式;

    语法:

          $(selector).addClass(className);  //增加单个样式

          $(selector).addClass(className1,className2…..);   //增加多个样式

                  Eg

.text{ padding:10px;}

.content {background-color:#FFFF00; }

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

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

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

});

 

 

★移除样式:

  语法:

         $(selector).removeClass(className);     //移除单个样式

         $(selector).removeClass(className1,className2….);    //移除多个样式

       Eg

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

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

    });

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

    语法:    

      $(selector).toggleClass(className);//切换样式

★其中,参数className为样式的名称,其功能是当元素中包含有名称为className的CSS类样式时,删除该类样式,否则增加一个该名称的类样式。(如果有则删除,没有则增加)。

             Eg

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

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

});

 

 

★toggleClass()可以实现类样式之间的切换、而css()方法或adaClass()方法仅是增加新的元素样式,并不能实现切换的功能;

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

    语法:

        $(selector).hasClass(className);    //参数className是类名,该名称是必选的。返回值为布尔类型,如果有则为true

Eg1

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

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

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

      }

});

Eg2

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

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

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

    }

});

 

3、内容操作:

HTML代码操作

标签内容操作

属性值操作

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

        ◆新增页面内容:html([content]);//其中content是可选项目,表示要添加的内容,该参数可以包含HTML标签。无参数时,表示获取被选元素的文本内容。

         ◆获取页面内容:html();

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

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

          

 

标签内容操作:在jQuery中,可以使用text()方法获取设置元素的文本内容,不含HTML 标签

  ◆设置文本:text([content]);  //可选:规定被选元素的新闻本内容;特殊字符会被编码;无参时,表示获取备选元素的文本内容;

  ◆获取文本:text();    //无参数时获取第一个被选元素的文本

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

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

                  

 

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

语法格式

参数说明

功能描述

html( )

无参数

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

html(content)

content为元素的HTML内容

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

text( )

无参数

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

text (content)

content为元素的文本内容

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

      注:●html(“”):代表清空,需要加双引号,如果不加双引号,是获取html代码;

             ●text():用于获取内容时,如果有标签的话,同样当作文本内容渲染出来;

                        text()方法即支持XML文档,也支持(x)HTML文档;

                        html()方法仅支持(x)HTML文档,而不能用于xml文档。

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

    语法:

      val([value]);   //设置元素的属性值,value规定被选元素的新内容,     //val();//无参数时,获取第一个被选元素的value属性的值

4、 节点与属性操作:

 jQuery中节点操作:查找节点(前面章节已讲)、创建节点、插入节点、删除节点、替换节点、复制节点

查找节点:$(selector);

●创建节点元素:

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

    $(selector):通过选择器获取节点

    $(element):把DOM节点转化成jQuery节点

    $(html):使用HTML字符串创建jQuery节点

      ★语法:

        $(selector)    // selector:选择器,使用jQuery选择器匹配元素;

          或

        $(element)   // element:DOM元素,以DOM元素来创建jQuery对象;

          或

        $(html)      //HTML代码,使用HTML字符串创建jQuery对象;

               Eg

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

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

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

●插入节点:

插入方式

方法

描述

 

内部插入

append(content)

向所选元素的内部插入内容;

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)

将所有匹配元素前置到指定的元素中,该方法仅颠倒了常规prepend()插入元素的操作

$(A). prependTo (B)表示将A前置插入到B中     如:$newNode1. prependTo ("ul");

 

外部插入

after(content)

在每个匹配的元素之后插入内容

$(A).after (B)表示将B插入到A之后              如:$("ul").after($newNode1);

insertAfter(content)

将所有匹配元素插入指定元素的后面,该方法仅颠倒了常规after()插入元素的操作

$(A). insertAfter (B)表示将A插入到B之后        如:$newNode1.insertAfter("ul");

before(content)

像所选择的元素外部前面插入内容

$(A). before (B)表示将B插入至A之前            如:$("ul").before($newNode1);

insertBefore(content)

将所匹配的元素插入指定元素的前面,该方法仅是颠倒了常规before()插入元素的操作;

$(A). insertBefore (B)表示将A插入到B之前        如:$newNode1.insertBefore("ul");

 

●删除节点:jQuery提供了三种删除节点的方法:

  ★remove():删除整个节点,该方法用于删除匹配元素,删除的内容包括匹配元素包含的文本和子节点;

      语法:$(selector).remove([expr]);      //参数expr可选,如果接收参数,则该参数为筛选元素的jQuery表达式,通过表达式获取指定元素,并进行删除;

  ★empty():清空节点内容,该方法并不是删除节点,而是清空节点,他能清空元素中的所有后代节点;

      语法:$(selector).empty();

  ★detach():删除整个节点,保留元素的绑定事件、附加的数据

remove()方法和detach()方法都能将匹配的元素从DOM文档中删除,两者的相同之处是,都能将匹配的元素从DOM中删除,而且删除后该元素在jQuery对象中依然存在;

  eg:下面的代码虽然将id为name的元素在页面中不存在了,但是$name对象中仍然包含这个元素;

          var $name=$(“#name”).remove()

两者不同的地方在于detach()可以在删除元素后,在jQuery对象中保留元素的绑定事件、附加的数据。

例如,在上述代码中,如果在删除前,id为name的元素已经绑定了click事件,在删除后,$name包含的元素仍然绑定着该事件,而remove方法没有这种作用;

 

●替换节点:replaceWith()和replaceAll()用于替换某个节点;两者的关系类似于append()和appendTo();

           作用是将所有匹配的元素都替换成指定的HTML或者DOM元素;

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

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

        或

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

 

●复制节点:clone()用于复制某个节点:该方法能够生成被选元素的副本,包含子节点、文本和属性;

  语法:$(selector).clone([includeEvents]);     //其中参数includeEvents为可选值,为布尔值true或false。表示是否复制元素的所有处理事件,为true时复制事件,为false时不复制事件。

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

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

    })

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

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

    })

 

 

5、 属性操作:

●属性操作:attr()用来获取与设置元素属性;

  语法:

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

    或

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

      eg:设置图片的宽高属性

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

★在jQuery中,很多方法都是同一个方法实现获取与设置两种功能的,即一个方法实现两个用途、无参数时为获取元素,带参数时,为设置元素的文本、属性值等,attr()方法、html()方法、val()方法等;

●删除元素属性:

  语法:

    $(selector).removeAttr(name);     //参数为元素属性的名称。

      Eg1:删除图片的宽度属性:

        $(“contain  img”).removeAttr(“width”);

              Eg2:删除元素的alt属性:

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

6、 节点的遍历:遍历子元素、遍历同辈元素、遍历前辈元素、其他遍历方法;

●遍历子元素:children()方法可以用来获取元素的所有子元素;

语法:

$(selector).children([expr]);    //参数expr为可选,用于过滤子元素的表达式。

     Eg:获取<section>的子元素,但不包含子元素的子元素;

            

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

方法

描述

next([expr])

用于获取紧邻匹配元素之后的元素,expr参数可选,用于过滤同辈元素的表达式:

如:$("li:eq(1)").next().css("background-color","#F06");

prev([expr])

用于获取紧邻匹配元素之前的元素,expr参数可选,用于过滤同辈元素的表达式:

如:$("li:eq(1)").prev().css("background-color","#F06");

slibings([expr])

用于获取位于匹配元素前面和后面的所有同辈元素,expr参数可选,用于过滤同辈元素的表达式:

如:$("li:eq(1)").siblings().css("background-color","#F06");

 

●遍历前辈元素:

     jQuery中可以遍历前辈元素

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

        语法:$(selector). parent([selector]);

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

             语法:$(selector). parents([selector]);

              eg

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

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

▲两者的参数均是可选的,表示被匹配元素的选择器表达式,

参数

描述

示例

parent([selector]);

参数可选,获取当前匹配元素集合中的每个元素的父级元素

$(“hot”). parent();// 获取到的是<span>的直接上层<li>元素

$(“hot”). parent(). parent();//获取上上层<li>元素

$(“hot”). parent(). parent().remove();//将删除当前<ul>列表

parents([selector]);

参数可选,获取当前匹配元素集合中的每个元素的祖先元素

$(“hot”). parents();从当前匹配元素的直接父节点开始查找,查找范围为其父节点和祖先节点,获取到的节点依次为:<li>、<ul>、<section>、<body>和<html>

 

●其他遍历方法:jQuery中还有很多其他的遍历方法,如each()、end()、find()、filter()、eq()、first()、last()等。

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

    语法:

      $(selector).each(function(index,element));   //其中,参数index表示选择器的index位置,element表示当前的元素,当返回值为false时可用于及早停止循环。

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

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

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

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

       })

   });

 

 

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

    语法:.end();

eg

 

 

 

7、CSS-DOM操作:

方法

描述

示例

css()

设置或返回匹配元素的样式属性

$(“#box”).css(“background-color”,”green”);

height([value])

参数可选,设置或返回匹配元素的高度,如果没有规定长度的单位,则默认px做单位;

$(“#box”).height(180)

width([value])

参数可选,设置或返回匹配元素的宽度,如果没有规定长度的单位,则默认px做单位;

$(“#box”).width(180)

offset([value])

返回以像素为单位的top和left坐标。此方法仅对可见元素有效

$(“#box”).offset()

offsetParent()

返回最近的已定位祖先元素。定位元素指元素的CSS position属性值被设置为relative,absolute或fixed的元素

$(“#box”). offsetParent()

position()

返回第一个匹配元素相对于父元素的位置

$(“#box”). position()

scrollLeft([position])

参数可选,设置或返回匹配元素相对滚动条左侧的偏移

$(“#box”). scrollLeft(20)

scrollTop([position])

参数可选,设置或返回匹配元素相对滚动条顶部的偏移

$(“#box”). scrollTop(180)

posted @ 2018-08-10 10:18 逆風〠飛翔 Views(...) Comments(...) Edit 收藏