Javascript & JQuery读书笔记

Hi All,

分享一下我学JS & JQuery的读书笔记：

1. JS的3个不足：复杂的文档对象模型（DOM），不一致的浏览器的实现和便捷的开发，调试工具的缺乏。
2. Jquery的选择器

　　　　a. 基本选择器：通过Id, class, tag Name来选择元素

　　　　b. 层次选择器：获取的是后代元素，子元素，相邻元素，同辈元素

　　　　　　1) $(“div span”)获取的是div下所有的span元素；

　　　　　　2) $(“div > span”)获取的是div下元素名是span的子元素

　　　　　　3)  $(“.one + div”)选取class名为one的近邻的同辈div元素{结果可能有多个}

　　　　　　4) $(“#two ~ div”)选取id为two的元素后面所有的同辈div元素

　　　　c. 过滤选择器：通过过滤规则来筛选出所需的Dom元素，过滤器都是以冒号（ ：）开头的。其可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤，表单对象属性过滤选择器。

　　　　d. 基本选择过滤器

　　　　　　1) $(“div : first”)选取所有div元素中的第一个div元素；$(“div :last”)相反。

　　　　　　2) $(“input : not(.myClass)”)选取class名不是myClass的所有input元素

　　　　　　3) $(“input : even”)选取所有索引是偶数的input元素；$(“input : odd”)相反。索引是从0开始的

　　　　　　4) $(“input : eq(1)”)选取索引等于1的input元素；$(“input : gt(1)”)选取索引大于1的input元素；$(“input : lt(1)”)则相反。

　　　　　　5) $(“:header”)选取网页中所有的<h1><h2><h3>…元素

　　　　　　6) $(“:animated”)选取当前正在执行动画的所有元素

　　　　　　7) $(“:focus”)选取当前获得焦点的元素

　　　　e. 内容过滤选择器

　　　　　　1) $(“div: contains(‘test’)”)选取文本内容包含‘test’的div元素

　　　　　　2) $(“div: empty”)选取不包含子元素（不包括文本元素）的div元素

　　　　　　3) $(“div : has(p)”)选取含有p元素的div元素

　　　　　　4) $(“div : parent”)选取拥有子元素的div元素

　　　　f. 可见性过滤器

　　　　　　1) $(“:hidden”)选取所有不可见的元素，包括type=’hidden’, style=’display : none’, style=’visibility : hidden’

　　　　　　2) $(“:visible”)选取所有可见的元素

　　　　g. 属性过滤选择器

　　　　　　1) $(“div[id]”)选取属性包含id的所有div元素

　　　　　　2) $(“div[title = test]”)选取属性包含title且值为‘test’的所有div元素；$(“div[title != test]”)则相反。

　　　　　　3) $(“div[title ^= test]”), $(“div[title $= test]”), $(“div[title *= test]”), $(“div[title |= test]”), $(“div[title ~= test]”), $(“div[id][title $= test]”)

　　　　h. 子元素过滤选择器

　　　　　　1) :nth-child(index/ even/ odd/ equation)  选取每个父元素下的第index个子元素或者奇偶元素，index是从1开始的。如：$(“ul li : nth-child(2)”),$(“ul li : nth-child(even)”), $(“ul li : nth-child(2n+1)”)

　　　　　　2) :first-child 选取每个父元素下的第1个子元素，如：$(“ul li : first-child”); :last-child则相反。

　　　　　　3) :only-child 如果某个元素是它父类元素中唯一的子元素，那么将会被选择，反之则不匹配。如：$(“ul li : only-child”)

　　　　i. 表单对象属性过滤选择器（主要是对所选择的表单元素进行过滤）

　　　　　　1) :enabled 选取表单内所有可用元素，如：$(“#form1 : enabled”)；:disabled则相反。

　　　　　　2) :checked选取所有被选中的元素（单选框，复选框），如： $(“input : checked”)选取所有被选中的input元素

　　　　　　3) :selected选取所有被选中的选项元素（下拉列表），如：$(“selected option : selected”)

　　　　j. 表单选择器：能极方便地获取到表单的某个或某类型的元素

　　　　　　1) :input 索取所有的input元素；:text, :password, :radio, :checkbox, :submit, :button, :reset, :image, :file, :hidden

　　3. Window.onloa()和$(document).ready()的区别

　　　　a. 执行时间

　　　　　Window.onload()的方法是在网页中的所有的DOM元素及所有与DOM元素相关的CSS，图片等加载完毕后被触发；而$(document).ready()方法是只要在所有的DOM元素被加载就可以被触发。所以从响应时间来说，后者快于前者。

　　　　b. 多次使用

　　　　　 如果Window.onload注册了多个事件方法，其总是执行最后一次的onload方法；如果$(document).ready()注册了多个事件方法，则所有的事件方法都将被可以执行。

　　4. append()和appendTo()区别:

　　　　$(“#A”).append(“#B”)是把id为B的元素添加到id为 A的元素中; $(“#A”).appendTo(“#B”)是把id为A的元素添加到id为B的元素中。

　　5. Ajax

　　　　a. Ajax的全称是Asynchronous Javascript and XML（异步的Javascript 和XML），不是一种单一的技术，而是有机地利用了一系列交互式网页应用相关的技术所形成的结合体。其核心是XMLHttpRequest对象，它是Ajax的关键 –发送异步请求，接受响应及执行回调都是通过它来完成的。

　　　　优点：1). 不需要插件，2). 优秀的用户体验，3). 提高Web程序的性能， 4). 减轻服务器和带宽的负担

　　　　缺点：1). 浏览器对XMLHttpRequest对象的支持度不同，2). 破坏浏览器“前进”“后退”按钮的正常功能，3). 对搜索引擎的支持不足，4). 开发和调试工具的不足

　　　　b. JQuery中的Ajax对其进行了封装，JQuery中的$.ajax()方法是最底层的方法，第2层是$.load(),  $.get(), $.post()，第3层是$.getScript()和$.postJson()

其中最常用的是第2层：load()通常是从Web服务器上获取静态的数据文本

　　6. serialize()

　　　　$.param()是序列化的核心，用来将一个数组或对象按照key/value进行序列化

本比较摘抄于《锋利的JQuery》 第2版，下载地址：http://pan.baidu.com/share/link?shareid=1744508401&uk=3842885577 （提示：大家可以下载到百度网盘中）