一般我看源码的tricks，找到core.js,一些精简的库，cmd+J,cmd+K,cmd+0（VSCode）;得到方法折叠，然后再一层层展开看结构；
jQuery 阶段性的选择，在那个阶段，解决了那个阶段的问题；
github彻底移除jquery - blog( why | how )

设计理念

回归增强

  • Regressive Enhancement
  • 为系统的特性设定基线，并应用到较老的设备和浏览器中

    dir

  • 3.1.0
    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
    136
    137
    138
    ➜  jquery tree
    .
    ├── AUTHORS.txt
    ├── LICENSE.txt
    ├── README.md
    ├── brower.json
    ├── dist
    │   ├── core.js
    │   ├── jquery.js
    │   ├── jquery.min.js
    │   ├── jquery.min.map
    │   ├── jquery.slim.js
    │   ├── jquery.slim.min.js
    │   └── jquery.slim.min.map
    ├── external
    │   └── sizzle
    │       └── dist
    │           └── LICENSE.txt
    ├── package.json
    └── src
        ├── ajax
        │   ├── jsonp.js
        │   ├── load.js
        │   ├── parseXML.js
        │   ├── script.js
        │   ├── var
        │   │   ├── location.js
        │   │   ├── nonce.js
        │   │   └── rquery.js
        │   └── xhr.js
        ├── ajax.js
        ├── attributes
        │   ├── attr.js
        │   ├── classes.js
        │   ├── prop.js
        │   ├── support.js
        │   └── val.js
        ├── attributes.js
        ├── callbacks.js
        ├── core
        │   ├── DOMEval.js
        │   ├── access.js
        │   ├── init.js
        │   ├── parseHTML.js
        │   ├── ready-no-deferred.js
        │   ├── ready.js
        │   ├── readyException.js
        │   ├── support.js
        │   └── var
        │       └── rsingleTag.js
        ├── core.js
        ├── css
        │   ├── addGetHookIf.js
        │   ├── adjustCSS.js
        │   ├── curCss.js
        │   ├── hiddenVisibleSelector.js
        │   ├── showHide.js
        │   ├── support.js
        │   └── var
        │       ├── cssExpand.js
        │       ├── getStyles.js
        │       ├── isHiddenWithinTree.js
        │       ├── rmargin.js
        │       ├── rnumnonpx.js
        │       └── swap.js
        ├── css.js
        ├── data
        │   ├── Data.js
        │   └── var
        │       ├── acceptData.js
        │       ├── dataPriv.js
        │       └── dataUser.js
        ├── data.js
        ├── deferred
        │   └── exceptionHook.js
        ├── deferred.js
        ├── deprecated.js
        ├── dlimensions.js
        ├── effects
        │   ├── Tween.js
        │   └── animatedSelector.js
        ├── effects.js
        ├── event
        │   ├── ajax.js
        │   ├── alias.js
        │   ├── focusin.js
        │   ├── support.js
        │   └── trigger.js
        ├── event.js
        ├── exports
        │   ├── amd.js
        │   └── global.js
        ├── jquery.js
        ├── manipulation
        │   ├── _evalUrl.js
        │   ├── buildFragment.js
        │   ├── getAll.js
        │   ├── setGlobalEval.js
        │   ├── support.js
        │   ├── var
        │   │   ├── rcheckableType.js
        │   │   ├── rscriptType.js
        │   │   └── rtagName.js
        │   └── wrapMap.js
        ├── manipulation.js
        ├── offset.js
        ├── queue
        │   └── delay.js
        ├── queue.js
        ├── selector-native.js
        ├── selector-sizzle.js
        ├── selector.js
        ├── serialize.js
        ├── traversing
        │   └── var
        │       └── findFilter.js
        ├── traversing.js
        ├── var
        │   ├── ObjectFunctionString.js
        │   ├── arr.js
        │   ├── class2type.js
        │   ├── concat.js
        │   ├── document.js
        │   ├── documentElement.js
        │   ├── fnToString.js
        │   ├── getProto.js
        │   ├── hasOwn.js
        │   ├── indexOf.js
        │   ├── pnum.js
        │   ├── push.js
        │   ├── rcssNum.js
        │   ├── rnotwhile.js
        │   ├── slice.js
        │   ├── support.js
        │   └── toString.js
        └── wrap.js

    24 directories, 110 files

    $

    $ 本质是个函数
1
2
3
4
$
jQuery.noConflict()
$
jQuery

jQuery在占用$之前，先保存了原来的$,调用jQuery.noConflict()时会把原来保存的变量还原

选择器

  • 层级选择器
  • 子选择器
  • 过滤器
  • 表单相关

example

data() 方法向被选元素附加数据，或者从被选元素获取数据。
self.find(‘#xxx tr:last’).data().id = rows.sub_categories[i].id;
self.find(“#xxx”).children().eq(i).data(“id”)

扩展

我们可以扩展jquery来实现自定义方法—— 编写jquery插件

1
2
3
4
5
6
7
$.fn.testfunc = function() {
  this.css('color', '#fffceb');
  return this; // 因为jquery对象支持链式操作，扩展方法也要能继续链式下去
}
$.fn.testfunc.defaults = {
  color: '#ffffff'
}

默认值处理： || && (可以这么处理)

编写插件原则：

  1. 给$.fn绑定函数，实现插件的代码逻辑；
  2. 插件函数最后要return this，以支持链式调用；
  3. 插件函数要有默认值，绑定在$.fn..defaults上；
  4. 调用时可传入设定值以便覆盖默认值
  5. 过滤特定元素

事件

动画

一些jquery的项目

  • The No Hassle JavaScript Colorpicker（bgrins.github.io/spectrum/）

basics

module.js

1
2
3
4
5
6
;(function(){
  'use strict'
})();
# 自执行函数
# 第一个;是为了如果代码混淆之后，前面的代码如果没有分号，可以避免问题；
# 为什么要放在这个里面，避免全局污染；如果直接var a = 1; 则 window.a = 1;

Others

React17:

1
2
3
4
5
6
7
before17:
document.addEventListener() 来监听事件
17:
rootNode.addEventListener()

# 解决了多版本 React 的问题
# 在和 JQuery 一起使用时，降低事件冲突的可能性

ajax

  • https://api.jquery.com/jQuery.ajax/
    1
    2
    3
    async (default: true)
    Type: Boolean
    By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done().