2018-07-02jQuery11 分钟读完 (大约 1589 个字)

《锋利的jQuery》读书笔记

读完了《锋利的jquery——第二版》，写点笔记。

认识jQuery

变量 $ 是 jQuery 的别名。

一般获取jquery变量会使用 $ 作为变量名前缀。
如：

1	var $variableName = jQuery对象;

入口函数

<!-- 全写 -->
<script>
    // 全写遵循了jQuery的语法。
    $(document).ready(function() {
        // code...
    });
</script>

<!-- 简写 -->
<script>
    $(function() {
        // code...
    });
</script>

对比window.onload

window.onload在网页所有资源加载完毕后执行，而$(document).ready()在DOM绘制完成后就会执行。
window.onload只能写一个，$(document).ready()可以写多个。
window.onload不能简写，$(document).ready()可以简写为$(function() {})。

代码风格

链式操作：有多个操作可以分成多行写。
添加注释

jQuery对象和DOM对象

DOM对象：使用原生js方法获取的元素就是DOM对象。
jquery对象：就是通过jquery包装DOM对象后产生的对象，可以使用jquery方法操作jquery对象。

对于DOM对象只能使用js方法，对于jquery对象只能使用jquery方法。

jquery对象和DOM对象的互相转化：

将jquery对象转化为DOM对象。

可以通过 [index] or get(index) 来将一个jquery对象转化为DOM对象。

// 获取一个jquery对象
var $cr = $('#cr');

// 转化为DOM对象
var cr = $cr[0];

// 获取一个jquery对象
var $cr = $('#cr');

// 转化为DOM对象
var cr = $cr.get(0);

DOM对象转化为jquery对象

对于一个DOM对象，只需要用 $() 将其包装起来就可以得到jquery对象。

1 2	var cr = getElementById('cr'); var $cr = $(cr);

解决jquery在其他库之后导入的冲突

将$移交给其他库使用。

// 释放$
jQuery.noConflict();
// 使用jQuery代替$
jQuery(function() {
    jQuery('p').click(function() {
        // code
    });
});

释放$并自定义快捷方式。

var jq = jQuery.noConflict();

jq(function() {
    // code
});

继续使用$并与其他库共存。

方法一：

// 释放$
jQuery.noConflict();

// 在jquery内部继续使用$
jQuery(function($) {
    $('#id').show();
    // code
});

方法二：

// 释放$
jQuery.noConflict();

(function($) {
    $(function() {
        // jquery code
    });
})(jQuery);

解决jquery在其他库之前导入的冲突

直接使用 jQuery ，将 $ 交给其他库，无需 jQuery.noConflict() 。

jQuery选择器

语法： $('#id') , $('.className') 等。

jQuery选择器获取到的永远是对象，无论存不存在该元素。
如果需要判断jQuery对象是否存在，用length判断或者转化为DOM对象判断。

这里省略了各种选择器的语法，随用随查。

jQuery中的DOM操作

DOM操作分为三个方面：

DOM core
HTML-DOM
CSS-DOM

利用jquery工厂函数 $(html) 制造jquery节点，其中 html 为html字符串。

1	var $html = $("<div>nothing</div>");

插入DOM

使用工厂函数创造了DOM节点后就要、将其插入到页面当中，使用到的方法有：

append()
appendTo(): 是append的反操作。
prepend(): 与append类似，是将元素插入到当前元素下的最前面。
prependTo(): 参考上面推断。
after(): 在元素后面插入。
insertAfter(): 上面的反操作。
before()
insertBefore()

删除DOM

remove(): remove操作返回这个DOM的引用，也就是该节点在被删除后依然可以被使用。还可以传一个选择器参数。
empty(): 清空节点的内部。
detach(): 和remove的区别是detach不会将该节点绑定的事件删除而remove会。

复制DOM

clone(): 复制该节点，可传参true同时复制该节点绑定的事件。

替换DOM

replaceWith()
replaceAll(): 和replaceWith是反操作。

包裹DOM

wrap(): 对每一个元素都进行包裹。
wrapAll()：对所有匹配的元素进行一次包裹。
wrapInner()：将匹配的元素的子内容进行包裹。

属性操作

attr(): get和set元素属性。
removeAttr()

样式操作

addClass()
removeClass()
toggleClass()
hasClass()
is()

操作html text和value

html(): 相当于innerHTML，可以get和set节点内的html。
text(): 相当于innerText。可以get和set节点内的text。
val(): 可以get和set节点的value。

遍历节点

children()
next()
prev()
siblings()
closest(): 向上取得最近的匹配的元素。
parent()
parents()

CSS-DOM操作

css(): 获取和设置样式。

jQuery中的事件和动画

jQuery事件

$(document).ready()
$(document).load(): 相当于window.onload()

$(document) 可以简写为 $() 。

事件绑定： $("#demo").bind("click", param, function() {})

还可以直接写事件名比如： $("#demo").click(function() {})

hover()事件
toggle()事件
阻止事件冒泡：

$("#demo").bind("click", function(event) {
    // do some thing.

    // 阻止冒泡
    event.stopPropagation();
    // 简写
    return false;
});

事件捕获

jquery不支持

阻止事件默认行为：

$("#demo").bind("click", function(event) {
    // do some thing.

    // 阻止默认行为
    event.preventDefault();
    // 简写
    return false;
});

移除事件：unbind(type, fn)

一次性事件：

one()

手动触发事件：

trigger()

可以用事件代替： click()

出发事件而不执行默认行为： triggerHander()

事件的命名空间

jQuery动画

show()
hide(): 等于display: none
fadeIn()
fadeOut()
slideUp()
slideDown()
animate(): 语法animate(params, speed, callback);
is(":animated"): 判断元素是否处于动画状态
delay(1000): 延迟动画。
toggle(speed, [callback]): 切换元素可见性
slideToggle()
fadeTo()
fadeToggle()

animate() 可以用来替代以上所有的动画。

jQuery操作表单表格等

addClass()
removeClass()
prop()和attr()
is()：判断元素是否满足括号中的内容。
trigger(event)
triggerHandler(event)
end()：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。
has()

jQuery中的Ajax

jQuery中的Ajax封装了 XMLHttpRequest 对象和 ActiveXObject 对象。

$.ajax()
$.get()
$.post()
$.getScript()：加载js文件
$.getJSON()：可跨域
$.each()：遍历数组和对象
serialize()：序列化元素
serializeArray()
$.param()

jQuery插件的使用和写法

插件用到什么的时候看插件的API文档即可。

暂时不需要写插件，需要写插件的时候再了解。

jQuery Mobile

用不着

jQuery版本变化

不作笔记

jQuery性能优化和技巧

性能优化

使用合适的选择器
缓存对象
循环操作DOM尽量降低开销
使用js原生for循环代替$.each
减少绑定事件的DOM数量
将代码封装为jQuery插件
使用jQuery的data方法获取html5的data属性
尽量使用js原生方法
压缩js文件

技巧

太多，用到的时候直接百度搜。

附录

随用随查。

支付宝

微信