《jQuery基础教程》
章1：jQuery入门
1.jQuery具有以下功能
1)获得文档中的元素(ele)
2)修改页面外观，（css）
3)改变文档内容(dom)
4)响应用户的交互操作 (事件)
5)为页面添加动态效果
6)无需刷新页面从服务器获取信息(ajax)
7)简化创建的js任务
2.$(document).ready()的意思是位于其中的所有代码会在DOM加载后立即执行。
章2：选择符
1.工厂函数$()，
有3种基本的选择符：标签名、ID和类
标签名 P $('p') 获取文档的所有段落
ID #smoe-id $('#some-id') 根据id获取文档的一个元素
类 .some-clas $('.some-class') 根据类名获取该类名的所有元素
2.子元素组合符（>）
选择id是select-plays的子元素中所有li元素，添加一个Class
$(document).ready(function(){
#('#select-plays > li').addClass('hor');
#('#select-plays li:not(.hor)').addClass('sub-level');//没有hor类的添加一个sub-level类
});
3.属性选择符：通过HTML元素的属性选择元素。
^以什么开头
$以什么结尾
*通配符
$('a[href^=http]').addClass();//以http开头的属性值的元素
$('a[href$=.pdf').addClass();//以pdf结尾的属性值的元素
4.自定义选择符，以冒号开头
$('div.hor:eq(1)')选择div.hor是选择带有hor类的div元素，它会返回一个数组,eq(1)是返回这个数组的第二项
$('div:nth-child(1)')是取得div列表的第一个元素等价于$('div:first-child')
5.jq有两个有用的选择符:odd和:even
6.基于表单的选择符
:text、:checkbox 匹配属性值为选择符名称的输入元素 <input type="text">
:radio、:image
:submit、:reset
:password、:file
:input 输入字段、文本区、选择列表和按钮元素
:button
:enabled
:disabled
:checked
:selected
7.DOM遍历方法
$('tr:odd').addClass('alt')等价于$('tr').filter(':odd').addClass('alt')
:odd是奇数行
:even是偶数行
为奇行添加的代码添加alt
filter()是筛选函数，还支持传入参数。
$('a').filter(function(){
return this.hostname&&this.hostname!=location.hostname;
}).addClass('external')
筛选出符合下面条件的a元素，并为其添加类。
必须带有this.hostname的href属性。并且不等于location.hostname
8.为特定单元格添加样式
.next()是选择最近的同辈元素
.nextAll()是选择全部同辈单元格
.prev()
.prevAll()
.siblings() 选择能够处于相同DOM层次的所有其他元素。不包括自己。
$(document).ready(function(){
$('td:contains(Henry)').next().addClass('hightlight');
})
.parent()
.children()所有儿子
2)jq支持连缀，
$('td:contains(Henry)').parent().children().addClass('hightlight');
9.所有的选择符表达式和大多数的jq方法都是返回jq对象，使得其具有连缀能力。有时候希望返回DOM元素
get()方法表示jq对象引用的第index个DOM元素
$('#my-element').get(0).tagName;等价于$('#my-element')[0].tagName;
章3：事件
1.加载事件：在页面加载后执行$(document).ready()等价于js中的window.onload
2.$(document).ready(function(){})的简写
$().ready(function(){})
$(function(){});
3.交出$的使用权
<script>
jQuery.noConflict();
</script>
使用jQuery对象本身
jQuery(document).ready(function($){
//这里可以使用$
})
或者
jQuery(function($){})
4.使用bind()监听事件
使用.bind()方法监听事件
首先需要先得到jq对象:
$(function(){
$('$switcher-large').bind('click',function(){
$('body').addClass('large');
})
})
$(this)将当前的dom元素转成jq对象。便于操作。
5.简写事件，不用bind
$('#switcher .button').click(function(){})
jq还提供的简写事件
blur
change
click
dblclick
error
focus
keydown
keypress
keyup
load
mousedown
mousemove
mouseout
mouseover
resize
scroll
select
submit
unload
6.除了ready()添加自定义事件，还可以使用.toggle()和.hover()添加自定义事件。
1)如第一次点击触发第一个function，第二次点击触发第二个function，以此类推
$(function(){
$('#switcher h3').toggle(function(){
$('#switcher .button').addClass('hidden')
}),
$('#switcher h3').toggle(function(){
$('#switcher .button').removeClass('hidden')
});
})
$(function(){
$('#switcher h3').click(function(){
$('#switcher button').toggleClass('hidden')
})
})
2).hover()当鼠标悬停时触发第一个函数,离开时触发第二个函数
$(function(){
$('#switcher button').hover(function(){},function(){})
})
7.允许多个元素响应单击事件的一种策略称为事件捕获。首先会传给最外层元素.
如，首先会传给div-->span-->a
<div>
<span><a></a></span>
</div>
8.与事件捕获相反策略是事件冒泡。从最下级开始向上传播。
1）dom的标准是：采用事件冒泡。首先从一般元素到具体元素逐层捕获，最终返回到dom树的顶层。事件处理程序可以注册到该过程的任何一个阶段。
2）冒泡的副作用：mouseover或mouseout 如果只是监听外层元素，当你离开内层元素时，向上传播，触发上层的事件。
.hover()可以处理这种情况。
9.通过事件对象改变事件的旅程
防止它继续向上传播，通过事件对象判断。
使用事件目标，如果当前事件对象的目标是当前元素，那么触发函数。
通过event.target可以确认首先接受到事件的元素，即最先被点击的元素。
$(document).ready(function(){
$('#switcher').click(function(event){
if(event.target==this){
$('#switcher .button').toggleClass('hidden');
}
event.stopPropagation();
})
})
2)停止事件传播 .stopPropagation()方法，可以完全阻止时间冒泡
event.stopPropagation();
10.默认操作。如表单的submit事件。使用stopPropagation()不能阻止默认操作的传播。应该使用 .preventDefault()。
11.事件委托。通过事件委托，借助一个元素上的事件处理程序完成很多工作。
下层的元素触发，交由上级元素来处理。
比如一个ul中有多个li，要给li添加事件，用for太浪费时间。
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
$(function(){
$("ul").on("click","li",function(){
alert()
})
})
例子2：
$(function(){
$('#switcher').click(function(event){ //由于冒泡父元素会拦截到事件
if($(event.target).is('.button')){
$('body').addClass();
if(event.target.id=='switcher-narrow'){
$('body').addClass('narrow');
}else if(event.target.id == 'switcher-large'){
$('body').addClass(large)
}
$('#switcher .button').removeClass('selected')
$(event.target).addClass('selected')
event.stopPropagation();
}
})
})
12.移除事件处理程序
$('#switcher').unbind('click');
13.事件的命名空间
章4：效果
章5：DOM操作
1.操作属性
id、ref、href
通过.attr()和.removeAttr()方法来操class的属性
首先是选择所在的dom然后修改attr
$(function(){
$('div.chapter a').each(function(index){
$(this).attr({
'rel':'external',
'id': 'wikilink-'+index
});
});
});
2.强大的$()工厂函数
通过$()不仅可以访问DOM。而且可以在圆括号中放入一组HTML元素，但是需要指定位置。
$(function(){
$('<a href="#top">back to top</a>')
.insertAfter('div.chapter p');//等价于$('div.chapter p').after('<a href="#top">back to top</a>');
$('<a id="top" name="top"></a>').prependTo('body');会将代码插到body中的开始位置。
})
.insertBefore('xx xx') 从这个dom的前面
.insertAfter() 插到这个dom的后面
$(function(){
$('<ol id="notes"></ol>').insertAfter('div.chapter');
$('span.fontnode').each(function(index){
$(this)
.brefore(
['<a href="#foot-note-"',
index+1,
'" id="context-'
index+1,
'" class="context">'
'<sup>'+(index+1)+'</sup>',
'</a>'
].join('')//数组的方法：将素组的所有元素连起来
)
.appendTo("#note")插到id为note的元素中去
.append(' (<a href="#context-'+(index+1)+
'">context</a>)'");
.wrap('<li id="foot-note-'+ (index+1)+
'"></li>');
});
});
[]是一个数组直接量
$(this),他表示迭代序列中的每一个主教
包装wrap()方法：将元素包装在其他元素中
3.复制元素
jQuery的clone()方法
$('div.chapter p:eq(0)').clone().insertBefore('div.chapter')将元素克隆一遍然后插在chapter的前面
1)默认情况下,clone()方法不会复制匹配元素货期后代元素中绑定的事件。可以设置true让其连同事件一起复制.clone(true)
2)修改clone元素的css
4.总结
1）在HTML中创建元素，使用$()工厂函数
2）要在每个匹配的元素插入新元素，使用
.append()
.appendTo()
.prepend()
.prependTo()
2）在每个匹配元素相邻位置插入元素
.after()
.insert()
.before()
.insertBefore()
4)要在匹配元素的外部插入元素
.wrap()
.wrapAll()
.wrapInner()
5)要用新元素或文本替换每个匹配的元素
.html()
.text()
.replaceAll()
.replaceWith()
6)要移除每个匹配的元素的中元素
.empty()
7)从文旦中一处每个匹配元素的元素及其后代，，但不实际删除它们
.remove()