├── README.md ├── jquery-1.7.js ├── jquery-3.2.1.js ├── jquery-cc.js ├── test01 ├── 01-入口函数不同参数的处理.html ├── 02-init函数处理.html ├── 03-如何判断一个html字符串.html ├── 04-init函数处理false值与字符串.html ├── 05-测试选择器-处理字符串.html ├── 06-判断是否是数组或者类数组.html ├── 07-测试类数组判断的方法.html └── 08-测试入口函数.html ├── test02 ├── 01-DOM构建完毕事件.html ├── 02-ready处理.html ├── 03-测试ready入口函数.html ├── 04-jQuery实例上的核心成员.html ├── 05-伪数组.html ├── 06-测试each方法.html ├── 07-测试end方法.html └── 08-测试extend方法.html ├── test03 ├── 01-attr与prop.html ├── 02-test.html ├── 03-attr方法测试.html ├── 04-val方法设置.html ├── 05-css方法测试.html ├── 06-hasClass方法测试.html ├── 07-addClass测试.html ├── 08-removeClass测试.html └── 09-toggleClass测试.html └── test04 ├── 01-html方法测试.html ├── 02-empty方法与remove方法测试.html ├── 03-appendTo方法实现.html ├── 04-append方法测试.html ├── 05-prependTo方法测试.html ├── 06-children方法测试.html └── 07-next方法测试.html /README.md: -------------------------------------------------------------------------------- 1 | # 介绍 2 | 3 | 这个框架是模仿jquery而搭建的 4 | 5 | # jq环境搭建 6 | > jquery对象暴露了两个变量，`$`与`jQuery`，这两个变量指向同一个函数。 7 | > 8 | 9 | 10 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /test01/01-入口函数不同参数的处理.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 34 | 35 | -------------------------------------------------------------------------------- /test01/02-init函数处理.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /test01/03-如何判断一个html字符串.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /test01/04-init函数处理false值与字符串.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 35 | 36 | -------------------------------------------------------------------------------- /test01/05-测试选择器-处理字符串.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /test01/06-判断是否是数组或者类数组.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 47 | 48 | -------------------------------------------------------------------------------- /test01/07-测试类数组判断的方法.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 | 22 | 23 | -------------------------------------------------------------------------------- /test01/08-测试入口函数.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 | 20 | 21 | -------------------------------------------------------------------------------- /test02/01-DOM构建完毕事件.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 35 | 36 | 37 |
111
38 |

222

39 | 40 | -------------------------------------------------------------------------------- /test02/02-ready处理.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 35 |
36 | 37 | -------------------------------------------------------------------------------- /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/04-jQuery实例上的核心成员.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 | 35 | 36 | 37 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /test02/05-伪数组.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /test02/06-测试each方法.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 | 48 | 49 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /test02/07-测试end方法.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 | 19 | 20 | 21 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /test02/08-测试extend方法.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /test03/01-attr与prop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 |
10 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /test03/02-test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 |
10 | 17 | 18 |
19 | 20 | 21 | 22 | 28 | 29 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /test03/04-val方法设置.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 21 | 22 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /test03/06-hasClass方法测试.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 15 | 16 | 17 | 18 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /test03/07-addClass测试.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 15 | 16 | 17 | 18 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /test03/08-removeClass测试.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 15 | 16 | 17 | 18 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /test03/09-toggleClass测试.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 | 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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------