jQuery学习笔记——流水账part1

链式调用的jQuery开始………

一段丑陋的代码

$("#btn")
.mousemove(function (e) {
console.log("mousemove");
})
.mouseout(function (e) {
console.log("mouseout");
});

这是一种很常见的代码风格，你可以在Android的dialog设置，java的Rxjava，或者您自己设计build模式的时候看到这种风格的代码，每一个方法都返回jQuery对象本身，链式调用的代码看起来是如此的具有可读性。（当然，也没有一定要这么调用的道理）

$和jQuery()是全局命名空间中定义的唯一两个变量，他们的作用是一样的，用来返回0个或者多个DOM元素，由此可见，jQuery是一个工厂函数(参见设计模式里面的工厂模式(factory model))。（为了防止$冲突，可以使用jQuery.noConflict()释放$变量，这样便只能使用jQuery()函数）

再次见证一段丑陋的代码

$("div").css("background-color", "red").show("fast");

再次的链式调用，首先调用$()这个工厂函数找到了所有div元素，返回一个jQuery对象，接着设置他们的css属性，并再次返回修改后的jQuery对象，最后调用show方法，：），当然，您要是乐意，还可以一直这样调用下去

再看如何调用万能的$()函数

上面见过两种调用方式，一是传入css选择器，一是传递一个element，document，或者windinw对象

然而还存在另外的两种方式

传递html字符串，并具有可选的第二参数，如下新建一个img元素并设置它的图片地址和点击事件

var img = $("<img/>",
{
"src" : "./-1110677825.jpg",
"click" : function () { alert(213) }
}
);

最后便是传递一个函数，本质上是window.onLoad版本的jQuery版本,它拥有完整写法和简便写法

$(document).ready(function () { });

$(function () { });

传递的函数具有唯一参数，指向jQuery函数，所以可以用一种巧妙的方式在外部释放掉,而在内部继续使用别名

jQuery(function ($) { });

傻傻分不清的函数和方法

函数是指jQuery命名空间里面的函数，方法是指jQuery对象调用的方法

$.each(a,f) $(a).each(f)

这里的each方法类似es5的foreach()数组方法，对jQuery对象中的每一个元素调用回掉函数，回调函数作为匹配元素的方法来调用，因此！可以在回掉函数里面用this关键字指代element对象，这里还会传递元素索引值和元素对象本身作为第一第二参数给回调函数（元素对象和this都是原生的dom对象，必要的时候考虑用$()封装），当然这个方法并不常用

再来一个：

一个通用的方法 is()，接受一个选择器作为参数，如果元素有一个匹配该选择器，则返回ture。

最简单最常用的getter和setter

看到getter和setter总会谜之想起C#里面定义对象属性…………

然后和C#比起来，jQuery显然更懒了，getter和setter是同一个方法，传入新值的时候，则设置并返回jQuery对象方便链式调用，不传入新值，则返回当前值。

注意getter的场景，只会查询元素集里面的第一个元素，返回的是单个值，所以getter只能出现在链式调用的末尾。

比如我们可以

用attr方法来获取和设置元素的html属性，

用css方法获取和设置元素的css样式（不能返回复合属性的值，比如font，padding），

用addClass，removeClass，toggleClass来添加或者移除元素的css类，

用val方法来设置和获取html表单元素的value属性，也包括获取和设置复选单选下拉框的选中状态

用text和html方法来设置和获取元素的纯文本或html内容，二者的区别在于，text会返回所有匹配元素的所有后代文本节点的纯文本内容，html则只会返回第一个匹配元素的html内容

用offset获取和设置元素的位置，获取到的位置信息带有left和top属性

用position方法只能获取元素的位置，且位置偏移是相对父元素的，而不是offset那样相对文档

其余的width，height懒得说了，顾名思义…….

不走寻常路的data方法

它也是一个getter setter方法，和其他getter/setter的区别在于，它可以设置自定义的元素数据

比如这样的

$(“div”).data(“x”,1);

配套的removeData方法接受一个字符串参数，用作删除元素中与该字符串相关联的值

这两个方法都具有函数形式$.

修改文档结构

jQuery里面有两类方法可以达成插入和替换元素的操作，区别在于append这类的方法会返回调用该方法的jQuery对象，appendTo这类的方法则是返回被插入的jQuery的对象

clone方法执行复制操作，如果需要把元素的事件属性一起复制，需要传入true参数

三个包装元素的方法wrap家族懒得说了

删除元素的方法，empty和remove，区别在于，empty会删除每个选中元素的所有子节点，但是不会修改元素自身，而remove则是会移除元素自身包括元素的内容，当然remove方法接受一个选择器参数。