码迷,mamicode.com
首页 > Web开发 > 详细

Ext JS学习第十五天 Ext基础之 Ext.DomQuery

时间:2014-08-29 21:24:28      阅读:299      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   使用   io   ar   文件   div   

 

此文同来记录学习笔记

•Ext.dom.Query 嗯,这个类一看就是到时做什么事儿的,不用我去过多的解释了。这个类一共提供了8个方法供开发人员去使用。
•要说最常用的方法,无非就是Ext.query这个方法,之前我们已经简单接触过了这个方法,下面是此方法的详细使用规则:
–基本元素选择器 id选择器 css的类选择器 标签选择器(简单选择器)
–属性选择器
–伪类选择器(也可以说是相当于JQ过滤选择器)
•Ext.query基本使用形式:
–Ext.query(‘span‘)     返回整个文档的span标签
–Ext.query(‘span‘ , ‘root‘)   根据跟节点进行查询
–Ext.query(‘#id‘)  根据id进行查询,但返回数组 
–Ext.query(‘.class‘)  根据样式进行查询,返回数组
–Ext.query(‘div span‘)  根据标签进行包含选择器过滤
–Ext.query(‘*‘)  匹配所有元素
–Ext.query(‘input[value*=val]‘)   进行一个属性的选择匹配
–Ext.query(‘E>F‘)  进行一个层次查找父节点为E的F节点
•Ext.dom.Query其他方法:
•compile:将选择符或xpath编译成一个可重复使用的函数
•filter:使用简单选择符过滤元素数组
•is:判断元素是否匹配简单选择符
•jsSelect:根据选择符选择元素
 
Ext.onReady(function () {


    //Ext.DomQuery
    Ext.create(‘Ext.Panel‘, {
        title: ‘Ext.DomQuery示例‘,
        width: 500,
        height: 400,
        renderTo: Ext.getBody(),
        html: ‘<ul><li>item1</li><li>item2</li></ul><div id=d1><span id=sp>我是sp内容</span><span class="mycolor">我是第二个span</span></div>‘
    });


    Ext.DomQuery.select ==  Ext.query  //返回内容:HTMLElement[]
    ///Ext.DomQuery.jsSelect:根据选择符选择元素    (这个方法和Ext.DomQuery.select差不多)
    //我把他分为三大类:
    //基本选择器 id选择器 css的类选择器 标签选择器(简单选择器)
    //属性选择器、伪类选择器(也可以说是相当于JQ过滤选择器)(复杂选择器)



    //Ext.query(‘span‘)       返回整个文档的span标签
    //1 Ext.query(‘span‘ , ‘root‘)     根据跟节点进行查询
        var arr = Ext.query(‘span‘ , ‘d1‘);
        Ext.Array.each(arr,function(el){
            alert(el.innerHTML);
        });
    //2 Ext.query(‘#id‘)        根据id进行查询,但返回数组    
        var arr = Ext.query(‘#d1‘);
        Ext.Array.each(arr,function(el){
            alert(el.innerHTML);
        });    

    //3 Ext.query(‘.class‘)    根据样式进行查询,返回数组
        var arr = Ext.query(‘.mycolor‘);
        Ext.Array.each(arr,function(el){
            alert(el.innerHTML);
        });    
    //Ext.query(‘*‘)    匹配所有元素
    alert(Ext.query(‘*‘));


    //复杂选择器:
    //1 :Ext.query(‘div span‘)    根据标签进行包含选择器过滤
        var arr = Ext.query(‘div[id=d1] span‘);
        Ext.Array.each(arr,function(el){
            alert(el.innerHTML);
        });

    //1.1:Ext.query(‘E>F‘)        进行一个层次查找父节点为E的F节点
        var arr = Ext.query(‘div>span‘);        //Xpath:div/span 查找xml文件比较实用
        Ext.Array.each(arr,function(el){
            alert(el.innerHTML);
        });    

    //2 :属性选择器Ext.query(‘E[attr=val]‘)     进行一个属性的选择匹配
        var arr = Ext.query(‘div[id*=d]‘);
        Ext.Array.each(arr,function(el){
            alert(el.id);
        });    

    //3: 伪类选择器
    //E:first-child
        var arr = Ext.query(‘li:first-child‘);    
        Ext.Array.each(arr,function(el){
            alert(el.innerHTML);
        });        


    //Ext.DomQuery其他方法:

    //1:compile:将选择符或xpath编译成一个可重复使用的函数
        var fn = Ext.DomQuery.compile(‘span‘);
        alert(fn);
        var arr = fn(Ext.getDom(‘d1‘));
        Ext.Array.each(arr,function(el){
            alert(el.innerHTML);
        });    
    //2: filter:使用简单选择符过滤元素数组
    //参数说明 HTMLElement[] el, String selector, Boolean nonMatches
        var arr = document.getElementsByTagName(‘div‘);
        var filterarr = Ext.DomQuery.filter(arr,‘div[id=d1]‘,false);
        Ext.Array.each(filterarr,function(el){
            alert(el.id);
        });        
    //is:判断元素是否匹配简单选择符
    alert(Ext.DomQuery.is(Ext.getDom(‘d1‘),‘div[id]‘));

    

});
 给各位推荐个文章网www.fishcmonkey.com,学习之余提高文学修养;

Ext JS学习第十五天 Ext基础之 Ext.DomQuery

标签:style   blog   http   color   使用   io   ar   文件   div   

原文地址:http://www.cnblogs.com/lisr/p/3943365.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!