jQuery学习笔记

简单记录一下学习jQuery中遇到的比较好的点，值得记录下来的（可能有点乱）

链式编程——排他思想的简化

//将当前字体变红色 其余的（siblings是除自己之外的兄弟）字体全恢复黑色
$(this).css("color","red").siblings().css("color","#000");

动画

• show([speed],[easing],[fn]) 显示（参数下同）
• hide() 隐藏
• slideDown() 滑动下来
• slideUp() 滑动上去
• fadeIn() 淡入
• fadeOut() 淡出
• fadeTo([[speed],opacity,[easing],[fn]]) 指定透明度（前俩参数都要有）
   鼠标悬停到哪张图，其余图就透明度(opacity)变低，就实现了悬停高亮
• animate(params,[speed],[easing],[fn]) 用于创建自定义动画的函数
   第一个参数是对象，代表要运动的结果，如 left: 50，则移动到50的地方（移动的元素要有定位）
• stop() 停止所有在指定元素上正在运行的动画（解决动画排队现象，所有动画都有这个问题）
   在动画函数之前调用 可阻止当前动画之前为完成的所有动画 $(".box").eq(2).stop().slideToggle();

位置

• height() 获取元素高度 仅含高度 无padding什么的
• width() 获取元素宽度 仅含宽度
• innerWidth()、innerHeight() 包括padding的宽 高
• outterWidth()、outterHeight() 包括border的宽 高
• outterWidth(true)、outterHeight(true) 包括margin的宽 高
• offset() 返回一个对象 其中包含两个属性 top、left 相对文档的偏移量，和父盒子有无定位无关（该方法可用于获取和修改元素位置）
• position() 返回一个对象 其中包含两个属性 top、left 相对最近的有定位的父盒子的偏移量 （该方法不可修改元素位置）
• scrollTop() 被卷去的头部的长度
• scrollLeft() 被卷去左边的宽度

自动触发

• element.事件() 会触发默认行为
• element.trigger(事件) 会触发默认行为（事件冒泡）

• element.triggerHandler(事件) 不会触发默认行为（事件也不会冒泡）

  注意 若想要触发事件的默认行为，若事件为a的点击，想触发默认行为跳转页面，直接a.trigger("click")不行，要在a标签里加一个span再监听span的内容

鼠标事件

• mouseover mouseout 子元素移入移出时也会触发父元素的事件
• mouseenter mouseleave 不会

apply方法的小用

function() {
    arr = [1,2,3];
    [].push.apply(this, arr);
    //上面这句话相当于 把arr这个真数组转变为了伪数组
}

• [].push作用是 找到数组的push方法
• apply(this, arr) 是将当前函数内部的this修改为为函数的this，本来是谁调用this就指向谁，apply就用来修改
• arr作为参数传递给push函数，所以最终就将arr中的值都push给了当前对象，且对象也拥有了length属性，成了伪数组

apply和call方法的比较

call 和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。

它们俩唯一不同点就是传参方式

第一个参数都一样，就是要修改函数体内部this指向变成什么，

第二个，call第一个以后的参数都作为前面调用者的参数，而apply只能有两个参数，第二个是一个数组，里面包括所有待传的参数

真伪数组的转换

这里先说一下伪数组的定义，具有以下两种特性的对象就可以称之为伪数组（js中一切皆对象）

1. 有0 1 2 3...的索引值
2. 有length属性

真数组——>伪数组

var farr2 = {};
var arr2 = [1,3,5,7];
[].push.apply(farr2, arr2);
console.log(farr2);

1. 找到数组的push方法 [].push()
2. 利用apply改变内部的this指向 使arr2传入farr2

伪数组——>真数组

先说第一种方法吧，有兼容性问题（ie8及以下不支持）

var farr = {0:1, 1: 2, 2: 3, length: 3};
var arr = [];
[].push.apply(arr, farr);
console.log(arr);

原理和上面一样，就不赘述了

第二种方法 用slice 而不是push，此方法没有兼容性问题

• 先回顾一下数组的slice方法，它是用于数组切片处理的，也就是截取数组
  1. 若不传参，则默认返回一个与当前数组相同的新的数组
  2. 传入一个参数，则返回当前数组这个索引开始往后的元素
  3. 两个，就是begin-end（不包含end）

var farr3 = {0:1, 1: 2, 2: 3, length: 3};
//这里选择不传参数 则返回整个数组并赋给arr3
var arr3 = [].slice.apply(farr3);
console.log(arr3);