Fork me on GitHub

选择无后端的评论第三方库【valine】

1.注册 leanClound 账号创建一个开发应用获取 AppID 和 AppKey

2.安装valine包 npm i valine –save

3.创建comment.vue组件 

<template>
    <div class="vcomment">
        <div id="vcomments"></div>
    </div>
</template>

<script>
export default {
    mounted: function(){
        this.createValine()
    },
    methods: {
        createValine() {
            import('valine').then(Valine=>{
                new Valine.default({
                    el: '#vcomments',
                    appId: '',
                    appKey: '',
                    notify: false,
                    verify: false,
                    avatar: 'monsterid',
                    path: location.pathname,
                    placeholder: '欢迎留言与我分享您的想法...',
                });
            })
        }
    },
    watch: {
        '$route' (to, from) {
            if(to.path !==  from.path){
                setTimeout(() => {
                    //重新刷新valine
                    this.createValine()
                }, 300)
            }

            /**
             * TODO:
             * 1. 使用其他方法更新评论组件 或者使用其他较为好用的评论组件
             * 2. 添加categories and tag
             * 3. 更换其他主题
             */
        }
    }
}
</script>

<style scoped>
#vcomments {
    max-width:740px;
    padding:10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
</style>

展开全文 >>

VuePress使用教程

使用VuePress

安装vuepress前，请确保你的 Node.js 版本 >= 8 .参考
备注:官网地址

# 将 vuepress 作为一个本地依赖安装
npm install -D vuepress

# 新建一个 docs 文件夹
mkdir docs

# 新建一个 markdown 文件
echo '# Hello VuePress!' > docs/README.md

# 预览网站
npx vuepress dev docs

接着，在 package.json 里加一些脚本:

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

预览网站

npm run docs:dev
// .vuepress/config.js
module.exports = {
    title: '基础组件',
    description: '基础组件',
    head: [ // 注入到当前页面的 HTML <head> 中的标签
        ['link', { rel: 'icon', href: '/logo.jpg' }], // 增加一个自定义的 favicon(网页标签的图标)
    ],
    base: '/', // 这是部署到github相关的配置
    markdown: {
        lineNumbers: false // 代码块显示行号 好像没什么效果
    },
    themeConfig: {
        nav:[ // 顶部导航栏配置
            {text: '前端基础', link: '/test/' },
            {text: '算法题库', link: '/one/'}
        ],
        sidebar: // 左侧边栏配置
        [
            {
                title: '业务组件',
                collapsable: true, //是否展开
                children: [{
                    title: 'demo',
                    path: '/demo/'
                },]
            },
            ['/test/','测试'],
            ['/one/','组件测试']
        ], 
        sidebarDepth: 2, // 侧边栏显示2级 好像没什么效果
    }
};

在markdown中使用Vue

在.vuepress中创建components文件夹。 所有在 .vuepress/components 中找到的 *.vue 文件将会自动地被注册为全局的异步组件。

如果需要引入静态文件，可以在.vuepress下新建public文件夹，里面可以放静态文件。

.
└─ .vuepress
   └─ components
      ├─ demo-1.vue
      └─ Icon
         └─ vi-icon.vue

可以直接使用这些组件在任意的 Markdown 文件中（组件名是通过文件名取到的）

<demo-1/>
<Icon-vi-icon/> //文件名和组件名之间同`-`连接

展开全文 >>

工作中记录的点点滴滴问题

记录工作中的一些疑问，疑难杂症，简单的细节。
随着工作时间越来越长遇到的问题也会越来越多，踩到的坑越来越多，
好的习惯是将它们一一记录，以便下次快速翻查。

好奇疑问

  1. markdown如何添加锚点

    - [标题名](#给标题取得一个id，一般与标题同名即可)
### <a id="给标题取得一个id，一般与标题同名即可">标题名</a>

  2. 数组中去除对象, 根据对象中的某个key名重复的简单方法

    const arr = [
    { name:’xiaoming’, age:11 },
    { name:’xiaohua’, age:18 },
    { name:’xiaoming’, age:10 }
    ]
    现在需要把name重复的剔除。

    function unique({arr=[],key}){
    if(!key){
        return arr;
    }
    let hash = {}; 
    arr = arr.reduce(function(item, next) { 
        hash[next[key]] ? '' : hash[next[key]] = true && item.push(next); 
        return item 
    }, []) 
    return arr;
}

  3. 如何预览PDF文件（用单个闭合标签多个iframe会被渲染成一个iframe）

    <iframe src="xxx.pdf"></iframe>

  4. markdown文章章节如何 展开 & 收起

    <!--details中添加open属性可展开内容-->
<details>
    <summary>展开查看</summary>
    <pre>
        展开内容
    </pre>
</details>

  5. 如何创建微信公众号并发布文章，并且可以查看历史文章

    先申请一个微信公众号，然后创建

  6. 相对地址绝对地址转换方法（也可以用 new URL）

    function relative2absolute(url, base) {
    let ele = document.createElement('a');
    ele.href = (base || '') + url;
    return eleLink.href;
}

  7. 微信公众号VUE页面缓存

    location / {
	root /opt/static/xxxx;
	index index.html;
	autoindex on;
	directio   512;
	output_buffers 1 128k;
	open_file_cache max=1000 inactive=30s;
	open_file_cache_valid 30s;
	open_file_cache_min_uses 2;
	open_file_cache_errors on;
	#### 清除缓存
	add_header Last-Modified $date_gmt;
	add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
	if_modified_since off;
	expires off;
	etag off;
}

  8. node-sass安装失败

    sudo npm install node-sass --unsafe-perm --save-dev

  9. mac文件只有读功能

    sudo chmod -R 777 '文件路径'

  10. 如何将本地项目(远端没有)推送到远端github上面

    // 1.在远端仓库创建一个与本地同名的项目
// 2.git remote add origin https://github.com/MrRetro/element-form.git
// 3.git push -u origin master

  11. 获取视频第一帧并展示

    /**
 * 获取视频第一帧画面
 * @param eleVideo 当前视频元素
 * @param eleTarget 第一帧渲染到当前元素内
 * @param imgWidth 图片渲染宽度
 * @param imgHeight 图片渲染高度
 * */
export function getVideoFirstImg ({ eleVideo, eleTarget, imgWidth = 400, imgHeight = 300 }) {
  const canvas = document.createElement('canvas')
  const img = document.createElement('img')
  eleVideo.setAttribute('crossOrigin', 'anonymous')
  canvas.width = eleVideo.clientWidth
  canvas.height = eleVideo.clientHeight
  eleVideo.onloadeddata = () => {
    canvas.getContext('2d').drawImage(eleVideo, 0, 0, canvas.width, canvas.height)
    const dataURL = canvas.toDataURL('image/png')
    img.src = dataURL
    img.width = imgWidth
    img.height = imgHeight
    eleTarget.appendChild(img)
  }
}

  12. 服务端给到的一维数组转成树形结构

    // 例如:
// [
//   {id: 1, name: '2-1', pid: 2},
//   {id: 2, name: '2'}
// ]
// ==> [id:2, name: '2', children: [{id: 1, name: '2-1', pid: 2}]]
function transData(arr, idStr, pidStr, chindrenStr) {
    let result = [],
        hash = {},
        id = idStr,
        pid = pidStr,
        children = chindrenStr,
        i = 0,
        j = 0,
        len = arr.length;
    for (; i < len; i++) {
        hash[arr[i][id]] = arr[i];
    }
    for (; j < len; j++) {
        let aVal = arr[j], hashVP = hash[aVal[pid]];
        if (hashVP) {
            !hashVP[children] && (hashVP[children] = []);
            hashVP[children].push(aVal);
        } else {
            result.push(aVal);
        }
    }
    return result;
}

  13. 金额数字(带小数点)转大写中文

    function convertCurrency(money) {
	let cnNums = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
	let cnIntRadice = ['', '拾', '佰', '仟']
	let cnIntUnits = ['', '万', '亿', '兆']
	let cnDecUnits = ['角', '分', '毫', '厘']
	let cnInteger = '整'
	let cnIntLast = '元'
	let maxNum = 999999999999999.9999
	let integerNum
	let decimalNum
	let chineseStr = ''
	let parts
	if (money === '') {
		return ''
	}
	money = parseFloat(money)
	if (money >= maxNum) {
		return ''
	}
	if (money === 0) {
		chineseStr = cnNums[0] + cnIntLast + cnInteger
		return chineseStr
	}
	money = money.toString()
	if (money.indexOf('.') === -1) {
		integerNum = money
		decimalNum = ''
	} else {
		parts = money.split('.')
		integerNum = parts[0]
		decimalNum = parts[1].substr(0, 4)
	}
	if (parseInt(integerNum, 10) > 0) {
		let zeroCount = 0
		let IntLen = integerNum.length
		for (let i = 0; i < IntLen; i++) {
			let n = integerNum.substr(i, 1)
			let p = IntLen - i - 1
			let q = p / 4
			let m = p % 4
			if (n === '0') {
				zeroCount++
			} else {
				if (zeroCount > 0) {
					chineseStr += cnNums[0]
				}
				zeroCount = 0
				chineseStr += cnNums[parseInt(n)] + cnIntRadice[m]
			}
			if (m === 0 && zeroCount < 4) {
				chineseStr += cnIntUnits[q]
			}
		}
		chineseStr += cnIntLast
	}
	if (decimalNum !== '') {
		let decLen = decimalNum.length
		for (i = 0; i < decLen; i++) {
			n = decimalNum.substr(i, 1)
			if (n !== '0') {
				chineseStr += cnNums[Number(n)] + cnDecUnits[i]
			}
		}
	}
	if (chineseStr === '') {
		chineseStr += cnNums[0] + cnIntLast + cnInteger
	} else if (decimalNum === '') {
		chineseStr += cnInteger
	}
	return chineseStr
}

  14. 通过id和数组找到它的所有父级

    /**
 * 获取节点的所有父级节点
 * @param data 整个树
 * @param nodeId 某节点的id
 * @param idStr 自定义设置唯一标识名称
 * @param childrenStr 自定义设置孩子节点名称
 * */
function getParentNode({data, nodeId, idStr = 'id', childrenStr = 'children'}) {
    let arrRes = [];
    if (data.length === 0) {
      if (nodeId) {
        arrRes.unshift(data)
      }
      return arrRes;
    }
    let rev = (arr, nodeId, pareantId) => {
      for (let i = 0, length = arr.length; i < length; i++) {
        let node = arr[i];
        node._pareantId = pareantId
        if (node[idStr] === nodeId) {
          arrRes.unshift(node)
          rev(data, node._pareantId);
          break;
        } else {
          if (node[childrenStr]) {
            rev(node[childrenStr], nodeId, node[idStr]);
          }
        }
      }
      return arrRes;
    };
    arrRes = rev(data, nodeId);
    return arrRes;
  }

//   let data = [
//     {value: 1, childrens: [{value: 2, childrens: [{value: 3}]}]},
//     {value: 4, childrens: [{value: 5, childrens: [{value: 6}]}]},
//     ]
//   console.log(getParentNode({data, nodeId: 6, idStr: 'value', childrenStr:'childrens'}))

  15. 新建一个shell脚本文件.bat，用于执行shell命令，用来启动全端所有微项目命令

    // window
start cmd /k "cd \work\system && npm run serve"

  16. 字符串对比输出相似度

    // s 字符串1 
// t 字符串2 
// f 小数位数
function similar(s, t, f) {
    if (!s || !t) {
        return 0
    }
    var l = s.length > t.length ? s.length : t.length
    var n = s.length
    var m = t.length
    var d = []
    f = f || 3
    var min = function(a, b, c) {
        return a < b ? (a < c ? a : c) : (b < c ? b : c)
    }
    var i, j, si, tj, cost
    if (n === 0) return m
    if (m === 0) return n
    for (i = 0; i <= n; i++) {
        d[i] = []
        d[i][0] = i
    }
    for (j = 0; j <= m; j++) {
        d[0][j] = j
    }
    for (i = 1; i <= n; i++) {
        si = s.charAt(i - 1)
        for (j = 1; j <= m; j++) {
            tj = t.charAt(j - 1)
            if (si === tj) {
                cost = 0
            } else {
                cost = 1
            }
            d[i][j] = min(d[i - 1][j] + 1, d[i][j - 1] + 1, d[i - 1][j - 1] + cost)
        }
    }
    let res = (1 - d[n][m] / l)
    return res.toFixed(f)
}

vue踩到的坑

  1. 输入框只能输入数字

    <input v-model="value" @input="value=value.replace(/[^\d]/g, '')" />

  2. vue-cli3.3+打包后路径找不到(空白)
    重新配置vue.config.js文件

    module.exports = {
    publicPath: './',
    outputDir: 'dist',
    assetsDir: 'static'
}

  3. 给elementui中的dialog加上拖拽功能

    // v-dialogDrag: 弹窗拖拽
import Vue from 'vue';
let draging = false;
let dragDom: HTMLElement | null;
let dragpoint: { x: number, y: number };
Vue.directive('dialogDrag', {
    bind(el, binding, vnode, oldVnode) {
        let dialogHeaderEl = el.querySelector('.el-dialog__header') as HTMLElement;
        dialogHeaderEl.addEventListener('mousedown', (ev: MouseEvent) => {
        	let target = ev.target as HTMLElement;
        	//由于点击关闭按钮会事件冒泡，取消拖拽
            if (target.classList.contains('el-dialog__close')) {
                return;
            }
            draging = true;
            dragDom = el.querySelector('.el-dialog');
            //自定义样式，让弹窗在拖拽过程中鼠标指针变成十字移动
            dragDom?.classList.add('draging');
            dragpoint = {
                x: ev.clientX,
                y: ev.clientY
            }
        });
    }
});
document.addEventListener('mouseup', (ev: MouseEvent) => {
    draging = false;
    dragDom?.classList.remove('draging');
    dragDom = null;
});
document.addEventListener('mousemove', (ev: MouseEvent) => {
    if (draging) {
        let _dragdom = dragDom as HTMLElement;
        let sty = window.getComputedStyle(_dragdom, null);
        _dragdom.style.marginLeft = `${parseFloat(sty.marginLeft) + ev.clientX - dragpoint.x}px`;
        _dragdom.style.marginTop = `${parseFloat(sty.marginTop) + ev.clientY - dragpoint.y}px`;
        dragpoint = {
            x: ev.clientX,
            y: ev.clientY
        }
    }
});

  4. vue线上如何调试

    1.控制台找到app.js打包后的主文件，打包后的文件一般会加上哈希码，例如:app.6d11e565.js
2.搜索 "$mount" 关键字
3.断点到 new Vue 位置
4.修改 new 后面的 Vue.config.devtools = true， 注意：这边的Vue以实际编译的为准 例如 new i.a({...})

  5. vue生产环境开启vue-tools调试

    (function openVueTool(){
    //在方法中执行，避免污染全局变量
    //开启vue2 production调试的方法
    
    //1.找vue实例，可以说99%的应用是用的app.__vue__
    //如果实在找不到,那么就到找到任意组件，用组件元素.__vue__.$root来获取
    var vue = app.__vue__
    
    //2.vue构造函数
    var constructor = vue.__proto__.constructor
    
    //3.Vue有多级，要找到最顶级的
    var Vue = constructor;
    while(Vue.super){
        Vue = Vue.super
    }
    
    //4.找到config，并且把devtools设置成true
    Vue.config.devtools = true;
    
    //5.注册到Vue DevTool上
    var hook = window.__VUE_DEVTOOLS_GLOBAL_HOOK__
    hook.emit('init',Vue)
    
    //6.如果有vuex store
    if(vue.$store){
        var store = vue.$store;
        store._devtoolHook = hook;
        hook.emit('vuex:init', store);
        hook.on('vuex:travel-to-state',function(targetState){
            store.replaceState(targetState);
        });
        store.subscribe(function(mutation, state){
            hook.emit('vuex:mutation', mutation, state);
        });
    }
})()

需求实现

1.写一个白板支持撤销

http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502151385.html

2.写一个爬网页素材的爬虫

https://blog.csdn.net/twodogya/article/details/80204322

展开全文 >>

jq1

/*!

//自调用结构，沿用1.7版本
(function(w){

var version = '1.0.0';

// 对外暴露的工厂函数
function jQuery( selector ){
    return new jQuery.fn.init( selector );
}

// 给原型提供一个简写方式
jQuery.fn = jQuery.prototype ={
    constructor: jQuery,

    // 获取版本号
    jquery: version,

    // 代表所有实例默认的选择器，也代表实例是一个jQuery类型的对象
    selector: '',

    // 代表所有实例默认的长度
    length: 0,

    // 把实例转换为数组返回
    toArray: function() {
        return [].slice.call( this );
    },

    // 获取指定下标的元素，获取的是原生DOM
    get: function( i ) {
        /*
        * 1、如果传入null或undefined，那么转换为数组返回
        * 2、如果传入的是正数，按照指定的下标获取元素返回
        * 3、如果传入的是负数，按照下标倒着( this.length + 负数 )获取元素返回
        * */

        // null、undeinfed
        if ( i == null ) {
            return this.toArray();
        }

        // 其他
        if ( i >= 0 ) {
            return this[ i ];
        }else {
            return this[ this.length + i ];
        }
    },

    _get: function( i ) {
        return i == null?
                this.toArray() :
                ( i >= 0? this[ i ] : this[ this.length + i ] );
    },

    // 遍历实例
    each: function( fn ) {
        return jQuery.each( this, fn );
    },

    // 通过实例得到一个新数组
    map: function( fn ) {
        return jQuery.map( this, fn );
    },

    // 截取实例的部分元素，构成一个新的jQuery实例返回
    slice: function() {
        /*
        * 1、通过数组的slice截取部分元素(slice返回的是数组)，
        * 2、把截取到的元素转换为实例对象返回。
        * */

        // 因为slice的参数会有变化，所以需要是arguments，
        // 我们要把arguments中的每一项传给数组的slice，所以需要借用apply平铺传递过去，
        // 最后把slice返回数组，通过jQuery工厂保证成实例返回。
        var nodes = [].slice.apply( this, arguments );
        return jQuery( nodes );
    },

    _slice: function() {
        // 因为slice的参数会有变化，所以需要是arguments，
        // 我们要把arguments中的每一项传给数组的slice，所以需要借用apply平铺传递过去，
        // 最后把slice返回数组，通过jQuery工厂保证成实例返回。
        return jQuery( [].slice.apply( this, arguments ) );
    },

    // 获取指定下标的元素，获取的是jQuery类型的实例对象。
    eq: function( i ) {
        /*
         * 1、如果传入null或undefined，返回一个新实例，
         * 2、如果传入的是正数，按照指定的下标获取元素，再包装成新实例返回
         * 3、如果传入的是负数，按照下标倒着( this.length + 负数 )获取元素，再包装成新实例返回
         * */

        // null、undefined得到新实例
        if( i == null ) {
            return jQuery();
        }

        if( i >= 0 ) {
            return jQuery( this[ i ] );
        }else {
            return jQuery( this[ this.length + i ] );
        }
    },

    _eq: function( i ) {
        return i == null? jQuery() : jQuery( this.get( i ) );
    },

    // 获取实例中的第一个元素，是jQuery类型的实例对象。
    first: function() {
        return this.eq( 0 );
    },

    // 获取实例中的最后一个元素，是jQuery类型的实例对象。
    last: function() {
        return this.eq( -1 );
    },

    // 原型上的方法供实例调用，
    // 即实例.push，在调用过程中，push内的this就指向了实例，
    // 所以这里不需要通过call和apply改变this指向即可借用数组的方法
    push: [].push,
    sort: [].sort,
    splice: [].splice

}

// 添加extend方法
/*
 * 需求:
 * 1、传入一个参数,谁调用就给谁混入内容
 * 2、传入多个参数,把后面对象的内容混入到第一个对象中
 **/
jQuery.extend = jQuery.fn.extend = function() {
    
    // 被混入的目标
    var target = arguments[ 0 ];
    
    // 传入一个参数,把这个参数的内容混入到this中
    if( arguments.length === 1 ){
        target = this;
        for ( var key in arguments[ 0 ] ) {
            target[ key ] = arguments[ 0 ][ key ];
        }
    }else if( arguments.length >= 2 ){
        
        // 遍历得到后面所有的对象
        for( var i = 1, len = arguments.length; i < len; i++){
            
            // 遍历每一个对象多有的属性
            for( var key in arguments[ i ] ){
                
                // 把后面对象的内容混入到第一个对象中
                target[ key ] = arguments[ i ][ key ];
            }
        }
    }
    
    return target;
}

// 给jQuery添加一些静态方法
jQuery.extend({
    // ajax初始配置
    ajaxSettings: {
        url: location.href,    // 默认的url为本地地址
        type: "GET",           // 默认请求的方法为GET
        async: true,           // 默认为异步请求
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        timeout: null,         // 默认不看延迟事件
        dataType: 'JSON',      // 默认请求的回来的数据类型
        success: function(){},
        error: function(){},
        complete: function(){},
    },
    // 把对象装换为url参数形式的字符串
    urlStringify: function( obj ){
        var result = '', key;
        
        // 传入的不是对象,就直接返回空字符串
        if( !jQuery.isObject( obj )){
            return result;
        }
        
        for( key in obj ){
            result += window.encodeURIComponent( key ) + '=' + window.encodeURIComponent( obj[ key] ) + '&';
        }
        
        // 从0截取到倒数第一个字符串返回、
        return result.slice( 0, -1 );
        
    },
    // 加工options
    processOptions: function( options ){
        var optionsNew;
        
        // 合并用户和默认的配置,得到一份新的
        optionsNew = {};
        jQuery.extend( optionsNew, jQuery.ajaxSettings, options );
        
        // 对data进行加工处理
        optionsNew.data = jQuery.urlStringify( optionsNew.data );
        
        // 把dataType同意转换为大写,防止意外
        optionsNew.dataType = optionsNew.dataType.toUpperCase();
        
        // 把type同意转换为大写,防止意外
        optionsNew.type = optionsNew.type.toUpperCase();
        
        // 如果是GET请求,把数据加到URL中
        if( optionsNew.type === 'GET' ){
            optionsNew.url += '?' + optionsNew.data;
            optionsNew.data = null;
        }
        
        // 返回加工后的配置
        return optionsNew;
    },
    // ajax封装
    ajax: function( options ){
        
        var optionsNew, xhr, result, timer;
        
        // 加工得到一份处理好的配置项
        optionsNew = jQuery.processOptions( options );
        
        // 创建xhr对象,发送请求
        xhr = new XMLHttpRequest();
        xhr.open( optionsNew.type, optionsNew.url, optionsNew.async );
        
        if( optionsNew.type === 'POST' ){
            xhr.setRequestHeader( 'Content-Type', optionsNew.contentType );
        }
        
        xhr.onreadystatechange = function(){
            
            //先判断请求是否完成,完成就执行complete方法
            if( xhr.readyState === 4 ){
                
                // 在指定事件内完成请求,那么清除定时器
                clearTimeout( timer );
                
                optionsNew.complete();
                
                // 判断是否请求成功,成果过就执行success方法,否则就执行error方法
                if( ( xhr.status >= 200 && xhr.status < 300) || xhr.status === '304' ){
                    
                    // 根据预期的dataType进行数据转换
                    switch( optionsNew.dataType ){
                        case 'JSON':
                            result = JSON.parse( xhr.responseText );
                            break;
                        case 'SCRIPT':
                            eval( xhr.responseText );
                            result = xhr.responseText;
                            break;
                        case 'STYLE':
                            $('<style></style>').html( xhr.responseText ).appendTo( 'head' );
                            result = xhr.responseText;
                            break;
                        default:
                            result = xhr.responseText;
                            break;
                    }
                    optionsNew.success( result );
                }else{
                    optionsNew.error( xhr.status );
                }
            }
        };
        
        // 如果设置超时,那么开启一个定时器
        if( optionsNew.timeout ){
            
            // 在指定时间内,请求还没有完成
            // 那么直接调用error方法报错
            timer = setTimeout( function(){
                
                // 超时执行error
                optionsNew.error( '超时' );
                
                // error执行了,事件回调就没有必要执行了
                xhr.onreadystatechange = null;
                
            }, optionsNew.timeout);
        }
        
        xhr.send( optionsNew.data );
    },
    //get请求
    get: function( url, data, fn ){
        // 如果传入两个参数,默认为第二个参数为回调
        fn = fn || data || function(){};
        jQuery.ajax({
            url: url,
            data: data,
            success: fn
        });
        
    },
    //post请求
    post: function( url, data, fn ){
        // 如果传入两个参数,默认为第二个参数为回调
        fn = fn || data || function(){};
        jQuery.ajax({
            url: url,
            type:'post',
            data: data,
            success: fn
        });
        
    },
    //json请求
    getJson: function( url, data, fn ){
        // 如果传入两个参数,默认为第二个参数为回调
        fn = fn || data || function(){};
        jQuery.ajax({
            url: url,
            type:'json',
            data: data,
            success: fn
        });
        
    },
    //css请求
    getStyle: function( url, data, fn ){
        // 如果传入两个参数,默认为第二个参数为回调
        fn = fn || data || function(){};
        jQuery.ajax({
            url: url,
            type:'style',
            data: data,
            success: fn
        });
        
    },
    // 兼容添加事件
    addEvent: function( ele, type, fn ){
        
        // ele必须是DOM, type必须是字符串, fn必须是函数.
        // 有一个不是,那就直接return
        if( !ele.nodeType || !jQuery.isString( type ) || !jQuery.isFunction( fn )){
            return;
        }
        
        // 兼容绑定事件
        if( ele.addEventListener){
            ele.addEventListener( type, fn );
        }else{
            ele.attachEvent( 'on' + type, fn );
        }
    },
    // 兼容移除事件
    removeEvent: function( ele, type, fn ){
        
        // ele必须是DOM, type必须是字符串, fn必须是函数.
        // 有一个不是,那就直接return
        if( !ele.nodeType || !jQuery.isString( type ) || !jQuery.isFunction( fn )){
            return;
        }
        
        // 兼容移除事件
        if( ele.removeEventListener){
            ele.removeEventListener( type, fn );
        }else{
            ele.detachEvent( 'on' + type, fn );
        }
    },
    // 获取样式,已经处理了兼容性
    getStyle: function( dom, style ){
        
        //优先判断支不支持现代样式获取方式
        if( window.getComputedStyle){
            return window.getComputedStyle( dom )[ style ];
        }else{
            return dom.currentStyle[ style ];
        }
    },
    // 遍历对象或类数组
    each: function( obj, fn ) {
        // 如果是数组或伪数组，按照顺序遍历
        if ( 'length' in obj ) {

            for ( var i = 0, len = obj.length; i < len; i++ ) {

                // 改变回调执行时内部的this为val，
                // 通过根据回调的返回值看看要不要中断遍历。
                if ( fn.call( obj[ i ], i, obj[ i ] ) === false ) {
                    break;
                }
            }

        }else {

            for ( var key in obj ) {

                // 改变回调执行时内部的this为val，
                // 通过根据回调的返回值看看要不要中断遍历。
                if ( fn.call( obj[ key ], key, obj[ key ] ) === false ) {
                    break;
                }

            }
        }


        return obj;
    },

    // map实现
    map: function( obj, fn ) {

        /*
         * 1、先判断obj是不是数组或者伪数组，
         * 2、如果是，则通过i的方式遍历这个对象
         * 3、如果不是，则通过for in的方式遍历这个对象
         * 4、在遍历的过程中，把每一次遍历到key和val分别传给回调。
         * 5、在给回调传参的时候，需要收集回调的返回值，最后把所有的返回值构成新数组返回。
         * */
        var i, len, key, result = [];

        if( 'length' in obj ) {
            for ( i = 0, len = obj.length; i < len; i++ ) {
                result.push( fn.call( obj[ i ], obj[ i ], i ) );
            }
        }else {
            for ( key in obj ) {
                result.push( fn.call( obj[ key ], obj[ key ], key ) );
            }
        }

        return result;
    },

    // 去掉首尾空白字符
    trim: function( str ) {

        // null、undefined、NaN、0、false、''
        if ( !str ) {
            return str;
        }

        // 优先使用原生的
        if ( str.trim ) {
            return str.trim();
        }

        return str.replace( /^\s+|\s+$/g, '');

    },

    // 判断是不是html片段
    isHTML: function( html ) {

        // null、undefined、NaN、0、false、''
        if ( !html ) {
            return false;
        }

        // <.>
        if( html.charAt(0) === '<' &&
                html.charAt( html.length - 1 ) === '>' &&
                html.length >= 3 ) {
            return true;
        }

        return false;
    },

    // 判断是不是html片段
    _isHTML: function( html ) {
        return !!html &&
                html.charAt(0) === '<' &&
                html.charAt( html.length - 1 ) === '>' &&
                html.length >= 3;
    },

    // 判断是不是函数
    isFunction: function( fn ) {
        if ( typeof fn === 'function' ) {
            return true;
        }
        return false;
    },

    // 判断是不是函数
    _isFunction: function( fn ) {
        return typeof fn === 'function';
    },

    // 判断是不是window
    isWindow: function( w ) {

        // null、undefined、NaN、0、false、''
        if( !w ) {
            return false;
        }

        if( w.window === w ) {
            return true;
        }

        return false;
    },

    // 判断是不是window
    _isWindow: function( w ) {
        return !!w && w.window === w;
    },

    // 判断是不是对象
    isObject: function( obj ) {

        // 防止typeof对null的误判
        if ( obj === null ) {
            return false;
        }

        // 如果是object或function，那就是对象
        if ( typeof obj === 'object' || typeof obj === 'function' ) {
            return true;
        }

        return false;
    },

    // 判断是不是字符串
    isString: function( str ) {
        if ( typeof str === 'string' ) {
            return true;
        }
        return false;
    },

    // 判断是不是字符串
    _isString: function( str ) {
        return typeof str === 'string';
    },

    // 判断是不是真数组或伪数组
    isLikeArray: function( arr ) {

        // Function、window、!Object
        if ( jQuery.isFunction( arr ) || jQuery.isWindow( arr ) || !jQuery.isObject( arr ) ) {
            return false;
        }

        // 判断是不是真数组
        if ( ({}).toString.call( arr ) === '[object Array]' ) {
            return true;
        }

        // 判断是不是伪数组
        if ( 'length' in arr && ( arr.length === 0 || arr.length - 1 in arr ) ) {
            return true;
        }

        return false;
    },

    ready: function( fn ) {

        // 先统一判断DOMContentloaded有没有触发，
        // 通过document.readyState === 'complete'判断
        // 如果为true，fn可以直接调用。

        // 如果为false，那么判断支不支持addEventListener，
        // 如果支持，绑定DOMContentLoaded事件

        // 如果不支持，使用attchEvent绑定onreadystatechang事件,
        // 注意，需要在里面判断document.readyState === 'complete'才执行fn。
        // 防止fn多次执行。

        // DOM已经构造完毕，fn可以直接执行
        if ( document.readyState === 'complete' ) {
            fn();
        }

        // 如果DOM没有构造完毕，那么判断addEventListener是否兼容
        else if( document.addEventListener ) {
            document.addEventListener( 'DOMContentLoaded', fn );
        }

        // 如果不兼容addEventListener，那么采取attachEvent的方式，
        // 同时事件变为了onreadystatechange，为了防止这个事件多次触发造成的fn多次执行，
        // 所以需要一个包装函数来进行过滤。
        else {
            document.attachEvent( 'onreadystatechange', function() {
                if( document.readyState === 'complete' ) {
                    fn();
                }
            } );
        }
    }
});

//给原型添加方法
//插件方法
// 给原型扩展DOM操作方法，这样jQ实例就可以使用了
jQuery.fn.extend( {
    // 绑定事件
    on: function( type, fn ){
        /*
         * 实现思路:
         * 1、遍历所有的元素
         * 2、判断每一个元素有没有$_event_cache这个属性值
         * 3、如果有则继续使用,没有则初始化为一个对象
         * 4、在继续判断这个对象有没有对应事件类型的数组
         * 5、如果没有,说明是第一次绑定该事件
         *  5.1、那么需要给$_event_cache这个对象以type为key添加一个数组
         *  5.2、然后把传入的回调push进去
         *  5.3、最后还得绑定对应的事件(调用静态的addEvent方法即可)
         *  5.4、这个事件回调里面去遍历对应事件的数组,得到每一个事件回调,依次执行
         *  5.5、执行时,需要改变内部的this,还需要把事件对象传递过去
         * 6、如果有,直接把传入的回调push到对应事件的数组就可以了
         * 7、链式编程返回this
         **/
        this.each( function(){
            
            // 这里的this代表遍历到的每一个元素
            var self = this;
            this.$_event_cache = this.$_event_cache || {};
            
            // 如果之前没有对应事件的数组, 说明是第一次绑定事件
            if( !this.$_event_cache[ type ] ){
                this.$_event_cache[ type ] = [];
                this.$_event_cache[ type ].push( fn );
                
                // 如果是第一次绑定该事件,那么需要真正调用浏览器的方法绑定事件
                jQuery.addEvent( this, type, function( e ){
                    
                    for(var i = 0, len = self.$_event_cache[ type ].length; i < len; i++){
                        self.$_event_cache[ type ][ i ].call( self, e );
                    }
                    
                } );
            }else{
                this.$_event_cache[ type ].push( fn );
            }
        });
        
        
        // 链式编程
        return this;
    },
    _on: function( type, fn ){
        /*
         * 实现思路:
         * 1、遍历所有的元素
         * 2、判断每一个元素有没有$_event_cache这个属性值
         * 3、如果有则继续使用,没有则初始化为一个对象
         * 4、在继续判断这个对象有没有对应事件类型的数组
         * 5、如果没有,说明是第一次绑定该事件
         *  5.1、那么需要给$_event_cache这个对象以type为key添加一个数组
         *  5.2、然后把传入的回调push进去
         *  5.3、最后还得绑定对应的事件(调用静态的addEvent方法即可)
         *  5.4、这个事件回调里面去遍历对应事件的数组,得到每一个事件回调,依次执行
         *  5.5、执行时,需要改变内部的this,还需要把事件对象传递过去
         * 6、如果有,直接把传入的回调push到对应事件的数组就可以了
         * 7、链式编程返回this
         **/
        this.each( function(){
            
            // 这里的this代表遍历到的每一个元素
            var self = this;
            this.$_event_cache = this.$_event_cache || {};
            
            // 如果之前没有对应事件的数组, 说明是第一次绑定事件
            if( !this.$_event_cache[ type ] ){
                this.$_event_cache[ type ] = [];
                this.$_event_cache[ type ].push( fn );
                
                // 如果是第一次绑定该事件,那么需要真正调用浏览器的方法绑定事件
                jQuery.addEvent( this, type, function( e ){
                    
                    //遍历所有的回调
                    jQuery.each( self.$_event_cache[ type ],function( i, val ){
                        
                        // 这里的this,值得是每一个回调函数
                        this.call( self, e )
                        
                    });
                    
                } );
            }else{
                this.$_event_cache[ type ].push( fn );
            }
        });
        
        
        // 链式编程
        return this;
    },
    // 移除事件
    off: function( type, fn ){
        /*
         * 实现思路:
         * 1、如果没有传参,遍历所有的元素
         * 2、然后遍历每一个元素的$_event_cache对象,分别清空这个对象中的每一个数组
         * 3、如果没有$_event_cache   如果有$_event_cache继续判断
         * 4、线判断有没有参数,没有参数 ()
         * 5、如果传入1个参数,那么把元素$_event_cache对象指定类型的数组清空
         * 6、如果传2个以上参数,那么把元素$_event_cache对象指定类型的数组中指定的回调删除即可
         * 7、返回链式编程this
         **/
        var  argLen = arguments.length;
        
        this.each( function(){
            
            // 没有绑定过任何事件, 就不用处理了
            if( !this.$_event_cache ){
                return;
            }
            
            // 如果绑过事件,需要进一步处理
            else{
                
                // 如果没有参数,遍历所有的事件数组,分别清空
                if( argLen === 0 ){
                    for( var key in this.$_event_cache ){
                        this.$_event_cache[ key ] = [];
                    }
                    
                }
                
                // 如果传入一个参数,则清空指定事件类型的数组
                else if( argLen === 1 ){
                    this.$_event_cache[ type ] = [];
                }
                
                // 如果传入多个参数,则清空指定事件类型数组中指定的回调函数
                else{
                    
                    // 遍历对应事件类型的数组,得到每一个回调
                    for( var i = this.$_event_cache[ type ].length - 1; i >= 0; i--){
                        
                        // 依次和传入的回调比较,如果相等,则从数组中删除
                        if( this.$_event_cache[ type ][ i ] === fn ){
                            this.$_event_cache[ type ].splice( i, 1 );
                        }
                    }
                }
                
            }
        });
        
        return this;
    },
    // 清空所有元素的内容
    empty: function() {
        /*
         * 实现思路：
         * 1、遍历likeArray（ 可以考虑使用for遍历，也可以考虑使用each遍历 ）
         * 2、遍历到的每一个元素清除其内容（ 元素.innerHTML = '' ）
         * */
        for ( var i = 0, len = this.length; i < len; i++ ) {
            this[ i ].innerHTML = '';
        }

        // 为了链式编程
        return this;
    },

    // 清空所有元素的内容
    _empty: function() {
        /*
         * 实现思路：
         * 1、遍历likeArray（ 可以考虑使用for遍历，也可以考虑使用each遍历 ）
         * 2、遍历到的每一个元素清除其内容（ 元素.innerHTML = '' ）
         * */
        this.each( function() {
            // 这里面的this指向遍历到的每一个元素
            this.innerHTML = '';
        } );

        // 为了链式编程
        return this;
    },

    // 删除所有的元素
    remove: function() {
        /*
         * 实现思路：
         * 1、遍历likeArray（ 可以考虑使用for遍历，也可以考虑使用each遍历 ）
         * 2、遍历到的每一个元素要删除掉
         * （ 通过parentNode获取该元素的父元素，然后父元素.removeChild( 被删除元素 ) ）
         * */
        for( var i = 0, len = this.length; i < len; i++ ) {
            this[ i ].parentNode.removeChild( this[ i ] );
        }

        // 为了链式编程
        return this;
    },

    // 删除所有的元素
    _remove: function() {
        /*
         * 实现思路：
         * 1、遍历likeArray（ 可以考虑使用for遍历，也可以考虑使用each遍历 ）
         * 2、遍历到的每一个元素要删除掉
         * （ 通过parentNode获取该元素的父元素，然后父元素.removeChild( 被删除元素 ) ）
         * */
        this.each( function() {
            // 这里面的this指向遍历到的每一个元素
            this.parentNode.removeChild( this );
        });

        // 为了链式编程
        return this;
    },


    // 设置所有元素的内容，获取第一个元素的内容
    html: function( html ) {
        /*
         * 实现思路：
         * 1、先通过arguments.length判断有没有传参
         * 2、没有传，则获取第一个元素，然后返回这个元素的innnerTHML内容
         * 3、如果传了，则遍历likeArray（ 可以考虑使用for遍历，也可以考虑使用each遍历 ）
         * 4、再设置每一个元素的innerTHML为传入的参数。
         * */

        // 如果没有传参，那么就直接返回第一个元素的innerHTML
        if ( arguments.length === 0 ) {
            return this[ 0 ].innerHTML;
        }

        // 如果传参了，那么遍历所以元素，分别设置其innerTHML值为传入的html
        else if( arguments.length >= 1 ) {

            for ( var i = 0, len = this.length; i < len; i++ ) {
                this[ i ].innerHTML = html;
            }

        }

        // 为了链式编程
        return this;
    },

    // 设置所有元素的内容，获取第一个元素的内容
    _html: function( html ) {
        /*
         * 实现思路：
         * 1、先通过arguments.length判断有没有传参
         * 2、没有传，则获取第一个元素，然后返回这个元素的innnerTHML内容
         * 3、如果传了，则遍历likeArray（ 可以考虑使用for遍历，也可以考虑使用each遍历 ）
         * 4、再设置每一个元素的innerTHML为传入的参数。
         * */

        // 如果没有传参，那么就直接返回第一个元素的innerHTML
        if ( arguments.length === 0 ) {
            return this.get(0).innerHTML;
        }

        // 如果传参了，那么遍历所以元素，分别设置其innerTHML值为传入的html
        else {
            this.each( function() {
                // 这里面的this指向遍历到的每一个元素
                this.innerHTML = html;
            });
        }

        // 为了链式编程
        return this;
    },

    // 设置所有元素的文本内容，获取所有元素的文本内容
    text: function( text ) {
        /*
         * 实现思路：
         * 1、先通过arguments.length判断有没有传参
         * 2、没有传，则遍历likeArray（ 可以考虑使用for遍历，也可以考虑使用each遍历 ）
         * 3、把每一个元素的innerText加在一起返回
         * 4、则遍历likeArray（ 可以考虑使用for遍历，也可以考虑使用each遍历 ）
         * 5、再设置每一个元素的innerText为传入的参数。
         * */

        var result = '';

        // 没有传参，获取所有元素的所有文本，然后返回
        if ( arguments.length === 0 ) {

            for ( var i = 0, len = this.length; i < len; i++ ) {
                result += this[ i ].innerText;
            }

            return result;
        }

        // 如果传参数了，那么设置所有元素的文本
        else {
            for ( var i = 0, len = this.length; i < len; i++ ) {
                this[ i ].innerText = text;
            }
        }

        // 为了链式编程
        return this;
    },

    // 设置所有元素的文本内容，获取所有元素的文本内容
    _text: function( text ) {
        /*
         * 实现思路：
         * 1、先通过arguments.length判断有没有传参
         * 2、没有传，则遍历likeArray（ 可以考虑使用for遍历，也可以考虑使用each遍历 ）
         * 3、把每一个元素的innerText加在一起返回
         * 4、则遍历likeArray（ 可以考虑使用for遍历，也可以考虑使用each遍历 ）
         * 5、再设置每一个元素的innerText为传入的参数。
         * */

        var result = '';

        // 没有传参，获取所有元素的所有文本，然后返回
        if ( arguments.length === 0 ) {

            this.each( function() {
                result += this.innerText;
            });

            return result;
        }

        // 如果传参数了，那么设置所有元素的文本
        else {
            this.each( function() {
                this.innerText = text;
            });
        }

        // 为了链式编程
        return this;
    },

    // 把所有的元素添加到指定的元素中
    appendTo: function( selector ) {
        /*
        * 实现思路：
        * 1、定义一个数组，用来存储将来所有被添加的元素
        * 2、使用jQuery包装一下selector，把不同的参数统一为jQ实例。
        * 3、在外层遍历所有的元素(this)
        * 4、在内层遍历所有的目标(包装后的jQ实例)
        * 5、在内层判断，如果是第一次，则把外面遍历的元素本体添加到内层遍历的元素，
        * 如果不是第一次，则把外面遍历的元素clone版本添加到内层遍历的元素。
        * 6、最后把存储被添加元素的数组使用jQ包装一下，然后返回。
        * */

        // 存储被添加的元素
        var result = [], tempNode = null;

        // 无论传入的是DOM还是jQ对象还是选择器，
        // 统一包装成新的JQ实例，这样就可以统一处理了
        var $selector = $( selector );

        // 遍历每一项元素( this )
        for ( var i = 0, len = this.length; i < len; i++ ) {

            // 遍历每一个目的地( $selector )
            for ( var j = 0, jLen = $selector.length; j < jLen; j++ ) {

                // 如果第一次，给遍历到的目的地添加本体
                if ( j === 0 ) {

                    // 存储被添加的元素
                    tempNode = this[ i ];

                    // 把元素添加到目的地
                    $selector[ j ].appendChild(  this[ i ] );

                    // append啥，就把啥存储到result数组中，最后包装成JQ对象返回
                    // 把元素存储到result数组中
                    result.push(  this[ i ] );

                }else {

                    // 存储被添加的元素
                    tempNode = this[ i ].cloneNode( true );

                    // 把元素添加到目的地
                    $selector[ j ].appendChild( tempNode );

                    // append啥，就把啥存储到result数组中，最后包装成JQ对象返回
                    // 把元素存储到result数组中
                    result.push( tempNode );
                }
            }

        }

        // 把所有被添加的元素保证成新实例返回，
        // 这样可以对所有被添加的元素进行链式编程。
        return jQuery( result );
    },

    // 把所有的元素添加到指定的元素中
    _appendTo: function( selector ) {
        /*
         * 实现思路：
         * 1、定义一个数组，用来存储将来所有被添加的元素
         * 2、使用jQuery包装一下selector，把不同的参数统一为jQ实例。
         * 3、在外层遍历所有的元素(this)
         * 4、在内层遍历所有的目标(包装后的jQ实例)
         * 5、在内层判断，如果是第一次，则把外面遍历的元素本体添加到内层遍历的元素，
         * 如果不是第一次，则把外面遍历的元素clone版本添加到内层遍历的元素。
         * 6、最后把存储被添加元素的数组使用jQ包装一下，然后返回。
         * */

        // 存储被添加的元素
        var result = [], tempNode = null;

        // 无论传入的是DOM还是jQ对象还是选择器，
        // 统一包装成新的JQ实例，这样就可以统一处理了
        var $selector = $( selector );

        // 遍历每一项元素( this )
        this.each( function() {

            // 这里的this指向每一个被添加的元素
            var self = this;

            // 遍历每一个目的地( $selector )
            $selector.each( function( i ) {

                // 如果第一次，给遍历到的目的地添加本体
                // 先把被添加的元素得到
                tempNode = i === 0? self: self.cloneNode( true );

                // 这里的this指向每一个目的地，给目的地添加外面遍历的元素
                this.appendChild( tempNode );
                result.push( tempNode );
            });
        });

        // 把所有被添加的元素保证成新实例返回，
        // 这样可以对所有被添加的元素进行链式编程。
        return jQuery( result );
    },
    
    // 把所有的元素添加到指定的元素的最前面
    prependTo: function( selector ){
        /*
         * 实现思路:
         * 1、定义一个数组，用来存储将来所有被添加的元素
         * 2、使用jQuery包装一下selector, 把不同的参数统一为jQ实例
         * 3、在外层遍历所有的元素(this)
         * 4、在内层遍历所有的目标(包装后的JQ实例)
         * 5、在内测判断,如果是第一次，则把外面遍历的元素本体添加到内层遍历元素的最前面,
         * 如果不是第一次,则把外面遍历的元素clone版本添加到内层遍历元素的最前面。
         * 6、最后把存储被添加的元素的数组使用jQ包装一下，然后返回
         **/
        var result = [], tempNode;
        
        // 无论传入的是DOM还是jQ对象还是选择器
        // 统一包装成新的jQ实例, 这样就可以统一处理了
        var $selector = jQuery( selector );
        
        for( var i=0, len = this.length; i < len; i++){
            
            // $selector
            for( var j=0, jLen = $selector.length; j < jLen; j++){
                
                // 先得到被添加的元素
                tempNode = j === 0 ? this[ i ] : this[ i ].cloneNode( true );
                
                // 添加到指定元素的最前面
                $selector[ j ].insertBefore( tempNode, $selector[ j ].firstChild );
                
                // 把被添加的元素存储起来
                result.push( tempNode );
            }
            
        }
        
        // 把所有被添加的元素保证成新实例返回，
        // 这样可以对所有被添加的元素进行链式编程。
        return jQuery( result );
        
    },
    
    // 把所有的元素添加到指定的元素的最前面
    _prependTo: function( selector ){
        /*
         * 实现思路:
         * 1、定义一个数组，用来存储将来所有被添加的元素
         * 2、使用jQuery包装一下selector, 把不同的参数统一为jQ实例
         * 3、在外层遍历所有的元素(this)
         * 4、在内层遍历所有的目标(包装后的JQ实例)
         * 5、在内测判断,如果是第一次，则把外面遍历的元素本体添加到内层遍历元素的最前面,
         * 如果不是第一次,则把外面遍历的元素clone版本添加到内层遍历元素的最前面。
         * 6、最后把存储被添加的元素的数组使用jQ包装一下，然后返回
         **/
        var result = [], tempNode;
        
        // 无论传入的是DOM还是jQ对象还是选择器
        // 统一包装成新的jQ实例, 这样就可以统一处理了
        var $selector = jQuery( selector );
        
        this.each(function(){
            // 这里this指每一个被添加的元素
            var self = this;
            
            $selector.each(function( i ){
                // 这里this指每一个被添加元素的目的地
                console.log(i)
                // 先得到被添加的元素
                tempNode = i === 0? self: self.cloneNode( true );
                
                // 添加到指定元素的最前面
                this.insertBefore( tempNode, this.firstChild );
                
                // 把被添加的元素存储起来
                result.push( tempNode );
                
            });
            
        });
        
        // 把所有被添加的元素保证成新实例返回，
        // 这样可以对所有被添加的元素进行链式编程。
        return jQuery( result );
    },
    
    // 给所有元素添加html内容,或者其他元素
    append: function( context ){
        
        /*
         * 实现思路:
         * 1、判断context是不是字符串
         * 2、如果是,则把这个字符串累加给所有元素
         * 3、如果不是,则先把context包装成jQ对象统一处理
         * 4、外层遍历
         * 5、内层遍历  4、5、6完全可以考虑复用appendTo
         * 6、添加元素
         * 7、返回this
         **/
        
        var $context = $( context );
        
        // 如果是字符串,则累加给所有元素
        if( jQuery.isString( context ) ){
            for( var i = 0, len = this.length; i < len; i++ ){
                this[ i ].innerHTML += context;
            }
        }
        // 如果不是字符串,则把$context的每一项添加this的每一项中
        else{
            $context.appendTo( this );
        }
        
        return this;
        
    },
    
    // 给所有元素添加html内容,或者其他元素
    _append: function( context ){
        
        /*
         * 实现思路:
         * 1、判断context是不是字符串
         * 2、如果是,则把这个字符串累加给所有元素
         * 3、如果不是,则先把context包装成jQ对象统一处理
         * 4、外层遍历
         * 5、内层遍历  4、5、6完全可以考虑复用appendTo
         * 6、添加元素
         * 7、返回this
         **/
        
        var $context = $( context );
        
        // 如果是字符串,则累加给所有元素
        if( jQuery.isString( context ) ){
            this.each(function(){
                
                // 把得到的每一个元素进行innerHTML累加
                this.innerHTML += context;
            });
        }
        // 如果不是字符串,则把$context的每一项添加this的每一项中
        else{
            $context.appendTo( this );
        }
        
        return this;
        
    },
    
    // 给所有元素内容前添加html内容,或者其他元素
    prepend: function( context ){
        var $context = $( context );
        
        // 如果是字符串,则累加给所有元素
        if( jQuery.isString( context ) ){
            this.each(function(){
                
                // 把得到的每一个元素进行innerHTML累加
                this.innerHTML = context + this.innerHTML;
            });
        }
        // 如果不是字符串,则把$context的每一项添加this的每一项最前面
        else{
            $context.prependTo( this );
        }
        
        return this;
    },
    // 给所有元素内容前添加html内容,或者其他元素
    _prepend: function( context ){
        var $context = $( context );
        
        // 如果是字符串,则累加给所有元素
        if( jQuery.isString( context ) ){
            this.each(function(){
                
                // 把得到的每一个元素进行innerHTML累加
                this.innerHTML = context + this.innerHTML;
            });
        }
        // 如果不是字符串,则把$context的每一项添加this的每一项最前面
        else{
            $context.prependTo( this );
        }
        
        return this;
    },
    //给所有元素添加新的class
    addClass: function( className ){
        /*
         * 实现思路:
         * 1、遍历所有的元素
         * 2、依次判断每一个元素有没有要添加的className
         * 3、有则忽略,没有则添加( className += ' ' + classNames )
         * 4、考虑trim一下
         * 5、链式编程返回this
         **/
        
        for( var i = 0, len = this.length; i < len; i++ ){
            
            if((' ' + this[ i ].className + ' ').indexOf(' ' + className + ' ') == -1){
                this[ i ].className+=' '+ className;
            }
            
        }
        
        //链式编程返回this
        return this;
        
    },
    //给所有元素添加新的class
    _addClass: function( className ){
        /*
         * 实现思路:
         * 1、遍历所有的元素
         * 2、依次判断每一个元素有没有要添加的className
         * 3、有则忽略,没有则添加( className += ' ' + classNames )
         * 4、考虑trim一下
         * 5、链式编程返回this
         **/
        
        this.each(function(){
            if((' ' + this.className + ' ').indexOf(' ' + className + ' ') == -1){
                this.className+=' '+ className;
            }
        })
        
        //链式编程返回this
        return this;
        
    },
    //给所有元素添加新的class
    __addClass: function( className ){
        /*
         * 实现思路:
         * 1、遍历所有的元素
         * 2、依次判断每一个元素有没有要添加的className
         * 3、有则忽略,没有则添加( className += ' ' + classNames )
         * 4、考虑trim一下
         * 5、链式编程返回this
         **/
        
        this.each(function(){
            if( !jQuery( this ).hasClass( className ) ){
                this.className+=' '+ className;
            }
        })
        
        //链式编程返回this
        return this;
        
    },
    //删除所有元素指定的class
    removeClass: function( className ){
        /*
         * 实现思路:
         * 1、没有参数,遍历所有的元素, 设置他们的className为空
         * 2、有参数,遍历所有的元素,删除指定的className(元素.className.replace())
         * 把指定的className替换为空格,最后整体trim一下
         * 3、链式编程返回this
         **/
        
        if( arguments.length === 0 ){
            this.each( function(){
                this.className = '';
            });
        }else{
            this.each( function(){
                this.className = (' ' + this.className + ' ').replace(' ' + className +' ', ' ');
            });
        }
        
    },
    //判断所有元素有没有指定的class
    hasClass: function( className ){
        /*
         * 实现思路:
         * 1、遍历所有的元素
         * 2、依次获取每一个元素的className,为了方便判断,首尾加空格
         * 3、利用处理过的className字符串的indexOf方法判断有没有指定的className(这个class类名)
         * 4、如果有一个元素的判断结果不为-1,就返回true
         * 5、否则返回false。
         **/
        
        for( var i = 0, len = this.length; i < len; i++ ){
            
            if( (' ' + this[ i ].className + ' ').indexOf(' ' + className + ' ') > -1){
                return true;
            }
        }
        
        //如果所有的元素都没有 返回false
        return false;
        
    },
    //判断所有元素有没有指定的class
    _hasClass: function( className ){
        /*
         * 实现思路:
         * 1、遍历所有的元素
         * 2、依次获取每一个元素的className,为了方便判断,首尾加空格
         * 3、利用处理过的className字符串的indexOf方法判断有没有指定的className(这个class类名)
         * 4、如果有一个元素的判断结果不为-1,就返回true
         * 5、否则返回false。
         **/
        
        //默认为所有的元素都没有指定的className
        var has = false;
        
        this.each( function(){
            
            // 只要有一个元素存在指定的className,那么就修改has的变量值为true
            if( (' ' + this.className + ' ').indexOf(' ' + className + ' ') > -1 ){
                has = true;
            }
            
        });
        
        //返回has
        return has;
        
    },
    //判断所有元素有没有指定的class
    __hasClass: function( className ){
        /*
         * 实现思路:
         * 1、遍历所有的元素
         * 2、依次获取每一个元素的className,为了方便判断,首尾加空格
         * 3、利用处理过的className字符串的indexOf方法判断有没有指定的className(这个class类名)
         * 4、如果有一个元素的判断结果不为-1,就返回true
         * 5、否则返回false。
         **/
        
        //默认为所有的元素都没有指定的className
        var has = false;
        
        this.each( function(){
            
            // 只要有一个元素存在指定的className,那么就修改has的变量值为true
            if( (' ' + this.className + ' ').indexOf(' ' + className + ' ') > -1 ){
                has = true;
                
                // 中断遍历
                return false;
            }
            
        });
        
        //返回has
        return has;
        
    },
    //有则删除,没有则添加
    toggleClass: function( className ){
        /*
         * 实现思路:
         * 1、遍历所有的元素
         * 2、判断每一个元素有则删除,没有添加
         **/
        
        this.each( function(){
            // 这里的this是遍历到每一个原生DOM
            // 先包装成JQ对象,就可以复用之前写好的方法了
            var $this = jQuery( this );
            
            // 有则删除,没有则添加
            if( $this.hasClass( className ) ){
                $this.removeClass( className );
            }else{
                $this.addClass( className );
            }
            
        })
    },
    //设置或者获取元素属性节点值
    attr: function( attr, val ){
        /*
         * 实现思路:
         * 1、判断attr是不是字符串或者对象,不是直接return this
         * 2、如果是字符串,那么继续判断arguments的length
         * 3、length为1,则获取第一个元素指定的属性节点值返回
         * 4、length>=2,遍历所有元素,分别给他们设置新的属性节点值( setAttribute )
         * 5、如果不是字符串(是对象),那么遍历这个对象,得到所有的属性节点值,
         * 然后遍历所有的元素,把所有的属性节点分别添加到这些元素中
         * 6、return this
         **/
        
        // 如果不是字符串也不是对象
        if( !jQuery.isString( attr ) && !jQuery.isObject( attr ) ){
            return this;
        }
        // 如果是字符串
        if( jQuery.isString( attr ) ){
            
            // length为1,则获取第一个元素指定的属性节点值返回
            if( arguments.length === 1 ){
                return this.get( 0 ).getAttribute( attr );
            }
            
            // 如果length为多个(2及2个以上)
            // 则遍历所有的元素,分别设置属性节点值
            else{
                for( var i = 0, len = this.length; i < len; i++){
                    this[ i ].setAttribute( attr, val );
                }
            }
            
        }
        
        // 如果是对象
        // 遍历这个对象,和所有的元素, 分别添加遍历到的属性接节点值
        else{
            
            for( var key in attr ){
                for( var i = 0, len = this.length; i < len; i++ ){
                    this[i].setAttribute( key, attr[key] )
                }
            }
            
        }
        return this;
        
    },
    //设置或者获取元素属性节点值
    _attr: function( attr, val ){
        /*
         * 实现思路:
         * 1、判断arguments.length
         * 2、如果为1
         * 3、继续判断attr是不是字符串,如果是获取第一个元素指定的属性节点值返回
         * 4、如果不是继续判断是不是对象,如果是遍历这个对象,得到所有属性节点值,
         * 然后遍历所有的元素,把所有的属性节点分别添加到这些元素中
         * 5、如果为多个(2及以上),遍历所有元素分别设置属性节点值
         * 6、return this
         **/
        
        // 把实例使用别称存储一下，为了在别的地方使用
        var self = this;
        
        if( arguments.length === 1 ){
            
            // 如果是字符串,获取第一个元素指定的属性节点值返回
            if( jQuery.isString( attr ) ){
                return this[ 0 ].getAttribute( attr );
            }
            
            // 如果是对象,把对象中所有的属性节点添加到所有的元素中
            else if( jQuery.isObject( attr) ){
                
                // 使用jQ静态each方法遍历attr对象
                jQuery.each( attr, function( key, val ){
                    // 这里便利到的val不是对象类型, 是基本数据类型
                    // 我们要使用的就是基本数据类型, 而this是基本数据类型的包装类型(),
                    // 所以这里不能使用this。
                    
                    //遍历所有的元素
                    self.each(function(){
                        
                        // 给遍历到的每一个元素分别设置外面遍历到的属性节点
                        this.setAttribute( key, val );
                        
                    });
                    
                });
                
            }
        //如果参数个数为多个
        }else if( arguments.length >= 2){
            
            // 遍历所有元素分别设置对应的属性节点值
            this.each(function(){
                this.setAttribute( attr, val )
            });
            
        }
        
        // 如果不是字符串也不是对象
        if( !jQuery.isString( attr ) && !jQuery.isObject( attr ) ){
            return this;
        }
        
        return this;
        
    },
    //设置或者获取元素的属性值
    prop: function( attr, val ){
        /*
         * 实现思路:
         * 1、判断attr是不是字符串或者对象,不是直接return this
         * 2、如果是字符串,那么继续判断arguments的length
         * 3、length为1,则获取第一个元素指定的属性节点值返回
         * 4、length>=2,遍历所有元素,分别给他们设置新的属性节点值( setAttribute )
         * 5、如果不是字符串(是对象),那么遍历这个对象,得到所有的属性节点值,
         * 然后遍历所有的元素,把所有的属性节点分别添加到这些元素中
         * 6、return this
         **/
        
        // 如果不是字符串也不是对象
        if( !jQuery.isString( attr ) && !jQuery.isObject( attr ) ){
            return this;
        }
        
        // 如果是字符串
        if( jQuery.isString( attr ) ){
            
            // 如果只有一个参数为字符串,那么返回第一个元素指定的属性值
            if( arguments.length === 1 ){
                return this[0][attr];
            }
            
            // 如果有多个参数, 那么给所有元素设置指定的属性值
            else{
                for( var i = 0, len = this.length; i < len; i++){
                    this[ i ][ attr ] = val;
                }
            }
            
        }
        
        // 如果是对象
        // 遍历这个对象,和所有的元素, 分别添加遍历到的属性值
        else{
            
            for( var key in attr ){
                for( var i = 0, len = this.length; i < len; i++ ){
                    
                    // 给每一个元素设置属性
                    this[ i ][ key ] = attr[ key ];
                }
            }
            
        }
        return this;
        
    },
    //设置或者获取属性值
    _prop: function( attr, val ){
        /*
         * 实现思路:
         * 1、判断arguments.length为1
         * 2、继续判断attr是不是字符串,如果是获取第一个元素指定的属性
         * 3、如果不是继续判断是不是对象,如果是遍历这个对象,得到所有属性,
         * 4、如果为多个(2及以上),遍历所有元素分别设置指定属性
         * 5、链式编程return this
         **/
        
        // 把实例使用别称存储一下，为了在别的地方使用
        var self = this;
        
        if( arguments.length === 1 ){
            
            // 如果是字符串,获取第一个元素指定的属性节点值返回
            if( jQuery.isString( attr ) ){
                return this[ 0 ][ attr ];
            }
            
            // 如果是对象,把对象中所有的属性添加到所有的元素中
            else if( jQuery.isObject( attr) ){
                
                // 使用jQ静态each方法遍历attr对象
                jQuery.each( attr, function( key, val ){
                    // 这里便利到的val不是对象类型, 是基本数据类型
                    // 我们要使用的就是基本数据类型, 而this是基本数据类型的包装类型(),
                    // 所以这里不能使用this。
                    
                    //遍历所有的元素
                    self.each(function(){
                        
                        // 给遍历到的每一个元素分别设置外面遍历到的属性
                        this[ key ] = val;
                        
                    });
                    
                });
                
            }
        //如果参数个数为多个
        }else if( arguments.length >= 2){
            
            // 遍历所有元素分别设置对应的属性值
            this.each(function(){
                this[ attr ] = val;
            });
            
        }
        
        return this;
        
    },
    //获取或者设置元素的value的属性值
    val: function( value ){
        
        /*
         * 实现思路:
         * 1、如果arguments.length === 0,则直接返回第一个元素的value属性值
         * 2、否则,遍历所有的元素,分别设置对应的value属性值
         * 3、链式编程返回this
         **/
        
        // 没有传参,返回第一个元素的value属性值
        if( arguments.length === 0 ){
            return this[ 0 ].value;
        }
        
        // 否则给所有元素分别设置value值
        else {
            for( var i = 0, len = this.length; i < len; i++){
                this[ i ].value = value;
            }
        }
        
        //链式编程
        return this;
        
    },
    //获取或者设置元素的value的属性值
    _val: function( value ){
        
        /*
         * 实现思路:
         * 1、如果arguments.length === 0,则直接返回第一个元素的value属性值
         * 2、否则,遍历所有的元素,分别设置对应的value属性值
         * 3、链式编程返回this
         **/
        
        // 没有传参,返回第一个元素的value属性值
        if( arguments.length === 0 ){
            return this[ 0 ].value;
        }
        
        // 否则给所有元素分别设置value值
        else {
            this.each( function(){
                this.value = value;
            });
        }
        
        //链式编程
        return this;
        
    },
    //获取或者设置元素的value的属性值
    __val: function( value ){
        
        // 没有传参,借用prop获取第一个元素的value属性值
        if( arguments.length === 0 ){
            return this.prop( 'value' );
        }
        // 传参了,借用prop给所有元素设置新的value属性值
        else {
            return this.prop( 'value', value );
        }
        
    },
    // 设置或者获取样式
    css: function( styleName, style ){
        
        /*
         * 实现思路:
         * 1、如果arguments.length为1
         * 2、那么判断styleName是不是字符串, 是则获取第一个元素指定的样式
         * 3、判断styleName是不是对象。是则遍历这个对象得到所有的样式分别设置给所有元素
         * 4、如果arguments.length>=2,遍历所有元素分别设置指定的样式
         * 5、链式变成返回this
         **/
        
        if( arguments.length === 1 ){
            
            if( jQuery.isString( styleName ) ){
                return jQuery.getStyle( this[ 0 ], styleName );
            }
            
            else if( jQuery.isObject( styleName ) ){
                
                // 遍历styleName得到所有的样式
                for( var key in styleName ){
                    
                    // 遍历得到所有元素
                    for( var i = 0, len = this.length; i < len; i++ ){
                        
                        // 给素有的元素设置遍历到所有样式
                        this[ i ][ 'style' ][ key ] = styleName[ key ];
                        
                    }
                    
                }
            }
            
        }
        
        else if( arguments.length >= 2 ){
            
            //给所有元素设置指定样式
            for( var i = 0, len = this.length; i <len; i++ ){
                this[ i ][ 'style' ][ styleName ] = style;
            }
            
        }
        
        return this;
        
    }
} );

//重写所有事件
jQuery.each( ( "blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu" ).split(" "),
    function( i, eventName ){
        
        //事件设置
        jQuery.fn[ eventName ] = function( fn ){
            return this.on( eventName, fn );
        }
    } );

// 这是真正的构造函数，同时把构造函数放在了原型中
var init = jQuery.fn.init = function( selector ) {

    // null、undefined、NaN、0、false、''
    if ( !selector ) {
        return this;
    }

    // function
    if ( jQuery.isFunction( selector ) ) {

        // 打包给ready静态方法处理
        jQuery.ready( selector );
    }

    // string ==> ( html || selector )
    else if( jQuery.isString( selector ) ) {

        // 为了用户友好体验，先去掉首尾空白字符
        selector = jQuery.trim( selector );

        // html
        if( jQuery.isHTML( selector ) ) {

            // 利用一个临时的div来创建DOM，
            // 然后把创建好的DOM依次push给实例。
            var tempDiv = document.createElement( 'div' );
            tempDiv.innerHTML = selector;
            [].push.apply( this, tempDiv.childNodes );

        }

        // selector
        else {

            try {
                [].push.apply( this, document.querySelectorAll( selector ) );
            }catch(e) {
                // 如果报错了，那么手动补一个length属性，代表没有获取到任何元素
                this.length = 0;
            }
        
        }
    }

    // array || likeArray
    else if( jQuery.isLikeArray( selector ) ) {
        [].push.apply( this, [].slice.call( selector ) );
    }

    // 其它
    else {
        this[0] = selector;
        this.length = 1;
    }
};

// 替换构造函数的原型 为 jQuery工厂的原型
// 为了实现插件，让外界可以透过jQuery.fn访问到init原型
init.prototype = jQuery.fn;

// 暴露工厂和工厂的简称
w.jQuery = w.$ =jQuery;
	
}( window ));

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

主要涉及技术：
前端开发
公众号开发、开源爱好者

联系QQ:395336343

很惭愧

只做了一点微小的工作
谢谢大家