【锋利的jQuery】读书笔记

前两天看了极客学院的jQuery入门视频，但是感觉这套视频偏介绍，作为入门学习，还是不够，看完之后能够看懂现成的jQuery代码，但是要讲我之前写的原生JavaScript代码用jQuery重写的时候，却遇到了很多问题，所以还是准备重新系统的学习一下jQuery。
先看看这本《锋利的jQuery》，之后再快速过一遍其他的教学视频，应该能够更好的掌握，从而达到能够熟练的使用jQuery来编写网页效果的水平。

下面是《锋利的jQuery》的读书笔记：

在jQuery中，$就是jQuery的简写形式，例如：

$("#id")与jQuery("#id")是等价的；
$.ajax和jQuery.ajax也是等价的。

如果没有特别说明$都是jQuery的简写形式。

重要代码：

$(document).ready(function(){
    //内容
});

这段代码的作用类似于原生JavaScript中的window.onload方法，但比原生中的更好用，它能够同时编写多个函数，还能使用简化的写法：

$(function(){
//内容
});

jQuery的代码风格：

1）链式操作风格：简单来说就是将需要执行的各种函数写成一长串。这样一行代码就能实现很复杂的效果了。
但是呢，如果一行中有太多的操作，就会太长了，不便于看懂理解和维护，此时适当的换行，便于理解维护。一般来说，对同一个对象不超过3个操作的，可以直接写成一行；对同一个对象进行多个操作的，可以每行写一个操作，或者按照功能块来分，将同一个功能块的几个操作写在同一行；对于多个对象少量操作的，可以每个对象写一行，涉及到子元素的时候，可以适当的进行缩进。
简单的例子如下：

2）为代码添加注释：因为jQuery的选择器功能强大，可以很容易的用几行代码就搞定原生JavaScript需要写很多行才能实现的效果。这种时候，如果不加注释，其他人就很难阅读代码的功能，所以在需要的地方适当的增加注释，解释功能，无论是日后自己阅读还是跟他们合作分享的时候，都会好很多。
通过良好的编码风格和习惯，能够提高开发效率。

jQuery对象和DOM对象

jQuery对象和DOM对象如何区分：
DOM对象就是原生JavaScript中通过getElementById或者getElementByTagName来获取DOM树节点得到的对象。DOM对象可以使用JavaScript中的方法，如innerHTML。
jQuery对象是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery中独有的，他可以使用jQuery中的方法，如html()。

$("#id").html();

等同于：

document.getElementById("id").innerHTML;

要注意的是，DOM对象和jQuery对象，只能使用各自的方法，不能使用对方的方法。例如：

 $("#id").innerHTML;
 document.getElementById("id").html();

都是错误的。另外，通过$(“#id”)和document.getElementById(“id”)所取得的对象也并不等价，前者是jQuery对象，后者是DOM对象，并非同一个东西，不要搞混。

jQuery对象和DOM对象的转换
首先要约定定义变量风格，即将jQuery对象和DOM对象赋值给变量时应该体现出不同，例如：

var $variable=jQuery对象；
var variable=DOM对象；

因为jQuery对象不能使用DOM对象中的方法，但是有些情况要用的时候，是可以相互转换的。具体方法如下（详见书P31）：

jQuery转换为DOM对象：因为jQuery都是数组对象，所以转换时使用[index]和get(index)这两种方法。
DOM转换为jQuery对象：只要使用$()把DOM对象包起来，就变成jQuery对象了。

jQuery选择器：

jQuery的选择器完全继承了CSS的风格，只是CSS选择器是找到元素为其添加样式，而jQuery选择器是找到元素为其添加行为。另外，jQuery中涉及的操作CSS样式的部分比单纯的CSS功能更加强大。并且有跨浏览器的兼容性。

注意，目前学到的除了 (document)之外，所有的 (“body/#id/.class等”)中都必须有引号。

另外，在原生JavaScript中，为了更严谨，需要测试元素的存在性，若html中元素不存在，则会报错；而在jQuery中都都已经封装好了，这也大大减少了工作量，避免了此类错误。这样即使以后因为某些原因删除了html中的一些元素，也不用担心网页的JavaScript代码会报错了。需要注意的是$(“#id”)获取的永远是对象，即使网页上没有该元素。因此，如果需要判断存在性时，要用其他方式，详见书P46

jQuery通过选择器来取得jQuery对象，而jQuery对象都是数组对象，所以不需要再想原生JavaScript那样，使用很多循环来遍历数组了，直接操作即可。

基本选择器

这里要注意的是，当需要选择多个元素的时候，直接在$(“”)中写入，并使用 ， 隔开即可，并且不同类型的选择器可以写在一起。

层次选择器

这里要注意，第一个是所有的子孙元素。第二个只是儿子辈的子元素。
另外第三、四个并不常用，因为有更好的方式代替他们：

$(".one") .next("div");  等价于    $(".one+div")；  
$("#one") .nextAll("div");  等价于    $("#one~div")；  

过滤选择器

内容过滤选择器：

可见性过滤选择器：

属性过滤选择器：

子元素过滤选择器：

表单对象过滤选择器：

表单选择器：

注意：若有些选择器名称中含有 · # （ [ 等特殊字符的时候，在使用$(“”)取得对象时可能需要使用转义符进行转义。

另外注意：后代选择器（父子选择器）使用空格，而过滤选择器不使用空格。所以要注意不要应为空格影响选择对象失败。

jQuery中的DOM操作

1）DOM操作的分类：一般来说DOM操作分为3个方面：DOM Core，DOM-THML和DOM-CSS.
DOM Core:
DOM Core并不专属于JavaScript，任何一种支持DOM的程序设计语言都可以使用它。
JavaScript中的：getElementById(), getElementByName(),getAttribute和setAttribute()等方法都是DOM Core的组成部分。

HTML_DOM：
使用JavaScript为HTML编写脚本的时候，有许多专属于HTML-DOM的属性。

CSS_DOM：
CSS-DOM是针对CSS的操作。在JavaScript中，CSS-DOM技术的主要作用是获取和设置style对象的各种属性。通过改变style对象的各种属性，可以使网页呈现出不同的效果。

2）jQuery作为JavaScript的库，继承并发扬了JavaScript对DOM对象的操作的特性，使开发人员能方便的操作DOM对象，下面介绍jQuery中的各种DOM操作。
查找节点：
查找元素节点：

查找属性节点：

创建节点：

使用$(html)来创建元素节点，并使用append()来插入，在元素中可以加入文本，例如：
var $li_1=$("<li>在这里还能加文本</li>");  //创建第一个元素
var $li_2=$("<li>在这里还能加文本</li>"); //创建第二个元素
$("ul").append($li_1);  //添加到<ul>节点中
$("ul").append($li_2);  //这两个连续添加，还可以采用链式写法如下：
$("ul").append($li_1).appen($li_2); 
可以用同样的方法创建属性节点：
var $li_3=$("<li title="香蕉">香蕉</li>");//元素节点，文本节点，属性节点都创建了。

插入节点：
插入节点的方法也有很多，上边用了append()方法，还有其他方法如下表：


这些插入节点的方法不仅能将新创建的DOM元素插入到节点中，也能对原有的DOM元素进行移动。

删除节点：
若想要删除文档中的元素，jQuery提供了两种节点删除的方法，remove()和empty()：
remove():
从DOM中删除所有匹配的元素，出入的参数根据jQuery选择器来筛选。当某个节点用remove()方法删除后，该节点所包含的的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后使用这些元素，这样可以先删除再插入，实现元素移动。
另外，remove方法也可以通过传递参数来选择性的删除。
empty():
严格来讲，empty方法并不是删除节点而是清空节点。他能清空选定元素中所有的内容，把该元素变成一个空元素。

复制节点：
使用clone()方法来复制元素，需要注意的是，默认复制出来的元素不具有任何行为。可以通过传入参数clone(true)，使得复制出来的新元素也有事件行为。

替换节点：
若要替换某个节点，jQuery提供了相应的方法，即replaceWith()和replaceAll()
replaceWith():
将所有匹配的元素都替换成指定的HTML或者DOM元素。
replaceAll():
其用法跟replaceWith一样，只是颠倒了。例如：

$("p").replaceWith("要插入的东西</br>");     //把p中的东西替换成 要插入的东西</br>。
$("要插入的东西</br>").replaceAll("p");   //把 要插入的东西</br> 换到P里边去。

包裹节点：
若要将某个节点用其他标记包裹起来，jQuery提供了相应的方法，即wrap()和warpAll()还有warpInner(）。该方法对于需要在文档中插入额外的结构化标记非常有用，而且它不会破坏原始文档的语义。例如：

$("strong").warp("<b></b>");   //每个<strong>元素都用<b>标签包裹起来
$("strong").warpAll("<b></b>");   //用一个<b>标签把所有<strong>元素包裹起来
$("strong").warpInner("<b></b>");   //用<b>标签把<strong>元素里边的所有内容包裹起来

属性操作：

在jQuery中，用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性。

$("p").attr("属性名","属性值");   //获取p元素的属性并改为属性值
$("p").attr({"属性1名":"属性1值","属性2名":"属性2值","属性3名":"属性3值"}); //当有多个需要设置时
$("p").removeAttr("属性名");  //删除p元素的属性 

样式操作：

jQuery中可以使用attr()方法来获取，或者设置p元素的class。这里是替换

jQuery中还有专门用来追加样式的方法，addClass()来给对象追加一个class，而不替换原有的。若前后两个class设置同一属性，则后者覆盖前者。

追加样式和设置样式的区别：

删除样式：jQuery中可以使用removeClass()方法来删除样式:当其中不传入参数的时候，将删除所有样式；若传入一个样式名称，则删除该样式；若需删除多个样式，在样式名称之间加空格即可。

切换样式：jQuery提供了toggleClass()方法控制样式的重复切换。如果类名存在就删除它，如果不存在就添加它。

判断是否含有某个样式：hasClass()方法用来判断是否含有某个样式，若有返回true，否则放回false。

设置和获取HTML，文本和值

html()方法：此方法类似于innerHTML属性，可以用来读取或者设置某个元素中的HTML内容。当无参数时获取内容，有参数时修改内容。
注意：html()方法可以用于XHTML文档，但不能用于XML文档。

text()方法：此方法类似于innerText属性，可以用来读取或者设置某个元素中的文本内容。无参数时获取，有参数时修改。text()方法对XHTML文档和XML文档都有效。

val()方法：用来获取或者修改input元素中的value属性。
该方法配合焦点事件，可以实现输入框中获得焦点之后提示消失，失去焦点之后提示出现的效果。

遍历节点

childern()方法：该方法用于取得匹配的子元素的集合。注意这里只是儿子辈的，不包括再往下的元素。
next()方法：取该元素的后一个同级元素。
next()方法：取该元素的前一个同级元素。
sibling()方法：取该元素前后所有的同级元素，相当于反选。
closest()方法：向上取得最近的匹配元素。首先检查当前元素是否匹配，匹配则返回它本身。若不匹配则向上查找其父元素，逐级向上直到找到匹配的元素。若什么都没找到则返回一个空的jQuery对象。

CSS-DOM操作

CSS-DOM技术简单来说就是读取和设置style对象的各种属性。style属性很有用，但最大的不足是无法通过它来提取到通过外部CSS设置的样式信息，而在jQuery中这些都非常简单，可以直接用css()方法来获取元素的样式属性。

$("p").css("color");     //获取元素的样式颜色
$("p").css("color"，"red");     //将元素的样式颜色设置为红色
$("p").css({"backgroundColor":"red","font-size":"30px"});     //设置元素的多个样式

下面说几个CSS-DOM中常用的方法：
offset()方法：用于获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效。
position()方法：用于获取元素相对于最近一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，返回对象包含两个属性，即top和left。
scrollTop()方法和scrollLeft()方法：这两个方法分别用于取得元素的滚动条距顶端的距离和左侧的距离。

jQuery中的事件和动画

在浏览器页面加载完毕之后，jQuery使用$(document).ready()方法为DOM元素添加事件。该方法与原生JavaScript中的window.onload()方法类似但不同。相对于window.onload()方法，$(document).ready()方法有以下两个优势：
1.window.onload()方法是在页面全部加载完成后进行操作。而$(document).ready()方法在页面的DOM准备就绪的时候就可以进行调用了，不需要等待页面的所有图片下载完成，加载速度快很多。
注意：因为使用jQuery方法的时候图片还未能全部加载完，可能会出现图片宽高等属性无效的情况，此时可以使用$(window).load()方法。
2.当网页中有多个需要加载完成后执行的操作时，用window.onload()方法不能直接实现，会很麻烦。而使用$(document).ready() 方法时，每次调用它都会在现有的行为上追加新的行为，这些行为函数会根据注册的顺序依次执行。

另外，$(document).ready()方法有以下3中书写形式：

//完整的形式
$(document).ready(function{          
        //执行内容
}); 
//简写形式： 一般使用这种形式
$(function(){
    //执行内容
})；
//半简写形式： 当$()不带参数的时候，默认参数就是document.
$().ready(function(){
    //执行内容
});

jQuery中的绑定事件：

jQuery中使用on/bind和off/unbind来绑定和解绑事件。一些经常用的事件如click，mouseover，mouseout等，会提供简写方式：

//绑定
$(function(){
    $("#id").on("click",function(){
        $("#id").show();
    });
});
//简写
$(function(){
    $("#id").click(function(){
        $("#id").show();
    });
});

还可以同时绑定多个事件，来减少代码量：

合成事件：

jQuery中有两个合成事件：hover()和toggle()
hover(enter,leave)； 其中enter，leave分别是进入和出去时候要执行的函数。
toggle(func1,func2,func3,…); 其中func1,func2,func3分别是鼠标第几次单击时执行的函数。另外，toggle()方法在jQuery中还有另一个作用：切换元素的可见状态。如：$(“#id”).toggle();

事件冒泡：

当几个元素嵌套，且都有同一行为的时候，触发内部的元素，行为会像水中的泡泡一样向上冒去，一层层扩散到其上级元素直至顶端。
jQuery中使用stopPropagation()方法可以停止事件冒泡：详见P127

jQuery中的阻止默认行为：
在jQuery中提供了preventDefault()方法来阻止元素的默认行为。例如想要在点击提交按钮时验证表单内容，当表单不符合提交条件时，弹出提醒并且阻止提交（默认行为）。

若想同时对对象停止冒泡和默认行为，也可以直接返回return false；这是对在时间上同时调用stopPropagation()和stopPropagation()的一种简写形式。

事件捕获

事件捕获和事件冒泡是刚好相反的过程，事件捕获是从上到下依次触发。但jQuery不支持事件捕获（现在呢？），需要使用时请用原生JavaScript。

事件对象属性：

jQuery对事件对象的常用属性进行了封装：
event.type()方法：获取事件类型
event.target()方法：获取触发事件的元素
event.relatedTarget()方法：
event.pageX()和event.pageY()方法：获取光标相对于页面的x，y坐标。
event.which()方法：在鼠标单击事件中获取鼠标的左，中，右键；在键盘事件中获取键盘的按键。
event.metaKey()方法：在键盘事件中获取ctrl按键
event.originalEvent()方法：指向原始的事件对象。

模拟操作

trigger()方法：用来触发事件模拟操作。详见P134
1.常用模拟
2.触发自定义事件
3.传递数据
4.执行默认操作

jQuery中的动画

1.show()和hide():
相当于display的block和none。加入参数可以平滑过渡。
2.fadeIn()和fadeOut();
通过改变透明度实现淡入淡出。
3.slideUp()和slideDown();
下滑显示，上滑隐藏。
4.animate()；
jQuery中可以使用animate()方法来自定义动画，语法结构为：

在方法中加入回调函数，可以实现动画完成后执行函数。
通过该方法可以自定义出复杂漂亮的动画。可以设置多个动画同时执行，也可以设置先后执行。例如：

停止元素的动画和判断动画状态

可以视同stop()方法来停止匹配元素正在进行的动画。

判断元素是否处于动画状态：

其他动画方法

除了上边提到的方法，jQuery中还提供了3个专门用于交互的动画方法：
1.toggle(speed,[callback])
2.slideToggle(speed,[callback])
3.fadeTo(speed,opacity,[callback])

动画方法概括

jQuery对表单，表格的操作及更多应用

P157