jQuery

jQuery 类似一个封装好的函数,提供给我们各种方法,同样的需求下,使用 jQuery 让开发者少敲很多代码并且解决不同浏览器兼容性的问题。
补全以下代码

window.jQuery = ???
window.$ = jQuery

var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

细节
封装函数

function getSiblings(node){
    // write some code...
}

命名空间

命名空间可以防止污染全局变量。

var jQuery = {}
jQuery.getSiblings = function(node){ 
    // write some code...
}
jQuery.setText = function(node){
    // write some code...
}

// 调用函数时
jQuery.getSiblings(node)
jQuery.setText(node)

把node提前

// 调用函数时
node.getSiblings()
$node.getSiblings()

事实上, jQuery 的属性和方法保存于 jQuery.prototype。不过这里不采用这种方法。

方法一:扩展 Node 接口。直接在 Node.prototype 上加函数。可能的风险是覆盖原生的属性和方法。

Node.prototype.getSiblings = function(){
    // write some code...
}

方法二:添加新的接口。这叫做「无侵入」。

window.jQuery = function(nodeOrString){
            let nodes = {};
            if (typeof nodeOrString === 'string'){
                var tmp = document.querySelectorAll(nodeOrString);
                for (var i = 0; i < tmp.length; i++) {
                    nodes[i] = tmp[i];
                }
                nodes.length = tmp.length;
            } else if (nodeOrString instanceof node){
                nodes = {
                    0: nodeOrString,
                    length: 1
                }
            }
            nodes.addClass = function(classes){
                for(var i = 0; i < nodes.length; i++) {
                    nodes[i].classList.add(classes);
                }
            }
            nodes.setText = function(text){
                for(var i = 0; i < nodes.length; i++) {
                    nodes[i].textContent = text;
                }
            }
            return nodes;
        }
window.$ = jQuery

var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • /*! jQuery JavaScript Library v1.4.2 http://jquery.com/ C...
    ssttIsme阅读 1,997评论 2 0
  • 阮一峰jQuery 不要学jquery mobile 获取某个节点的所有兄弟姐妹 ul>li[id=item$]{...
    tsl1127阅读 381评论 0 2
  • 完整代码 (function(global, factory) { typeof define === 'fun...
    tzujun阅读 909评论 0 0
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,422评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,217评论 0 1