-
Notifications
You must be signed in to change notification settings - Fork 1
/
lesson_33.html
135 lines (117 loc) · 4.49 KB
/
lesson_33.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ext.dom.Query-犸特头</title>
<!-- extjs -->
<link rel="stylesheet" type="text/css" href="../ext-4.2.1.883/resources/css/ext-all-neptune.css">
<!--<script type="text/javascript" src="../extjs/ext-all.js"></script>-->
<script type="text/javascript" src="../ext-4.2.1.883/ext-all-debug-w-comments.js"></script>
<script type="text/javascript" src="../ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>
<style type="text/css" >
body{padding: 20px 0 0 20px;}
h3{padding:none;margin:none;}
.add{ background-image: url(../ext-4.2.1.883/examples/menu/images/add.gif) !important;}
.add16{ background-image: url(../ext-4.2.1.883/examples/menu/images/add16.gif) !important;}
.block {
border: 1px red solid;
height:80px;
margin-top:50px;
padding:20px 0 0 20px;
clear:both;
}
.item {
border: 1px #000 solid;
margin-right:10px;
width: 200px;
height: 40px;
text-align:center;
padding-top:20px;
color:White;
cursor:pointer;
}
</style>
</head>
<body>
<script type="text/javascript">
// 设置项目
Ext.application({
name: 'MyApp', // 项目名称
//appFolder : 'app' // 项目文件 。默认值为 app
launch: function() {
//
// 1. 元素选择器
/*
* 任何元素
E 用标签(E)元素
E F E，F所有后代元素标签
E > F or E/F 所有的直接子元素E，F的标签
E + F 用标签F，紧跟着一个元素的所有元素的标签
E ~ F 用标签F，前面有一个带标签的E的兄弟姐妹的所有元素
*/
// 2. 属性选择器
/*
E[foo] 有一个属性“foo”
E[foo=bar] 有一个属性“foo”等于“bar”
E[foo^=bar] 有一个属性“foo”，从“bar”
E[foo$=bar] 有一个属性“foo”，结束“bar”
E[foo*=bar] 有一个属性“foo”包含子串的“bar”
E[foo%=2] 有一个属性“foo”，能被2整除
E[foo!=bar] 属性“foo”不等于“bar”
*/
// 3. 伪类选择器
/*
E:first-child E是其父母的第一个孩子
E:last-child E是其父母的最后个孩子
E:nth-child(_n_) E是其父母的_n_th孩子（1基础按规格）
E:nth-child(odd) 与上面类似 返回奇数
E:nth-child(even) 与上面类似 返回偶数
E:only-child 返回父元素当中只有一个元素的E元素
E:checked 选中的元素(radio or checkbox)
E:first 返回匹配元素结果集中的第一个元素
E:last 返回匹配元素结果集中的最后一个元素
E:nth(_n_) 返回匹配元素结果集中的第N个元素
E:odd 与:nth-child(odd)相同
E:even 于:nth-child(even)相同
E:contains(foo) innerHTML 属性中包含foo的E元素
E:nodeValue(foo) 返回值包含一个文本元素,并且值为foo的
E:not(S) 不等于
E:has(S) 表达式所匹配元素的
E:next(S) 并且其平级元素的下一个
E:prev(S) 并且其平级元素的上一个
E:any(S1|S2|S2) 或者的关系
E:visible(true) 匹配所有可见的
*/
// 4. CSS选择器
/*
E{display=none} css value "display" 等于 "none"
E{display^=none} css value "display" that starts with "none"
E{display$=none} css value "display" that ends with "none"
E{display*=none} css value "display" 包含 "none"
E{display%=2} css value "display" 这是被2整除
E{display!=none} css value "display" 不等于 "none"
*/
//
var t = Ext.query('#some-el div.item');
console.log(t[0]);
t = Ext.dom.Query.select('#some-el div.item'); //返回所有 id='some-el' 下div的 class='item' 的 HTMLElement[]
console.log(t[0]);
t = Ext.dom.Query.select('#some-el span');
console.log(t);
}
});
</script>
<div id="some-el">
<div class="item" style="background:red"></div>
<span>1</span>
<p>
<span>2</span>
</p>
</div>
<h3>打开控制台查看 log </h3>
<a href="../ext-4.2.1.883/docs/index.html#!/api/Ext.dom.Query" target="_blank"><h3>Query</h3></a>
<a href="http://blog.mttqq.com" target="_blank"><h3>犸特头-Extjs4更多学习</h3></a>
<h3>Q群:311176787</h3>
<a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=f50865b2598688abcae47cca8ae48b5c1ea26a45194c640071eefdd7212d3a2e"><img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="extjs 技术交流" title="extjs 技术交流"></a>
</body>
</html>