《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 匹配属性值为选择符名称的输入元素
: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.交出$的使用权
使用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
- 1
- 2
- 3
- 4
- 5
- 6
章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(){
$('back to top')
.insertAfter('div.chapter p');//等价于$('div.chapter p').after('back to top');
$('').prependTo('body');会将代码插到body中的开始位置。
})
.insertBefore('xx xx') 从这个dom的前面
.insertAfter() 插到这个dom的后面
$(function(){
$('
$('span.fontnode').each(function(index){
$(this)
.brefore(
['<a href="#foot-note-"',
index+1,
'" id="context-'
index+1,
'" class="context">'
' '+(index+1)+'',
''
].join('')//数组的方法：将素组的所有元素连起来
)
.appendTo("#note")插到id为note的元素中去
.append(' ( context)'");
.wrap(' ');
});
});
[]是一个数组直接量
$(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()