18年9月4号前的jq学习笔记

第2章选择元素
选择符有： 1、 CSS选择符， 2、 属性选择符， 3、 自定义选择符（ 不建议使用， 索引从0开始）

1. 否定式伪类选择符 li: not(.horizontal)
   $('#selected-plays li:not(.horizontal)').addClass('sub-level');
2. 属性选择符， 在css里也可以用这个选择器。
   2.1 $('img[alt]')
   2.2 在css里写的， a链接有href且href的任意位置有xixi的背景色成粉色。
   a[href *= "xixi"] {
   background: pink;
   }

3. 属性选择符 + 正则 ^
   表示值在字符串的开始， $表示值在字符串的结尾。 * 表示要匹配的值可以出现在字符串中的任意位置，!表示对值取反。
   3.1 $('a[href^="mailto:"]').addClass('mailto');
   选中了a标签有href且href = "mailto:"开头的。
   3.2 $('a[href^="http"][href*="henry"]').addClass('henrylink');
   选中了href 属性即以 http 开头且任意位置包含 henry的所有链接添加一个 henrylink 类
   3.3 $("[href!='#']") 选取所有带有 href 值不等于 "#"
   的元素。

4、 自定义选择器。
4.1 $('tr:odd') 与$('tr:nth-child(odd)') 的区别
4.1 .1 $('tr:odd') 取得所有tr元素的偶数位置, 索引是从0开始的。
4.1 .2 $('tr:nth-child(odd)') 取得作为其父元素的奇数位置， 索引是从1开始的，

04、额外发现：p:nth-child(2) 与 p:nth-of-type(2)的区别
p:nth-child(2) 其父元素的第二个子元素，并且这个元素为 p 。这里会出现无论父级的第一个元素是什么元素都无以谓，只要第二个元素是p就可以了。
p:nth-of-type(2) 其父元素的第二个 p 元素 。必须是父级的第二个p元素。
注意：这里前者是父元素的第二个子元素，后者是父元素的第二个p元素

5、 DOM 遍历方法
find() 找所有的后代。
5.1.filter() 方法会迭代所有匹配的元素， 对每个元素都调用传入的函数并测试函数的返回值。 如果函数返回 false， 则从匹配集合中删除相应元素； 如果返回 true， 则保留相应元素。
案列：
$('a').filter(function() {
return this.hostname && this.hostname != location.hostname;
}).addClass('external');
第二行代码可以筛选出符合下面两个条件的 < a > 元素。 1、 必须包含一个带有域名（ this.hostname） 的 href 属性。 这个测试可以排除 mailto 及类似链接。 2、 链接指向的域名（ 还是 this.hostname） 必须不等于（ != ）页面当前所在域的名称（ location.hostname）。
5.2.next() 方法只选择下一个最接近的同辈元素。.nextAll() 方法选择后面所有的同辈元素
如果next('select')取回匹配该选择器的下一个同胞元素。
5.3.prev() 方法只选择上一个最接近的同辈元素。.prevAll() 方法选择前面所有的同辈元素
5.4.addBack() 方法用于将之前匹配的元素加入到当前匹配的元素中， 并以新的jQuery对象的形式返回。
案列1： $('td:contains(Henry)').nextAll().addBack()
返回td里包含Henry文本， 和包含Henry文本的前面的所有同级元素。
案列2: var $elements = $(".active").prev().addBack("span");
// 所有包含类名"active"的元素的上一个紧邻的同辈元素(#),再加上所有包含类名"active"的元素中的span元素

6、 访问DOM元素
6.1 get();
可以通过DOM元素的属性, 访问某个元素的标签名
var myTag = $('#my-element').get(0).tagName;
简写
var myTag = $('#my-element')[0].tagName;
=== === === === === === === === === === === === === === === === === === === === === === === === === === === === === ===
第3章 事件
一、 window.onload与$(document).ready() 的区别
window.onload 要等所有的资源都加载到了网页上才开始执行代码。js
$(document).ready() 只要加载完了dom就可以执行这里的代码了。jq

二、 jQuery.noConflict() 方法把对$标识符的控制权让渡给其他库。
以下代码可以正常让$标识符正常使用。
jQuery(document).ready(function($) {
//使用$的代码
});
或者， 也可以使用刚刚介绍的简写语法：
jQuery(function($) {
//使用$的代码
});

三、 this的使用

1. this.id 获取id名字
2. this.className获取class名字

四、 使用事件上下文（其实就是利用this）优化代码
优化前
$(document).ready(function() {
$('#switcher-default').addClass('selected').on('click', function() {
$('body').removeClass('narrow').removeClass('large');
});
$('#switcher-narrow').on('click', function() {
$('body').addClass('narrow').removeClass('large');
});
$('#switcher-large').on('click', function() {
$('body').removeClass('narrow').addClass('large');
});
$('#switcher button').on('click', function() {
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
});
});

优化后
$(document).ready(function() {
$('#switcher-default').addClass('selected');
$('#switcher button').on('click', function() {
var bodyClass = this.id.split('-')[1];
$('body').removeClass().addClass(bodyClass);
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
});
});

五、jQ的hover()方法
.hover() 方法接受两个函数参数。第一个函数会在鼠标
指针进入被选择的元素时执行，而第二个函数会在鼠标指针离开该元素时触发。

六、事件捕获 （响应）
6.1、允许多个元素响应单击事件的一种策略叫做事件捕获，在事件捕获的过程中，事件首先会交给最外层的元素，接着再交给更具体的元素。
6.2、从技术上说，在浏览器捕获事件的过程中，每个元素都会注册并侦听发生在它们后代元素中的事件。

七、事件冒泡 （当事件发生时）
7.1 当事件发生时，会首先发送给最具体的元素，在这个元素获得响应机会之后，事件会向上冒泡到更一般的元素。
7.2 通俗点说在一个div里套了几个子级标签，并且这几个子级标签和div绑定了同一个事件(如click)，
当触发子级事件时同时也会触发父级事件，这就是冒泡事件。和mouseOut\mouseover发生情况有点相似

六&七、事件捕获和事件冒泡
1、事件要从一般元素到具体元素逐层捕获，然后，事件再通过冒泡返回DOM树的顶层。而事件处理程序可以注册到这个过程中的任何一个阶段。
2、可以阻止事件冒泡方法1
$(document).ready(function() {
$('#switcher').click(function(event) {
console.log(event.target)
if (event.target == this) { //只有当事件目标和this相同时才执行下面的代码，从而达到阻止事件冒泡。
$('#switcher button').toggleClass('hidden');
}
});
});
3、可以阻止事件冒泡方法2
写了一个单击事件，在单击事件结尾处加上event.stopPropagation()
$(document).ready(function() {
$('#switcher button').click(function(event) {
$(this).addClass('selected');
event.stopPropagation();//添加了个这个代码后，这个单击按钮的事件会被按钮处理，而且只会被按钮处理。
});
});

八、事件类型
mouseover和mouseout鼠标移入移出：执行效率低，会触发子元素。
mouseenter和mouseleave鼠标移入移出：执行效率高，不会触发子元素。
hover是 mouseenter和mouseleave鼠标移入移出的复合事件
click是单击事件
mouseremove鼠标每移动一次，就会执行一次这个事件
scroll鼠标滚动 特点：就是当窗口滚动条滚动一像素，就会触发指令一次。会排队执行。
扩展知识：（window).scrollTop滚动的距离. (window).height()窗口高度

九、阻止默认事件
用 .preventDefault()可以阻止默认事件。
如果想要同时停止事件传播和默认操作，可以在事件处理程序中返回 false

十、事件委托:事件委托是应用了事件冒泡的原理
1、用了事件委托后this指现可能不在是当前操作的目标元素了， 使用 event.target可以指向
2、is() 与 .hasClass()：要测试元素是否包含某个类，可以 .hasClass() 不过.is() 方法则更灵活一些，它可以测试任何选择符表达式。
以下代码应用了事件委托
$(document).ready(function() {
$('#switcher-default').addClass('selected');
$('#switcher').click(function(event) {
if ($(event.target).is('button')) {
var bodyClass = event.target.id.split('-')[1];
$('body').removeClass().addClass(bodyClass);
$('#switcher button').removeClass('selected');
$(event.target).addClass('selected');
} else {
$('#switcher button').toggleClass('hidden');
}
});
});

十一、内置的事件委托功能 .on
语法：jQueryObject.on( events [, selector ] [, data ], handler )

$('#switcher').on('click', 'button', function() {
var bodyClass = event.target.id.split('-')[1];
$('body').removeClass().addClass(bodyClass);
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
});
如果给 .on() 方法传入的第二个参数是一个选择符表达式，jQuery会把 click 事件处理程序
绑定到 #switcher 对象，同时比较 event.target 和选择符表达式（这里的 'button' ）。如果匹
配，jQuery会把 this 关键字映射到匹配的元素，否则不会执行事件处理程序。

十二、移除事件处理程序 .off()
1、off()函数用于移除元素上绑定的一个或多个事件的事件处理函数。
2、off()函数主要用于解除由 .on()函数绑定的事件处理函数。
3、通过指定的事件命名空间(事件命名空间的名字自己取)删除事件。代码如下
$(document).ready(function() {
$('#switcher').on('click.collapse', function(event) {
if (!$(event.target).is('button')) {
$('#switcher button').toggleClass('hidden');
}
});
$('#switcher-narrow, #switcher-large').click(function() {
$('#switcher').off('click.collapse');//通过命名空间删除事件绑定
});
});
注意：同一个事件处理程序（函数）在没有移除绑定之前，不要在重复绑定不然会出现意想不到的结果。
toggleClass的开是1，关是-1。

十二、 .one()只触发一次随后要立即解除绑定的。
$('#switcher').one('click', function);

十三、trigger()方法模拟用户操作事件。
$('#switcher').trigger('click');//模拟用户单击事件。
简写 $('#switcher').click();//模拟用户单击事件。
当使用这些方法而不带参数时，结果将是触发操作而不是绑定行为

十四、有关键盘事件
1、String.fromCharCode() 可接受一个指定的 Unicode 值，然后返回一个对应Unicode的字符串。
2、event.which和event.keyCode用户输入的键盘键对应的ASCII值。
3、如果想知道用户按了哪个键，应该侦听 keyup 或 keydown 事件；如果想知道用户
输入的是什么字符，应该侦听 keypress 事件。
var triggers = {
D: 'default',
N: 'narrow',
L: 'large'
};
$(document).keyup(function(event) {
var key = String.fromCharCode(event.which);
if (key in triggers) {//判断key的值在不在triggrs对象中。
$('#switcher-' + triggers[key]).click();
}
});
注意：在最大项目时能把代码封装最好封装起来。方便下次调用。

本章关键字：1、匿名函数表达式function(){} 2、局部变量
3、事件处理程序 4、注册事件处理程序 4、函数定义？？？
5、函数引用（写一个函数名在函数名后面不要加圆括号这就是函数引用）
6、命名函数

本章有点不能记住需要常看的页 55页尾,56页始

第4章 样式与动画
parseFloat()去除小数点。
一、用jq获取和设置css样式。
//取得多个属性的值
.css(['property1', 'property-2'])
//返回{"property1": "value1", "property-2": "value2"}

//设置属性值对构成的对象
.css({
property1: 'value1',
'property-2': 'value2'
})

var num = parseFloat($speech.css('fontSize'));
//parseFloat() 函数只取得字体大小属性中的数值部分

二、前缀在jq中默认的应用排序 Webkit 、 O 、 Moz 、 ms
三、显示与隐藏
1、显示show() 隐藏hide() 显示与隐藏开关toggle()
2、淡入feadeIn() 淡出feadeOUte() feadeToggle()
3、slideDown() slideUp() slideToggle()
4、feadTo()不透明度。
if ($('div p').is(':hidden')) {//如果是隐藏的
$('div p').fadeIn('slow');
}

四、自定义动画 animate()
第一种方法：
.animate({ property1: 'value1', property2: 'value2' },
duration, easing,
function() {
alert('The animation is finished.');
}
);
参数1：对象，是属性和值组成的对象。其中属性值可以是show,hide,toggle至于其他几个自己去试。
参数2：duration 时长。默认值为400。该参数也可以为字符串"fast"(=200)或"slow"(=600)。
参数3：easing 动画效果。默认为"swing"，还可以设为 "linear"或其他自定义的动画样式函数。（很少用）
参数4：function(){} 回调函数。动画执行完后还需要执行的代码。

第二种方法：.animate({properties}, {options})
参数1：对象，是属性和值组成的对象。
参数2：options 指定选项的参数属性。（可选）
参数options 对象可以识别如下的属性(以下属性均是可选的)：
duration 值是时间、slow、fast。
easing 值是swing，linear。
complete 值是一个函数
queue Boolean类型指示是否将动画放入效果队列中，默认为true。从1.7版本开始，该参数可以为字符串，用于放入指定名称的效果队列。
如果你指定的队列不会自动开始，你需要手动调用dequeue("queueName")来启动队列。

简单案列
$('#container h2').on('click',function(){
$(this).animate({opacity:'0.25','padding':'80px'},
{
duration:200,
complete:function(){
alert(111);
$('.speech').animate({opacity:'0.1'}, 900)
}
});
})

$switcher.css({ position: 'relative' }).fadeTo('fast', 0.5)
.animate({
left: paraWidth - switcherWidth
}, {
duration: 'slow',
queue: false// queue 选项，把该选项设置为 false 即可让当前动画与前一个动画同时开始。
})
2、非效果方法
$switcher
.css({ position: 'relative' })
.fadeTo('slow', 1.0)
.slideUp('slow')
.queue(function(next) {
$switcher.css({ backgroundColor: '#f00' });
next();
})
.slideDown('slow');
//backgroundColor: '#f00' 必须要放在queue函数里面，否则不会在鼠标一单击的时候就执行backgroundColor: '#f00' ，而不是按顺序从上到下执行。
3、处理多组元素，看82页代码4-27
五、自定义动画 animate()简单概括

(1) 一组元素上的效果：
 当在一个.animate()方法中以多个属性的方式应用时，是同时发生的；
 当以方法连缀的形式应用时，是按顺序发生的（排队效果）——除非queue选项值为false。

(2) 多组元素上的效果：
 默认情况下是同时发生的；
 当在另一个效果方法或者在 .queue() 方法的回调函数中应用时，是按顺序发生的（排队效果）。

本章关键字
1、对象字面量：键值的集合叫对象字面量

第5章 操作DOM
一、attr和prop
1、attr是获取HTML的属性。
2、prop是获取DOM的属性。
3、attr和prop都支持回调函数。
$(document).ready(function() {
$('div.chapter a[href*="wikipedia"]').attr({
rel: 'external',
title: 'Learn more at Wikipedia',
id: function(index, oldValue) {
return 'wikilink-' + index;
}
});
});

二、.wrapall();和.wrap()
简单案列 5-10
$(document).ready(function() {
$('span.footnote')//这个选择器选择了3个脚注。
.insertBefore('#footer')
.wrapAll('

')
.wrap('

');
});
使用 .wrapAll() 把所有脚注都包含在一个

中。然后再
使用 .wrap() 将每一个脚注分别包装在自己的
1. 中。
   .wrapAll隐式迭代可用，显式迭代用处不那么明显。

   三、增加标签、删除标签、替换标签
   1、$('div').prepend(a);在标签内部的前面追加。
   2、$('div').append(a);在标签内部的后面追加。
   4、$('div').before(a);在标签的同级之前追加。
   4、$('div').after(a);在标签的同级之后追加。
   5、$('div').remove()删除标签。
   6、$('div').parent()选择父级标签。
   7、$('div').parents()选择所有父级标签。
   8、$(this).parent('div').remove();选择所有的父级只能是div
   9、a.replaceWith(box)用box替代a ，其中box是定义的变量。
   10、var tex=$('

   在容器同级前面追加

   ');元素p里可以给类,也可以写行内式。
   以下适合将元素从文档中的一个位置移动到另一个位置
   11、insertAfter().在现有元素外部、之后添加内容；
   12 .insertBefore() 在现有元素外部、之前添加内容；
   13 .prependTo() 在现有元素内部、之前添加内容；
   14 .appendTo() 在现有元素内部、之后添加内容；

   书籍总结（优先选择看这里）

   (2) 要在每个匹配的元素中插入新元素，使用：
    .append()
    .appendTo()
    .prepend()
    .prependTo()

   (3) 要在每个匹配的元素相邻的位置上插入新元素，使用：
    .after()
    .insertAfter()
    .before()
    .insertBefore()

   (4) 要在每个匹配的元素外部插入新元素，使用：
    .wrap()
    .wrapAll()
    .wrapInner()

   (5) 要用新元素或文本替换每个匹配的元素，使用：
    .html()
    .text()
    .replaceAll(target) 使用当前匹配元素替换掉所有的目标元素。
    .replaceWith(指定元素) 使用指定的元素替换每个匹配的元素

   (6) 要移除每个匹配的元素中的元素，使用：
    .empty()

   (7) 要从文档中移除每个匹配的元素及其后代元素，但不实际删除它们，使用：
    .remove()
    .detach() 从文档中移除匹配的元素。与remove()相比，detach()函数不会移除与元素关联绑定的附加数据( data()函数 )和事件处理器等(remove()会移除)。

   案列 5-15
   var $notes = $('

   ').insertBefore('#footer');//这虽然是一个执行语句，但也是一个选择器，选择的是匹配$('
   ')
   $('span.footnote').each(function(index) {
   $(this)
   .before([
   '',
   '^{',
   index + 1,
   '}'
   ].join(''))//在$('span.footnote')同级元素之前追加
   .appendTo($notes) //将$('span.footnote')添加到$('
   ')
   .wrap('
'); //每个$('span.footnote')以放在li
console.log(index)//0 1 2 这里的index是$('span.fontnot')这个选择器选择出来的是jq对象的集合的索引
console.log($(this).index())//0 1 0 这个$(this).index()这是同级元素位置的索引。
});

四、.end()函数用于返回最近一次"破坏性"操作之前的jQuery对象
只要调用jQuery对象的某个方法返回的是一个新创建的jQuery对象，则该操作被视为"过滤"操作或"破坏性"操作。
jQuery对象的add()、 addBack()、 andSelf()、 children()、 closest()、 contents()、 eq()、
filter()、 find()、 first()、 has()、 last()、 map()、 next()、 nextAll()、 nextUntil()、
not()、 parent()、 parents()、 parentsUntil()、 prev()、 prevAll()、 prevUntil()、 siblings()、
slice()、 clone()等方法均属于"破坏性"操作。

来源网络 案列 http://www.365mini.com/page/jquery-end.htm

var $p = $("p");
//这是一个破坏性操作，返回一个新的jQuery对象
var $p_span = $p.find("span");
document.writeln( $p_span.end() === $p ); // true

//这不是一个破坏性操作，css()和attr()返回的都是原jQuery对象，并没有创建一个新的jQuery对象
var $me = $p.css("color", "#333").attr("uid", "12");
document.writeln( $me.end() === $p ); // false
// $me和$p是同一个jQuery对象
document.writeln( $me === $p ); // true

var $span = $("span");
// 这是一个破坏性操作，虽然没有过滤掉任何元素，但返回的是一个新的jQuery对象
var $newSpan = $span.not(".foo");
document.writeln( $newSpan.end() === $span ); // true

本章关键字
wrapAll() wrap()

第六章 ajax
Ajax请求都是异步的，回调函数提供了一种等待数据返回的方式，而不是立即执行代码。回调函
数也需要一个参数，该参数中保存着返回的数据。

400 请求语法错误
401 未授权
403 禁止访问
404 未发现请求的URL
500 服务器内部错误

一、ajax方法
1、load（a.html）加载a.html
2、$.getJSON('b.json',function(data){成功后执行的代码}) 可以解析json文件。
3、$.getScript()可以向页面优雅的注入js
4、$.get(url,function(data){成功后执行的代码}) 这个函数只是取得由URL指定的文件,然后将纯文本格式的数据提供给回调函数

二、$.each()
$.each() 函数不操作jQuery对象，它以数组或对象作为第一个参数，以回调函数
作为第二个参数。此外，还需要将每次循环中数组或对象的当前索引和当前项作为回调函数的两
个参数

三、.ajaxStart() 和 .ajaxStop()和 .ajaxError()
当Ajax请求开始且尚未进行其他传输时，会触发 .ajaxStart() 的回调函数。
相反，当最后一次活动请求终止时，则会执行通过 .ajaxStop() 注册的回调函数。

四、安全限制
1、用 eval()解析json没有$.parseJSON()安全。
2、加载第三方数据的办法：
2.1、可以通过服务器加载远程数据，然后在客户请求时提供给浏览器。
2.2、注入