├── README.md
├── test02
├── 08-测试extend方法.html
├── 05-伪数组.html
├── 03-测试ready入口函数.html
├── 07-测试end方法.html
├── 02-ready处理.html
├── 01-DOM构建完毕事件.html
├── 04-jQuery实例上的核心成员.html
└── 06-测试each方法.html
├── test01
├── 03-如何判断一个html字符串.html
├── 08-测试入口函数.html
├── 05-测试选择器-处理字符串.html
├── 07-测试类数组判断的方法.html
├── 01-入口函数不同参数的处理.html
├── 04-init函数处理false值与字符串.html
├── 02-init函数处理.html
└── 06-判断是否是数组或者类数组.html
├── test03
├── 04-val方法设置.html
├── 07-addClass测试.html
├── 06-hasClass方法测试.html
├── 08-removeClass测试.html
├── 05-css方法测试.html
├── 02-test.html
├── 09-toggleClass测试.html
├── 01-attr与prop.html
└── 03-attr方法测试.html
├── test04
├── 02-empty方法与remove方法测试.html
├── 03-appendTo方法实现.html
├── 04-append方法测试.html
├── 05-prependTo方法测试.html
├── 06-children方法测试.html
├── 07-next方法测试.html
└── 01-html方法测试.html
└── jquery-cc.js
/README.md:
--------------------------------------------------------------------------------
1 | # 介绍
2 |
3 | 这个框架是模仿jquery而搭建的
4 |
5 | # jq环境搭建
6 | > jquery对象暴露了两个变量,`$`与`jQuery`,这两个变量指向同一个函数。
7 | >
8 |
9 |
10 |
--------------------------------------------------------------------------------
/test02/08-测试extend方法.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/test01/03-如何判断一个html字符串.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/test02/05-伪数组.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/test03/04-val方法设置.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
21 |
22 |
--------------------------------------------------------------------------------
/test03/07-addClass测试.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 |
10 | - 111
11 | - 222
12 | - 333
13 | - 444
14 |
15 |
16 |
17 |
18 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/test03/06-hasClass方法测试.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 |
10 | - 111
11 | - 222
12 | - 333
13 | - 444
14 |
15 |
16 |
17 |
18 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/test04/02-empty方法与remove方法测试.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 |
1111
10 |
1111
11 |
2222
12 |
13 |
14 |
15 |
16 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/test04/03-appendTo方法实现.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 | 1111
10 | 2222
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/test04/04-append方法测试.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 | 11111
10 |
11 | 22222
12 |
13 | 33333
14 |
15 |
16 |
17 |
18 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/test01/08-测试入口函数.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 |
10 |
20 |
21 |
--------------------------------------------------------------------------------
/test04/05-prependTo方法测试.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 | 1111
10 | 2222
11 |
12 | qqqq
13 | qqqq
14 | qqqq
15 |
16 |
17 |
18 |
19 |
20 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/test03/08-removeClass测试.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 |
10 | - 111
11 | - 222
12 | - 333
13 | - 444
14 |
15 |
16 |
17 |
18 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/test01/05-测试选择器-处理字符串.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 |
10 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/test04/06-children方法测试.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 |
10 | 111
11 | 222
12 |
13 |
14 |
15 | 111
16 | 222
17 |
18 |
19 |
20 |
21 | 111
22 | 222
23 |
24 |
25 |
26 |
27 |
33 |
34 |
--------------------------------------------------------------------------------
/test02/03-测试ready入口函数.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 |
10 |
22 |
23 |
24 | 111
25 | 222
26 | 111
27 |
28 |
--------------------------------------------------------------------------------
/test02/07-测试end方法.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 |
10 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/test03/05-css方法测试.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 | 111
10 | 222
11 | 333
12 |
13 |
14 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/test04/07-next方法测试.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 |
10 | 111
11 | 222
12 |
13 |
14 |
15 | 111
16 | 222
17 |
18 |
19 |
20 |
21 | 111
22 | 222
23 |
24 |
25 |
26 |
27 |
33 |
34 |
--------------------------------------------------------------------------------
/test03/02-test.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 |
19 |
20 |
21 |
22 |
28 |
29 |
--------------------------------------------------------------------------------
/test01/07-测试类数组判断的方法.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 |
10 |
22 |
23 |
--------------------------------------------------------------------------------
/test03/09-toggleClass测试.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 |
10 |
11 | - 111
12 | - 222
13 | - 333
14 | - 444
15 |
16 |
17 |
18 |
19 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/test04/01-html方法测试.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 |
10 |
11111
11 |
22222
12 |
13 |
14 |
15 |
11111
16 |
22222
17 |
18 |
19 |
20 |
21 |
36 |
37 |
--------------------------------------------------------------------------------
/test03/01-attr与prop.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 |
10 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/test01/01-入口函数不同参数的处理.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 |
34 |
35 |
--------------------------------------------------------------------------------
/test02/02-ready处理.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/test01/04-init函数处理false值与字符串.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
35 |
36 |
--------------------------------------------------------------------------------
/test01/02-init函数处理.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/test03/03-attr方法测试.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
49 |
50 |
--------------------------------------------------------------------------------
/test02/01-DOM构建完毕事件.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
35 |
36 |
37 | 111
38 | 222
39 |
40 |
--------------------------------------------------------------------------------
/test02/04-jQuery实例上的核心成员.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 |
10 |
35 |
36 |
37 |
38 | - 我是第1个li
39 | - 我是第2个li
40 | - 我是第3个li
41 | - 我是第4个li
42 | - 我是第5个li
43 | - 我是第6个li
44 | - 我是第7个li
45 | - 我是第8个li
46 | - 我是第9个li
47 | - 我是第10个li
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/test02/06-测试each方法.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
9 |
10 |
48 |
49 |
50 | - 我是第1个li
51 | - 我是第2个li
52 | - 我是第3个li
53 | - 我是第4个li
54 | - 我是第5个li
55 | - 我是第6个li
56 | - 我是第7个li
57 | - 我是第8个li
58 | - 我是第9个li
59 | - 我是第10个li
60 |
61 |
62 |
63 |
64 |
--------------------------------------------------------------------------------
/test01/06-判断是否是数组或者类数组.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Title
6 |
7 |
8 |
47 |
48 |
--------------------------------------------------------------------------------
/jquery-cc.js:
--------------------------------------------------------------------------------
1 | //jQuery整体就是一个匿名函数自调用,防止全局变量污染
2 | //第一个参数:global, 在浏览器中运行时,传递的是window
3 | //第二个参数:factory,这个函数返回一个jQuery工厂函数
4 | //在jQuery1.7版本之前,jQuery不支持模块化,只需要一个global参数即可,第二个参数是为了支持模块化而设计的。
5 | (function (global, factory) {
6 |
7 | factory(global);
8 |
9 | })(window, function (window) {
10 | //缓存变量,下次使用效率更高,并且可以进行压缩。
11 | var version = "1.0.0";
12 | var arr = [];
13 | var document = window.document;
14 | var slice = arr.slice;
15 | var push = arr.push;
16 |
17 |
18 | //创建jQuery函数
19 | var jQuery = function (selector) {
20 | //使用工厂函数创建jQuery函数
21 | return new jQuery.fn.init(selector);
22 | };
23 |
24 | //替换jQuery原型属性,起一个别名jQuery.fn,方便使用
25 | jQuery.fn = jQuery.prototype = {
26 | constructor: "jQuery",//修改构造器
27 | jquery: version,//jquery版本
28 | length: 0,//默认长度
29 | toArray: function () {
30 | //将jQuery对象转换成数组
31 | return slice.call(this);
32 | },
33 | get: function (index) {
34 | //如果num传了空,返回所有的数据
35 | if (index == null) {
36 | return this.toArray();
37 | }
38 | //如果是负数,倒过来取,否则顺序取
39 | return index < 0 ? this[index + this.length] : this[index];
40 | },
41 | slice: function (start, end) {
42 | //对jQuery对象进行截取,返回jQuery对象
43 | var tempArr = slice.call(this, start, end);
44 | return this.pushStack(tempArr);
45 | },
46 | eq: function (index) {
47 | return this.pushStack(this.get(index));
48 | },
49 | first: function () {
50 | return this.eq(0);
51 | },
52 | last: function () {
53 | return this.eq(this.length - 1);
54 | },
55 | push: push,
56 | sort: arr.sort,
57 | splice: arr.splice,
58 | ready: function (fn) {
59 | //如果DOM已经构建完毕了,就没必要注册事件了,直接调用即可。
60 | if (document.readyState === "complete") {
61 | fn();
62 | } else {
63 | document.addEventListener("DOMContentLoaded", fn);
64 | }
65 | return this;
66 | },
67 | each: function (callback) {
68 | jQuery.each(this, callback);
69 | return this;
70 | },
71 | map: function (callback) {
72 | return this.pushStack(jQuery.map(this, callback));
73 | },
74 | pushStack: function (eles) {
75 | //创建一个新的实例
76 | var newObj = jQuery(eles);
77 | newObj.prevObject = this;
78 | return newObj;
79 | },
80 | end: function () {
81 | return this.prevObject || jQuery();
82 | }
83 | };
84 |
85 | //jQuery对象的扩展方法
86 | jQuery.extend = jQuery.fn.extend = function () {
87 | var arg = arguments;
88 | var length = arg.length;
89 | var target = arg[0];
90 | var i = 1;
91 | //如果只传了一个参数,将对象添加到this身上即可。
92 | if (length === 1) {
93 | target = this;
94 | i = 0;
95 | }
96 |
97 | //从i开始,把所有的对象的值都添加到第一个参数中
98 | for (; i < length; i++) {
99 | for (var k in arg[i]) {
100 | if (arg[i].hasOwnProperty(k)) {
101 | target[k] = arg[i][k];
102 | }
103 | }
104 | }
105 |
106 | };
107 | //给jQuery添加的静态方法,判断对象是否是一个类数组
108 | jQuery.extend({
109 | isArrayLike: function (obj) {
110 | //如果obj是假值,或者obj没有length属性,length为false,否则length为obj.length
111 | var length = !!obj && "length" in obj && obj.length;
112 | //如果obj是函数类型 或者window类型,直接返回false
113 | //因为函数和window都是object类型,并且他们都有length属性。
114 | if (typeof obj === "function" || obj === window) {
115 | return false;
116 | }
117 |
118 | //如果是数组,返回true
119 | if (obj instanceof Array) {
120 | return true;
121 | }
122 |
123 | //如果有长度,且长度为0,返回true
124 | if (length === 0) {
125 | return true;
126 | }
127 |
128 | //如果有长度,且长度>0,那么 length-1对应的下标必须存在。
129 | if (typeof length === "number" && length >= 0 && (length - 1) in obj) {
130 | return true;
131 | }
132 | return false;
133 | },
134 | each: function (obj, callback) {
135 |
136 | if ("length" in obj) {
137 | for (var i = 0; i < obj.length; i++) {
138 | var result = callback.call(obj[i], i, obj[i]);
139 | if (result === false) {
140 | break;
141 | }
142 | }
143 | } else {
144 | for (var i in obj) {
145 | var result = callback.call(obj[i], i, obj[i]);
146 | if (result === false) {
147 | break;
148 | }
149 | }
150 | }
151 |
152 | return obj;
153 |
154 | },
155 | map: function (obj, callback) {
156 | var arr = [];
157 | if ("length" in obj) {
158 | for (var i = 0; i < obj.length; i++) {
159 | var result = callback.call(obj[i], i, obj[i]);
160 | if (result != null) {
161 | arr.push(obj[i]);
162 | }
163 | }
164 | } else {
165 | for (var i in obj) {
166 | var result = callback.call(obj[i], i, obj[i]);
167 | if (result != null) {
168 | arr.push(obj[i]);
169 | }
170 | }
171 | }
172 |
173 | return arr;
174 | },
175 | type: function (obj) {
176 | //获取对象的类型
177 | //如果是null,直接返回null, 如果是undefined,返回undefined
178 | if (obj == null) {
179 | return obj + "";
180 | }
181 |
182 | var temp = Object.prototype.toString.call(obj);
183 | temp = temp.split(" ")[1].slice(0, -1);
184 | return typeof obj === "object" ?
185 | temp || "object" :
186 | typeof obj;
187 | },
188 | getStyle: function (ele, styleName) {
189 | //获取元素计算后的样式
190 | if ("getComputedStyle" in window) {
191 | return window.getComputedStyle(ele, null)[styleName];
192 | } else {
193 | return ele.currentStyle[styleName];
194 | }
195 | }
196 | });
197 |
198 | //样式与属性模块
199 | jQuery.fn.extend({
200 | //操作标签的属性节点
201 | attr: function (name, value) {
202 | var arg = arguments;
203 | var argLength = arg.length;
204 | if (argLength == 1) {
205 |
206 | if ($.type(arg[0]) === "string") {
207 | //获取
208 | return this.get(0).getAttribute(arg[0]);
209 | }
210 |
211 | if ($.type(arg[0]) === "Object") {
212 | //设置
213 | this.each(function () {
214 | //遍历对象
215 | for (var k in arg[0]) {
216 | this.setAttribute(k, arg[0][k]);
217 | }
218 | })
219 | }
220 |
221 | }
222 | if (argLength == 2) {
223 | //设置
224 | var name = arg[0];
225 | var value = arg[1];
226 | this.each(function () {
227 | this.setAttribute(name, value);
228 | })
229 | }
230 |
231 | return this;
232 |
233 | },
234 | //操作对象的属性
235 | prop: function (name, value) {
236 | var arg = arguments;
237 | var argLength = arg.length;
238 | if (argLength == 1) {
239 |
240 | if ($.type(arg[0]) === "string") {
241 | //获取
242 | return this.get(0)[arg[0]];
243 | }
244 |
245 | if ($.type(arg[0]) === "Object") {
246 | //设置
247 | this.each(function () {
248 | //遍历对象
249 | for (var k in arg[0]) {
250 | this[k] = arg[0][k];
251 | }
252 | })
253 | }
254 |
255 | }
256 | if (argLength == 2) {
257 | //设置
258 | var name = arg[0];
259 | var value = arg[1];
260 | this.each(function () {
261 | this[name] = value;
262 | })
263 | }
264 |
265 | return this;
266 | },
267 | //操作value属性
268 | val: function (val) {
269 | var arg = arguments;
270 | //不传参数是获取
271 | if (arg.length === 0) {
272 | return this.prop("value");
273 | }
274 |
275 | //传一个参数是设置
276 | if (arg.length === 1) {
277 | return this.prop("value", val);
278 | }
279 | },
280 | //操作style属性
281 | css: function (name, value) {
282 | var arg = arguments, length = arg.length;
283 | if (length === 1) {
284 |
285 | //获取
286 | if (jQuery.type(name) === "string") {
287 | return $.getStyle(this.get(0), name);
288 | }
289 |
290 | //设置
291 | if (jQuery.type(name) === "Object") {
292 | this.each(function () {
293 | for (var k in name) {
294 | this.style[k] = name[k];
295 | }
296 | });
297 | }
298 | }
299 | //两个参数,表示设置
300 | if (length == 2) {
301 | this.each(function () {
302 | this.style[name] = value;
303 | })
304 | }
305 | return this;
306 | },
307 | //判断class
308 | hasClass: function (name) {
309 | //思路:只要有其中一个对象有对应的class,就返回true
310 | name = " " + name.trim() + " ";
311 | //假设不存在
312 | var flag = false;
313 |
314 | this.each(function () {
315 |
316 | //给className前后都拼接上空格
317 | var className = " " + this.className + " ";
318 |
319 | if (className.indexOf(name) > -1) {
320 | //只要找到了,就返回true
321 | flag = true;
322 |
323 | //如果是true,直接退出
324 | return false;
325 | }
326 | });
327 | return flag;
328 | },
329 | //添加class
330 | addClass: function (name) {
331 | var names = name.split(" ");
332 | this.each(function () {
333 | var tempStr = this.className;
334 | for (var i = 0; i < names.length; i++) {
335 | //如果没有,就添加
336 | if (!$(this).hasClass(names[i])) {
337 | tempStr += " " + names[i];
338 | }
339 | }
340 | this.className = tempStr.trim();
341 | });
342 | return this;
343 | },
344 | //移除class
345 | removeClass: function (name) {
346 | var names = name.split(" ");
347 | this.each(function () {
348 | for (var i = 0; i < names.length; i++) {
349 | //如果没有,就添加
350 | if ($(this).hasClass(names[i])) {
351 | this.className = " " + this.className + " ";
352 | this.className = this.className.replace(" " + names[i] + " ", " ").trim();
353 | }
354 | }
355 | });
356 | return this;
357 |
358 | },
359 | //切换类
360 | toggleClass: function (name) {
361 | var names = name.split(" ");
362 | this.each(function () {
363 | for (var i = 0; i < names.length; i++) {
364 | //如果没有,就添加
365 | if ($(this).hasClass(names[i])) {
366 | $(this).removeClass(names[i]);
367 | } else {
368 | $(this).addClass(names[i]);
369 | }
370 | }
371 |
372 | });
373 | return this;
374 | }
375 | });
376 | //节点操作模块
377 | jQuery.fn.extend({
378 | /**
379 | * 操作标签内容(innerHTML)
380 | 1. 如果不传参数,获取第一个元素对应的内容
381 | 2. 如果传参数表示设置,设置所有的元素
382 | 2.1 如果参数是null,清空原来的内容
383 | 2.2 如果参数是字符串,清空原来的内容并覆盖
384 | * @param val
385 | * @returns {*}
386 | */
387 | html: function (val) {
388 | //获取
389 | if (arguments.length === 0) {
390 | return this.get(0).innerHTML;
391 | }
392 | //设置
393 | if (arguments.length === 1) {
394 | if (val === null) {
395 | val = "";
396 | }
397 | if (typeof val === "string") {
398 | this.each(function () {
399 | this.innerHTML = val;
400 | });
401 | }
402 | }
403 | return this;
404 | },
405 | /*
406 | 操作标签内容(innerText)
407 | 1. 如果不传参数,将所有元素的文本拼接成一个字符串
408 | 2. 如果传参数表示设置,设置所有的元素
409 | 2.1 如果参数是null,清空原来的内容
410 | 2.2 如果参数是字符串,清空原来的内容并覆盖
411 | */
412 | text: function (val) {
413 | //获取
414 | if (arguments.length === 0) {
415 | var tempStr = "";
416 | this.each(function () {
417 | tempStr += this.innerText + "\n";
418 | });
419 | return tempStr;
420 | }
421 | //设置
422 | if (arguments.length === 1) {
423 | if (val === null) {
424 | val = "";
425 | }
426 | if (typeof val === "string") {
427 | this.each(function () {
428 | this.innerText = val;
429 | });
430 | }
431 | }
432 | return this;
433 | },
434 |
435 | /**
436 | * 清空当前元素的所有内容
437 | * @returns {jQuery}
438 | */
439 | empty: function () {
440 | this.html(null);
441 | return this;
442 | },
443 | /**
444 | * 自杀
445 | * @returns {jQuery}
446 | */
447 | remove: function () {
448 | this.each(function () {
449 | this.parentNode.removeChild(this);
450 | });
451 | return this;
452 | },
453 |
454 | /**
455 | * 将当前jQuery对象添加到指定元素的最后面
456 | * @param selector 选择器、DOM对象、Jquery对象
457 | * @returns {jQuery}
458 | */
459 | appendTo: function (selector) {
460 | //无论传什么参数,都转换成jq对象
461 | var target = $(selector);
462 | var that = this;//将this存储到that中,方便使用
463 |
464 | //使用数组将所有对象储存起来
465 | var tempArr = [];
466 | //需要将that添加到每一个target DOM元素中
467 | target.each(function (i) {
468 |
469 | var _target = this;
470 | that.each(function () {
471 | //将遍历出来的DOM对象添加到目标对象中,如果第二次以上添加,需要克隆当前对象
472 | var temp = i === 0 ? this : this.cloneNode(true);
473 | _target.appendChild(temp);
474 | tempArr.push(temp)
475 | })
476 | });
477 |
478 | return this.pushStack(tempArr);
479 | },
480 |
481 | /**
482 | * 给自己添加子元素
483 | * @param value jq对象 dom对象 内容(会创建)
484 | * @returns {jQuery} 当前对象,
485 | */
486 | append: function (value) {
487 | /*
488 | 实现思路:
489 | 1. 如果参数类型是字符串,直接使用innerHTML进行追加即可
490 | 2. 如果参数是DOM对象,或者JQ对象,统一使用jQuery方法进行包装
491 | 3. 借助append方法进行实现
492 | */
493 | if (typeof value === "string") {
494 | this.each(function () {
495 | this.innerHTML += value;
496 | });
497 | } else {
498 | jQuery(value).appendTo(this);
499 | }
500 | return this;
501 | },
502 | /**
503 | * 添加到最前面
504 | * @param selector
505 | * @returns {*}
506 | */
507 | prependTo: function (selector) {
508 | //无论传什么参数,都转换成jq对象
509 | var target = $(selector);
510 | var that = this;//将this存储到that中,方便使用
511 |
512 | //使用数组将所有对象储存起来
513 | var tempArr = [];
514 | //需要将that添加到每一个target DOM元素中
515 | target.each(function (i) {
516 | var _target = this;
517 | //为了保证顺序,需要逆向遍历
518 | for (var j = that.length - 1; j >= 0; j--) {
519 | //将遍历出来的DOM对象添加到目标对象中,如果第二次以上添加,需要克隆当前对象
520 | var temp = i === 0 ? that[j] : that[j].cloneNode(true);
521 | _target.insertBefore(temp, _target.firstChild);
522 | tempArr.push(temp)
523 | }
524 |
525 | });
526 |
527 | return this.pushStack(tempArr);
528 | },
529 | prepend: function (value) {
530 | if (typeof value === "string") {
531 | this.each(function () {
532 | this.innerHTML = vlaue + this.innerHTML;
533 | });
534 | } else {
535 | jQuery(value).prependTo(this);
536 | }
537 | return this;
538 | },
539 |
540 | //获取所有的子元素
541 | children: function () {
542 | //实现思路:把所有DOM对象的孩子获取到,存储到一个数组返回即可。
543 | var tempArr = [];
544 | this.each(function () {
545 | push.apply(tempArr, this.children);
546 | });
547 | return this.pushStack(tempArr);
548 | },
549 | //获取所有DOM对象的下一个兄弟节点
550 | next: function () {
551 |
552 | var tempArr = [];
553 | this.each(function () {
554 | push.call(tempArr, this.nextElementSibling);
555 | });
556 | return this.pushStack(tempArr);
557 |
558 | }
559 | });
560 |
561 |
562 | //jquery内部隐藏的构造函数(入口函数)
563 | var init = jQuery.fn.init = function (selector) {
564 |
565 | //处理假值的情况。$() $('') $(false) $(null) $(undefined) $(NaN) $(0)
566 | if (!selector) {
567 | return this;
568 | }
569 |
570 | //处理参数是字符串的情况 $("") $(".box")
571 | if (typeof selector === "string") {
572 | //如果是标签
573 | if (selector[0] === "<"
574 | && selector[selector.length - 1] === ">"
575 | && selector.length >= 3) {
576 | var tempDiv = document.createElement("div");
577 | tempDiv.innerHTML = selector;
578 | push.apply(this, tempDiv.children);
579 | } else {
580 | //如果不是标签,当成选择器使用
581 | var tempResult = document.querySelectorAll(selector);
582 | push.apply(this, tempResult);
583 | }
584 | return this;
585 | }
586 |
587 |
588 | //处理参数:如果是数组或者类数组
589 | if (jQuery.isArrayLike(selector)) {
590 | push.apply(this, selector);
591 | return this;
592 | }
593 |
594 | //参数是函数
595 | if (typeof selector === "function") {
596 | this.ready(selector);
597 | }
598 |
599 | //如果是其他
600 | this[0] = selector;
601 | this.length = 1;
602 | return this;
603 |
604 | };
605 |
606 | //构造函数的原型与工厂函数的原型一致。
607 | init.prototype = jQuery.fn;
608 |
609 |
610 | //对外暴露了两个变量。
611 | window.$ = window.jQuery = jQuery;
612 | return jQuery;
613 | });
614 |
--------------------------------------------------------------------------------