文档章节

jQuery 03 DOM操作

fokYaland
 fokYaland
发布于 2015/06/04 17:27
字数 2305
阅读 13
收藏 0
一般,DOM操作分为3个方面,DOM Core,HTML-DOM和CSS-DOM

DOM Core,并不专属于Javascript,任何一种支持DOM的语言都可以使用。Javascript中的getElementById(),getElementByTagName(),
getAttribute(),setAttribute()等都是DOM Core。
HTML-DOM,提供了更加简明的记号来描述各种HTML元素,如document.forms,element.src
CSS-DOM,针对CSS的操作。 element.style.color = 'red';

查找元素节点
  $(function(){
      var $para = $(" p");               // 获取<p>节点
       var $li = $(" ul li:eq(1)");   // 获取第二个<li>元素节点

       var p_txt = $para. attr("title"); // 输出<p>元素节点属性title
       var ul_txt =  $li. attr("title");     // 获取<ul>里的第二个<li>元素节点的属性title
       var li_txt =  $li. text();        // 输出第二个<li>元素节点的text

       alert(ul_txt);
       alert(li_txt);
       alert(p_txt);
  });

创建节点
  $(function(){
     var $li_1 =   $("<li></li>");    //  创建第一个<li>元素
     var $li_2 =   $("<li></li>");    //  创建第二个<li>元素

     var $parent = $("ul");          // 获取<ul>节点。<li>的父节点

     $parent. append($li_1);         // 添加到<ul>节点中,使之能在网页中显示
     $parent. append($li_2);         // 可以采取链式写法:$parent.append($li_1).append($li_2);
  });

插入节点
append 向元素内部追加内容 $ul.append("<li>雪梨</li>");
appendTo 将内容追加到符合元素中 $("<li>雪梨</li>").appendTo('ul');
prepend
向元素内部前置内容
 
prependTo
   
after() 在每个元素之后插入内容  
insertAfter()    
before()    
insertBefore()    

 $(function(){
     var $li_1 = $("<li title='香蕉'>香蕉</li>");     //  创建第一个<li>元素
     var $li_2 = $("<li title='雪梨'>雪梨</li>");     //  创建第二个<li>元素
     var $li_3 = $("<li title='其它'>其它</li>");     //  创建第三个<li>元素


     var $parent = $("ul");                                   // 获取<ul>节点,即<li>的父节点
     var $two_li = $("ul li:eq(1)");                //  获取<ul>节点中第二个<li>元素节点
  
     $parent. append($li_1);                    //  append方法将创建的第一个<li>元素添加到父元素的最后面
     $parent. prepend($li_2);                    //  prepend方法将创建的第二个<li>元素添加到父元素里的最前面
     $li_3. insertAfter($two_li);                  //  insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后

  });
  $(function(){
     var $one_li = $("ul li:eq(1)");                //  获取<ul>节点中第二个<li>元素节点
     var $two_li = $("ul li:eq(2)");                //  获取<ul>节点中第三个<li>元素节点
     $two_li. insertBefore($one_li);    //移动节点
  });

删除节点
$(function(){
     $("ul li:eq(1)"). remove(); // 获取第二个<li>元素节点后,将它从网页中删除。
  });
$(function(){
       $("ul li"). remove(" li[title!=菠萝]");  //把<li>元素中属性title不等于"菠萝"的<li>元素删除
  });
当某个节点用remove删除后,该节点的所有后代节点都同时被删除。这个方法返回被删除的节点,可以继续使用
$(function(){
     var $li = $("ul li:eq(1)"). remove(); // 获取第二个<li>元素节点后,将它从网页中删除。
     $li. appendTo("ul");                              // 把刚才删除的又重新添加到<ul>元素里
     //所以,删除只是从网页中删除,在jQuery对象中,这个元素还是存在的,我们可以重新获取它
  });

$(function(){
       $("ul li").click(function(){
          alert( $(this).html() );
       })
       var $li = $("ul li:eq(1)"). detach(); // 获取第二个<li>元素节点后,将它从网页中删除。
       $li.appendTo("ul");    
  });

detach和remove的区别是,使用detach之后再添加,节点可以保留原来的绑定事件和附加数据

empty可以清空节点内容
$(function(){
     $("ul li:eq(1)"). empty(); // 找到第二个<li>元素节点后,清空此元素里的内容
  });

复制节点
$(function(){
     $("ul li").click(function(){
          $(this). clone().appendTo("ul"); // 复制当前点击的节点,并将它追加到<ul>元素
     })  
  });
使用clone方法复制的节点并不具有任何行为,如果需要新元素也具有功能,可以用:
$(this). clone( true).appendTo("ul");


替换节点
replaceWith()作用是将所有匹配的元素都替换成指定的HTML或DOM元素, replaceAll 的作用相同只是颠倒了操作对象。注意已绑定的事件在替换后会消失  

$(function(){
     $("p"). replaceWith("<strong>你最不喜欢的水果是?</strong>");
     // 同样的实现: $("<strong>你最不喜欢的水果是?</strong>"). replaceAll("p");
  });

包裹节点
$(function(){
       $("strong"). wrap("<b></b>");//用<b>元素把<strong>元素包裹起来,每个<strong>元素单独包裹
  });
得到的结果 <b><strong title="选择你最喜欢的水果.">你最喜欢的水果是?</strong> </b>

$(function(){
       $("strong"). wrapAll("<b></b>"); //用<b>元素把所有<strong>元素包裹起来,如果<strong>之间有其他元素 也会被包裹进去
  });
得到的结果
<b><strong title="选择你最喜欢的水果.">你最喜欢的水果是?</strong>
<strong title="选择你最喜欢的水果.">你最喜欢的水果是?</strong>
</b>

 $(function(){
       $("strong"). wrapInner("<b></b>"); //用<b>元素把<strong>元素的子内容包裹起来
  });
得到的结果<strong title="选择你最喜欢的水果."> <b>你最喜欢的水果是? </b></strong>

属性操作
attr()或全球和设置元素属性, removeAttr()删除元素属性
  $(function(){
      //设置<p>元素的属性'title'
      $("input:eq(0)").click(function(){
               $("p"). attr("title","选择你最喜欢的水果.");
       });
      //获取<p>元素的属性'title'
       $("input:eq(1)").click(function(){
               alert( $("p"). attr("title") );
       });
      //删除<p>元素的属性'title'
       $("input:eq(2)").click(function(){
               $("p"). removeAttr("title");
       });  

  });

样式操作
 $(function(){
      //获取样式
      $("input:eq(0)").click(function(){
               alert( $("p"). attr("class") );
       });
      //设置样式
       $("input:eq(1)").click(function(){
               $("p"). attr("class","high");
       });
      //追加样式
       $("input:eq(2)").click(function(){
               $("p"). addClass("another");
       });   
       //删除全部样式
       $("input:eq(3)").click(function(){
               $("p"). removeClass();
       }); 
        //删除指定样式
       $("input:eq(4)").click(function(){
               $("p"). removeClass("high");
       });  
       //重复切换样式
       $("input:eq(5)").click(function(){
               $("p"). toggleClass("another");
       }); 
       //判断元素是否含有某样式
       $("input:eq(6)").click(function(){
               alert( $("p"). hasClass("another") )
               alert( $("p"). is(".another") )
       }); 
  });

设置和获取HTML,文本和值
$(function(){
      //获取<p>元素的HTML代码
      $("input:eq(0)").click(function(){
               alert(  $("p"). html() );
       });
      //获取<p>元素的文本
       $("input:eq(1)").click(function(){
               alert(  $("p"). text() );
       });
      //设置<p>元素的HTML代码
       $("input:eq(2)").click(function(){
               $("p"). html("<strong>你最喜欢的水果是?</strong>");
       });   
        //设置<p>元素的文本
       $("input:eq(3)").click(function(){
               $("p"). text("你最喜欢的水果是?");
       }); 
       //设置<p>元素的文本
       $("input:eq(4)").click(function(){
               $("p"). text("<strong>你最喜欢的水果是?</strong>");
       }); 
       //获取按钮的value值
       $("input:eq(5)").click(function(){
               alert(   $(this).val()  );
       });  
       //设置按钮的value值
       $("input:eq(6)").click(function(){
                $(this).val("我被点击了!");
       }); 
  });

 $(function(){
      $("#address"). focus(function(){         // 地址框获得鼠标焦点
               var txt_value =    $(this).val();   // 得到当前文本框的值
               if(txt_value=="请输入邮箱地址"){ 
                  $(this).val("");              // 如果符合条件,则清空文本框内容
               }
       });
       $("#address"). blur(function(){            // 地址框失去鼠标焦点
                var txt_value =    $(this).val();   // 得到当前文本框的值
               if(txt_value==""){
                  $(this).val("请输入邮箱地址");// 如果符合条件,则设置内容
               }
       })
  });

 $(function(){
      //设置单选下拉框选中
      $("input:eq(0)").click(function(){
               $("#single"). val("选择2号");
       });
      //设置多选下拉框选中
       $("input:eq(1)").click(function(){
              $("#multiple"). val(["选择2号", "选择3号"]);
       });
      //设置单选框和多选框选中
       $("input:eq(2)").click(function(){
               $(":checkbox"). val(["check2","check3"]);
               $(":radio"). val(["radio2"]);
       });   

  });
<select id="single">
  <option>选择1号</option>
  <option>选择2号</option>
  <option>选择3号</option>
</select>

<select id="multiple" multiple="multiple" style="height:120px;">
  <option selected="selected">选择1号</option>
  <option>选择2号</option>
  <option>选择3号</option>
  <option>选择4号</option>
  <option selected="selected">选择5号</option>
</select>

<br/><br/>


<input type="checkbox" value="check1"/> 多选1
<input type="checkbox" value="check2"/> 多选2
<input type="checkbox" value="check3"/> 多选3
<input type="checkbox" value="check4"/> 多选4

<br/>

<input type="radio" value="radio1"/> 单选1
<input type="radio" value="radio2"/> 单选2
<input type="radio" value="radio3"/> 单选3

遍历节点
  $(function(){
     var $body = $("body"). children();
     var $p = $("p"). children();
     var $ul = $("ul"). children();
     alert( $body. length  );  // <body>元素下有2个子元素
     alert( $p. length  );     // <p>元素下有0个子元素
     alert( $ul.length );    // <p>元素下有3个子元素
       for(var i=0;i< $ul.length;i++){
         alert(   $ul[i].innerHTML  );
     }
  }); 

 $(function(){
     var $p1 = $("p"). next();
     alert( $p1.html() );  //  紧邻<p>元素后的同辈元素
     var $ul = $("ul"). prev();
     alert( $ul.html() );  //  紧邻<ul>元素前的同辈元素
     var $p2 = $("p"). siblings();
     alert( $p2.html() );  //  紧邻<p>元素的唯一同辈元素
  });

closest 取得最近的匹配元素,首先检查当前元素是否匹配,如果匹配 则直接返回元素本身。如果不匹配则向上查找父元素。逐级向上,如果没找到返回一个空的jQuery对象。  
 $(function(){
     $(document).bind("click", function (e) {
            $(e.target). closest("li").css("color","red");
     })
  });

  $(function(){
      //parent
      $("input:eq(0)").click(function(){
               resetStyle();
               $('.item-1'). parent().css('background-color', 'red');
       });
      //parents
       $("input:eq(1)").click(function(){
               resetStyle();
               $('.item-1'). parents('ul').css('background-color', 'red');
       });
      //closest
      $("input:eq(2)").click(function(){
               resetStyle();
               $('.item-1'). closest('ul').css('background-color', 'red');
       });

       function resetStyle(){
            $("*").removeAttr("style");
       }
  });
jQuery还有很多遍历节点的方法: find(),filter(),nextAll(),prevAll()

CSS-DOM操作
CSS-DOM技术简单来说就是读取和设置style对象的各种属性。
 $(function(){
      //获取<p>元素的color
      $("input:eq(0)").click(function(){
               alert(  $("p"). css("color") );
       });
      //设置<p>元素的color
       $("input:eq(1)").click(function(){
               $("p"). css("color","red")
       });
      //设置<p>元素的fontSize和backgroundColor
       $("input:eq(2)").click(function(){
               $("p"). css({"fontSize":"30px" ,"backgroundColor":"#888888"})
       });   
       //获取<p>元素的高度
       $("input:eq(3)").click(function(){
                 alert( $("p"). height() );
       }); 
       //获取<p>元素的宽度
       $("input:eq(4)").click(function(){
                 alert( $("p"). width() );
       });  

         //获取<p>元素的高度
       $("input:eq(5)").click(function(){
                 $("p"). height("100px");
       }); 
       //获取<p>元素的宽度
       $("input:eq(6)").click(function(){
                 $("p"). width("400px");
       });
       //获取<p>元素的的左边距和上边距
       $("input:eq(7)").click(function(){
                 var offset = $("p"). offset();
                 var left =   offset.left;
                 var top =    offset.top;
                alert("left:"+left+";top:"+top);
       }); 
  });

设置透明度可以用  $("p"). css("opacity","0.5");

获取元素的滚动条距顶端和左侧的距离
       var $p = $("p");
       var scrollTop = $p.scrollTop();
       var scrollLeft = $p.scrollLeft();
也可以传入参数,控制元素的滚动条到指定位置  $p.scrollTop("300");



本文转载自:http://blog.csdn.net/yanliang1/article/details/9400463

fokYaland
粉丝 4
博文 68
码字总数 3062
作品 0
东城
私信 提问
dom对象和jQuery对象的区别

1.jQuery对象和DOM对象 在第一次学习Jquery的时候也许大家都不是很清楚Jquery对象和DOM对象两者之间的关系,下面就解释两点,便于对Jquery和Dom加深理解 DOM对象,即是我们用传统的方法(java...

DockOne
2014/07/30
0
0
jQuery零基础入门——(五)操作DOM

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 jQuery强大的选择器,最终目的是...

JandenMa
2018/07/14
0
0
jQuery对象和DOM对象之间的转换实现

本文主要向大家介绍了jQuery对象和DOM对象之间互相转换的方法,其实转换过程十分简单,一起来看看吧。 在讨论jQuery对象和DOM对象的相互交换之前,先约定好定义变量的风格。如果获取的对象是...

IanSun
2015/03/14
0
1
DOM对象与jquery对象的区别

jQuery对象和DOM对象使用说明,需要的朋友可以参考下。 1.jQuery对象和DOM对象 第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery对象和DOM对象以及它...

zwjjap
2015/07/23
0
0
Query对象和DOM对象使用说明

Query对象和DOM对象使用说明,需要的朋友可以参考下。 1.jQuery对象和DOM对象 第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery对象和DOM对象以及它...

谢晓斌!!
2012/10/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

抽象同步队列AQS——AbstractQueuedSynchronizer锁详解

AQS——锁的底层支持 谈到并发,不得不谈ReentrantLock;而谈到ReentrantLock,不得不谈AbstractQueuedSynchronizer(AQS)! 类如其名,抽象的队列式的同步器,AQS定义了一套多线程访问共享资...

须臾之余
今天
3
0
springboot配置百度UEditor 富文本详解

富文本简介 UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码... 准备工作 ueditor需要单独文...

wotrd
昨天
4
0
mysql 5.7之my.cnf配置大全

[client]port = 3306socket = /tmp/mysql.sock[mysqld]###############################基础设置######################################Mysql服务的唯一编号 每个mysql服务...

Online_Reus
昨天
3
0
MAVEN打包时引入外部链接的包

1.项目引入了ORACLE的jar包,MAVEN配置如下 2.打jar包的时候需要指定下main入口函数mainClass <dependency> <groupId>com.oracle</groupId> <artifactId>ojdbc6</artifactId> ......

Cobbage
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部