Jquery 详细介绍 元素附加

jQuery 学习笔记之六 (jQuery DOM的操作)

?
DOM操作的分类
DOM Core 并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它。
它的用途并非仅限与处理网页,也可以用来处理任何一种使用标记语言编写出来的文档。例如XML
javascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()等方法,这些都是Dom Core的组成部分。
  
使用DOM Core来获取表单对象的方法
  document.getElementByTagName( "from" );
使用DOM Core来获取某元素的src属性的方法:
  element.getAttribute( "src" );
  
构建DOM元素
<body>
   <p title= "选择你最喜欢的水果" >你最喜欢的水果是?</p>
   <ul> 
     <li title= '苹果' >苹果</li>
     <li title= '橘子' >橘子</li>
     <li title= '菠萝' >菠萝</li>
   </ul>
</body>
使用jQeruy在文档数上查找节点非常容易,可以通过在第2章介绍的jQuery选择器来完成。
    1.查找元素节点
     获取元素节点并打印出它的文本内容,jQuery代码如下:
     var $li = $( "ul li:eq(1)" );   获取<ul>里第2个<li> 节点
     var li_txt=$li.text();        //获取第2个<li>元素节点的文本内容
     alert(li_txt);                //打印文本内容,这里会打印出橘子
      
     以上代码获取了<ul>元素里第2个<li>节点,并将它的文本内容 "橘子" 打印出来
  
    2.查找属性节点
    利用jQuery 选择器查找到需要的元素后,就可以使用attr()方法来获取它的各种属性的值.attr()方法得参数可以是一个,也可以是两个。当参数是一个时,则是要查询的属性的名字。
    获取属性节点并打印出它的文本内容,jQuery代码如下:
    var $para = $( "p" );    //获取<p>节点
    var p_txt=$para.attr( "title" );  //获取<p>元素节点属性title
    alert(p_txt);    //打印title属性值 
  
  
  创建节点
   在dom 操作中,常常需要动态创建HTML内容,是文档在浏览器里面的呈现效果发生变法,并且达到各种各样的人机交互的目的。
  
   1. 创建元素节点
   例如要创建两个<li>元素节点,并且要把它们作为<ul>元素节点的子节点添加到DOM节点树上。
   (1)创建两个<li>新元素。
   (2)将这两个新元素插入文档中。
    第(1)个步骤可以使用jQuery的工厂函数$()来完成。
    $(html);
    $(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一个jQuery对象后返回。
    首先创建两个<li>元素,jQuery代码如下:   
    $( "ul" ).append($li_1);   //添加到<ul>节点中,使之能在网页中显示
    $( "ul" ).append($li_2);   //可以采取链式写法:$("ul").append($li_1).append($li_2);
      注意事项:
        (1)动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入文档中。
        (2)当创建单个元素时,要注意闭合标签和使用标准的XHTML格式。
         例如创建一个<p> 元素,使用$( "<p/>" )或者( "<p></p>" ),但是不要使用$( "<p>" )或者大写的$( "<P/>" );
  
    2.创建文档节点
    var $li_1= $( "<li>香蕉</li>" );  //创建一个<li> 元素,包括元素节点和文本节点,香蕉就是创建的文本节点
    var $li_2 =$( "<li>雪梨</li>" );  //创建一个<li> 元素,包括元素节点和文本节点,雪梨就是创建的文本节点。
    $( "ul" ).append($li_1);          //添加到<ul>节点中,使之能在网页中显示
    $( "ul" ).append($li_2);          //添加到<ul>节点中,使之能在网页中显示
    以上代码所示,创建文本节点就是在创建元素节点时直接把文本内容写出来,然后使用append()等方法将他们添加到文档中就可以了。
       注意事项:
        无论$(html)中的HTML代码多么复杂,都要使用相同的方式来创建。
        例如$( "<li><em>这是</em><b>一个</b><a href='#'>复杂的组合</a></li>" );
  
  
    3.创建属性节点
     创建属性及节点与创建文本节点类似,也是直接在创建元素节点时一起创建。
     jQuery代码如下:
     var $li_1=$( "<li title='香蕉'>香蕉</li>" ); //创建一个<li>元素,包含元素节点,文本节点和属性节点 其中title='香蕉'就是创建的属性节点
     var $li_2=$( "<li title='雪梨'>雪梨</li>" ); //创建一个<li>元素 包括元素节点,文本节点和属性节点,其中title=‘雪梨’就是创建的属性节点
     $( "ul" ).append($li_1);
     $( "ul" ).append($li_2); //添加到<ul> 节点中,使之能在网页中显示
      
     插入节点
     动态创建HTML元素并没有世界用处,还需要将新创建的元素插入文档中,将新创建的节点插入文档最简单的办法是,让它成为这个文档的某个节点的子节点。
     使用append(),它会在元素内部追加新创建的内容。
      
     jQuery中还有提供了其他几种插入节点的方法。
      
      方法                   描述                                   示例 
   append()         向每个匹配的元素内部追加内容                 HTML代码  
                                                              <p>我想说:</p> 
                                                              jQuery代码: $( "p" ).append( "<b>你好</b>" );  结果: <p>我想说:<b>你好</b></p>
   appendTo()       将所有匹配的元素追加到指定的元素中,
                    实际上,使用该方法是颠倒了常规的$(A).append(B)的操作,即不是将B追加到A中,而是将A追加到B中   HTML 代码  <p>我想说:<p> jQuery代码: $( "<b>你好</b>" ).appendTo( "p" );  结果: <p>我想说:<b>你好</b></p>    
    
   prepend()        向每个匹配的元素内部前置内容    HTML代码: <p>我想说:</p > jQuery代码: $( "p" ).prepend( "<b>你好</b>" );结果<p><b>你好</b>我想说:</p>
  
   prependTo()      将所有匹配的元素前置到指定的元素中,实际上,使用该方法是颠倒了常规的$(A).prepend(B)的操作,即不是将B前置到A中,而是将A前置到B中。HTML 代码 <p>我想说:</p>  jQuery代码: $( "<b>你好</b>" ).prependTo( "p" ); 结果<p><b>你好</b>我想说<p>
  
   after()          在每个匹配的元素之后插入内容     HTML代码 <p>我想说:<p> jQuery代码: $( "p" ).after( "<b>你好<b>" ); 结果: <p>我想说:</p><b>你好</b>
  
   insertAfter()    将所有匹配的元素插入到指定元素的后面,与after()颠倒了         HTML代码<p> 我想说</p> jQuery代码:$( "<b>你好</b>" ).insertAfter( "p" ); 结果<p>我想说:</p><b>你好</b>
    
   before()         将每个匹配的元素之前插入内容              HTML代码 <p>我想说:</p>  jQuery 代码:$( "p" ).before( "<b>你好</br>" );  结果<b>你好</b>我想说:</p>
  
   insertBefore()   将所有匹配的元素插入到指定的元素的前面,实际上,使用该方法是颠倒了常规的before的操作   $( "<b> 你好</b>" ).insertBefore( "p" ); 结果:<b>你好</b><p>我想说:</p>
  
   删除节点
   如果文档中某一个元素多余,那么应将其删除,jQuery提供了两种删除节点的方法,即remove() 和empty()
   
   1.remove()方法
    作用是从DOM中删除所有匹配的元素,传入的参数用于根据jQuery表达式类筛选元素。
     
    例如删除图3-11中<ul>节点中的第2个<li>元素节点,jQuery代码如下:
    $( "ul li:eq(1)" ).remove(); //获取第2个<li>元素节后,将它从网页中移除
    当某个节点用remove()方法删除后,该节点所包含的所有后代节点将同时被删除,这个方法得放回值是一个指向已被删除的节点的引用,因此可以在以后再使用这些元素。
    下面的jQuery代码说明元素用remove()方法删除后,还是可以继续使用的。
    var $li = $( "ul li:eq(1)" ).remove(); //获取第2个<li>元素节点后,将它从网页中删除
    $li.appendTo( "ul" ); //把刚删除的节点又重新添加到<ul>元素里
    可以直接使用appendTo()方法得特性来简化以上代码:
    $( "ul li:eq(1)" ).appendTo( "ul" );
    //appendTo()方法也可以用来移动元素
    //移动元素时首先从文档上删除此元素,然后将该元素插入得到文档中的指定节点。
    另外remove()方法也可以通过传递参数来选择性地删除元素
    $( "ul li" ).remove( "li[title!='菠萝']" ); //将<li>元素属性title不等于"菠萝" 的<li>元素删除。
  
    
    2.empty()方法
    严格来讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后台节点。
    $( "ul li:eq(1)" ).empty();  //获取第2个<li>元素节点后,清空此元素里的内容,注意是元素里面。
    使用firebud查看橘子节点发生变化  <li title= '橘子' />
    
    3.复制节点
     复制节点也是常用的DOM操作之一,例如购入车,用户不仅可以通过单击商品下方的选择按钮购买相应的产品,也可以通过鼠标拖动商品
     并将其放到购物车中,这个商品拖动功能就是用的复制节点,将用户选择的商品所处的节点元素复制一次,并将其跟随鼠标移动,从而达到以下购物车的效果
     $( "ul li" ).click(function(){
      $( this ).clone().appendTo( "ul" ); //复制当前单击的节点,并将它追加到<ul>元素中
    });
    //在页面中点击"菠萝"后,列表最下方出现新节点"菠萝"。
    $( this ).clone( true ).appendTo( "body" ); //注意参数true
    在clone()方法传递了一个参数 true ,它的含义是复制元素的同时复制元素中所绑定的事件,因此该元素的副本也同样具备复制功能。
  
    替换节点
    如果要替换某个节点,jQuery提供了相应的方法,即replaceWith和 replaceAll()
    replaceWith()方法得做哟偶那个是将所有匹配的元素都替换成指定的HTML或者DOM元素。
    例如要将网页中<p title= "选择你最喜欢的水果" >你最喜欢的水果是?</p> 替换成<strong> 你最不喜欢的水果是?</strong> 可以使用如下jQuery代码:
      $( "p" ).replaceWith( "<strong>你最不喜欢的水果是?" );
      也可以使用jQuery中另一个方法repalceAll()来实现,该方法与replaceWith()方法得作用相同,只是颠倒了replaceWith的操作。
      $( "<strong>你最不喜欢的水果是?</strong>" ).replaceAll( "p" );
      注意:
        如果在替换之前,已经为元素绑定了事件,替换后原先绑定的事件将会与被替换的元素一起消失,需要在新元素上重新绑定事件。
  
   4. 包裹节点
      如果要将某个节点用其他标记包裹起来,jQuery提供了相应的方法,wrap(),该方法对于需要在文档中插入额外的结构化标记非常有用,而且不会破坏原始文档的语义。
      jQuery代码如下:
      $( "strong" ).wrap( "<b></b>" ); //用<b>标签把<strong> 元素包裹起来
      得到的结果如下:  
      <b><strong title= "选择你最喜欢的水果" > 你最喜欢的水果是?</strong></b>
       
      1.wrapAll()方法
      该方法将会将所有匹配的元素用一个元素包裹。它不同于wrap()方法,wrap()方法将所有的元素进行单独的包裹。 
      $( "strong" ).wrap( "<b></b>" );
       
      2.wrapinner()方法
      该方法将每一个匹配的元素的子内容(包括文本节点) 用其他结构化的标记包裹起来,例如可以使用它来包裹<strong> 标签的子内容:jQuery代码如下:
      $( "strong" ).wrapInner( "<b></b>" );
      运行代码后,发现<strong>标签内的内容被一对<b>标签包裹了。
      <strong title= "选择你最喜欢的水果" ><b>你最喜欢的水果是?</b></strong>
  
      属性操作
      在jQuery 中,用attr() 方法来获取和设置元素属性,removeAtt() 方法来删除元素属性。
      1.获取属性和设置属性
        如果要获取<p>元素的属性title,那么只需要给attr()方法传递一个参数,即属性名称。
      var $para=$( "p" );               //获取<p>节点
      var p_txt=$para.attr( "title" );  //获取<p>元素节点属性title
      
      如果要设置<p>元素的属性title的值,也可以使用同一个方法,不同的是,需要传递两个参数即属性名称和对应的值。
      jQuery代码如下:
      $( "p" ).attr( "title" , "your title" ); //设置单个的属性值
      //为同一个元素设置多个属性值
      $( "p" ).attr({ "title" : "your title" , "name" : "test" }); //将一个 "名值" 形式的对象设置为匹配元素的属性。
      
       jQuery中的很多方法都是同一个函数实现获取(getter)和设置(setter)的,例如上面的attr()方法,即能设置元素属性的值,也能获取元素属性的值,类似的还有html(),text(),height(),width(),val(),css()等方法。
       
     2.删除属性
       有时候需要删除文档元素的特定属性,可以使用removeAttr()方法
       删除<p>元素的title属性
       $( "p" ).removeAttr( "title" );
     
     操作样式
     获取样式和设置样式
     HTML代码如下:
     <p class = "myclass" title= "选择你最喜欢的水果" > 你最喜欢的水果是?</p>
     class 也是<p>元素的属性,因此获取 class 和设置 class 都可以使用attr()方法。
     var p_class = $( "p" ).attr( "class" ); //获取<p>元素的class
  
     可以使用attr()方法来设置<p>元素的 class ,jquery代码如下:
     $( "p" ).attr( "class" , "high" ); //设置<p>元素的class为high
     他是将原来的 class 替换为 class ,而不是在原来的基础上追加新的 class
  
     追加样式
     jQuery提供了专门的addClass()方法来追加样式,为了使例子更为容易理解,首先在<style>标签里添加另一组样式
     <style>
     .high{ 
      font-weight:bold;
      color:red;
     }
       
     .another{
      font-style:italic;
      color:blue;
     }
    //在网页中追加class类的按钮.  
    $( "input:eq(2)" ).click(function(){ 
    $( "p" ).addClass( "another" ); //给<p>元素追加"another"类 
    })
  
    attr() 和addClass()的区别
    用途                       追加样式                         设置样式  
对同一个网页元素操作       <p>test</p>         
第一次使用方法             $( "p" ).addClass( "high" );             $( "p" ).attr( "class" , "high" );
第1次结果                  <p class = "high" >test</p>  
再次使用方法               $( "p" ).addClass( "another" );          $( "p" ).attr( "class" , "another" );
结果                       <p class = "high another" > test</p>    <p class = "another" > test</p>
  
3移除样式
如果单击某一个按钮时,删除 class 的某个值,那么可以使用addClass()方法相反的removeClass()方法来完成,它的作用是从匹配的元素中删除全部或者指定的 class
如下jQuery代码来删除
  
  $( "p" ).removeClass( "high" ); //移除<p>元素中为"high"的class
  //如果要把<p>元素的两个class都删除,就要使用removeClass()
  $( "p" ).removeClass( "high" ).removeClass( "another" );
  //jquery提供了更简单的方法
  $( "p" ).removeClass( "high another" );
  另外,还可以使用removeClass()方法得一个特性来完成同样的效果,它不带参数的时候会将 class 的值全部删除.
  $( "p" ).removeClass();
  
  切换样式
  $toggleBtn.toggle(function(){ 
    //3
  },function(){
    //4
  });
  
  toggle()方法此处的作用是交替执行代码3和4两个函数,如果元素原来是显示的,则隐藏它,如果隐藏的,则显示它,此时,toggle()方法主要是控制行为上的重复切换。
   
  判断是否含有某个样式
  hasClass可以用来判断元素中是否有某个 class ,如果有,则返回 true ,否则返回 false
  $( "p" ).hasClass( "another" ); 
  //jQuery内部实际上是调用了is()方法来完成这个功能的,该方法等价于
  $( "p" ). is ( ".another" )
  1.设置和获取HTML,文本和值 
  html()方法
  $( "P" ).html(); //获取元素的html代码
  
  2.text() 方法
  $( "p" ).text(); //获取<p>元素的文本内容
  //text()可以对文本内容设置内容
  $( "p" ).text( "你最喜欢的水果是?" ); //设置<p>元素的文本内容
  
  3.val()方法
  val()方法取值
  通过上面的例子可以发现val()方法不仅能设置元素的值,同时也能获取元素的值,另外val() 方法还有另外一个用处,就是它能select(下拉列表框),checkbox(多选框)和radio(单选框) 相应的选项被选中,在表单操作中会经常用到。
  //使用val设置选中项
  $( "#single" ).val( "选择2号" );
  //如果要使下拉列表的第2项和第3项被选中
  $( "#multiple" ).val([ "选择2号" "选择3号" ]); //以数组的形式赋值
  使多个文本框被选中
  $( ":checkbox" ).val([ "check2" , "check3" ]);
  $( ":radio" ).val([ "radio2" ]);
  
  也可以使用attr()方法来实现同样的功能
  $( "#single option:eq(1)" ).attr( "selected" , true );  //设置属性selected 
  $( "[value=radio2]:radio" ).attr( "checked" , true );
  
1  children()方法 
  该方法用于取得匹配元素的子元素集合
  var $body = $( "body" ) .children();
  var $p=$( "p" ).children();
  var $ul = $( "ul" ).children();
  alert($body.length);
  alert($p.length);
  alert($ul.length);
  
2.next方法
  该方法用于取得匹配元素后面紧邻的同辈元素。
  从dom树的结构可以知道<p>元素的下一个同辈节点时<ul>,因此可以通过next() 方法来获取<ul> 元素
  var $p1 = $( "p" ).next(); //取得紧邻<p>元素后的同辈元素
  <ul> 
    <li title= '苹果' >苹果</li>
    <li title= '橘子' >橘子</li>
    <li title= '菠萝' >菠萝</li>
  </ul>
  
  prev()方法
  该方法用于取得匹配元素前面紧邻的同辈元素。
  从DOM树的结构中可以知道<ul>元素的上一个同辈节点时<p>,因此可以通过prev()方法类获取<p>元素
  var $ul = $( "ul" ).prev();  //取得紧邻<ul>元素前得同辈元素
  得到的结果将是:
  <p title= "选择你最喜欢的水果" >你最喜欢的水果是?</p>
  
  4.siblings()方法
  该方法用于取得匹配元素前后所有的同辈元素。
  在第1章导航栏的例子中有段代码如下: 
   $( ".has_children" ).click(function() { 
    $( this ).addClass( "highlight" );  //为当前元素增加highlight类 
    .children( "a" ).show().end()
    .siblings().removeClass( "highlight" )
    .children( "a" ).hide();
})
  
  
   
  
  
    
   
   
  
  
   
      
        
       
       
    
    
  
   

出处:http://www.cnblogs.com/liuyong/

作者喜欢研究 Sql Server ,ASP.NET MVC , Jquery WCF 等技术,同时关心分布式架构的设计应用。转载请保留原文链接,谢谢!
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值