非常适合新手的jq/zepto源码分析04

简介: $.extend = function(target){ var deep, args = slice.call(arguments, 1) if (typeof target == 'boolean') { deep = target target = args.
  $.extend = function(target){
            var deep, args = slice.call(arguments, 1)
            if (typeof target == 'boolean') {
                deep = target
                target = args.shift()
            }
            args.forEach(function(arg){ extend(target, arg, deep) })
            return target
   }

  

扩展函数 第一个参数为boolean true 则深扩展,

 

        zepto.qsa = function(element, selector){
            var found,
                maybeID = selector[0] == '#',
                maybeClass = !maybeID && selector[0] == '.',
                nameOnly = maybeID || maybeClass ? selector.slice(1) : selector, // Ensure that a 1 char tag name still gets checked
                isSimple = simpleSelectorRE.test(nameOnly)
            return (element.getElementById && isSimple && maybeID) ? // Safari DocumentFragment doesn't have getElementById
                ( (found = element.getElementById(nameOnly)) ? [found] : [] ) :
                (element.nodeType !== 1 && element.nodeType !== 9 && element.nodeType !== 11) ? [] :
                    slice.call(
                        isSimple && !maybeID && element.getElementsByClassName ? // DocumentFragment doesn't have getElementsByClassName/TagName
                            maybeClass ? element.getElementsByClassName(nameOnly) : // If it's simple, it could be a class
                                element.getElementsByTagName(selector) : // Or a tag
                            element.querySelectorAll(selector) // Or it's not simple, and we need to query all
                    )
        }

  

getElementByClassName     通过class获取节点

getElementByTagName    通过标签回去

 

获取单个选择器

 

   $.contains = document.documentElement.contains ?
            function(parent, node) {
                return parent !== node && parent.contains(node)
            } :
            function(parent, node) {
                while (node && (node = node.parentNode))
                    if (node === parent) return true
                return false
            }

  

document.documentElement.contains    检测某个节点下是否包含传入的子节点

  
$.type = type      //检测对象类型
$.isFunction = isFunction      //是否为函数
$.isWindow = isWindow      //是否为window对象
$.isArray = isArray      //是否为数组
$.isEmptyObject      //是否为空对象
$.isNumeric        //是否为有效数字
$.inArray         //array的indexof
$.camelCase        //驼峰命名
$.trim           //去空
$.map           //遍历函数,返回一个返回值的集合数组
$.each           //遍历元素执行函数
$.grep           //array的filter函数



代码仅供参考,具体功能可以自己扩展。

http://www.cnblogs.com/jiebba/p/6529854.html 

http://www.cnblogs.com/jiebba    我的博客,来看吧!

如果有错误,请留言修改下 哦!

 

相关文章
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
40 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
2月前
|
JavaScript 开发者
vue指令的开发看这篇文章就够了!超详细,赶快收藏!
【10月更文挑战第8天】vue指令的开发看这篇文章就够了!超详细,赶快收藏!
vue指令的开发看这篇文章就够了!超详细,赶快收藏!
|
7月前
|
存储 前端开发 中间件
🚀React+Node全栈无死角解析,吃透文件上传的各个场景
🚀React+Node全栈无死角解析,吃透文件上传的各个场景
|
JavaScript 前端开发 API
Vue.js入门指南:从基础到进阶,掌握现代JavaScript框架的核心概念与高级特性(2W字小白教程)
Vue.js入门指南:从基础到进阶,掌握现代JavaScript框架的核心概念与高级特性(2W字小白教程)
187 0
|
JavaScript 前端开发
📕 重学JavaScript:如何实现一个`new`?
如何实现一个new的效果呢?
129 0
|
JavaScript 前端开发
Vue内部原理(三)| 小册免费学
JavaScript中Array.prototype上有很多常用的方法,MDN上也给出了介绍,虽然方法众多,但是可以改变数组内容的只有7个(fill和copyWithin处于试验阶段,所以源码中没有适配),分别是:pop、push、shift、unshift、splice、sort、reverse。
78 0
|
JavaScript API
# Vue内部原理(四)| 小册免费学
与依赖收集相关的模块是:Dep实例负责维护属性的依赖列表,Watcher就是Dep实例维护的观察者队列中的观察者
92 0
|
JavaScript 前端开发
Vue内部原理(二)| 小册免费学
上一讲主要介绍了数据劫持相关的概念,现在起我们正式进入到Vue的数据绑定原理,开始感受Vue源码的精妙
89 0
|
JavaScript
js基础笔记学习155-闭包简介1
js基础笔记学习155-闭包简介1
74 0
js基础笔记学习155-闭包简介1
|
XML JavaScript 前端开发
Vue 完整版与非完整版的区别和使用方法
在使用Vue的时候,分为两个版本 一个是完整版(vue.js), 另一个是非完整版也叫运行时版本(vue.runtime.js)。
188 0
Vue 完整版与非完整版的区别和使用方法
下一篇
DataWorks