>

Jquery基础教程之DOM操作,操作详解

- 编辑:大富豪棋牌游戏下载 -

Jquery基础教程之DOM操作,操作详解

JQuery中的DOM操作

本片文章列举部分JQuery中操作DOM的常用方法,通过翻阅本篇小说,你会对JQuery中的DOM操作的api有个大约的概略,当然你也足以收藏后用来异常的快查看,以增长支付速度!
为了进一步形象地演说格局的法力,上二个DOM先

你最喜欢的水果是?

  • 苹果
  • 橘子
  • 菠萝

jQuery 中的 DOM 操作

     对于dom的齐全大家都知道吗,DOM是Document Object Model的缩写,其意思是文书档案对象模型。DOM是一种与浏览器、平台、语言非亲非故的接口,使用dom接口很轻巧的拜谒页面中持有专门的职业组件。dom操作一般能够分成八个方面即DOM Core(大旨)、HTM-Dom和CSS-DOM。

查究节点

搜寻节点是透过JQuery选取器来产生的

//获取ul列表中的第0个li节点
var li_1=$('ul li:eq(0)');
//获取li节点的文本节点
var text=li_1.text();

DOM(Document Object Model—文档对象模型):一种与浏览器,平台, 语言非亲非故的接口,使用该接口能够轻巧地拜望页面中具备的标准组件

  每贰个网页都能够用DOM表示出来,每种DOM都得以当作是一棵DOM树。上面的html页面结构能够营造出一棵DOM树,代码:

开创节点

创办节点是因此工厂函数$()来产生的

//创建一个li节点,并赋值给li_pear变量
var li_pear = $('
  • '); //将创建的li节点添加到ul列表中 $('ul').append(li_pear);

    插入节点

    插入节点的不二诀窍非常多,每一个办法都有三种样式,那三种样式颠倒了容器和因素,如container.append(item)以及item.appendTo(container)

    //创建一个li节点,并赋值给li_pear变量
    var li_pear = $('
    
    • '); //下面列出常用的插入节点的方法 //------------------------------------------ //将li节点添加到ul列表尾部 $('ul').append(li_pear); //颠倒一下容器和元素,可以这样写 li_pear.appendTo('ul');//或者li_pear.appendTo($('ul')); //将li节点添加到ul列表首部 $('ul').prepend(li_pear); //颠倒一下容器和元素,可以这样写 li_pear.prependTo('ul');//或者li_pear.prependTo($('ul')); //将li节点插入到橘子的后面 $('ul li[title=橘子]').after(li_pear); //颠倒一下容器和元素,可以这样写 li_pear.insertAfter('ul li[title=橘子]'); //将li节点插入到橘子的前面 $('ul li[title=橘子]').before(li_pear); //颠倒一下容器和元素,可以这样写 li_pear.insertBefore('ul li[title=橘子]');

      删除节点

      除去节点有几个艺术,remove()是去除选中的节点,empty()是清空选中节点的子成分。

      //删除ul列表中的第0个li节点
      $('ul li:eq(0)').remove();
      //清空ul列表
      $('ul').empty();
      

      复制节点

      //复制节点(不包含元素所绑定的事件)
      var li=$('ul li:eq(0)').clone();
      //复制节点,包含元素所绑定的事件
      var li=$('ul li:eq(0)').clone(true);
      

      轮换节点

      //替换节点
      $('p').replaceWith('你最喜欢的水果是?');
      //颠倒一下替换元素和被替换元素,可以这样写
      $('你最喜欢的水果是?').replaceAll('p');
      

      包裹节点

      //下面的代码返回 
      

      hello

      $('hello').wrap('

       

      ');

      天性操作

      var li=$('ul li:eq(0)');
      //获取属性值
      var title=li.attr('title');
      //设置属性值
      li.attr('title','some text');
      //删除属性
      li.removeAttr('title');
      

      收获和设置html,文本和值

      //获取html,类似JavaScript中的innerHtml()方法
      var htmlString=$('p').html();
      //设置html
      $('p').html('你最喜欢的水果是?');
      //获取文本节点
      var text=$('p').text();
      //设置文本节点
      $('p').text('你最喜欢的水果是?');
      //获取表单元素的值
      $('#txt_userName').val();
      //设置表单元素的值
      $('#txt_userName').val('some text');
      

本片文章列举部分JQuery中操作DOM的常用方法,通过翻阅本篇小说,你会对JQuery中的DOM操作的api有个大意的概略,当然你也可...

DOM 操作的分类:

代码如下:

DOM Core: DOM Core 并不专项于 JavaScript, 任何一种扶助DOM的程序设计语言都能够行使它. 它的用途并不是只限于管理网页,也得以用来拍卖其余一种是用标志语言编写出来的文书档案, 比如: XML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"
 <title>DOM Demo</title> 
</head>
<body>
<p title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
<ul>
<li title="苹果">苹果</li>
<li title="橘子">橘子</li>
<li title="菠萝">菠萝</li>
</ul>
</body>
</html>

HTML DOM: 使用 JavaScript和 DOM 为 HTML文件编写制定脚本时, 有点不清隶属于 HTML-DOM的习性

   创设出的DOM树如下:

CSS-DOM:针对于 CSS操作, 在 JavaScript中, CSS-DOM 重要用来获取和设置 style对象的种种品质

  大富豪棋牌游戏下载 1

追寻节点

  JQuery中的DOM操作首要对包括:建【新建】、增【增添】、删【删除】、改【修改】、查【查找】【像数据库操作】。下边包车型大巴DOM操作将围绕地点的DOM树举办学习JQueryDOM操作。

追寻节点:

  一、查--查找DOM节点

招来成分节点:通过 jQuery 采用器落成.

    查找节点特别轻易,使用接纳器就会轻便做到各类搜索专业。例:查找元高商点p重返p内的文件内容$("p").text();例:查找成分节点p的性质重返属性名称对应的习性值$("p").attr("title"),重临p的天性title的值。

搜索属性节点:查找到所必要的要素之后, 能够调用 jQuery对象的 attr() 方法来获得它的各类属性值

  二、建--新建DOM节点

创办节点

    1、创设成分节点

开创节点: 使用 jQuery 的厂子函数 $(): $(html);会基于传入的 html 标识字符串创立贰个 DOM对象, 并把那一个 DOM对象包装成八个 jQuery 对象重回.

      创设成分节点而且把节点作为<ul>成分的子节点增添到DOM节点树上。先制形成分点,创立成分节点使用Jquery的厂子函数$()来完毕,格式如下:$(html),该方法会遵照传入的html字符串重回多个DOM对象,并将DOM对象包装成贰个JQuery对象后回来。

注意:

          制造四个因九秋点JQuery代码如下:

动态创立的新因三秋点不会被电动增多到文书档案中,而是须求动用别的措施将其插入到文档中;

 $li1=$("<li></li>")

当创立单个成分时,需注意闭合标签和平运动用标准的 XHTML 格式.比如创设贰个<p>成分,能够动用 $(“<p/>”) 或 $(“<p></p>”),但不能够动用 $(“<p>”) 或 $(“<P>”)

      代码再次来到$li1正是一个由DOM对象包装成的JQuery对象。把新建节点增加到DOM树中JQuery代码如下:

创制文本节点就是在创立成分节点时直接把文件内容写出来;创设属性节点也是在开立成分节点时手拉手开创

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

插入节点(1)

      增多后页面中只可以看看<li>成分默许的"·",由于未有为节点添Gavin本所以只突显暗许符号,下边创制文本节点。

动态创造 HTML成分并从未实际用处, 还亟需将新创制的节点插入到文书档案中,即产生文书档案中有个别节点的子节点

      PS:append()方法是增加DOM节点方法详见增--增添DOM节点。

大富豪棋牌游戏下载 2

    2、创立文本节点

布署节点(2)

      使用JQuery的工厂函数$()一样可以创立文本节点,创立文本节点的JQuery代码如下:

大富豪棋牌游戏下载 3

$li2=$("<li>苹果</li>");

大富豪棋牌游戏下载,以上措施不只好将新创制的 DOM成分插入到文书档案中, 也能对原始的 DOM成分进行移动.

      代码重临$li2正是多个由DOM对象包装成JQuery对象,把新建的公文节点加多到DOM树中JQuery代码如下:      

去除节点

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

remove(): 从 DOM中剔除全数相称的成分, 传入的参数用于根据jQuery表达式来筛选元素. 当有些节点用 remove()方法删除后, 该节点所满含的富有后代节点将被同时删除.这几个办法的重临值是八个针对已被删去的节点的引用.

      加多后页面中能看到"·苹果",右键查看页面源码发掘新加的文件节点未有title属性。上面方法创造带属性的节点。

empty(): 清空节点 –清空成分中的全部后代节点(不带有属性节点).

    3、创设属性节点

复制节点

      创设属性节点同成分节点、文本节点同样选取JQuery的厂子函数实现。创制属性节点的JQuery代码如下:     

clone(): 克隆相配的 DOM成分, 重回值为克隆后的别本.但那时复制的新节点不富有任何行为.

$li3=$("<li title='榴莲'>榴莲</li>");  

clone(true): 复制作而成分的同一时候也复制元素中的的风浪

    

轮换节点

       代码重返$li3也是七个由DOM对象包装成JQuery对象,把新建的质量节点增添到DOM树中JQuery代码如下:      

replaceWith(): 将全部相配的成分都替换为内定的 HTML 或 DOM成分

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

replaceAll(): 颠倒了的 replaceWith() 方法.

      增加后页面中能看到"·谷夜套",右键查看页面源码发现新加的性质节点有title='毛荔枝'属性。

在意: 若在轮换以前, 已经在要素上绑定了轩然大波,替换后本来绑定的平地风波会与原本的因素一齐没有

   三、增--添加DOM节点

卷入节点

      动态新建元素不加多到文书档案中从未实际意义,将新建的节点插入到文书档案中有多少个格局,如下:append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()。

wrap(): 将钦点节点用任何标记包裹起来.该方法对于要求在文书档案中插入额外的结构化标识非常有用, 何况不会毁掉原有文书档案的语义.

    1、append()方法

wrapAll(): 将全部相配的因素用一个因向来包裹.而 wrap() 方法是将享有的要素举行单独包裹.

      append()方法向相配的成分内部追加内容, 方法如下:

wrapInner(): 将每三个匹配的要素的子内容(包蕴文件节点)用别样结构化标志包裹起来.

$("target").append(element);

属性操作

例:     

attr(): 获取属性和装置属性

$("ul").append("<li title='香蕉'>香蕉</li>");

当为该方法传递三个参数时,即为某成分的得到钦赐属性

      该方法查找ul元素,然后向ul中加多新建的li成分。

当为该格局传递七个参数时,即为某成分设置钦赐属性的值

    2、appendTo()方法

jQuery 中有比比较多方法都以贰个函数实现获取和设置.如: attr(), html(), text(), val(), height(), width(), css()等.

      appendTo()方法将富有相称的因素追加到钦赐的因素中,该格局是append()方法的颠倒[操作宗旨的颠倒实际不是操作结果]操作。方法如下:$(element).appendTo(target);例:     

removeAttr(): 删除钦赐成分的内定属性

$("<li title='荔枝'>荔枝<li>").appendTo("ul");

安装和取得 HTML, 文本和值

      该办法新建成分li,然后把li增添到查找到的ul成分中。

读取和安装有个别成分中的 HTML内容: html() . 该办法能够用于 XHTML,但不可能用于 XML 文档

    3、prepend()方法

读取和设置有个别成分中的文本内容: text().该方式不只能用来 XHTML 也得以用来 XML文书档案.

      prepend()方法将每相称的元素内部前置要加上的因素,方法如下:

读取和装置某些元素中的值: val() ---该办法类似 JavaScript 中的 value属性. 对于文本框,下拉列表框, 单选框该措施可再次来到成分的值(多选框只可以回到第1个值).借使为多选下拉列表框,则赶回三个分包全体选取值的数组

$(target).prepend(element);

你只怕感兴趣的作品:

  • 浅谈jQuery 选拔器和dom操作
  • jQuery DOM插入节点操作指南
  • JQuery插入DOM节点的不二法门
  • JQuery查找DOM节点的方法
  • JQuery 接纳器、DOM节点操作演习实例

例:     

$("ul").prepend("<li title='芒果'>芒果</li>")

      该办法将追寻成分ul然后将新建的li成分作为ul子节点,且作为ul的第一个子节点插入到ul中。

    4、prependTo()方法

      prependTo()方法将成分增添到每三个金童玉女的要素内部前置,方法如下:

$(element).prependTo();

例:     

$("<li title='西瓜'>西瓜</li>").prependTo("ul");

      该措施将新建的成分li插入到查找到的ul成分中作为ul的首先个头节成分。

    5、after()方法

      after()方法向相配的因素前边添卢比素,新添长的要素做为指标成分后的隔壁的男生儿元素。方法如下:

$(target).after(element);

例:

      $("p").after("<span>新加段新加段新加段新加段新加段</span>");

      方法将追寻节点p,然后把新建的要素增多到span节点前边做为p的男子节点。

    6、insertAfter()方法

      insertAfter()方法将新建的成分插入到查找到的对象元素后,做为指标成分的男生节点。方法如下:

$(element).insertAfter(target);

例:     

$("<p>insertAfter操作</p>").insertAfter("span");

      方法将新建的p成分增多到找出到指标成分span后边,做为指标成分后边的首先个兄弟节点。

    7、before()方法

      before()方法在每八个相配的要素在此以前插入,做为相配成分的前一个弟兄节点。方法如下:

$(target).before(element);

例:

      $("p").before("<span>上边是个段落</span>");

      before方法寻觅每一个成分p,将新建的span成分插入到元素p以前做为p的前二个小朋友节点。

    8、insertBefore()方法

      insertBefore()方法将新建元素增添到对象元素前,做为目标成分的前贰个男士节点,方法如下:

$(element).insertBefore(target);

例:      

$("<a href='#'>锚</a>").insertBefore("ul");

      insertBefore()新建a成分,将新建的a成分加多到成分ul前,做为ul的前一个汉子节点。

      增台币素的法子前多少个是增多到元素内部,后多个是增加到成优良部的操作,有这个主意可以成功别的格局的因素增添。

    四、删--删除DOM节点操作

      假如想要删除文书档案中的有个别成分JQuery提供了二种删除节点的方法:remove()和empty();

    1、remove()方法

      remove()方法删除所有相配的因素,传入的参数用于筛选成分,该情势能去除成分中的全数子节点,当相称的节点及子孙被剔除后,该方法再次回到值是指向被剔除节点的援用,由此能够动用该引用,再选取那一个被删去的成分。

主意如下:

$(element).remove();

例:     

 $span=$("span").remove();

      $span.insertAfter("ul");

      该示例中先删除全部的span成分,把删除后的因素采取$span接收,把删除后的要素加多到ul前面做为ul的男生儿节点。该操作也正是将有着的span成分以及后代成分移到ul前面。

    2、empty()方法。

      empty()方法严刻来说并非剔除成分,该措施只是清空节点,它能清空成分中的全部子节点。方法如下:

$(element).empty();

例:      

$("ul li:eq(0)").empty();

      该示例使用empty方法清空ul中率先个li的文本值。只好下li标签私下认可符号”·“。

  五、改--修改DOM节点操作

       修改文书档案中的成分节点能够应用各类办法:复制节点、替换节点、包裹节点。

    1、复制节点$(element).clone()

       复制节点方法能够复制节点成分,并且能够基于参数决定是不是复制节点成分的一举一动。方法如下:

$(element).clone(true);

例:       

$("ul li:eq(0)").clone(true);

       该办法复制ul的第二个li元素,true参数决定复制作而成分时也复制元素行为,当不复制行为时髦未参数。

    2、替换节点$(element).repalcewith()、$(element).repalceAll()

       替换节点方法能够替换有些节点,有二种样式格局落实:replaceWith()和replaceAll().使用replaceWith方法应用前面包车型地铁成分交替前边的因素,replaceAll方法运用前边的因素交替后边的要素,

方法如下:

$(oldelement).replaceWith(newelement);$(newelement).repalceAll(oldelement);

例:             

$("p").replaceWith("<strong>我要留下</strong>");

该方法运用strong成分替换p成分。        

$("<h3>替换strong</h3>").repalceAll("strong");

该例使用h3成分替换全数的strong成分。

    3、包裹节点$(element).wrap()、$(element).wrapAll()、$(element).wrapInner()

       包裹节点方法运用任何标记包裹目的成分进而改动成分的展现情势等,而且该操作不会损坏原有文书档案的词义。包裹节点有二种完毕情势:wrap();wrapAll();wrapInner();

       wrap()方法如下:

$(dstelement).wrap(tag);

例:        

$("p").wrap("<b></b>");

该示例方法运用b标签包裹全数的p成分每种成分都施用b标签包裹。

       wrapAll()方法如下:

$(dstelement).wrapAll(tag);

例:        

$("p").wrapAll("<b></b>");

访示例方法应用b标签包裹全体的p成分,全数的p成分标签用三个b标签包裹。

        wrapInner()方法如下:

$(dstelement).wrapInner(tag);

例:       

 $("strong").wrapInner("<b></b>");

该示例使用b标签包裹各个一strong成分的子成分。

    Dom成分的别的操作:属性操作、样式操作、设置和收获HTML,文本和值、遍历节点操作、Css-Dom操作。

    1、属性操作attr()和removeAttr()

      attr()方法能够赢得成分属性,也能可以设置成分属性。方法如下,当attr(para1)方法有个参数时候用于获取当前成分的para1的属性值,当attr(para1,attrValue)有三个参数时候设置当前因素的属性名叫para1的属性值为attrValue;例:      

 $("p").attr("title");

该示例用于获得p成分的title属性值。     

$("p").attr("title","你最喜欢的水果");

该示例设置p成分的title属性值为"你最欣赏的果品";

      假若一次设置多个属性值能够运用“名/值”对情势,例:      

$("p").attr({"title":"你最喜欢的水果","name":"水果"})

该示例三遍设置多个属性值。

      removeAttr()方法用于删除特定的品质,方法是在参数中钦点属性名。例:      

$("p").removeAttr("name");

该措施就是移除p成分的name属性。

     2、样式操作addClass()、removeClass()、toggleClass()和hasClass()

      加多样式addClass()方法,使用该办法对指标成分增多相应的体制,方法如下:

$(element).addClass();

例:     

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

该示例设置元素p的体制为ul。

      移除样式removeClass()措施,使用该办法移除目的成分的内定样式,方法如下:

$(element).removeClass();

例:     

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

该救命去除掉p元素的ul类样式。

      切换样式toggleClass()方式,使用该办法切换指标成分的体裁,方法如下:

$(element).toggleClass();

例:      

$("p").toggleClass("ul");

该方法来回切换【增添删减达成切换】成分p的样式ul.

      剖断成分是或不是使用了体制$(element).hasClass(),办法如下:

$(element).hasClass(class);

例:      

alert($("p").hasClass("ul"));

打印出p成分是不是有ul样式。

      PS:addClass()和attr()方法设置样式的例外,attr方法把成分的属性名对应的性质值设为情势中的参数值,addClass()则把属性值

增加到属性名对应的属性值中。例:已有成分<p class='class1'>成分样式</p>,使用attr()和addClass()分别加多新样式。      

$("p").attr("class","another").

结果是<p class='another'>成分样式</>      

$("p").addClass("class","another")

结果是<p class='class1 another'>元素样式</p>

    3、设置和获取HTML【html()】,文本【text()】和值【val()】

      html()方法获得或安装有些成分的html成分。方法如下:

$(selector).html();

例:

       $("p").html();该示例获得成分p的html内容。

      $("p").html("<strong>增多html内容</strong>");该示例设置p的html内容为”<strong>增添html内容</strong>“;

      PS:该方式能够用来XHTML文档,无法用于XML文书档案。

      text()方法赢得或设置某些成分的文本值。方法如下:$(selecotr).text();例:

      $("p").text();该示例得到元素p的text文本内容。

      $("p").text("重新载入参数的文件内容");该示例设置成分p的text文本为"重新初始化的文书内容";

      PS:该方法对html和XML文书档案都适用。

      val()方法获得或安装某些成分的值,假使元素值是多选则以数组情势再次来到,方法如下:$(selector).val();例:文本成分

<input type="text" id="userName" value="请输入用户名" />

      $("#userName").val();获得input成分的值。

      $("#userName").val('响马');设置input成分的值为'响马'。

      val()方法的不只能操作input,最重要的叁个用场用于select【下拉列表框】、checkbox【多选框】、radio【单选框】。

例:在下拉框下的多选赋值应用

<select id="fruits" multiple="multiple"><option>苹果</option><option>香蕉</option><option>西瓜</option></select>

      $("#fruits").val(['苹果','香蕉']);该示例使select中苹果和天宝蕉两项被选中。

      4、遍历节点操作children()、next()、prev()、siblings()和closest()

      children()方法用于获取相称成分的子成分会集,只相配子成分不考虑任何后代成分。方法如下:

$(selector).children();

例:      

 $("$("body").children().length;

该示例获得body元素的子成分个数;

      next()方法用于相配成分的下四个小伙子节点,方法如下:

$(selector).next();

例:      

$("p").next().html();

该示例获得p成分的下贰个弟兄节点的html内容。

      prev()方法用于相配成分的上二个弟兄节点,方法如下:

$(selector).prev();

例:       

$("ul").prev().text();

该示例获得ul元素的上五个兄弟节点的文件内容。

      siblings方法()用于相配目的成分的具有兄弟成分,方法如下:

$(selector).siblings();

例:

       $("p").slibings();示例拿到p成分的有所兄弟节点成分。

      closest()方法()用来获取近日的相配成分,首先检查当前成分是或不是相配要是相配则直接再次来到,不然继续前行查找父成分中符合条件的因素再次来到,若无相称的要素则赶回空JQuery对象。

    5、CSS-Dom操作css()、offset()、position()、scrollTop()和scrollLeft()

      css()方法用于获取、设置成分的三个或多少个属性。方法如下:

$(selector).css();

例:       

$("p").css("color","red");

该示例用于安装成分的颜料属性为玛瑙红;

         $("p").css("color")该示例用于得到成分的color样式值;       

$("p").css({"font-size":"30px","backgroundColor","#888888"});

该示例用于安装成分的三个样式。

      offset()方法用于获取元素绝对当前窗体的偏移量,其回到对象满含两日性子:top和left。

主意如下:

$(selector).offset()

       该示例用于获取成分p的偏移量。

      PS:offset()只对可知成分有效。

      position()方法用于获取成分于前段时间的个position样式属性设置为relative也许absolute的祖交节点的相持偏移量。方法如下:

$(selector).position();

例:      

var postion = $("p").positon();var left=positon.left;var top=positon.top;

该示例用于获得元素p的职位。

      scrollTop()和scrollLeft()方法用于获取成分的滚动条距最上部的距离和距侧边包车型地铁距离。方法如下:

$(selector).scrollTop();$(selector).scrollLeft();

例:      

var scrollTop=$("p").scrollTop();var scrollLeft=$("p").scrollLeft();

该示例用于获得成分的滚动条的职位。

      也能够增加参数将成分滚动到钦点的职位。例:      

$("textarea").scrollTop(300);$("textarea").scrollLeft(300);

以上所述正是Jquery基础教程之DOM操作,希望对大家具备补助。

你可能感兴趣的篇章:

  • 有个别主流JS框架中DOMReady事件的兑现小结
  • domReady的落到实处案例

本文由大富豪棋牌游戏二维码发布,转载请注明来源:Jquery基础教程之DOM操作,操作详解