DomQuery v1.1 高级Tutorial:DomQuery v1.1 Advanced

Tutorial:DomQuery v1.1 Advanced

From Learn About the Ext JavaScript Library

Jump to: navigation, search

Summary: DomQuery Advanced

Author: Bernard Chhun

Published: september 13th 2007

Ext Version: 1.1

Languages: English

This tutorial will drive you through some advanced DOM manipulation using the results we may get when we use DomQuery.

DomQuery Advanced

Highlight my DOM damn it!

here's an homage clone to what Karl Swedberg did for the JQuery Manual.

It basically highlights some DOM elements based on what button we clicked on. The Ext code is already in the page and you guys will need to give it the appropriate Ext JS files.

Known bugs

• the 2nd selector doesn't select all even LI's
• the 8th selector dies on an error

 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
< html >
     < head >
         < meta  http-equiv ="Content-Type"  content ="text/html; charset=iso-8859-1" >
         < title > Tutorials - DomQuery </ title >
         < script  type ="text/javascript"  src ="../js/firebug/firebug.js" ></ script >
         < style >
            .yellow{}{background-color:yellow;}
         </ style >
     </ head >
     < body  id ="body" >
         < script  type ="text/javascript"  src ="../ext/ext-base.js" ></ script >
         < script  type ="text/javascript"  src ="../ext/ext-core.js" ></ script >
         < script >
        var domquery = function(){
            return{ 
                init: function(){
                    Ext.select("div.dom-traversal-toggles").on("click",
                        function(e, el){
                            var id = el.id;
                            id = id.replace("dt-link", "");
                            if (id != ""){
                                var toggler = function(e){
                                    var highlight = function(els){
                                        for (var x = 0 ; x < els.length; x ++){
                                            var el = Ext.get(els[x]);
                                            if (el) {
                                                if (el.hasClass("yellow")) {
                                                    el.removeClass("yellow");
                                                }else{
                                                    el.addClass("yellow");
                                                }    
                                            }
                                        }
                                        return els;
                                    };
 
                                    var highlightHidden = function(els){
                                        var elmts = highlight(els);
                                        for (var x = 0 ; x < elmts.length; x ++){
                                            var el = Ext.get(elmts[x]);
                                            if (el) {
                                                if (el.hasClass("yellow")){
                                                    el.fadeIn();    
                                                }else{
                                                    el.fadeOut();
                                                    el.removeClass("yellow");
                                                }    
                                            }    
                                        }
 
                                    }
                                    switch(e){
                                        case "1":
                                            highlight(Ext.query('li:first', "extdt"));
                                        break;
                                        case "2":
                                            highlight(Ext.query('li:even', "extdt"));
                                        break;
                                        case "3":
                                            highlight(Ext.query('li', "extdt").splice(0,3));
                                        break;
                                        case "4":
                                            highlight(Ext.query('li:not(.goofy)', "extdt"));
                                        break;
                                        case "5":
                                            highlight(Ext.query('p a[href*=#]', "extdt"));
                                        break;
                                        case "6":
                                            highlight(Ext.query('code, li.goofy', "extdt"));
                                        break;
                                        case "7":
                                            highlight(Ext.query('ul .goofy > strong', "extdt"));
                                        break;
                                        case "8":
                                            highlight(Ext.query('li+li>a[href$=pdf]', "extdt"));
                                        break;
                                        case "9":
                                            if (Ext.query("span{display=none}", "extdt").length > 0) {
                                                highlightHidden( Ext.query("span{display=none}", "extdt") );    
                                            }else {
                                                highlightHidden( Ext.query("span{display}", "extdt"));
                                            }
 
                                        break;
                                        case "10":
                                            highlight( Ext.query("li:nth(4)", "extdt") );
                                        break;
                                    }
                                }(id);
                            }
                            if (e == "x"){
 
                            }
                        }
                    );
                }
            }
        }();
 
        Ext.onReady(
            function(){
                domquery.init();
            }
        );    
         </ script >
 
         < div  style ="border: 1px solid rgb(0, 0, 0); padding: 1em; width: 400px;"  id ="extdt" >
             < p  class ="goofy" >  This is a  < em > paragraph </ em >  of  < strong > text </ strong >  with class=”goofy.” It has an  < a  title ="http://www.englishrules.com"  class ="external text"  href ="http://www.englishrules.com" > external link </ a > , some  < code > $(code) </ code > , and a  < a  title =""  href ="#dt-link3_same-page_link" > #dt-link3 same-page link </ a > .  </ p >
             < ul >
                 < li > list item 1 with dummy link to
                     < a  title ="Silly.pdf"  class ="new"  href ="/action/edit/Silly.pdf" > silly.pdf </ a >
                 </ li >
                 < li  class ="goofy" >
                     < em > list  < strong > item </ strong >  2 </ em >  with class=” < strong > goofy </ strong > “
                 </ li >
                 < li  > list item 3
                     < span  style ="display:none;" >  SURPRISE! </ span >
                 </ li >
                 < li >
                     < strong > list item 4 </ strong >  with silly link to
                     < a  title ="Silly.pdf silly.pdf"  class ="new"  href ="/action/edit/Silly.pdf_silly.pdf" > silly.pdf silly.pdf </ a >
                 </ li >
             </ ul >
         </ div >
 
         < div  class ="dom-traversal-toggles" >
             < ul >
                 < li >< input  type ="submit"  value ="toggle"  id ="dt-link1"   />   < code > Ext.query('li:first') </ code >  gets the first list item </ li >
                 < li >< input  type ="submit"  value ="toggle"  id ="dt-link2"   />   < code > Ext.query('li:even') </ code >  gets all odd-numbered list items (because, in javascript, numbering starts with 0, not 1). </ li >
                 < li >< input  type ="submit"  value ="toggle"  id ="dt-link3" />   < code > Ext.query('li').splice(0,3) </ code >  gets the first 3 list items. “lt” stands for “less than,” and it starts counting at 0, not 1.  </ li >
 
                 < li >< input  type ="submit"  value ="toggle"  id ="dt-link4" />   < code > Ext.query('li:not(.goofy)') </ code >  gets list items 1, 2, and 4, because they’re not “goofy.” </ li >
                 < li >< input  type ="submit"  value ="toggle"  id ="dt-link5" />   < code > Ext.query('p a[href*=#]') </ code >  gets any links that are inside a paragraph and have an “href” attribute containing “#” anywhere. </ li >
 
                 < li >< input  type ="submit"  value ="toggle"  id ="dt-link6" />   < code > Ext.query('code, li.goofy') </ code >  gets all code elements  < em > and </ em >  any list item with a class of “goofy.” </ li >
                 < li >< input  type ="submit"  value ="toggle"  id ="dt-link7" />   < code > Ext.query('ul .goofy > strong') </ code >  gets all strong elements that are children of any element with a class of “goofy” as long as the class somewhere inside (i.e. a descendent) of an ordered list. Notice that the word “item” is not highlighted because, even though it’s inside “.goofy,” it’s not a direct child. Only “goofy” is a direct child of “.goofy.” Maybe we should call it “goofy jr.”  </ li >
 
                 < li >< input  type ="submit"  value ="toggle"  id ="dt-link8" />   < code > Ext.query('li + li > a[@href$=pdf]') </ code >  gets all links ending in “pdf” that are children of any list item that has another list item as its previous sibling. It won’t get the first list item’s silly.pdf because that list item has no other list items before it. </ li >
                 < li >< input  type ="submit"  value ="toggle"  id ="dt-link9" />   < code > Ext.query("span{display=none}") </ code >  gets any span element that is hidden. </ li >
                 < li >< input  type ="submit"  value ="toggle"  id ="dt-link10" />   < code > Ext.query("li:nth(4)") </ code >  gets the 4th li element </ li >
 
             </ ul >
         </ div >
     </ body >
</ html >