《jQuery基础教程 （第4版）》章节试读

《jQuery基础教程 （第4版）》的笔记-第2页 - 2

<代码开始>
console.log($());
</代码结束>

《jQuery基础教程 （第4版）》的笔记-全部章节 - 全部章节

第二章选择元素
2.3css选择符
$('#selected-plays>li').addclass('horizontal');
>子元素组合符
$('#selected-plays li:not(.horizontal)').addclass('sub-level');
li:not(.horizontal)所有li中没有horizontal类的li 否定式伪类
2.4属性选择符
$('img[alt]')
以^表示值在字符串的开始，以$表示值在字符串的结尾，*表示任意位置，！表示对值取反
2.5自定义选择符 选择符以冒号开头
JS数组采用从0开始，CSS则是从1开始
:eq()选择符 :odd 奇数 :even偶数 选择符都是从0开始编号
:nth-child()选择符是相对于元素的父元素而非当前元素来计算位置，它可以接受数值、odd或even作为参数。而且是jQuery中唯一从1开始计数的选择符
2.5.2基于上下文内容选择元素
:contains(元素内容)选择符区分大小写
2.5.3基于表单的选择符
:input :button :enabled :disabled :chencked :selected
$('input[type="radio"]:checked')选择所有选中的单选按钮
2.6DOM遍历方法
.filter()方法会迭代所有匹配的元素，对每个元素都跳用传入的函数并测试函数的返回值，返回false则从匹配集合中删除相应元素，返回true则保留相应元素
.next()方法只选择下一个最接近的同辈元素 .prev()
.nextAll()方法会选择后面的所有同辈元素 .prevAll()
.siblings()选择所有同辈元素 .parent().children()
2.7访问DOM元素
var myTag=$('#my-element').get(0).tagName;
可简写为var myTag=$('#my-element')[0].tagName 与访问DOM元素数组很相似
第三章 事件
3.12
.onload属性一次只能保存一个函数的引用
$(document).ready(function(){})可简写为$(function(){}) 推荐使用前者
.on()方法可以指定任何DOM事件，并为改时间添加一种行为
3.3
.hover()方法接受两个函数参数，第一个函数会在鼠标指针进入被选择的元素时执行，第二个函数会在鼠标指针离开被选元素时执行
3.3.1事件传播流程
允许多个元素响应单击事件的一种策略叫做事件捕获，在事件捕获过程中，事件首先会交给最外层的元素，接着再依次向下传递交给更具体的元素。
另一种相反的策略叫做事件冒泡。即当事件发生时，会首先发送给最具体的元素，在这个元素获得相应机会后，事件会依次向上冒泡到上级一般的元素
jQuery始终会在模型的冒泡阶段注册事件处理程序，因此，我们总是可以假定最具体的元素会首先获得响应事件的机会
为了解决事件冒泡，可以添加事件对象event,event.target属性保存着发生的事件的目标元素
事件对象还提供了.stopPropagation()方法，可完全阻止事件冒泡
.preventDefault()方法可阻止默认操作
3.5.1为事件处理程序添加命名空间
.on('click.collapse',function(){})
.one()方法为被选元素附加一个或多个事件处理程序，并规定当事件发生时运行的函数。
当使用 one() 方法时，每个元素只能运行一次事件处理器函数。
trigger() 方法触发被选元素的指定事件类型。
第四章 样式与动画
4.3.3
显示和隐藏
.show() .hide()
效果：会同时改变所选元素的高度、宽度、不透明度，且会改变display属性
淡入淡出
.fadeIn() .fadeOut()
效果：一开始会设置所选元素的高宽，然后逐渐改变其不透明度
对于本来就在文档流之外的元素，比较适合使用淡入淡出动画
.fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。
滑上滑下
slideDown() slideUp()
效果：逐行改变所选元素的高度
创建自动以动画.animate()
animate中的queen选项，把该选项设置为false即可让当前动画与前一个动画同时开始
把非效果的方法添加到队列中用.queue()方法
.queue() 方法允许我们直接对这个函数队列进行操作。调用带有回调函数的 .queue() 方法特别有用；它允许我们在队列末端放置一个新函数
请注意，当通过 .queue() 添加函数时，我们应当确保最终调用了 .dequeue()，这样下一个排队的函数才能执行。
动画执行顺序规则：
一组元素上的效果
一个animate方法中以多个属性的方式应用时，是同时发生的
当以方法连缀的形式应用时，是按顺序发生的，除非queue为false
多组元素上效果
默认是同时发生的
当在另一个效果方法或者在queue()方法的回调函数中应用时，是按顺序发生的
.hover()方法是同时绑定 mouseenter和 mouseleave事件
.hover( handlerIn(eventObject), handlerOut(eventObject) )
第五章 操作DOM树
.insertBefore()在现有元素外部、之前添加内容
.insertAfter()在现有元素外部、之后添加内容
.prependTo()在现有元素内部、之前添加内容
.appendTo()在现有元素内部、之后添加内容
.wrapAll() 在指定的 HTML 内容或元素中放置所有被选的元素。
.wrap() 方法把每个被选元素放置在指定的 HTML 内容或元素中。
.clone(true)会复制匹配的元素或其后代元素中绑定的事件。
要在每个匹配的元素中插入新元素：
.append() .appendTo() .prepend() .prependTo()
要在每个匹配的元素相邻的位置插入新元素
.after() .insertAfter() .before() .insertBeofre()
要在每个匹配的元素外部插入新元素
.wrap() .wrapAll() .wrapInner()
要用新元素或文本替换每个匹配的元素
.html() .text() .replaceAll() .replaceWith()
要移除每个匹配的元素中的元素
.empty()
要从文档中移除每个匹配的元素及其后代元素，但实际不删除它们
.remove() .detach()
第六章 通过Ajax发送数据
$.getJSON()方法没有适用的DOM对象，其结果只能提供给脚本，是全局jQuery函数
$.each()函数不操作jQuery对象，它以数组或对象作为第一个参数，以回调函数作为第二个参数。此外还需要将每次循环中数组或对象的当前索引和当前项作为回调函数的两个参数
向页面中注入脚本需要使用全局函数$.getScriot()
$.get()只是取得由URL指定的文件
JSON文件的读取方法;即将JSON字符串(JSON.stringfy()可将数组转换为字符串)转化成对象
1.JSON.parse()
var jsontext = '{ // b.json
"firstname":"Jesper",
"surname":"Aaberg",
"phone":["555-0100","555-0120"]
}';
var contact = JSON.parse(jsontext);
2.$.getJSON('b.json',function(data){})
通过data遍历JSON数据结构
一般在jquery中使用getJSON()方法读取。
或者$.ajax()
3. eval()
var jsonObject = eval("(" + jsontext + ")");
在转化的时候需要将JSON字符串的外面包装一层圆括号：
在加载外部数据时各种方法优缺点：
我们知道在不需要与其他应用程序共享数据的情况下，以HTML片段提供外部数据一般来说是最简单的。如果数据需要重用时，一般选择JSON，当远程应用程序未知时，XML则能够为良好的互操作型提供最可靠的保证
.load()方法在接收到包含数据的对象参数时，会默认使用POST方法发送请求
第七章 使用插件
1、cycle()插件可以将列表转换成可以交互的幻灯片
$.fn.cycle.defaults包含所有默认选项，在调用插件式可以在自己的脚本中修改它的默认值，以便代码写的更为简洁
2、$.cookies()插件
$.cookie('the_cookie'); //读取Cookie值
$.cookie('the_cookie', ‘the_value'); //设置cookie的值
$.cookie('the_cookie', ‘the_value', {expires: 7, path: ‘/', domain: ‘jquery.com', secure: true});//新建一个cookie 包括有效期 路径域名等
$.cookie('the_cookie', ‘the_value'); //新建cookie
$.cookie('the_cookie', null); //删除一个cookie
3、jQuery UI里面包括很多的交互组件及成熟的部件 （详细学习UI）
第八章（未看）
第九章高级选择符与遍历
.not()可以接受一个回调函数，该函数将在检测每个元素的时候调用，如果这个函数返回ture,那么被检测的元素就会被排除在外
第十章 高级事件处理
目标事件：指的是接收到事件的那个最里面最深层的元素
closest()方法
closest和parents的主要区别是：1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。
.on()方法对应着一个函数的定义，而trigger()方法对应着一次函数调用
（页面未能展示）
第十一章高级动画
终止运行的动画
stop()方法可以接受两个布尔值参数(true/false)，第二个参数叫gotoend.如果把这个参数设置为true 那么向前动画不仅会停止而且会立即跳到最终值
更好的办法是把最终值保存在一个变量中，使用animate()显示变化到该值
自定义效果时长
只要传入持续时间字符串不是slow或fast那么动画的持续时间就是默认的400ms，想要添加自定义的速度选项，只要给$.fx.speeds添加一个属性即可，例如：$.fx.speeds.crawl=1200,就可以在任何动画方法中使用crawl把动画持续时间设置为1200
优点：在大型项目共享动画速度时，要改变动画持续时间只要修改$.fx.speeds.crawl的值即可
修改默认速度
$.fx.speeds._default=250
第十二章（未看）

附录A JavaScript 闭包
调用内部函数的方法：
1.将内部函数指定给一个全局变量
var globalVar;
function outerFn(){
console.log(outer function)
function innerFn(){
console.log(inner function)
}
flobalVar = innerFn;
}
2.在外部函数中返回内部函数的引用或调用
如果内部函数引用了位于外部函数中的变量，相当于授权该变量能够被延迟使用，因此当外部函数调用完成后，这些变量的内存不会被释放，因为闭包仍然需要使用它们