Skip to content

Commit cd62632

Browse files
JsAaronJsAaron
committed
demo
1 parent 5520b5f commit cd62632

File tree

5 files changed

+111
-163
lines changed

5 files changed

+111
-163
lines changed

‎demo/eq与get.html

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script>
6+
<title></title>
7+
</head>
8+
<body>
9+
10+
11+
<table border="1">
12+
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
13+
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
14+
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
15+
</table>
16+
17+
<ul>
18+
<li>list item 1</li>
19+
<li>list item 2</li>
20+
<li>list item 3</li>
21+
<li>list item 4</li>
22+
<li>list item 5</li>
23+
</ul>
24+
25+
26+
<script type="text/javascript">
27+
28+
$("td:eq(2)").css("color", "red")
29+
30+
31+
$('li').eq(2).css('background-color', 'red');
32+
$('li').eq(-2).css('background-color', 'red');
33+
34+
</script>
35+
</body>
36+
</html>
37+
38+
39+
40+
41+
42+
43+
44+
45+
46+

‎demo/节点遍历.html

+16-88
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
</head>
1010
<body>
1111

12+
1213
<ul class="level-1">
1314
<li class="item-i">I</li>
1415
<li class="item-ii">II
@@ -27,110 +28,37 @@
2728
<li class="item-iii">III</li>
2829
</ul>
2930

30-
31-
<ul>
32-
<li class="first">list item 1</li>
33-
<li>list item 2</li>
34-
<li class="third-item">list item 3</li>
35-
<li>list item 4</li>
36-
<li class="end">list item 5</li>
37-
</ul>
38-
39-
4031
<script type="text/javascript">
41-
42-
function parent(elem) {
43-
var parent = elem.parentNode;
44-
return parent && parent.nodeType !== 11 ? parent : null;
45-
}
46-
47-
function parents(elem){
48-
var matched = [];
49-
while ( (elem = elem[ 'parentNode' ]) && elem.nodeType !== 9 ) {
50-
if ( elem.nodeType === 1 ) {
51-
matched.push( elem );
52-
}
53-
}
54-
return matched;
55-
}
56-
57-
function parentsUntil(elem, filter) {
58-
var matched = [],
59-
until,
60-
truncate = filter !== undefined;
61-
while ((elem = elem['parentNode']) && elem.nodeType !== 9) {
62-
if (elem.nodeType === 1) {
63-
if (truncate) {
64-
if(elem.nodeName.toLowerCase() ==filter){
65-
break;
66-
}
67-
}
68-
matched.push(elem);
69-
}
70-
}
71-
return matched;
72-
}
7332

33+
var li = $('.item-ii');
7434

75-
function dir(elem, dir, until) {
76-
var matched = [],
77-
truncate = until !== undefined;
78-
while ((elem = elem[dir]) && elem.nodeType !== 9) {
79-
if (elem.nodeType === 1) {
80-
if (truncate) {
81-
if (elem.nodeName.toLowerCase() == until || elem.className == until) {
82-
break;
83-
}
84-
}
85-
matched.push(elem);
86-
}
87-
}
88-
return matched;
89-
}
9035

91-
function nextAll(elem) {
92-
return dir(elem, "nextSibling");
36+
function find(elem, selector) {
37+
return elem.querySelectorAll(selector);
9338
}
9439

95-
function prevAll(elem) {
96-
return dir(elem, "previousSibling");
97-
}
9840

99-
function nextUntil(elem, until) {
100-
return dir(elem, "nextSibling", until);
101-
}
10241

103-
function prevUntil(elem, until) {
104-
return dir(elem, "previousSibling", until);
105-
}
42+
console.log(find(li[0] ,'li'))
43+
//console.log( li.find('li') )
10644

107-
function sibling( cur, dir ) {
108-
while ( (cur = cur[dir]) && cur.nodeType !== 1 ) {}
109-
return cur;
110-
}
11145

112-
function next(elem) {
113-
return sibling(elem, "nextSibling");
114-
}
11546

116-
function prev(elem) {
117-
return sibling(elem, "previousSibling");
47+
function sibling(n, elem) {
48+
var matched = [];
49+
for (; n; n = n.nextSibling) { //如果存在下一个兄弟节点
50+
if (n.nodeType === 1 && n !== elem) { //是元素节点，且不是当前选择器元素
51+
matched.push(n);
52+
}
53+
}
54+
return matched;
11855
}
11956

120-
// var $item = $(".item-1")
121-
122-
// console.log( $item.parentsUntil('body') )
123-
124-
var a = $('li.third-item');
125-
126-
console.log(
127-
128-
a.siblings()
129-
)
57+
var ul = document.querySelectorAll('.level-2')[0];
13058

13159

13260

13361
</script>
13462

13563
</body>
136-
</html>q
64+
</html>

‎version/src/节点遍历sibling.html renamed to ‎demo/节点遍历sibling.html

File renamed without changes.

‎version/src/节点遍历.html renamed to ‎demo/过滤操作.html

+9-22
Original file line numberDiff line numberDiff line change
@@ -9,37 +9,24 @@
99
</head>
1010
<body>
1111

12-
13-
<ul class="level-1">
14-
<li class="item-i">I</li>
15-
<li class="item-ii">II
16-
<ul class="level-2">
17-
<li class="item-a">A</li>
18-
<li class="item-b">B
19-
<ul class="level-3">
20-
<li class="item-1">1</li>
21-
<li class="item-2">2</li>
22-
<li class="item-3">3</li>
23-
</ul>
24-
</li>
25-
<li class="item-c">C</li>
26-
</ul>
27-
</li>
28-
<li class="item-iii">III</li>
12+
<ul>
13+
<li>list item 1</li>
14+
<li>list item 2</li>
15+
<li>list item 3</li>
16+
<li>list item 4</li>
17+
<li>list item 5</li>
18+
<li>list item 6</li>
2919
</ul>
3020

3121
<script type="text/javascript">
3222

33-
var li = $('.item-ii');
23+
var li = $('ii');
3424

3525

36-
function find(elem, selector) {
37-
return elem.querySelectorAll(selector);
38-
}
3926

4027

4128

42-
console.log(find(li[0] ,'li'))
29+
console.log( .filter(':even') )
4330
//console.log( li.find('li') )
4431

4532

‎version/src/study.html

+40-53
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,54 @@
1-
<!doctype html>
1+
<!DOCTYPE HTML>
22
<html>
33
<head>
4-
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
5-
<title>参考对照学习</title>
6-
<script src="core.js"></script>
7-
<script src="sizzle.js"></script>
8-
<script src="other.js"></script>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5+
<script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script>
6+
<title></title>
97
</head>
108
<body>
9+
10+
<div id="end">点击end处理</div>
11+
<div id="addBack">点击addBack处理</div>
1112

12-
<ul class="level-1">
13-
<li class="item-i">I</li>
14-
<li class="item-ii">II
15-
<ul class="level-2">
16-
<li class="item-a">A</li>
17-
<li class="item-b">B
18-
<ul class="level-3">
19-
<li class="item-1">1</li>
20-
<li class="item-2">2</li>
21-
<li class="item-3">3</li>
22-
</ul>
23-
</li>
24-
<li class="item-c">C</li>
25-
</ul>
26-
</li>
27-
<li class="item-iii">III</li>
13+
<ul class="first">
14+
<li class="foo">list item 1</li>
15+
<li>list item 2</li>
16+
<li class="bar">list item 3</li>
2817
</ul>
29-
30-
31-
<ul>
32-
<li class="first">list item 1</li>
18+
<ul class="second">
19+
<li class="foo">list item 1</li>
3320
<li>list item 2</li>
34-
<li class="third-item">list item 3</li>
35-
<li>list item 4</li>
36-
<li class="end">list item 5</li>
21+
<li class="bar">list item 3</li>
3722
</ul>
3823

39-
4024
<script type="text/javascript">
4125

42-
function fn1() {
43-
var defer = $.Deferred();
44-
setTimeout(function(){
45-
defer.resolve('fn1');
46-
},500)
47-
return defer;
48-
}
49-
50-
function fn2(){
51-
var defer = $.Deferred();
52-
setTimeout(function(){
53-
defer.resolve('fn2');
54-
},1000)
55-
return defer;
56-
}
57-
58-
$.when(fn1(), fn2()).done(function() {
59-
console.log(arguments)
60-
}).then(function(){
61-
console.log(1)
62-
});
26+
//.end()jQuery对象维护一个堆栈内部来跟踪匹配的元素集合的变化。
27+
//当一个DOM遍历方法被调用时，新的元素集合推入到堆栈中。
28+
//如果还需要包含先前的元素集合，.addBack()
6329

64-
</script>
30+
$("#end").click(function(){
31+
$('ul.first').find('.foo').css('background-color', 'red')
32+
.end().find('.bar').css('background-color', 'green');
33+
})
6534

35+
//addBack 包含了自身的选择器
36+
$("#addBack").click(function(){
37+
$('.foo').nextAll().addBack()
38+
.css('background-color', 'red');
39+
})
40+
41+
42+
</script>
6643
</body>
67-
</html>
44+
</html>
45+
46+
47+
48+
49+
50+
51+
52+
53+
54+

0 commit comments

Comments
 (0)