第一章:入门
$()取得页面中的元素
$(document).ready(function(){
$('.poem-stanza').addClass('emphasized');
});
说明:
$('.poem-stanza') //取得页面中添加了类poem-stanza的元素
.addClass('emphasized'); //添加Css样式，emphasized为类样式
.removeClass();
第二章:选择符
$(document).ready(function(){
//CSS选择符
$('#selectedplays>li').addClass('horizontal'); //查找id为selectedplays元素的顶层子元素li，添加样式
$('#selectedplays>li:not(.horizotal)').addClass('sublevel'); //查找id为selectedplays元素的顶层子元素li，并且没有类horizotal
//XPath选择符
$('a[@href^="mailto:"]').addClass('mailto'); //查找锚元素中属性href以“mailto:”开头的元素
$('a[@href$=".pdf"]').addClass('pdflink'); //查找锚元素中属性href以“.pdf”结尾的元素
$('a[@href*="mysite.com"]').addClass('mysite'); //查找锚元素中属性href中包含“mysite.com”的元素（任意位置）
//自定义选择符
$('tr:odd').addClass('odd'); //查找奇数行
$('tr:even').addClass('even'); //查找偶数行
//注：:odd()和:even()选择符使用的都是Javascript本身的从0开始得编号方式。表格的第1行编号为0（偶数），而第2行编号为1（奇数）
$('td:contains("Henry")').addClass('highlight'); //查找td中包含"Henry"的
//DOM遍历方法
$('th').parent().addClass('tableheading'); //查找th的父元素即标题行
$('tr:not([th]):even').addClass('even'); //查找tr元素中不包含子为th的，并且是偶数行
$('tr:not([th]):odd').addClass('odd');
$('td:contains("Henry")').next().addClass('highlight'); //查找td中包含“Henry”的单元格的下一个单元格
$('td:contains("Comedy")').siblings().addClass('highlight'); //查找td中包含“Comedy”的同级单元格
$('td:contains("Comedy")').parent().find('td:gt(0)').addClass('highlight');
//查找td中包含“Comedy”的父，再去查找td单元格编号大于0的单元格
$('td:contains("Comedy)').parent().find('td').not(':contains("Comedy")').addClass('highlight');
//查找td中包含“Comedy”的父，再去查找td单元格不包含“Comedy”的单元格
//访问DOM元素
var tag = $('#myelement').get(0).tagName;
});
第三章：事件――扣动扳机
绑定事件：
.bind(‘click’,function(){})
$(‘#switcher-large’).bind(‘click’,function(){…});给id为switcher-large的元素绑定click事件
可简写为
$(‘#switcher-large’).click(function(){…});
方法：
l .toggle(function(){},function(){})
接受两个参数（都是函数）第一次点击调用第一个函数，第二次点击调用第二个
$(‘#switcher h3’).toggle(function(){
$(‘#switcher .button’).addClass(‘hidden’);
},function(){
$(‘#switcher .button’).removeClass(‘hidden’);
});
.toggleClass()是一种跟优雅得方案，但对于交替执行的操作而言，.toggle()的适用性更强
$(‘#switcher h3’).click(function(){
$(‘#switcher .button’).toggleClass(‘hidden’); //自动检查该类是否存在
});
l .hover(function(){},function(){})
接受两个函数参数，第一个指针进入，第二个指针离开
$(‘#switcher .button’).hover(function(){
$(this).addClass(‘hover’);
},function(){
$(this).removeClass(‘hover’);
});
l .unbind(‘click’)
移除事件
l .trigger(‘click’)
模拟用户操作
$(‘#switcher’).trigger(‘click’); 模拟点击了一次switcher
l
第四章：效果――为操作添加艺术性
1. 修改内联CSS
语法： .css(‘property’,’value’);
.css(‘property’:’value’,’property’:’value’);
用法：
var currentSize = $(‘div.speech’).css(‘fontSize’);//得到div.speech得字体大小
var num = parasFloat(currentSize,10); //将currentSize转换为Float型
var unit = currentSize.slice(-2); //返回从指定的字符开始的一个子字符串，-2为倒数第二个
num *= 1.5;
$(‘div.speech’).css(‘fontSize’,num+unit); //设置样式
2. 基本的显示和隐藏
.show();
.hide();
用法：
$(‘p:eq(1)’).hide(); //将第二个段落隐藏
3. 效果和速度
l 指定显示速度
3种：slow、normal和fast 时间：0.6、0,4、0.2。也可以指定.show(850)
$(‘p:eq(2)’).show(‘slow’);
l 淡入和淡出
.fadeIn(); //淡出
.fadeOut(); //淡出
$(‘p:eq(2)’).fadeIn(‘slow’);
4. 多重效果
语句：.animate({param1:’value1’,parame2:’value2’},speed,function(){回调});
用法：$(‘p:eq(1)’).animate({height:’show’,’show’,opacity:’show’},’slow’);
这里使用简写的show将高度、宽度回复到被隐藏之前的值
5. 并发与排队效果
l 处理一组元素
$(‘div.buttont’).animate({left:650},’slow’).animate({height:38},’slow’);
先移动到left为650的位置，在将高度设置为38
$(‘div.button’)
.fadeTo(‘slow’,0.5) //先淡化
.animate({left:650},’slow’) //在移动
.fadeTo(‘slow’,1.0) //在淡出
.slideUp(‘slow’) //最后滑到上方隐藏
注意：排队不适用于其他的非效果方法，例如：.css()
l 处理多组元素
$(‘p:eq(2)’).slideUp(‘slow’).next().slideDown(‘slow’); 段落3向上滑出，同时段落4向下滑入
回调函数：
Var $thisPara = $(‘p:eq(2)’);
$(‘p:eq(2)’).next().slideDown(‘slow’,function(){
$thisPara.slideUp(‘slow’);
});
段落4下滑完成后，段落3才开始上滑
第五章：DOM操作-基于命令改变页面
1. 操作属性
l 非css属性
$(document).ready(function(){
$('div.chapter a[@href*=wikipedia]').each(function(index){
var $thisLink = $(this);
$thisLink.attr({
'rel': 'external',
'id': 'wikilink-' + index,
'title': 'learn more about ' + $thisLink.text() + ' at wikipedia'
});
});
});
//遍历div.chapter 下面所以锚元素href中包含wikipedia，为其添加属性
l 深入理解$()工厂函数
$('<a href="#top">back to top</a>'); 创建新元素
2. 插入新元素
.insertBefore()
.before()
作用相同，区别取决于将它们与其他方法进行连缀
.insertAfter()
.after()
// $('div.chapter p').after('<a href="#top">back to top</a>');
// $('div.chapter p').before('<a href="#top">back to top</a>');
$('<a href="#aaa">back to top</a>').insertAfter('div.chapter p');
$('<a id="aaa" name="top"></a>').prependTo('body');
.perpendTo插入了作为目标的锚
// $('<a href="#top">back to top</a>').insertBefore('div.chapter p');
3. 移动元素
$('span.footnote').insertBefore('#footer');
将span中类为footnote的插入到id为footer的前面
l 标注、编号和链接到上下文
$('span.footnote').each(function(index){
$(this)
.before('<a href="#foot-note-' + (index+1) +
'" id="context-' + (index+1) +
'" class="context"><sup>' + (index+1) +
'</sup></a>')；
});
$('span.footnote').insertBefore('#footer');
遍历span.footnote，在各个元素前加标注后，在将span.footnote添加到#footer前
l 插入脚注
$('<ol id="notes"></ol>').insertAfter('div.chapter');
$('span.footnote').each(function(index){
$(this)
.before('<a href="#foot-note-' + (index+1) +
'" id="context-' + (index+1) +
'" class="context"><sup>' + (index+1) +
'</sup></a>')
.appendTo('#notes')
.append(' (<a href="#context-'+(index+1)+'">context</a>)');
});
先创建一个ol元素notes，并添加到div.chapter后面，遍历span.footnote，先添加标注，然后通过appendTo其添加到ol末尾，最后又通过append添加一个锚元素。
4. 包装元素
.wrap()
.wrap('<li id="foot-note-' + (index+1) + '"></li>')
5. 复制元素
.clone()
$('div.chapter p:eq(0)').clone().insertBefore('div.chapter');
将div.chapter中得第一段复制后插入在div.chapter前面
l 深度复制
$('div.chapter p:eq(0)').clone(false)
只复制结构，内部的文本没有复制过来，因为文本也是DOM节点
l 通过复制创建突出引用
var $parentParagraph = $(this).parent('p');
$parentParagraph.css('position','relative');
$(this).clone()
.addClass('pulled')
.prependTo($parentParagraph);
l 修饰突出引用
$clonedCopy.addClass('pulled')
.find('span.drop')
.html('…')
.end()
.prependTo($parentParagraph)
.wrap('<div class="pulled-wrapper"></div>');
var clonedText = $clonedCopy.text();
$clonedCopy.html(clonedText);
出处：http://www.cnblogs.com/icebutterfly/
版权：本文版权归作者和博客园共有
转载：欢迎转载，为了保存作者的创作热情，请按要求【转载】，谢谢
要求：未经作者同意，必须保留此段声明；必须在文章中给出原文连接；否则必究法律责任
第六章：AJAX 让网站与时俱进
1. 基于请求加载数据
l 追加HTML
//载入远程 HTML 文件代码并插入至 DOM 中
$('#dictionary').load('a.html',function(){
Alert(“加载完毕！”);//回调函数
})
l 操作JavaScript对象
JSON：
[
{
"term": "BACKBITE",
"part": "v.t.",
"definition": "To speak of a man as you find him when he can't find you."
},
{
"term": "BEARD",
"part": "n.",
"definition": "The hair that is commonly cut off by those who justly execrate the absurd Chinese custom of shaving the head."
}
]
JQuery:
$.getJSON('b.json',function(data){ //通过 HTTP GET 请求载入 JSON 数据
$.each(data,function(entryIndex,entry){
var html = '<div class="entry">';
html += '<h3 class="term">' + entry['term'] + '</h3>';
html += '<div class="pare">' + entry['part'] + '</div>';
html += '<div class="definition">';
html += entry['definition'];
if(entry['quote']){
html += '<div class="quote">';
$.each(entry['quote'],function(lineIndex,line){
html += '<div class="quote-line">' + line + '</div>';
});
if(entry['author']){
html += '<div class="quote-author">' + entry['author'] + '</div>';
}
html += '</div>';
}
html += '</div>';
html += '</div>';
});
l 执行脚本
通过 HTTP GET 请求载入并执行一个 JavaScript 文件
$.getScript('c.js',function(){
Alert(“加载完毕”);//回调函数
});
l 加载XML文档
//通过远程 HTTP GET 请求载入信息。
$.get('d.xml',function(data){
$(data).find('entry').each(function(){
var $entry = $(this);
var html = '<div class="entry">';
html += '<h3 class="term">' + $entry.attr('term') + '</h3>';
html += '<div class="part">' + $entry.attr('part') + '</div>';
html += '<div class="definition">'
html += $entry.find('definition').text();
var $quote = $entry.find('quote');
if($quote.length){
html += '<div class="quote">';
$quote.find('line').each(function(){
html += '<div class="quote-line">' + $(this).text() + '</div>';
});
if($quote.attr('author')){
html += '<div class="quote-author">' + $quote.attr('author') + '</div>';
}
html += '</div>';
}
html += '</div>';
html += '</div>';
$('#dictionary').append($(html));
});
});
2. 选择数据格式
3. 向服务器传递数据
4. 关注请求
方法：
.ajaxStart()
.ajaxStop()
当AJAX请求开始且尚未进行其他传输时，会触发.ajaxStart()的回调函数，相反，当最后一次活动请求终止时，则会执行通过.ajaxStop()注册的回调函数。
示例：
//当请求时，显示#loading，结束时，隐藏loading
$(document).ready(function(){
$('#loading').ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
});
});
5. Ajax和事件
限制函数绑定的作用域
$(document).ready(function(){
var bindBehaviors = function(scope){
$('h3',scope).click(function(){
$(this).toggleClass('highlighted');
});
};
bindBehaviors(this);
//这里的绑定作用域是document
$(document).ready(function(){
$('#letter-a .button').click(function(){
$('#dictionary').hide().load('a.html',function(){
bindBehaviors(this);
//这里的是文档中的所以<h3>元素
$(this).fadeIn();
});
});
});
});
6. 安全限制