ext-DomQuery
<!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>Templates Example</title>
<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="http://www.cnblogs.com/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="http://www.cnblogs.com/ext-all.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/ext-core.js"></script>
<script language="javascript" src="templates.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />
<style type="text/css">
.x-panel {
margin:15px;
}
.x-panel-body p {
margin:5px;
font-size:11px;
}
</style>
<script>
//Ext.onReady(myNameSpace.app.init, myNameSpace.app);
</script>
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
<h1>Templates</h1>
<div id="bar" class="foo">
I'm a div ==> my id: bar, my class: foo
<span class="bar">I'm a span within the div with a foo class</span>
<a href="http://www.extjs.com" target="_blank">An ExtJs link</a>
</div>
<div id="foo" class="bar">
my id: foo, my class: bar
<p>I'm a P tag within the foo div</p>
<span class="bar">I'm a span within the div with a bar class</span>
<a href="#">An internal link</a>
</div>
<script type="text/javascript" >
//第一部分：元素选择符Selector
//为什么这个这个地方的alert比上面的弹出的早？
//这个地方的查询可以查询本页面所有的span标签
var obj = Ext.query("span");
//这个查询会返回有一个元素的数组因为查询顾及到了foo这个id
var obj1 = Ext.query("span", "foo");
//返回的对象innerText和outerHTML不能使用，是因为浏览器的问题？
//alert(obj1[0].innerHTML);
//这个查询可以 查询处id为foo的元素, 按id获取标签
var obj2 = Ext.query("#foo");
//按className获取标签
var obj3 = Ext.query(".foo");
//alert(obj3[0].innerHTML + obj3.length);
//这会返回一个数组，包含文档的所有元素。
var obj4 = Ext.query("*");
//要获取子标签，我们只须在两个选择符之间插入一个空格：
var obj5 = Ext.query("div a");
//alert(obj5[1].innerHTML);
//第二部分：属性选择符Attributes selectors
//本查询返回 本页面所有具有class属性的标签
var obj6 = Ext.query("*[class]");
//alert([obj6[0].id,obj6[1].className,obj6[2].id,obj6[3].innerHTML]);
//查询出所有class属性值中包含a的元素
var obj7 = Ext.query("*[class*=a]");
//alert(obj7.length + ":" + obj7[0].innerHTML)
// 这会得到class等于“bar”的所有元素 Ext.query("*[class=bar]");
// 这会得到class不等于“bar”的所有元素 Ext.query("*[class!=bar]");
// 这会得到class从“b”字头开始的所有元素 Ext.query("*[class^=b]");
//这会得到class由“r”结尾的所有元素 Ext.query("*[class$=r]");
//第三部分： CSS值元素选择符
//第四部分：伪类选择符Pseudo Classes selectors
//这些都可以在使用的去查找
</script>
</body>
</html>
