Hello World

发表于 2018-03-24

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1	$ hexo new "My New Post"

More info: Writing

Run server

1	$ hexo server

More info: Server

Generate static files

1	$ hexo generate

More info: Generating

Deploy to remote sites

1	$ hexo deploy

More info: Deployment

JavaScript全局变量污染问题

发表于 2018-01-16 | 分类于 javascript

引言
当我们刚接触JavaScript的时候，我们写的大部分js代码，一般都是写一些函数在JS文件里边，然后通过script标签引进来，在DOM节点上绑定onclick等事件，尤其是个人独立不太大型的项目的时候，套路基本都是这样。

存在的问题

当我们开始慢慢接触一些大型项目，多人合作开发的时候，慢慢我们就会发现，这样简单的写一些js文件，然后随心所欲的开发，会出现许许多多的问题。由于每个人的编码风格不太相同，一些变量和函数的命名或多或少的会出现一些问题，尤其是这些问题导致的一些命名冲突问题，非常麻烦，非常难以发现和解决。

关于全局变量和window

var a = 100;
function fn1 (){
      b = 200;
}
function fn2(){
}

上面的a是全局变量，b虽然没有声明，但是也是全局可以访问的隐式全局变量，函数fn1和fn2都属于挂在window下面的全局变量
我们可以通过3中方法访问到上面的变量和函数：

直接访问
使用window，例如：window.a ， window.fn1 ， window.fn2
利用中括号[] 例如：window[a]

关于全局变量污染

由于大型项目多人协作开发，每个人都会创建许多js文件，如果公司有一套完整的开发命令规范，可以有效的避免许多开发中的问题，但是许多公司是没有这些开发规范的。
如果程序员A写了一个分割字符串的函数叫做fn，另一个人在另一个js文件也写了一个fn函数，功能是分割数组，那么很尴尬，这种变量污染，如果你不小心，你会调试到崩溃的。
因为你调用了fn，你以为是分割字符串，但是其实分割字符串的fn已经被分割数组的fn覆盖了，返回的结果不是，又正巧没有报错，那么调试起来很麻烦的。

减少污染

为了避免过多这样的冲突，以及模块之间的耦合性更低，需要减少这样的污染，这个时候匿名函数就是我们的救星,作用就类似于C++当中的命名空间或者Java中的包（package）

匿名函数防止变量被污染

（function(){
    var exp={};
    var name="aa";
    exp.method=function(){
        return name;
    };
    //通过window暴露exp出去，在Node.js中也有专门的模块实现这样的功能
    window.ex=exp;
})();

总结

函数可以分割作用域，如果用匿名函数包裹起来，那么里面的所用的变量和函数，都会变成局部变量，外部就无法污染了，想用什么属性，就挂在window下面开放出去就可以了

HTML 事件句柄

发表于 2017-11-22

DHTML事件句柄
`onmouseover`	鼠标指针移上去
`onmouseout`	鼠标移开的效果
`onclick`	点击事件
`onmousedown`	按住鼠标时灯才会亮
`onmouseup`	抬起鼠标时灯才会亮
`onload`	当页面完成加载是显示一个提示框
事件	当…时发生
`onabort`	用户终止页面加载
`onblur`	用户离开对象（失去焦点）
`onfocus`	用户激活对象（获取焦点）
`onchange`	用户改变对象的值
`onclick`	用户点击对象（单击）
`ondblclick`	用户双击对象（双击）
`onkeypress`	按压键盘
`onkeydown`	按下键盘
`onkeyup`	松开键盘
`onload`	页面完成加载
`onmousedown`	用户按下鼠标按钮
`onmousemove`	鼠标指针在对象上移动
`onmouseover`	鼠标指针移动到对象上（鼠标悬停）
`onmouseout`	鼠标指针移出对象
`onmouseup`	用户释放鼠标按钮
`onreset`	用户重置表单
`onsubmit`	用户提交表单
`onselect`	用户选取页面上的内容
`onunload`	用户关闭页面
`Offset` 家族	拿到的是盒子大小包括边框和padding
`OffsetWidth`	宽
`OffsetHeight`	高
`OffsetParent`	第一个非静态定位元素的父元素若是没有就是Body
`OffsetLeft`	和offsetParent之间的距离
`OffsetTop`
`Scroll`	指的是内容大小
`ScrollWidth/Height`
`ScrollTop`	当有垂直滚动条时上面卷起来的部分
`ScrollLeft`	当有水平滚动条时左边卷起来的部分
获取界面的滚动效果	Window.pageYoffset 垂直方向 Window.pageXoffset 水平方向
节点
`ChildNodes`	所有孩子的节点
`First child`	第一个节点
`Lastchild`	最后一个节点
`Nextsibling`	下一个兄弟节点
`PreviousSibling`	上一个兄弟节点
`ParentNode`	父节点
元素
`ParentNode`	可以拿到父元素
`Children`	所有子元素
`firstElementChild`	第一个子元素
`LastElementChild`	最后一个子元素
`NextElementsibling`	下一个兄弟元素
`PreviousElementSibling`	上一个兄弟元素
`appendchild`	把子元素增加到父元素里
`CloneNode(false)`	只克隆节点
`CloneNode(true)`	克隆节点和内容
`InsertBefore`	（插入的，插入的位置）
创建节点
`Document.write InnerHTML`	不常用
`CreateElement`	创建节点
`Document.createElement`（’标签名’）
删除子元素
`Removechild`	从爹里面删除儿子
数组方法	Var arr = new Amay()
`Push()`	末尾添加一个元素或多个元素
`Pop()`	末尾删除一个元素
`Unshift`	最前面添加一个或多个元素
`Shift`	最前面删除一个元素
`reverse()`	反转数组
`Sort()`	排序需要一个参数
`Sort(a,b)`	数字比较
`Return a-b;`	升序
`Return b-a`	降序

`Concat()`连接数组	Var arr1 = [] Var arr2 = [] Arr.concat(arr2,arr3)
`Slice()`	两个参数[开始位置，结束位置]
`Splice(3)` 一个参数	从第3个开始后面都删除包括3
`Splice(3,3)`两个参数	从第3个开始删除3个（包括第三个也删除）
`Splice(3,5,100,200,50)`	多个参数第3个开始删除3个然后往里面添加内容

数组方法

发表于 2017-11-21 | 分类于 javascript

操作数组的方法

delete

可以借助delete运算符能删除数组元素，因为Array也是对象，数组元素实际上与对象属性是一样。

var a = [1,2,3,'hello',4,5];//定义数组
delete a[3];// 删除指定下标的元素
console.log(a);// [1, 2, 3, empty, 4, 5]
// delete只能删除元素的值，而不是元素，因此delete并没有改变数组的长度
// 删除的那个元素 他的依然存在 只是没有值 （empty）

push

push()方法能够把一个或多个元素添加到数组的最后（尾部），然后返回添加后的数组长度

var a = [] // 定义数组 模拟空栈
a.push(1);// 进栈 栈值为[1] 此时该方法返回值为1
a.push(2,3,4);// 进栈 栈值为[2,3,4] 
console.log(a) // [1,2,3,4]
// push 是按参数的顺序依次添加到数组的尾部，所以他是原来数组结构的基础上进行操作，而不是在新创建的数组上执行操作。 在实际开发中，用户可以利用这个特性，动态改变数组的值

pop

pop()方法操作刚好相反，它能够删除数组中最后一个元素，并返回这个元素的值

var arr = [1,2,3,4,5]
arr.pop();//删除最后一个元素
console.log(arr);// [1,2,3,4]
// pop()方法 当删除最后一个元素后，会自动把数组长度减1，如果数组为空，则pop()不会改变数组结构 仅返回undefined

unshift

unshift()方法是在数组头部执行操作，可以包含多个参数，并把这些参数一次性插入数组的头部，第一个参数为数组新的元素0，第二个参数为新的元素1，以此类推。这与一次次插入元素是不同的

1
2
3

var arr = [0]// 定义数组
arr.unshift(1,2)// 同时增加两个参数
console.log(arr);// 返回 [1,2,0]

如果分开操作，结果就不同了

var arr = [0]
arr.unshift(1)
arr.unshift(2)
console.log(arr)// 返回[2,1,0]

shift

shift()方法它是将数组第一个元素移除，并返回该元素的值，然后将余下所有元素往前移一位，以填补数组头部的空缺。如果数组为空，shift()将不进行任何操作，返回undefined

1
2
3

var arr = [0,1,2]
arr.shift()
console.log(arr)//[1,2]

【温馨提示】unshift 和 shift 方法也是在原数组上进行修改，而不是创建新数组

示例 pop()和unshift()配合使用可以模拟队列数据结构的操作模式即先出先进

var arr = [1,2,3,4,5]
   for(var k in arr){// 遍历数组
       var tepm = arr.pop()//先出 把出去的元素值暂时保存
       console.log(tepm);// 先进 把出去的元素值放大十倍，再进入
       // console.log(arr);
       
       arr.unshift(tepm*10);
   
   }
   console.log(arr);// [10,20,30,40,50]

push 与 shift 结合使用模拟队列数据结构的操作模式即先进先出

var a = [1,2,3,4]
for(var k in a){
    var t = a.shift() 
    a.push(t*10)

}
console.log(a);//[10,20,30,40]

concat

concat是一个比较特殊的数组元素添加方法他采用粘接的方式把参数添加到数组中

1
2
3

var arr = [1,2,3,4,5]
var b = arr.concat(6,7,8)
console.log(b);//[1,2,3,4,5,6,7,8]

concat 方法比较特殊使用应注意下面几个问题

concat()方法可以跟随多个参数，并把他们作为元素按顺序连接到数组的尾部。如果参数是数组，则concat()方法会把它打散分别作为单独的元素连接到数组的尾部
1
2
3
4

var a = [1,2,3,4,5]
var b = a.concat([1,2,3],[4,5])
console.log('数组-->',b,'数组长度--->',b.length);//数组--> [1, 2, 3, 4, 5, 1, 2, 3, 4, 5] 数组长度---> 10

虽然concat()方法能够打散一维数组，但是他不会递归打散参数数组中包含的数组

var a = [1,2,3,4,5]
var b = a.concat([[1,2],3],[4,5])

console.log('数组-->',b,'数组长度--->',b.length);// 返回长度9 说明参数数组[1,2]没有被打散
//数组--> (9) [1, 2, 3, 4, 5, Array(2), 3, 4, 5]0: 11: 22: 33: 44: 55: (2) [1, 2]6: 37: 48: 5length: 9__proto__: Array(0) 数组长度---> 9

concat()方法将创建并返回一个新数组而不是在原来数组基础上添加新元素。所以希望在原数组基础上添加元素，建议使用push 和 unshift 来实现但是 push和unshift 不能打散参数数组，而是把它作为单数的参数执行添加操作。

##splice

splice()方法是增加和删除多个数组元素的通用方法。这个方法的参数比较复杂，其中第1个参数为操作的起始下标位置，第2个参数指定要删除元素的个数，第3个及后面的所有不定参数为将要插入的元素。

var a = [1,2,3,4,5]
//第1个参数表示从该数组中下标为1 开始
//第2个参数表示删除2个元素
//第3个后面的 就是在删除的位置同时添加元素
a.splice(1,2,3,4,5);
console.log(a);// [1,3,4,5,4,5]

var a = [1,2,3,4,5]
// 数组的下标是从0开始
//如果只传一个参数 则是从下标 2 开始 删除后面所有
a.splice(2);
console.log(a);//[1,2]

var a = [1,2,3,4,5]
// 给两个参数时  就是从下标为 2 开始 删除 只删除2个
a.splice(2,2);
console.log(a);//[1,2,5]

参数取负值问题如果第一个参数为负值则按绝对值从数组右侧开始向左侧定位，如果第2个参数为负值，则被视为0


var a = [1,2,3,4,5]
 a.splice(-2,-2,2,3);
  console.log(a);//[1, 2, 3, 2, 3, 4, 5]

slice

slice()方法与splice()方法功能很相近但是它能够截取数组中指定区段的元素，并返回这个子数组，该方法包含两个参数，分别指定截取子数组的起始和结束位置的下标。

arr.slice(start,end)
//start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
// end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
//返回值
//返回一个新的数组，包含从 start 到 end （不包括该元素）的 ar 中的元素。

//说明
//请注意，该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。
//提示和注释
//注释：您可使用负值从数组的尾部选取元素。

//注释：如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。

reverse

reverse()方法能够颠倒数组元素的排列顺序该方法不需要参数
1
2
3
4
var arr = [1,2,3,4,5]
arr.reverse();
console.log(a)//[5,4,3,2,1]
// 注意 该方法是在原数组基础上操作，并不是创建新的数组

sort

sort()方法能够根据一定条件对数组元素进行排序。如果调用sort()方法时没有传递参数。则按字母顺序对数组中的元素进行排序

1
2
3

var a = ['a','e','d','b','c']
a.sort()
console.log(a)//["a", "b", "c", "d", "e"]

所谓的字母顺序，实际上是根据字母在字符编码表中的顺序进行排序的，每个字符在字符表中都有一个唯一的编号。
如果元素不是字符串则sort 方法会试图把数组的元素都转换成字符串，以便进行比较
在排序时，sort 方法将根据元素值进行逐位比较，而不是根据字符串的个数进行排序，在排序时首先比较每个元素的第一个字符，在第一个字符相同的情况下，在比较第2个字符，以此类推。


var a = ['aba','baa','aab'] 
a.sort() 
console.log(a)// ["aab", "aba", "baa"]

在任何情况下，数组中undefined 的元素都被排列在数组末尾
sort 方法是在原数组基础是那个个进行排序操作不会创建新的数组

##toString

toString 将数组转换成一个字符串

##toLocaleString

toLocaleString()把数组转换成局部字符串

##join

join()将数组元素连接起来构建一个字符串

vue 组件中通讯

发表于 2017-11-10 | 分类于 vue.js

组件

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树

创建组件的两种方式：1 全局组件 2 局部组件
Vue实例中的配置项（如：methods、filters、watch、computed、directives、生命周期钩子函数）都可以在组件中使用

全局组件

说明：全局组件在所有的vue实例中都可以使用
注意：先注册组件，再初始化根实例
注意：组件中的 data 必须是函数

// 1 注册全局组件
Vue.component('my-component', {
  template: '<p>A custom component!</p>',
  data() {
    return {
      msg: '注意：组件的data必须是一个函数！！！'
    }
  }
})

// 2 使用：以自定义元素的方式
<div id="example">
  <my-component></my-component>
</div>

// =====> 渲染结果
<div id="example">
  <p>A custom component!</p>
</div>

template属性的值可以是：
- 1 模板字符串
- 2 模板id

<!-- 2 模板id 示例 -->
<script type="text/x-template" id="tpl">
  <p>A custom component!</p>
</script>

template: '#tpl'

extend：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })

// 内部执行过程：
var Home = Vue.extend({
  template: '',
  data() {}
})
Vue.component('home', Home)

局部组件

说明：局部组件，是在某一个具体的vue实例中定义的，只能在这个vue实例中使用

var Child = {
  template: '<div>A custom component!</div>'
}

new Vue({
  // 注意：此处为 components
  components: {
    // <my-component> 将只在当前vue实例中使用
    'my-component': Child
  }
})

具体实例：<div id="app"> <parent></parent></div>

  <script>
  // Vue.component('child', {
  //   template: `
  //     <div>
  //       <h2>子组件：小刚</h2>  
  //     </div>
  //   `
  // })

  const vm = new Vue({
    el: '#app',
    data: {},

    // 局部组件
    // 因为这两个组件都是注册在 vm实例中的，所以在vm实例管理的范围内（#app），直接可以使用这两个组件
    components: {
      parent: {
        template: `
          <div>
            <h1>父组件：老王</h1>
            <child></child>
          </div>
        `,
        
        // 组件中定义子组件：
        // ！！！组件是独立的个体，只有形成包含关系，才能够变为父子级嵌套组件
        // 因为这个child组件是注册在 parent组件中的，所以在parent组件管理的范围内容，直接可以使用这个组件
        components: {
          child: {
            template: `
              <div>
                <h2>子组件：小刚</h2>  
              </div>
            `
          }
        }
      },
      
      // 这个组件无法在 上面parent组件 中使用！！！
      // child: {
      //   template: `
      //       <div>
      //         <h2>子组件：小刚</h2>  
      //       </div>
      //     `
      // }
    }
  })
</script>

组件通讯

父组件到子组件

方式：通过props属性来传递数据
注意：属性的值必须在组件中通过props属性显示指定，否则，不会生效
说明：传递过来的props属性的用法与data属性的用法相同

<hello msg="120"></hello>
<hello my-msg="'abc'"></hello>

<!-- js -->
<script>
  components: {
    hello: {
      // 显式创建props及其传递过来的属性
      props: ['msg', 'myMsg'],
      template: '<h1>这是 hello 组件，这是消息：{{msg}} --- {{myMsg}}</h1>'
    }
  }
</script>

子组件到父组件

方式：父组件给子组件传递一个函数，由子组件调用这个函数
说明：借助vue中的自定义事件（v-on:cunstomFn=”fn”）
$emit()：触发事件

<hello @pfn="parentFn"></hello>

<script>
  new Vue({
    methods: {
      // 父组件：提供方法
      parentFn(data) {
        console.log('父组件：', data)
      }
    }
  })

  Vue.component('hello', {
    template: '<button @click="fn">按钮</button>',
    methods: {
      // $emit 是Vue中内置的一个方法，用来调用方法的
      //1 要调用的方法，作为第一个参数
          //    fn 是父组件传递过来的
          // 2 第二个参数：表示要传递给方法fn的参数
      fn() {
        this.$emit('pfn', '这是子组件传递给父组件的数据')
      }
    }
  })
</script>

非父子组件通讯

在简单的场景下，可以使用一个空的 Vue 实例作为事件总线

$on()：绑定事件

var bus = new Vue()

// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})

示例：组件A —> 组件B

<!-- 组件A： -->
<com-a></com-a>
<!-- 组件B： -->
<com-b></com-b>

<script>
  var bus = new Vue()

  var vm = new Vue({
    el: '#app',
    components: {
      comB: {
        template: '<p>组件A告诉我：{{msg}}</p>',
        data() {
          return {
            msg: ''
          }
        },
        created() {
          // 定义事件：
          bus.$on('tellComB', (msg) => {
            this.msg = msg
          })
        }
      },

      comA: {
        template: '<button @click="emitFn">告诉B</button>',
        methods: {
          emitFn() {
            // 调用组件B中定义的事件：
            bus.$emit('tellComB', '我的vue')
          }
        }
      }
    }
  })
</script>

vue 常用的指令

发表于 2017-11-10 | 分类于 vue.js

vue中的指令

解释：指令 (Directives) 是带有 v- 前缀的特殊属性
作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

v-text

解释：更新DOM对象的 textContent

1	<h1 v-text="msg"></h1>

v-html

解释：更新DOM对象的 innerHTML

1	<h1 v-html="msg"></h1>

v-bind

作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
语法：v-bind:title="msg"
简写：:title="msg"

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on

作用：绑定事件
语法：v-on:click="say" or v-on:click="say('参数', $event)"
简写：@click="say"
说明：绑定的事件从methods中获取
案例：跑马灯

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

事件修饰符

.stop 阻止冒泡，调用 event.stopPropagation()
.prevent 阻止默认行为，调用 event.preventDefault()
.capture 添加事件侦听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发时，才会触发事件
.once 事件只触发一次

v-for

作用：基于源数据多次渲染元素或模板块

<!-- 1 基础用法 -->
<div v-for="item in items">
  {{ item.text }}
</div>

<!-- item 为当前项，index 为索引 -->
<p v-for="(item, index) in list">{{item}} -- {{index}}</p>
<!-- item 为值，key 为键，index 为索引 -->
<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>
<p v-for="item in 10">{{item}}</p>

key属性

推荐：使用 v-for 的时候提供 key 属性，以获得性能提升。
说明：使用 key，VUE会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
vue key
vue key属性的说明

1
2
3

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

样式处理 -class和style

使用方式：v-bind:class="expression" or :class="expression"
表达式的类型：字符串、数组、对象（重点）
语法：

<!-- 1 -->
<!-- 重点 -->
<div v-bind:class="{ active: true }"></div> ===>
<div class="active"></div>

<!-- 2 -->
<div :class="['active', 'text-danger']"></div> ===>
<div class="active text-danger"></div>

<!-- 3 -->
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>
<div class="active text-danger"></div>


--- style ---
<!-- 1 -->
<div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>
<!-- 2 将多个 样式对象 应用到一个元素上-->
<!-- baseStyles 和 overridingStyles 都是对象 -->
<div v-bind:style="[baseStyles, overridingStyles]"></div>

v-if 和 v-show

条件渲染
v-if：根据表达式的值的真假条件，销毁或重建元素
v-show：根据表达式之真假值，切换元素的 display CSS 属性

1 2	<p v-show="isShow">这个元素展示出来了吗？？？</p> <p v-if="isShow">这个元素，在HTML结构中吗？？？</p>

提升性能：v-pre

说明：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

1	<span v-pre>{{ this will not be compiled }}</span>

提升性能：v-once

说明：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

1	<span v-once>This will never change: {{msg}}</span>

javascript 常见的错误

发表于 2017-09-29 | 分类于 JavaScript

常见错误类型

SyntaxError解析错误
ReferenceError引用错误
RangeError范围错误
TypeError类型错误
URIError统一资源标识符函数错误
EvalError eval()函数执行错误
InternalError内部错误

SyntaxError解析错误

代表尝试解析语法上不合法的代码的错误

描述：这个报错是由于我们的语法规则书写不正确造成的，比如变量命名不规范，函数书写不正确等。

//变量不能以数字开头
var 666a = 2999;
//函数缺少小括号
function fn {}

ReferenceError引用错误

表明一个不存在的变量被引用

描述：当你尝试引用一个未被定义的变量时，将会抛出一个 ReferenceError

var a = 100;
//这定义的a，但是打印的是b，由于b没有声明和赋值，那么会提示ReferenceError引用错误
console.log(b);//提示：b is not definded
function fn() {
      console.log("fn");
}
fn1();//定义的方法名是fn，调用fn1，也会提示ReferenceError引用错误，fn1 is not definded

RangeError范围错误

当一个值不在其所允许的范围或者集合中

描述：当试图传递一个不合法的数字到数组的构造函数时，或者是传递一个number参数给一个范围内不包含该number的函数时，都会引发RangeError

//这里传递一个不合法的负数，当做数组的长度，会报错RangeError
var arr = new Array(-2);

//number方法容易出现RangeError的有：
//toPrecision() 方法以指定的精度返回该数值对象的字符串表示
//toFixed() 方法使用定点表示法来格式化一个数
//toExponential() 方法以指数表示法返回该数值字符串表示形式

(5).toExponential(150);
//报错RangeError: toExponential() argument must be between 0 and 100

TypeError类型错误

用来表示值的类型非预期类型时发生的错误

描述：当传入函数的操作数或参数的类型并非操作符或函数所预期的类型时，将抛出一个 TypeError 类型错误

1
2
3

var a = 100;
//把a当做函数去调用，会报错Uncaught TypeError: a is not a function
a();

URIError统一资源标识符函数错误

用来表示以一种错误的方式使用全局URI处理函数而产生的错误

描述：当向全局URI处理函数传递一个错误的URI时，一个URIError错误会被抛出。
涉及的函数有：encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()

EvalError eval()函数执行错误

代表了一个关于evel函数的错误.此异常不再会被JavaScript抛出，但是EvalError对象仍然保持兼容性.

描述：该错误类型已经在ES5中不使用了，只是为了保证与以前代码兼容，才继续保留。

InternalError内部错误

表示出现在JavaScript引擎内部的错误。例如： “InternalError: too much recursion”（内部错误：递归过深）

描述：非标准特性，请尽量不要在开发环境中使用它！

jquery基本使用

发表于 2017-09-24 | 分类于 jquery

JQuery

为什么要学jquery ?

Jquery 是目前实际开发中最常用的js库（作为一个前端开发工程师，jquery是必会项目）

Jquery之所以被广泛使用

使用方便
帮助我们解决了兼容性问题

Js 原生代码写错会报错

报错的缺点：后面的代码不执行

报错的优点　：　可以快速定位问题

／／库　储存了一堆我们要用到的方法

Jquery　

第一步　引包

第二步　写入口函数　＄（ｆｕｎｃｔｉｏｎ（）{}）

＄（）　／／函数

＄　函数根据传入的参数不同，那么他有不同的功能

１　入口函数

ｊｓ　原生的入口函数　window．ｏｎｌｏａｄ　当所有资源加载完毕

ｊｑｕｅｒｙ　的入口函数　＄（ｆｕｎｃｔｉｏｎ（）{}）　只要ｄｏｍ　树加载完毕就执行

　入口函数一

＄（ｆｕｎｃｔｉｏｎ（）{}）

入口函数二

＄（ｄｏｃｕｍｅｎｔ）．ｒｅａｄｙ（ｆｕｎｃｔｉｏｎ（）{}）

２．　将一个ｄｏｍ对象转换成一个ｊｑｕｅｒｙ　对象

＄（ｄｏｃｕｍｅｎｔ）

３．　如果传进来一个选择器，则就是jquery　选择器的功能

ｃｏｎｓｏｌｅ．ｌｏｇ（＄（＇ｄｉｖ＇））

ｃｏｎｓｏｌｅ．ｌｏｇ（＄（＇#ｂｏｘ＇））

ｃｏｎｓｏｌｅ．ｌｏｇ（＄（＇．ｂｏｘ１＇））

ｊｑｕｅｒｙ　

ｊｑｕｅｒｙ　是对ｄｏｍ对象的封装　写起来比较方便

有时需要把ｊｑｕｅｒｙ　对象转换成ｄｏｍ　对象　ｊｑｕｅｒｙ　这个库　，不是封装了ｄｏｍ的所有方法

如何把ｊｑｕｅｒｙ转换成ｄｏｍ

１．　＄（＇ｄｉｖ＇）［ｉｎｄｅｘ］　　推荐使用

　２．　＄（＇ｄｉｖ＇）．ｇｅｔ（ｉｎｄｅｘ）

ｃｏｎｓｏｌｅ．ｌｏｇ（＄（＇ｄｉｖ＇）．ｇｅｔ（０））；

ｃｏｎｓｏｌｅ．ｌｏｇ（＄（＇ｄｉｖ＇）［０］）；

把一个ｄｏｍ　对象转换成ｊｑｕｅｒｙ对象

Var　ｂｏｘ　＝　ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔＢｙＩｄ（＇ｂｏｘ＇）

ｃｏｎｓｏｌｅ．ｌｏｇ（＄（ｂｏｘ））

＄（ｂｏｘ）．ｃｓｓ（＇ｂａｃｋｇｒｏｕｎｄＣｏｌｏｒ＇，＇ｒｅｄ＇）

１．什么是jquery

ｊｑｕｅｒｙ　是一个ｊｓ库

２．为什么会被广泛使用

２．１　　使用方便

２．２　处理的兼容性的问题

３．ｊｑｕｅｒｙ版本

１．ｘ　兼容ＩＥ６７８

２．ｘ　　ＩＥ９以上

3.x 2. X 分支支持了一些新的特性

min.js 压缩之后（用于生产环境） .js 没有压缩（用于开发阶段）

4.$()

$(function(){}) 传入的是匿名函数：入口函数 -à dom 加载完毕就立刻调用

$(dom)传入dom 对象：把一个don 对象转换成jquery 对象

$(‘div’) 传入选择器：获取页面上的元素

5. jquery 对象和dom 对象

Jquery和 dom 之间的转换

Jq 转 dom ： $(‘div’)[index] $(‘div’).get(index)

Dom转 jq ： $(dom)

Jquery对象是一个伪数组里面存了dom 对象

Jquery 不能使用dom 的方法

Dom也不能使用jquery 的方法

过滤选择器

筛选选择器

Children() 子元素

console.log($(‘#far’).children(‘’)); //类似子代选择的效果所有直接子元素

console.log($(‘#far’).children(‘#son’)); //写参数了,就按照参数返回

find() 后代元素

console.log($(‘#far’).find()); //要求我们必须传一个选择器进来

console.log($(‘#far’).find(‘.box’)); //传什么就返回符合条件

siblings() 所有兄弟元素

console.log($(‘#far >#son1’).siblings(‘#son’)); //传什么,返回符合条件的兄弟元素

parent（）通过儿子找父亲

console.log($(‘#grason’).parent());

console.log($(‘#grason’).parent(‘#far’));//获取不到

eq(index)

console.log($(‘div’));

console.log($(‘div’).eq(3));

next() 下一个兄弟元素

console.log($(‘#son’).next(‘div’))

console.log($(‘p’).next(‘#son1’));

jquery的选择器

基本选择器

标签，id ，类，交集，并集

层级选择器

后代子代

过滤选择器

eq(index) odd even

筛选选择器（方法）

Children() 子代

Find（）后代

Parent（）找父亲

Siblings() 找所有兄弟

Next（）找下一个兄弟元素

注意：这些选择器最终返回的都是jquery对象

Index方法

Jq 第二天

样式操作

1.1

WebAPI

发表于 2017-08-26 | 分类于 webAPI

API的概念：

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

Web API**的概念：**

浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

此处的Web API特指浏览器提供的API(一组方法)，Web API在后面的课程中有其它含义

JS**组成：**

1. ** ECMAScript - JavaScript的核心**

定义了javascript的语法规范

JavaScript**的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关**

2．BOM - 浏览器对象模型

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

DOM 学习

学习目标：1. 学会找DOM对象 2. 学会给DOM对象注册事件 3. 修改DOM对象的属性

什么是DOM ？

Document Object Model 文档对象模型

文档对象模型

HTML页面的所有的内容，包括标签、节点、注释、属性等，在JS的DOM中，都存在一个一个的对象与之对应。因此当我们想要操作这些HTML的内容时，只需要操作这些对象即可。

节点：页面中所有的内容，包括标签、节点、注释、树形都被封装成了对象，我们把这些对象叫做节点。

元素：我们最常操作的是标签节点，也叫元素。

文档树模型

HTML结构是一个树形结构，同样的，这些对应的对象也是一个树形的结构，树形结构的好处是能够非常容易找到某个节点的子节点、父节点、兄弟节点。

子节点：child

兄弟节点：sibling

父节点：parent

API：Application Programming Interface：应用程序编程接口，其实就是一大堆的方法，我们可以把API看成是工具。做不同的事情需要不同的工具。

做饭需要一套做饭的工具：锅碗瓢盆

打仗需要一套打仗的工具：刀枪剑戟

找对象需一套找对象的工具：钱权颜缘 + 车房钱权

DOM：用来操作页面元素的一套工具。

BOM：用来操作浏览器一些行为的一套工具。

XML：XML(Extensible Markup Language：可扩展性标记语言，通常用于配置文件，或者和json一样用于数据交互。

     <name>张三</name>

   <age>18</age>

    <sex>男</sex>

</student>

DOM初体验

想要操作DOM，首先需要获取到DOM对象

根据id 获取元素

var element = document.getElementById(‘box’);

document:指的是整个html页面，在DOM中被封装成了一个对象，就是document对象
getElementById:通过id获取元素
参数是一个字符串，即id
返回值是一个元素，即一个对象，标签中存在的属性，在这个元素中也有属性与之一一对应。

如何打印一个对象

Console.log(): 以标签的形式打印一个对象

Console.dir(): 以对象的形式打印一个对象

注册事件

1．JavaScript和HTML之间的交互是通过事件来实现的。

2. 事件就是文档或者浏览器窗口发生的一些特定的交互瞬间。

3. JavaScript是一门事件驱动的脚本语言。

事件三要素

事件源：触发事件的元素
时间名称：触发事件名称
事件处理函数：触发事件时调用的函数

注册事件的两种方式

。行内式注册事件

例如<img src =”images/1.jpg” alt = “描述”id = “img” onclick = ‘changPic()’>

。内嵌式注册事件

` var img = document.getElementById(‘img’);

Img.onclick= function() {

Img.src= ‘images/2.jpg;

案例显示与隐藏

<script>

    var btn = document.getElementById('btn');

    var box = document.getElementById('box');



    console.dir(btn);



    btn.onclick = function(){

        if(btn.innerHTML == '隐藏'){

            box.className = 'hidden';

            btn.innerHTML = '显示';

        }else{

            box.className = 'visible';

            btn.innerHTML = '隐藏';

        }

    }

</script>

案例【图片轮流切换】

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        img {

            height: 400px;

            display: block;

        }

    </style>

</head>

<body>

<button id='btn'>切换</button>

<img src="../images/pic1.jpg" alt="" id='picture'>





<script>

    var btn = document.getElementById("btn");

    var picture = document.getElementById("picture");

    var cuttn = 1;

    btn.onclick = function(){

        cuttn++;

        picture.src = '../images/pic' + cuttn + '.jpg';

        if(cuttn == 6){

            cuttn = 0;

        }

    }

</script>

</body>

</html>

给a 标签注册事件

returnfalse 可以阻止页面跳转

案例【给a标签注册事件】

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<a href="www.baidu.com" id='bai'>百度</a>

<a href="javascript:void(0)" >传智播客</a>



<script>

var bai = document.getElementById("bai");

    bai.onclick = function(){

        alert('你猜还能不能跳转');

        return false;

    }

</script>

</body>

</html>

Javascript : void(0) 的作用

javascript:是伪协议，表示url的内容通过javascript执行。
void(0)表示不作任何操作，这样会防止链接跳转到其他页面。
让页面不跳转，JavaScript:void(0)是最通用的方式。

元素的属性

1 .标签属性

在标签中存在的属性，在DOM对象中同样存在，使用JS代码可以改变标签的相关属性。

案例美女相册

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        body {

            margin-left: 100px;

        }

        ul {

            overflow: hidden;

        }

        li {

            float: left;

            list-style: none;

            margin-right: 10px;

        }

        #placeholder {

            width: 400px;

            height: 250px;

        }

    </style>

</head>

<body>

<ul id='beauty'>

    <li><img src="../images/1-small.jpg" alt=""></li>

    <li><img src="../images/2-small.jpg" alt=""></li>

    <li><img src="../images/3-small.jpg" alt=""></li>

    <li><img src="../images/4-small.jpg" alt=""></li>

</ul>

<img src="../images/placeholder.png" alt="" id = 'placeholder'>

<p id='desc'>描叙</p>





<script>

    var beauty = document.getElementById('beauty');

    var picters = beauty.getElementsByTagName('img');

    var placeholder = document.getElementById("placeholder");

    var desc = document.getElementById("desc");





    for(i = 0; i<picters.length; i++ ){

       picters[i].aa ='../images/' + (i +1) + '.jpg';

        picters[i].bb = '美眉'+ (i+1);





        picters[i].onclick = function(){

           // console.log(this);

            placeholder.src = this.aa;

            desc.innerHTML = this.bb;

        }

    }

</script>

</body>

</html>

除了常见属性以外，标签中还存在一些特殊的属性。只要设置了这些属性，无论有没有值，都会起作用。例如:disabled、checked和selected属性。

案例禁用文本输入框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input type="text" id='txt'><br>

<button id='btn'>禁用文本框</button>

<br>

<input type="radio" checked>

<select name="" id="">

    <option value="">前端</option>

    <option value="">UI</option>

    <option value="">PHP</option>

    <option value="" selected>大数据</option>

    <option value="">JAVA</option>

</select>

<script>

    var

txt = document.getElementById("txt");

    var

btn = document.getElementById("btn");

    btn.onclick = function(){

        //disabled

是禁用文本框 属性是布尔类型

        txt.disabled = true;

    }

</script>

</body>

</html>

案例下拉列表

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<button id = 'btn'>挑媳妇了</button>

<select name="" >

    <option value="">韩雪</option>

    <option value="">蘑菇头</option>

    <option value="">凤姐</option>

    <option value="" selected>刘亦菲</option>

    <option value="">小龙女</option>

</select>



<script>

    var btn = document.getElementById("btn");

    var options = document.getElementsByTagName('option');



    btn.onclick = function(){

       var randow = Math.floor(Math.random() * options.length);

        options[randow].selected = true;

    }

</script>





</body>

</html>

自定义属性

<div id = ‘box’ aa = ‘1’></div> 在html 中给标签添加额外的属性

自定义的标签属性通过DOM使用点语法来获取

示例代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    .red-one {

      background-color: red;

      width: 200px;

      height: 200px;

    }

  </style>

</head>

<body>

<div id="box" class="red-one"

title="嘿嘿" aaa="呵呵呵"></div>

<script>

  var box = document.getElementById("box");

  //如果是原生的属性，可以通过点语法直接获取和修改

  console.log(box.id);

  console.log(box.className);

  console.dir(box);

  box.title = "嘻嘻";

  //如果是标签的自定义属性，需要通过setAttribute和getAttribtue来设置和获取

//  console.log(box.aaa);

  console.log(box.getAttribute("aaa"));

  box.setAttribute("aaa","哈哈哈");

  console.log(box.getAttribute("class"));

  console.log(box.getAttribute("title"));

  box.setAttribute("title","哇哇");

</script>

</body>

</html>

HTML和css 的常见的使用

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    * {

      margin: 0;

      padding: 0;

    }

    body {

      padding:100px;

    }

    input {

      float: left;

      height:60px;

    }

    input[type=text] {

      width: 300px;

      border:5px solid blue;

      box-sizing:border-box;

    }

    input[type=button] {

      width: 100px;

      border:2px solid red;

    }

    ul {

      width: 800px;

      height: 400px;

    }

    ul li {

      float: left;

      list-style:none;

      height: 100%;

      width: 25%;

      border-right:1px solid #000;

      box-sizing:border-box;

    }

    li:first-child {

      background-color: #f00;

    }

    li:nth-child(2) {

      background-color: #00f;

    }

    li:nth-child(3) {

      background-color: #0ff;

    }

    li:nth-child(4) {

      background-color: #ff0;

    }

  </style>

</head>

<body>

<!--accesskey 最开始只给input使用 -->

<!--<input type="text" accesskey="a">-->

<!--<a href="http://www.itcast.cn" accesskey="m">传智播客</a>-->

<!--

box-sizing属性对应的值

content-box:大部分元素默认值都是content-box.如果box-sizing属性的值为content-box，表示我们在CSS里设置的

宽和高代表的是内容的宽和高，不包括padding和border

border-box:如果box-sizing属性的值为border-box，表示我们在CSS里设置的

宽和高代表的是整个盒子的大小，包括padding和border

 -->

<!--<input type="text">-->

<!--<input type="button" value="搜索">-->

<ul>

  <li></li>

  <li></li>

  <li></li>

  <li></li>

</ul>

</body>

</html>

查找DOM 对象

根据ID获取元素

var box =document.getElementById("box"); //根据id名获取对应的元素

注意：只有document才有getElementById()方法，其它元素没有这个方法。

var father= document.getElementById("father");

var son =father.getElementsByTagName("div")[0]; //允许

var son =father.getElementById("son"); //不允许，只有document能够调用getElementById方法，其它元素不可以调用getElementById方法。

根据类名获取元素

var elements =document.getElementsByClassName("box"); //根据类名获取对应的元素

根据标签名获取元素

var links = document.getElementsByTagName(“a”)

1.根据标签名获取元素，返回的是一个伪数组

2.伪数组：可以跟数组一样进行遍历，但是不能使用数组的方法。

3.this的使用，谁调用，指向谁

其他获取元素的方式

通过name属性获取元素（不建议使用）

document.getElementsByName("name");

通过类名获取元素

document.getElementsByClassName("classname");

通过css选择器获取元素(一个元素)

document.querySelector("#box");

document.querySelector(".demo");

document.querySelector("div");

通过css选择器获取元素（返回一个伪数组，多个）

document.querySelectorAll("#box);

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

<div id="father">

  <p class="red-box"

id="son1">我是son1</p>

  <h1 class="red-box"

id="son2">我是son2</h1>

</div>

<p>我是个p</p>

<script>

  var father = document.getElementById("father");

  console.log(father);

  var sonP = father.getElementsByTagName("p")[0];

  console.log(sonP);

  //getElementById 只有document才能调用

//  var son2 =

father.getElementById("son2");

//  console.log(son2);

  //伪数组.通过类名来获取对应的元素

  var redBoxes = document.getElementsByClassName("red-box");

  console.log(redBoxes);

  //根据标签名获取到对应的元素

  var eles = document.getElementsByTagName("p");

  console.log(eles);

</script>

</body>

</html>

让点击的元素高亮显示

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    .yellow-bg {

      background-color: #ff0;

    }

  </style>

</head>

<body>

<a href="#">我是链接1</a>

<a href="#">我是链接2</a>

<a href="#">我是链接3</a>

<a href="#">我是链接4</a>

<a href="#">我是链接5</a>



<script>

  var links = document.getElementsByTagName("a");



  for(var i = 0; i < links.length;i++) {

    links[i].onclick = function () {

      this.className = "yellow-bg";

    }

  }

  console.log(i);

</script>

</body>

</html>

【排他思想】

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    .yellow-bg {

      background-color: #ff0;

    }

  </style>

</head>

<body>

<a href="#">我是链接1</a>

<a href="#">我是链接2</a>

<a href="#">我是链接3</a>

<a href="#">我是链接4</a>

<a href="#">我是链接5</a>



<script>

  var links = document.getElementsByTagName("a");



  for(var i = 0; i < links.length;i++) {

    links[i].onclick = function () {



      //把所有的都给干掉（包括自己）

      for(var j = 0; j < links.length;j++) {

        links[j].className = "";

      }

      //把自己复活

      this.className = "yellow-bg";

    }

  }

</script>

</body>

</html>

Tab栏练习

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style type="text/css">

    * {

      margin: 0;

      padding: 0;

    }



    ul {

      list-style: none;

    }



    .wrapper {

      width: 1000px;

      height: 475px;

      margin: 0 auto;

      margin-top: 100px;

    }



    .tab {

      border: 1px solid #ddd;

      border-bottom: 0;

      height: 36px;

      width: 320px;

    }



    .tab li {

      position: relative;

      float: left;

      width: 80px;

      height: 34px;

      line-height: 34px;

      text-align: center;

      cursor: pointer;

      border-top: 4px solid #fff;

    }



    .tab span {

      position: absolute;

      right: 0;

      top: 10px;

      background: #ddd;

      width: 1px;

      height: 14px;

      overflow: hidden;

    }



    .products {

      width: 1002px;

      border: 1px solid #ddd;

      height: 476px;

    }



    .products .main {

      float: left;

      display: none;

    }



    .products .main.selected {

      display: block;

    }



    .tab li.active {

      border-color: red;

      border-bottom: 0;

    }

  </style>

</head>

<body>

<div class="wrapper">

  <ul class="tab">

    <li class="tab-item active">国际大牌<span>◆</span></li>

    <li class="tab-item">国妆名牌<span>◆</span></li>

    <li class="tab-item">清洁用品<span>◆</span></li>

    <li class="tab-item">男士精品</li>

  </ul>

  <div class="products">

    <div class="main selected">

      <a href="#"><img src="images/guojidapai.jpg" alt=""/></a>

    </div>

    <div class="main">

      <a href="#"><img src="images/guozhuangmingpin.jpg" alt=""/></a>

    </div>

    <div class="main">

      <a href="#"><img src="images/qingjieyongpin.jpg" alt=""/></a>

    </div>

    <div class="main">

      <a href="#"><img src="images/nanshijingpin.jpg" alt=""/></a>

    </div>

  </div>

</div>



<script>

  var items = document.getElementsByClassName("tab-item");

  var mains = document.getElementsByClassName("main");



  for(var i = 0; i < items.length;i++) {

    items[i].index = i;

    items[i].onmouseover = function () {

      for(var j = 0; j < items.length;j++) {

        items[j].className ="tab-item";

        mains[j].className = "main";

      }

      this.className = "tab-item active";

//      console.log(this.index);

      mains[this.index].className = "main selected";

    }

  }

</script>

</body>

</html>

【标签内容】innerText 和innerHTML属性都是用来获取和设置标签的内容的。但是二者有区别。

l InnerHTML 可以用于获取和设置标签的所有内容包括标签和文本内容

//innerHTML:内部的HTML

// 获取标签内容的时候，不管标签还是文本，都能获取到

// innerHTML设置内容的时候，覆盖原来内容，标签也能生效，浏览器能解析这个标签。

  <!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    #box {

      width: 200px;

      height: 200px;

      border:1px solid #f00;

    }

    input {

      width: 400px;

      height: 200px;

    }

  </style>

</head>

<body>

<div id="box">

  <h1>我是div里的h1</h1>

</div>





<input type="text" value="我是input">

<input type="button" value="发布">

<script>

  var box = document.getElementById("box");

  var inputs = document.getElementsByTagName("input");



  inputs[1].onclick = function () {

    box.innerText = inputs[0].value;

  }



  console.dir(box);



  //innerHTML设置的内容，会被浏览器解析

//  box.innerHTML = "<h2>我是div里的h2</h2>";



  //innerText 设置的内容，会被当做普通的文本，不会被解析

//  box.innerText = "<h2>我是div里的h2</h2>";



  //innerHTML会获取到元素里的所有内容，包括标签

  //标准方法

//  console.log(box.innerHTML);



  //innerText只包含文本内容

  //IE浏览器的方法

//  console.log(box.innerText);



  //火狐浏览器的方法

//  console.log(box.textContent);



//  console.log(input.innerHTML);

</script>

</body>

</html>

l InnerText 可以用于获取和设置标签的文本内容，会丢弃掉标签

//innerText:内部文本

// 获取标签内容的时候，只会获取文本，标签扔掉了

// 设置标签内容的时候，覆盖原来内容，对标签进行转义（目的：把标签直接当文本来用）

二者的区别：

- innerHTML是W3C的标准属性，而innerText是IE提出来的属性，存在兼容性问题。因此更加推荐大家使用innerHTML。

- innerText的作用：防止xss攻击

l InnerText的兼容性问题

l  <!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    #box {

      width: 200px;

      height: 200px;

      border:1px solid #f00;

    }

    input {

      width: 400px;

      height: 200px;

    }

  </style>

</head>

<body>

<div id="box">

  <h1>我是div里的h1</h1>

</div>





<input type="text" value="我是input">

<input type="button" value="发布">

<script>

  var box = document.getElementById("box");

  var inputs = document.getElementsByTagName("input");



  inputs[1].onclick = function () {

    box.innerText = inputs[0].value;

  }



  console.dir(box);



  //innerHTML设置的内容，会被浏览器解析

//  box.innerHTML = "<h2>我是div里的h2</h2>";



  //innerText 设置的内容，会被当做普通的文本，不会被解析

//  box.innerText = "<h2>我是div里的h2</h2>";



  //innerHTML会获取到元素里的所有内容，包括标签

  //标准方法

//  console.log(box.innerHTML);



  //innerText只包含文本内容

  //IE浏览器的方法

//  console.log(box.innerText);



  //火狐浏览器的方法

//  console.log(box.textContent);



//  console.log(input.innerHTML);

</script>

</body>

</html>

【样式操作】标签不仅可以通过class属性操作样式，还可以通过style属性操作样。同样的DOM对象可以通过className操作样式，也可以通过style属性操作样

//1 style属性是一个对象

//2 style这个对象中属性值都是字符串格式

//3 标签中style属性有哪些样式名，在style这个对象中就有对应的属性名。

//4 标签中有一些属性带了-，比如background-color,到了style对象中，变成了驼峰命名法，backgroundColor（因为-在js中不是一个合法的标识符）

//5 DOM中的style属性只能获取和设置行内样式，在类样式中定义的样式通过style获取不到。

【关于body】//1.document.body : body比较常用，并且在页面中时唯一的，因此可以使用document.body直接获取

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <style>

    #box {

      width: 200px;

      height: 200px;

      background-color: red;

    }



   /*

    #box.demo {

      width: 400px;

      height: 400px;

      background-color: yellow;

    }

    */

  </style>

</head>

<body>

<div id="box"></div>

<script>

  var box = document.getElementById("box");

//  var body = document.getElementsByTagName("body")[0];

  document.body.style.backgroundColor = "greenyellow";



  //如果通过代码获取一个元素的样式，只能获取到行内样式

  console.dir(box.style.height);







  box.onclick = function () {

//    this.className = "demo";



    //设置的样式都是行内样式

    box.style.height = "400px";

    box.style.width = "400px";

    box.style.backgroundColor = "yellow";

  }

</script>

</body>

</html>

git 使用

发表于 2017-06-27 | 分类于 git

Git 使用

Git工作流程

git

git可以分为三种状态

你的文件可能处于其中之一：已提交（committed）、已修改(modified)和已暂存(staged).
已提交表示数据已经安全保存在本地数据库中。
已修改表示修改了文件，但是还没保存到数据库中。
已暂存表示对一个已修改文件的当前版本作了标记，使之包含在下次提交的快照中

由此引入GIt项目的三个工作区域的概念：

Workspace : 工作区
2.Index/Stage : 暂存区
3.Repository/ Reote : 仓库区（本地仓库、远程仓库）

##工作区
程序员进行开发改动的地方，是你当前看到的，也是最新的。
平时开发就是拷贝远程仓库中的一个分支，基于该分支进行开发。在开发过程中就是对工作去的操作。

##暂存区
.git 目录下的 index文件，暂存区会记录 git add 添加文件的相关信息，不保存文件实体，通过id指向每个文件实体，可以使用 git status 查看暂存区的状态，暂存区标记了你当前工作区中，哪些内容是被git管理的。

当我们完成某个功能的时候第一步就是通过git add 先提交到暂存区，被git管理。

本地仓库

git commit ‘提交信息’ 提交到本地仓库

远程仓库

先要 git pull 作用将远程的代码下载到本地通常在push之前，需要先pull一次

git push 仓库地址 master 在代码提交到远程仓库，注意master分支必须写，不能省略

常用git命令

`git init`	初始化仓库，在当前目录下生成一个隐藏文件夹.git
`git clone <url>`	克隆远程仓库
`git status`	查看状态
`git diff`	查看变更内容
`git add . / git add -A / git add -all`	添加当前目录下所有的文件
git add *.js	将当前目录下所有的js文件添加到暂存区
git add css	将css目录下所有的文件添加到暂存区
`git commit -m "提交说明"`	将文件从暂存区提交到仓库
`git commit # 需要使用vi输入内容`	如果不写提交说明，会进入vi编辑器，没有写提交说明，是提交不成功的。
`git commit -a -m '提交说明'`	如果是一个已经暂存过的文件，可以快速提交，如果是未追踪的文件，那么命令将不生效。
`git commit --amend -m "提交说明"`	修改最近的一次提交说明，如果提交说明不小心输错了，可以使用这个命令
`git config --list`	查看配置信息
`git log`	查看提交的日志
`git log --oneline`	简洁的日志信息
`git reset`	作用：版本回退，将代码恢复到已经提交的某一个版本中。
`git reset --hard 版本号`	将代码回退到某个指定的版本(版本号只要有前几位即可)
`git reset --hard head~1`	将版本回退到上一次提交
`git mv <old> <new>`	文件改名
`git rm <file>`	删除文件
`git rm --cached <file>`	停止跟踪文件但
`git log -p <file>`	查看指定文件的提交历史
`git blame <file>`	以列表方式查看指定文件的提交历史
`git checkout HEAD <file>`	撤销指定的未提交文件的修改内容
`git revert <commit>`	撤销指定的提交
`git branch`	显示所有分支
`git checkout <branch/tag>`	切换到指定的
`git checkout -b 分支名称`	创建并切换分支
`git branch -d 分支名称`	可以删除分支
注意：不能在当前分支删除当前分支，需要切换到其他分支才能删除。注意：`master`分支是可以删除的，但是不推荐那么做。
`git merge 分支名称`	将其他分支的内容合并到当前分支
`git rebase 分支名称`	衍合指定分支到当前分支
`git remote -v`	查看远程版本库信息
`git remote show <remote>`	查看指定远程版本库信息
`git remote add <remote> <url>`	添加远程版本库
`git fetch <remote>`	从远程库获取代码
`git pull <remote> <branch>`	下载代码及快速合并
`git push <remote> <branch>`	上传代码及快速合并
`git push <remote> :<branch/tag-name>`	删除远程分支或标签
`git push --tags`	上传所有标签

reset

reset 命令 把当前分支指向另一个位置，并且相应的变动工作区和暂存区
git reset --soft[commit]  只改变提交点，暂存区和工作目录的内容都不改变
git reset --mixed[commit] 改变提交点，同时改变暂存区的内容
git reset --hard[commit] 暂存区 工作区的内容都会被修改到与提交点完全一致状态
git reset --hard HEAD  让工作区回到上次提交时的状态

revert

git revert用一个新提交来消除一个历史提交所做的任何修改。

revert 与 reset 的区别

git revert是用一次新的commit来回滚之前的commit，git reset是直接删除指定的commit。

在回滚这一操作上看，效果差不多。但是在日后继续merge以前的老版本时有区别。因为git revert是用一次逆向的commit“中和”之前的提交，因此日后合并老的branch时，导致这部分改变不会再次出现，减少冲突。但是git reset是之间把某些commit在某个branch上删除，因而和老的branch再次merge时，这些被回滚的commit应该还会被引入，产生很多冲突。关于这一点，不太理解的可以看这篇文章。

git reset 是把HEAD向后移动了一下，而git revert是HEAD继续前进，只是新的commit的内容和要revert的内容正好相反，能够抵消要被revert的内容。

关于参数 –hard 的解释

git reset 的参数可以是以下三个值：
git reset --soft 版本号  ： 只重置仓库区
git reset --mixed 版本号 ： 重置仓库区和暂存区【默认】
git reset --hard  版本号 ： 重置仓库区和暂存区和工作区。
git reset 版本号         : 效果与--mixed一致

当使用了git reset命令后，版本会回退，使用git log只能看到当前版本之前的信息。使用git reflog可以查看所有的版本信息

git合并冲突

对于同一个文件，如果有多个分支需要合并时，容易出现冲突。
合并分支时，如果出现冲突，只能手动处理，再次提交，一般的作法，把自己的代码放到冲突代码的后面即可。

Quick Start

Create a new post

Run server

Generate static files

Deploy to remote sites

引言

存在的问题

关于全局变量和window

关于全局变量污染

减少污染

匿名函数防止变量被污染

总结

操作数组的方法

delete

push

pop

unshift

shift

concat

slice

reverse

sort

组件

全局组件

局部组件

组件通讯

父组件到子组件

子组件到父组件

非父子组件通讯

vue中的指令

v-text

v-html

v-bind

v-on

事件修饰符

v-for

key属性

样式处理 -class和style

v-if 和 v-show

提升性能：v-pre

提升性能：v-once

常见错误类型

SyntaxError解析错误

RangeError范围错误

TypeError类型错误

URIError统一资源标识符函数错误

EvalError eval()函数执行错误

InternalError内部错误

JQuery

为什么要学jquery ?

Jquery

ｊｑｕｅｒｙ

如何把ｊｑｕｅｒｙ转换成ｄｏｍ

把一个ｄｏｍ 对象转换成ｊｑｕｅｒｙ对象

１．什么是jquery

２．为什么会被广泛使用

２．１ 使用方便

２．２ 处理的兼容性的问题

３．ｊｑｕｅｒｙ版本

4.$()

5. jquery 对象和dom 对象

筛选选择器

Children() 子元素

find() 后代元素

siblings() 所有兄弟元素

parent（）通过儿子找父亲

eq(index)

next() 下一个兄弟元素

jquery的选择器

基本选择器

层级选择器

过滤选择器

筛选选择器（方法）

样式操作

Git 使用

Git工作流程

本地仓库

远程仓库

常用git命令

reset

Jquery　

ｊｑｕｅｒｙ　

把一个ｄｏｍ　对象转换成ｊｑｕｅｒｙ对象

２．１　　使用方便

２．２　处理的兼容性的问题