第九课Ext源码分析Ext.DomQuery.pptVIP

* * * 第九课 Ext.DomQuery 本课目标 Ext.DomQuery的使用方法和源码解析 简述 1、Ext.DomQuery是高效查询的工具类； 2、先给例子，再分析源码； 首先补充一下XPath XPath的详细规则大家参考w3school给出的描述。 XPath是被设计用来解析xml文档的。大家应该熟悉* ? ./ .//这些通配符和相对路径写法吧？ 说白了，XPath扩展了这些语法，提供了一组更丰富的路径表达式而已。跟正则表达式类似， XPath比较高效，但是目前浏览器里面的支持却不好。在第二种查询方式“属性选择子”里面， Ext在模拟了很多Xpath的行为。 DomQuery基础用法 1、先说一下关于API文档的一件诡异的事情 Ext.query()是Ext.DomQuery.select()的快捷方式，点击链接可以跳到Ext.DomQuery这个类，但是Ext.DomQuery自己的“公共方法”却没有列出select()这个函数。源码里面确实是把select()方法当作公共方法公布的，大家注意一下。 2、以下是DomQuery四大用法的例子，请大家打开API文档并打开到Ext.DomQuery这个类 DomQuery基础用法 html head meta http-equiv=Content-Type content=text/html; charset=utf-8 titleDomQuery/title !--导入Ext，这里省略，节省空间-- script type=text/javascript src=dq.js/script script type=text/javascript src=dump.js/script /head body div id=div1 class=class1 style=color:red; 第一个层中的文字 span class=sp1第一个层中的一个span元素/span a href= target=_blank第一个层中的一个链接/a /div div id=div2 class=class2 第二个层中的文字 p 第二个层中的一个p元素 /p span class=sp2第二个层中的一个span元素/span a href=#第二个层中的链接/a /div button onclick=testDomQuery()test1/button /body /html DomQuery基础用法 DomQuery基础用法 function testDomQuery(){ //第一部分：元素选择器例子 //var arr=Ext.query(span); //var arr=Ext.query(span,div1); //var arr=Ext.query(#div1);//按照id获取 //var arr=Ext.query(.class1);//按照css类名获取 //var arr=Ext.query(*);//所有元素都获取，这个能拿到所有标签，包括head/script等。而且能递归，嵌套的标签都能取到 //var arr=Ext.query(div p);//取所有位于div元素中的p元素 //var arr=Ext.query(span+a);//取所有前面有span元素的a元素 //第一部分结束：其它规则写法请按照文档说明自己测试 //第二部分：属性选择器 //var arr=Ext.query(*[class]);//查找所有含有class属性的元素 //第二部分结束：这种写法和某些处理xml的工具写法灰常类似。 //第三部分：伪类 //var arr=Ext.query(span:first-child);//这会返回第一个div中的第一个span，因为这个span是div的第一个孩子 //第三部分结束 //第四部分：CSS选择子 var arr=Ext.query(*{color=red});//这会返回第一个div //第四部分结束：其它写法参考文档类推 dump(arr); } DomQuery基础用法 DomQuery源码分析 整个DomQuery工具类的入口是select()这个函数，大家打开DomQuery的源码，看select()的实现: select : document.querySelectorAll ? function(path, root, type) { root = root || document; if (!Ext.DomQuery.isXml(root)) { try { var cs = root.que