澳门新葡萄京官网注册Jquery基础教程之DOM操作

对于dom的康健我们都知道啊,DOM是Document Object
Model的缩写,其意思是文书档案对象模型。DOM是一种与浏览器、平台、语言非亲非故的接口,使用dom接口很容易的拜访页面中颇负正式组件。dom操作平时能够分成三个地方即DOM
Core(主题卡塔尔国、HTM-Dom和CSS-DOM。

 JQuery中的DOM操作首要对蕴含:建【新建】、增【增多】、删【删除】、改【修改】、查【查找】【像数据

每二个网页都足以用DOM表示出来,每一个DOM都得以看做是一棵DOM树。下边包车型客车html页面构造能够构建出一棵DOM树,代码:

  库操作】。上边的DOM操作将围绕地点的DOM树进行学习JQueryDOM操作。

代码如下:

  一、查–查找DOM节点

      查找节点特别轻松,使用采取器就会轻巧完结各类搜索工作。例:查找成分节点p再次来到p内的文件内容

     
$(“p”State of Qatar.text(卡塔尔;例:查找成分节点p的习性再次来到属性名称对应的特性值$(“p”State of Qatar.attr(“title”卡塔尔(قطر‎,再次回到p的属

     性 title的值。

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""html xmlns=""head meta "Content-Type" content="text/html;charset=utf-8" titleDOM Demo/title /headbodyp title="选择你最喜欢的水果."你最喜欢的水果是?/pulli title="苹果"苹果/lili title="橘子"橘子/lili title="菠萝"菠萝/li/ul/body/html

  二、建–新建DOM节点

创设出的DOM树如下:

    1、制产生分节点

       创产生分节点并且把节点作为<ul>成分的子节点增添到DOM节点树上。先创建元素点,创形成分节点

      使用Jquery的工厂函数$(State of Qatar来产生,格式如下:$(htmlState of Qatar,该方法会依照传入的html字符串再次回到一个

     DOM对 象,并将DOM对象包装成贰个JQuery对象后归来。

               
创制叁个因金天点JQuery代码如下:

      $li1=$(“<li></li>”)

      代码重回$li1正是贰个由DOM对象包装成的JQuery对象。

      把新建节点增加到DOM树中JQuery代码如下:

      $(“ul”).append($li1); 

      增多后页面中一定要见到<li>成分默许的”·”,由于尚未为节点添Gavin本所以只彰显暗许符号,上面创制

      文本节点。

      append(卡塔尔(قطر‎方法是加多DOM节点方法。 

JQuery中的DOM操作首要对包涵:建、增、删、改、查。上面包车型大巴DOM操作将围绕地点的DOM树实行学习JQueryDOM操作。

    2、创设文本节点

       使用JQuery的工厂函数$(卡塔尔国相同能够创设文本节点,创设文本节点的JQuery代码如下:

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

      代码再次回到$li2就是三个由DOM对象包装成JQuery对象,把新建的文本节点增添到DOM树中JQuery

      代码如下:

      $(“ul”).append($li2);

      加多后页面中能见到”·苹果”,右键查看页面源码开采新加的文本节点未有title属性。下边方法成立

      带属性的节点。

一、查–查找DOM节点

    3、创制属性节点

      
创设属性节点同成分节点、文本节点同样采纳JQuery的厂子函数完毕。创造属性节点的JQuery代码

      如下:

      $li3=$(“<li
title=’榴莲’>榴莲</li>”);       

    
  代码重返$li3也是二个由DOM对象包装成JQuery对象,把新建的属性节点增多到DOM树中JQuery

      代码如下:

      $(“ul”).append($li3);

      

搜索节点非常轻便,使用选拔器就能够轻轻便松做到各样找出工作。例:查找成分节点p再次回到p内的文书内容$(“p”卡塔尔国.text(卡塔尔;例:查找成分节点p的性质重返属性名称对应的习性值$(“p”State of Qatar.attr(“title”卡塔尔,重返p的属性title的值。

   三、增–添加DOM节点

      动态新建设成分不增多到文书档案中尚无实际意义,将新建的节点插入到文书档案中有八个艺术,如下:

  append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()。

二、建–新建DOM节点

    1、append()方法

        append(State of Qatar方法向相称的因素内部追加内容, 方法如下:$(“target”卡塔尔国.append(element);例:

      $(“ul”).append(“<li
title=’香蕉’>香蕉</li>”);

      该情势查找ul成分,然后向ul中增多新建的li元素。

1、创产生分节点

    2、appendTo()方法

      
 appendTo(卡塔尔(قطر‎方法将有所相配的因素追加到钦定的要素中,该方法是append(卡塔尔国方法的颠倒[操作宗旨

      的颠倒实际不是操作结果]操作。方法如下:$(element卡塔尔国.appendTo(target卡塔尔(قطر‎;例:

      $(“<li
title=’荔枝’>荔枝<li>”).appendTo(“ul”);

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

创产生分节点况且把节点作为ul成分的子节点增多到DOM节点树上。先创制元素点,创立成分节点使用Jquery的工厂函数$(卡塔尔来实现,格式如下:$(html卡塔尔国,该方法会依据传入的html字符串重临多个DOM对象,并将DOM对象包装成二个JQuery对象后归来。

    3、prepend()方法

         prepend(State of Qatar方法将每相称的因素内部前置要拉长的要素,方法如下:$(targetState of Qatar.prepend(element卡塔尔国;

      例:

      $(“ul”).prepend(“<li
title=’芒果’>芒果</li>”)

      该格局将寻找成分ul然后将新建的li成分作为ul子节点,且作为ul的率先身长节点插入到ul中。

创造二个要九秋点JQuery代码如下:

    4、prependTo()方法

      
 prependTo(卡塔尔(قطر‎方法将成分加多到每三个合作的成分内部前置,方法如下:

      $(element).prependTo();

      例:

      $(“<li
title=’西瓜’>西瓜</li>”).prependTo(“ul”);

      该方法将新建的因素li插入到查找到的ul成分中作为ul的率先个子节成分。

 $li1=$("li/li")

    5、after()方法

       after(卡塔尔国方法向相称的成分前面添美金素,新添长的因素做为指标成分后的邻座的男士儿元素。

      方法如下:

      $(target).after(element);

     例:

     
 $(“p”State of Qatar.after(“<span>新加段新加段新加段新加段新加段</span>”卡塔尔;

     
 方法将追寻节点p,然后把新建的因素加多到span节点前面做为p的小朋友节点。

代码重回$li1正是三个由DOM对象包装成的JQuery对象。把新建节点增多到DOM树中JQuery代码如下:

    6、insertAfter()方法

        insertAfter(卡塔尔国方法将新建的因素插入到查找到的目的成分后,做为指标成分的男生节点。方法如下:

      $(element).insertAfter(target);

      例:

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

      方法将新建的p成分加多到找出到指标成分span前面,做为指标成分前面包车型地铁第七个汉子节点。

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

    7、before()方法

      
 before(卡塔尔(قطر‎方法在每八个同盟的要素以前插入,做为相称成分的前叁个男人节点。方法如下:

      $(target).before(element);

      例:

      $(“p”卡塔尔(قطر‎.before(“<span>上边是个段落</span>”卡塔尔(قطر‎;

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

加多后页面中只可以看看li成分暗中认可的”・”,由于没有为节点添Gavin本所以只显示暗中同意符号,上边创造文本节点。

    8、insertBefore()方法

        insertBefore(卡塔尔方法将新建变成分增添到对象成分前,做为指标成分的前三个兄弟节点,方法如下:

      $(element).insertBefore(target);

      例:

      $(“<a
href=’#’>锚</a>”).insertBefore(“ul”);

      insertBefore(State of Qatar新建a成分,将新建的a成分增添到成分ul前,做为ul的前一个兄弟节点。

      增美成分的主意前三个是增添到成分内部,后四个是增进到成万分界的操作,有那些点子能够完

      成别的款式的要素增添。

PS:append(卡塔尔国方法是增多DOM节点方法详见增–增添DOM节点。

    四、删–删除DOM节点操作

      
 即使想要删除文书档案中的有个别成分JQuery提供了三种删除节点的章程:remove(卡塔尔和empty(卡塔尔国;

2、创制文本节点

    1、remove()方法

        remove(State of Qatar方法删除全体匹配的因素,传入的参数用于筛选成分,该情势能去除成分中的全体子节点,

      当相配的节点及子孙被去除后,该方法再次来到值是指向被删除节点的引用,由此得以应用该援用,再

      使用那么些被删去的因素。方法如下:$(element卡塔尔国.remove(State of Qatar;

      例:

      $span=$(“span”).remove();

      $span.insertAfter(“ul”);

      该示例中先删除全体的span成分,把删除后的要素运用$span选取,把删除后的因素增加到ul后边做

      为ul的弟兄节点。该操作约等于将有所的span成分乃至后代成分移到ul前边。

行使JQuery的厂子函数$(卡塔尔国相通能够创设文本节点,创设文本节点的JQuery代码如下:

    2、empty()方法。

      
 empty(State of Qatar方法严酷来说而不是剔除成分,该方式只是清空节点,它能清空成分中的全体子节点。

      方法如下:

      $(element).empty();

      例:

      $(“ul
li:eq(0)”).empty();

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

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

  五、改–改革DOM节点操作

       校订文书档案中的成分节点能够行使多样措施:复制节点、替换节点、包裹节点。

代码再次来到$li2就是三个由DOM对象包装成JQuery对象,把新建的文书节点加多到DOM树中JQuery代码如下:

    1、复制节点$(element卡塔尔(قطر‎.clone(卡塔尔

       复制节点方法能够复制节点成分,况兼能够依照参数决定是或不是复制节点成分的作为。方法如下:

      $(element).clone(true);

      例:

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

      该措施复制ul的第三个li成分,true参数决定复制作而成分时也复制作而成分行为,当不复制行为时并未有参数。

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

    2、替换节点$(element卡塔尔(قطر‎.repalcewith(卡塔尔、$(elementState of Qatar.repalceAll(卡塔尔(قطر‎

       替换节点方法能够替换某些节点,有三种情势方式落实:replaceWith(卡塔尔和replaceAll(卡塔尔(قطر‎.

      使用replaceWith方法应用前面包车型客车因素轮番后面包车型大巴要素
replaceAll方法运用后面包车型大巴成分轮流后边的元

      素,

         方法如下:

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

      liez$(“p”卡塔尔.replaceWith(“<strong>小编要留住</strong>”卡塔尔国;该措施应用strong成分替换p成分。

       $(“<h3>替换strong</h3>”卡塔尔(قطر‎.repalceAll(“strong”卡塔尔国;该例使用h3元素替换全数的strong元素。

加多后页面中能看见”・苹果”,右键查看页面源码发掘新加的公文节点未有title属性。上边方法创立带属性的节点。

    3、包裹节点$(element卡塔尔(قطر‎.wrap(State of Qatar、$(element卡塔尔(قطر‎.wrapAll(卡塔尔(قطر‎、$(element卡塔尔国.wrapInner(State of Qatar

       包裹节点方法运用其余标志包裹指标成分进而改动成分的展现格局等,并且该操作不会损坏原有文书档案

      的词义.

      包裹节点有两种完毕情势: wrap(卡塔尔(قطر‎; wrapAll(卡塔尔(قطر‎; wrapInner(State of Qatar;

       wrap(卡塔尔国方法如下:$(dstelementState of Qatar.wrap(tag卡塔尔(قطر‎;例:

       $(“p”卡塔尔(قطر‎.wrap(“<b></b>”卡塔尔(قطر‎;该示例方法应用b标签包裹全体的p元素每一种成分都使用b标签包裹。

       wrapAll(State of Qatar方法如下:$(dstelement卡塔尔国.wrapAll(tag卡塔尔(قطر‎;例:

       $(“p”卡塔尔.wrapAll(“<b></b>”卡塔尔国;访示例方法运用b标签包裹全体的p成分,全数的p成分标签用叁个

       b标签包裹。

       wrapInner(卡塔尔(قطر‎方法如下:$(dstelement卡塔尔.wrapInner(tagState of Qatar;例:

       $(“strong”State of Qatar.wrapInner(“<b></b>”卡塔尔国;该示例使用b标签包裹各类一strong成分的子成分。

3、创制属性节点

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

创设属性节点同成分节点、文本节点雷同选拔JQuery的厂子函数达成。成立属性节点的JQuery代码如下:

    1、属性操作attr(State of Qatar和removeAttr(卡塔尔国

       attr(卡塔尔(قطر‎方法能够得到成分属性,也能能够设置元素属性。方法如下,当attr(para1卡塔尔方法有个参数时候

      用于获取

      当前元素的para1的属性值,当attr(para1,attrValue卡塔尔国有多个参数时候设置当前因素的属性名

      为para1的

      属性值为attrValue;

      例:

      
$(“p”卡塔尔(قطر‎.attr(“title”卡塔尔国;该示例用于取得p元素的title属性值。

      
$(“p”State of Qatar.attr(“title”,”你最赏识的鲜果”State of Qatar;该示例设置p元素的title属性值为”你最欢畅的水果”;

      倘诺一回设置几个属性值能够利用“名/值”对形式,例:

      $(“p”卡塔尔国.attr({“title”:”你最心爱的瓜果”,”name”:”水果”}卡塔尔。该示例贰次设置多少个属性值。

      removeAttr(卡塔尔国方法用于删除特定的习性,方法是在参数中钦赐属性名。例:

      $(“p”卡塔尔(قطر‎.removeAttr(“name”卡塔尔国;该格局正是移除p成分的name属性。

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

     2、样式操作addClass(卡塔尔国、removeClass(卡塔尔(قطر‎、toggleClass(State of Qatar和hasClass(State of Qatar

      增加样式addClass(卡塔尔方法,使用该方式对目的成分增添相应的体裁,方法如下:

      $(element).addClass();

      例:

      
$(“p”State of Qatar.addClass(“ul”State of Qatar;该示例设置成分p的体制为ul。

      移除样式removeClass(卡塔尔方法,使用该办法移除目的成分的内定样式,方法如下:

      $(element).removeClass();

      例:

       $(“p”卡塔尔.removeClass(“ul”State of Qatar;该救命去除掉p成分的ul类样式。

      切换样式toggleClass(卡塔尔方法,使用该形式切换指标成分的样式,方法如下:

      $(element).toggleClass();

      例:

      $(“p”State of Qatar.toggleClass(“ul”卡塔尔(قطر‎;该格局来回切换【增加删减达成切换】成分p的样式ul.

      判定元素是还是不是接受了体制$(elementState of Qatar.hasClass(State of Qatar,方法如下:$(element卡塔尔国.hasClass(class卡塔尔;

      例:

      alert($(“p”卡塔尔.hasClass(“ul”State of Qatar卡塔尔(قطر‎;打字与印刷出p成分是不是有ul样式。

      addClass()和attr(卡塔尔方法设置样式的例外,attr方法把成分的属性名对应的习性值设为情势中的

      参数值,addClass(卡塔尔则把属性值

               
 增加到属性名对应的属性值中。例:原来就有成分<p
class=’class1′>成分样式</p>,

      使用attr(卡塔尔和addClass(State of Qatar分别增加新样式。

      $(“p”卡塔尔.attr(“class”,”another”State of Qatar.结果是<p
class=’another’>成分样式</>

      $(“p”卡塔尔(قطر‎.addClass(“class”,”another”卡塔尔国结果是<p
class=’class1 another’>成分样式</p>

代码再次来到$li3也是二个由DOM对象包装成JQuery对象,把新建的属性节点增添到DOM树中JQuery代码如下:

    3、设置和得到HTML【html(卡塔尔国】,文本【text(卡塔尔】和值【val(卡塔尔国】

      html(State of Qatar方法赢得或设置有个别元素的html元素。方法如下:$(selector卡塔尔国.html(卡塔尔国;

      例:

      $(“p”State of Qatar.html(卡塔尔(قطر‎;该示例获得成分p的html内容。

      $(“p”).html(“<strong>添加html内容</strong>”);

      该示例设置p的html内容为”<strong>增加html内容</strong>“;

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

      text(State of Qatar方法获得或设置某些成分的文本值。方法如下:$(selecotr卡塔尔(قطر‎.text(卡塔尔(قطر‎;例:

      $(“p”State of Qatar.text(卡塔尔;该示例获得成分p的text文本内容。

      $(“p”卡塔尔(قطر‎.text(“重置的文件内容”卡塔尔(قطر‎;该示例设置成分p的text文本为”重新载入参数的文本内容”;

      PS:该格局对html和XML文书档案都适用。

      val(卡塔尔国方法得到或安装某些成分的值,如若成分值是多选则以数组形式再次回到,方法如下:

      $(selector).val();

      例:文本成分 

                  <input type=”text”
id=”userName” value=”请输入客商名” />

      $(“#userName”State of Qatar.val(State of Qatar;取得input成分的值。

      $(“#userName”卡塔尔(قطر‎.val(‘响马’卡塔尔;设置input成分的值为’响马’。

      val(卡塔尔方法的不止能操作input,最关键的二个用场用于

      select【下拉列表框】、checkbox【多选框】、radio【单选框】。

      例:

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

      <select id=”fruits”
multiple=”multiple”>

        <option>苹果</option>

        <option>香蕉</option>

        <option>西瓜</option

      </select>

      $(“#fruits”).val([‘苹果’,’香蕉’]卡塔尔国;该示例使select中苹果和西贡蕉两项被选中。

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

      4、遍历节点操作children(卡塔尔、next(State of Qatar、prev(卡塔尔(قطر‎、siblings(卡塔尔国和closest(卡塔尔

      children(State of Qatar方法用于获取相配成分的子成分集结,只相配子元素不酌量任何后代元素。方法如下:

      $(selector).children();

      例:

       $(“$(“body”卡塔尔.children(卡塔尔.length;该示例拿到body成分的子成分个数;

      
 next(卡塔尔(قطر‎方法用于相配元素的下一个弟兄节点,方法如下:$(selector卡塔尔.next(State of Qatar;

      例:

       $(“p”卡塔尔.next(State of Qatar.html(卡塔尔(قطر‎;该示例获得p成分的下多少个弟兄节点的html内容。

        
prev(卡塔尔(قطر‎方法用于相配成分的上三个兄弟节点,方法如下:$(selector卡塔尔.prev(卡塔尔;

      例:

       $(“ul”卡塔尔.prev(State of Qatar.text(State of Qatar;该示例获得ul成分的上一个兄弟节点的文书内容。

        
siblings方法(State of Qatar用于匹配指标成分的持有兄弟成分,方法如下:$(selector卡塔尔(قطر‎.siblings(卡塔尔(قطر‎;

      例:

      
$(“p”卡塔尔(قطر‎.slibings(卡塔尔;示例获得p成分的具备兄弟节点元素。

      closest(State of Qatar方法(卡塔尔国用来获得方今的匹配成分,首先检查当前成分是或不是配合如若相配则直接再次回到,不然继

      续向上查找父成分中切合条件的因素再次来到,若无相配的要素则赶回空JQuery对象。

增添后页面中能见到”・麝香猫果”,右键查看页面源码发掘新加的性质节点有title=’金枕头’属性。

    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″}State of Qatar;该示例用于设置成分

      的三个样式。

 

    
    offset()主意用于获取元素相对当前窗体的偏移量,其重返对象包蕴两性格情:top和left。

      方法如下:

      $(selector).offset()

      var offset= $(“p”卡塔尔国.offset(卡塔尔;
var left=offset.left;var top=offset.top;该示例用于取得

      元素p的偏移量。

      PS:offset(卡塔尔国只对可以看到成分有效。

      position()措施用于获取成分于方今的个position样式属性设置为relative只怕absolute的

      祖交节点的争执偏移量。

      方法如下:$(selectorState of Qatar.position(卡塔尔(قطر‎;

        例:

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

         该示例用于获取成分p的岗位。

         scrollTop(卡塔尔(قطر‎和scrollLeft(State of Qatar方法用于获取成分的滚动条距顶部的间距和距侧边的离开。

         方法如下:$(selector卡塔尔.scrollTop(State of Qatar;$(selectorState of Qatar.scrollLeft(卡塔尔;

         例:

            var scrollTop=$(“p”).scrollTop();var
scrollLeft=$(“p”).scrollLeft();该示例

         用于获取成分的滚动条的地点。

                  
也足以增添参数将成分滚动到钦赐的职责。

                          例:$(“textarea”).scrollTop(300);$(“textarea”).scrollLeft(300);

三、增–添加DOM节点

动态新建设成分不增添到文书档案中未有实际意义,将新建的节点插入到文书档案中有多个主意,如下:append(卡塔尔(قطر‎、appendTo(State of Qatar、prepend(卡塔尔国、prependTo(卡塔尔(قطر‎、after(卡塔尔国、insertAfter(卡塔尔国、before(卡塔尔(قطر‎、insertBefore(卡塔尔。

1、append()方法

append(State of Qatar方法向相称的成分内部追加内容, 方法如下:

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

例:

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

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

2、appendTo()方法

appendTo(State of Qatar方法将装有相称的成分追加到内定的因素中,该方法是append(卡塔尔方法的颠倒[操作主旨的颠倒并非操作结果]操作。方法如下:$(element卡塔尔国.appendTo(target卡塔尔国;例:

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

该措施新建设成分li,然后把li增多到查找到的ul元素中。

3、prepend()方法

prepend(State of Qatar方法将每相称的因素内部前置要增多的要素,方法如下:

$(target).prepend(element);

例:

$("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(State of Qatar方法向相称的成分前边添美成分,新扩大长的要素做为目的成分后的邻座的兄弟成分。方法如下:

$(target).after(element);

例:

$(“p”卡塔尔(قطر‎.after(“span新加段新加段新加段新加段新加段/span”卡塔尔国;

办法将追寻节点p,然后把新建的成分加多到span节点后边做为p的哥们节点。

6、insertAfter()方法

insertAfter(卡塔尔方法将新建的因素插入到查找到的指标成分后,做为目的成分的弟兄节点。方法如下:

$(element).insertAfter(target);

例:

$("pinsertAfter操作/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、替换节点$(elementState of Qatar.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、包裹节点$(elementState of Qatar.wrap(卡塔尔(قطر‎、$(element卡塔尔.wrapAll(State of Qatar、$(element卡塔尔(قطر‎.wrapInner(State of Qatar

包装节点方法运用别的标识包裹指标成分进而改形成分的显得方式等,何况该操作不会破坏原有文书档案的词义。包裹节点有二种完毕情势: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(State of Qatar和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(State of Qatar则把属性值

增加到属性名对应的属性值中。例:已有元素p
class=’class1’成分样式/p,使用attr(卡塔尔(قطر‎和addClass(State of Qatar分别增多新样式。

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

结果是p class=’another’成分样式/

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

结果是p class=’class1 another’成分样式/p

3、设置和获得HTML,文本和值

html(State of Qatar方法获得或设置有些成分的html成分。方法如下:

$(selector).html();

例:

$(“p”State of Qatar.html(卡塔尔(قطر‎;该示例获得成分p的html内容。

$(“p”State of Qatar.html(“strong加多html内容/strong”卡塔尔国;该示例设置p的html内容为”strong增添html内容/strong“;

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

text(卡塔尔国方法赢得或安装某些成分的文本值。方法如下:$(selecotr卡塔尔国.text(卡塔尔(قطر‎;例:

$(“p”卡塔尔国.text(State of Qatar;该示例取得成分p的text文本内容。

$(“p”卡塔尔.text(“重置的文书内容”State of Qatar;该示例设置成分p的text文本为”重新初始化的公文内容”;

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

val(State of Qatar方法赢得或设置某些成分的值,倘使成分值是多选则以数组格局再次回到,方法如下:$(selector卡塔尔.val(State of Qatar;例:文本成分

input type="text" value="请输入用户名" /

$(“#userName”卡塔尔国.val(State of Qatar;取得input成分的值。

$(“#userName”State of Qatar.val(‘响马’卡塔尔;设置input成分的值为’响马’。

val(卡塔尔国方法的不止能操作input,最要害的两个用项用于select、checkbox、radio。

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

select multiple="multiple"option苹果/optionoption香蕉/optionoption西瓜/option/select

$(“#fruits”).val([‘苹果’,’香蕉’]卡塔尔(قطر‎;该示例使select中苹果和金蕉两项被选中。

4、遍历节点操作children(卡塔尔国、next(卡塔尔国、prev(State of Qatar、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(State of Qatar;示例获得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(State of Qatar只对可知成分有效。

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操作,希望对大家全体助于。

发表评论

电子邮件地址不会被公开。 必填项已用*标注