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

《jQuery基础教程（第3版）》的笔记-第三章 - 第三章

$(function(){

$('#switcher-default').addClass('selected');

$('#switcher').click(function(event){
if ($(event.target).is('button')){
var idFlag = event.target.id.split('-')[1];
$('body').removeClass().addClass(idFlag);
$('#switcher button').removeClass('selected');
$(event.target).addClass('selected');
} else {
$('#switcher button').toggleClass('hidden');
}
});

$('#switcher').trigger('click');

var triggers = {
D: 'default',
N: 'narrow',
L: 'large'
};

$(document).keyup(function(event){
var key = String.fromCharCode(event.keyCode);
if (key in triggers) {
$('#switcher-'+triggers[key]).click();
}
});

$('#switcher-narrow, #switcher-large').click(function(){
//$('#switcher').unbind('click');
});


$('#switcher h3').hover(function(){
$(this).toggleClass('hover');
});

//第三章习题解答
// (1)
$('.author').click(function(event){
$(event.target).addClass('selected');
});
// (2)
$('.chapter-title').dblclick(function(){
$(this).siblings().toggleClass('hidden');
});
// (4)
$(document).mousemove(function(event){
console.log(event.pageX + ", " + event.pageY);
});
// (5)
$(document).mouseup(function(event){
$("*").removeClass('hidden');
});
$(document).mousedown(function(event){
$(event.target).addClass('hidden');
});
});

《jQuery基础教程（第3版）》的笔记-第15页 - 第二章

* 选择元素 $()
** 选择器中可以放置如下内容
- 这些内容后还可以（经常）连接组合符号，进行更细致的 DOM 元素筛选
*** 标签名
- $('tag')
*** 类
- $('.class')
*** ID
- $('#id')
** 子元素组合符 >
- 举个例子
#+begin_example javascript
$('#selected-plays > li').addClass('horizontal');
#+end_example
- 会查找 ID 为 selected-plays 下一级所有的 li，并为这些 li 添加 horizontal 类，添加类操作当然是 addClass 完成的
** 在选择器中进行的筛选
- 举个例子
#+begin_example javascript
$('#selected-plays li:not(.horizontal)').addClass('sub-level');
#+end_example
- 这里会查找 ID 为 selected-plays 下所有的 li，并对这些 li 进行筛选，对于没有添加 horizontal 类的成员，进行 addClass 操作
** 属性选择符
- 属性选择符在选择器内放在中括号内跟在要进行筛选的 DOM 元素后
- 例如
#+begin_example javascript
$('img[alt]')
#+end_example
- 同时，属性选择符支持正则表达式的通配语法。以 ^ 表示值在字符串的开始，以 $ 表示值在字符串的结尾。而且，也是用星号 * 表示要匹配的值可以出现在字符串中的任意位置，用叹号 ! 表示对值取反
- 例如，注意这里匹配正则表达式的部分在中括号里面，可以跟多个中括号进行细致的筛选
#+begin_example javascript
$('a[href^="mailto:"]').addClass('mailto');
$('a[href$=".pdf"]').addClass('pdflink');
$('a[href^="http"][href*="henry"]').addClass('henrylink');
#+end_example
** 自定义选择符号 :为了性能尽量不使用:
*** 以 :（冒号）开头
- 注意数组的下标 js 从 0 开始，而 css 从 1 开始
:eq() 选择符、:odd 和 :even 选择符都使用 JavaScript 内置从 0 开始的编号方式
这样的话，其实第 1 行（在 js 中下标是 0），其实对应的是 even （因为 0 是偶数嘛）。
- 举个例子
#+begin_example javascript
$('div.horizontal:eq(1)'); // 取第二个元素
$('div:nth-child(1)'); // 取第一个元素
$('tr:even').addClass('alt'); // 为列表的技术行添加 alt 类
#+end_example
*** 基于上下文选择内容
- 介绍一个 contains 自定义选择符
- contains 是区分大小写的
#+begin_example javascript
$('tr:contains(Henry)').addClass('highlight'); // Henry 可以用 "" 括起来
#+end_example
*** 基于表单的选择符 :form:
- 注意以下选择符号，都是可以组合使用的
- 举个例子
#+begin_example javascript
$('input[type="radio"]:checked') // 选择所有选中的单选按钮
$('input[type="password"], input[type="text"]:disabled') // 选中所有的密码输入和被禁用的文字输入
#+end_example
**** :input
- 输入字段，文本区，选择列表和按钮元素
**** :button
- 按钮元素或 type 属性值为 button 的输入元素
**** :enabled
- 启用的表单元素
**** :disabled
- 禁用的表单元素
**** :checked
- 勾选的单选按钮或复选框
**** :selected
- 选择的选项元素
** 遍历 DOM
*** filter 方法
- filter 通常的使用方法是选择器接 filter 对应的操作（或者选择符号）
- 例如
#+begin_example javascript
$('tr').filter(':even').addClass('alt');
$('a').filter(function () {
return this.hostname && this.hostname != location.hostname;
}).addClass('external');
#+end_example
*** .next 方法和 .nextAll 方法 :为特定的单元格添加样式:
- .next()方法只选择下一个最接近的同辈元素
- .nextAll()方法选择之后所有的同辈元素
- 例子
#+begin_example javascript
$('td:contains(Henry)').next().addClass('highlight'); 把表格中含有 Henry 的所有 td 之后的下一个元素添加 highlight' 类
$('td:contains(Henry)').nextAll().addClass('highlight'); 把表格中含有 Henry 的所有 td 之后的同辈元素添加 highlight' 类
#+end_example
*** 连缀
- 类似函数式编程，把操作函数连缀到一块
** 访问 DOM 元素
*** get 方法用于直接访问 DOM 元素
- get 方法的参数表示元素的下标
#+begin_example javascript
var myTag = $('#my-element').get(0).tagName();
#+end_example

《jQuery基础教程（第3版）》的笔记-第二章 - 第二章

$(document).ready(function(){
$('#selected-plays > li li').addClass('special');

$('tr').each(function(){
$(this).children('td:eq(2)').addClass('year');
});

$('tr:contains(Tragedy)').first().addClass('special');

$('a').parent().siblings().andSelf().addClass('afterlink');

$("a[href='hamlet.pdf']").parent().parent().addClass('tragedy');
});

《jQuery基础教程（第3版）》的笔记-第3章练习题答案 - 第3章练习题答案

$(document).ready(function() {
// exercise 1
$("div.author").click(function() {
$(this).addClass("selected")
});
// exercise 2
$(".chapter-title").dblclick(function() {
$(this).parent().children().not("h3").toggleClass("hidden");
});
// The problem description of exercise 3 is not clear, so I ignore it.
// exercise 4
$("div.chapter > p").bind("mousemove", function(event) {
console.log(event.pageX + " " + event.pageY);
event.stopPropagation();
});
// exercise 5
$(document).mousedown(function(event) {
var mousedownX = event.pageX;
var mousedownY = event.pageY;
$(document).mouseup(function(event) {
if (mousedownX == event.pageX && mousedownY == event.pageY) {
$("p").addClass("hidden");
} else if (mousedownY < event.pageY) {
$("p").removeClass("hidden");
}
})
})
});

《jQuery基础教程（第3版）》的笔记-第12章　 　高级DOM操作 - 第12章　 　高级DOM操作

《jQuery基础教程（第3版）》的笔记-附录D　 　jQuery 1.7简介 - 附录D　 　jQuery 1.7简介

《jQuery基础教程（第3版）》的笔记-第9章　 　高级选择符与遍历 - 第9章　 　高级选择符与遍历

《jQuery基础教程（第3版）》的笔记-附录C　 　快速参考　 - 附录C　 　快速参考　

《jQuery基础教程（第3版）》的笔记-第184页 - 第八章 开发插件

开发插件时：
注意在插件内部必要的使用$.each解决隐式迭代的问题；
返回jquery对象以便连缀操作；
注意命名空间的设置；
合理的使用默认参数来增强扩展性；
配合jquery UI 使用 $.widget 功能。

《jQuery基础教程（第3版）》的笔记-第四章 - 第四章

$(document).ready(function(){
var $speech = $('div.speech');
var $defaultSize = parseFloat($speech.css('fontSize'));
var $firstPara = $('p').eq(1);
$firstPara.hide();
$('p').eq(3).css('backgroundColor', '#ccc').hide();

$('p').eq(2)
.css('border', '1px solid #333')
.click(function(){
$(this).next().slideDown('slow',function(){
$(this).prev().slideUp('slow');
});
});

$('div.label').click(function(){
var paraWidth = $('div.speech p').outerWidth();
var $switcher = $(this).parent();
var switcherWidth = $switcher.outerWidth();
$switcher
.css('position','relative')
.animate({borderWidth: '7px'},'normal')
.fadeTo('slow', 0.1)
.animate({left: paraWidth - switcherWidth},
{duration: 'slow',
queue: false //与前一动画同时进行
})
.fadeTo('slow', 0.9)
.slideUp('slow',function(){
$(this).css('backgroundColor', '#fdd');
})
/* 效果同上语句
.queue(function(next){
$(this).css('backgroundColor', '#fdd');
next();
})
*/
.slideDown('slow')
.animate({height: '+=10px'},'fast');
});

$('#switcher button').click(function(){
var num = parseFloat($speech.css('fontSize'));
switch (this.id){
case 'switcher-large':
num *=1.4;
break;
case 'switcher-small':
num /=1.4;
break;
default:
num = $defaultSize;
}
$speech.animate({fontSize:num+'px'},'fast');//$speech.css('fontSize', num+'px');
});

$('a.more').click(function(){
$firstPara.animate({opacity: 'toggle', height:'toggle'}, 'slow'); //$firstPara.slideToggle('slow');
var $link = $(this);
if ($link.text() == 'read more') {
$link.text('read less');
} else {
$link.text('read more');
}
return false;
});

// 第4章习题解答部分
// (1)
/*
现在有个问题比较奇怪
1.我不修改CSS,直接在ready下写$(document.body).css("display","none").fadeIn(2000);这样是有效果的.
2.如果我在CSS里body加入display：none； 然后在ready里面fadeIn是没有效果的
*/
$(document.body).css("display","none").fadeIn(2000); //1
$(document.body).fadeIn(2000); //2 (浏览器问题：FF无，chrome有)
// (2)
$('p').hover(function(){
$(this).css('backgroundColor', '#fdd');
},function(){
$(this).css('backgroundColor', '#fff');
});

// (3)
$('h2').click(function(){
$(this).fadeTo('slow', 0.25, function(){
$(this).css('margin-left', '+=20px');
$('div.speech').fadeTo('slow', 0.5);
});
});

// (4)
$(document).keyup(function(event){
switch(event.keyCode){
case 37:
case 38:
case 39:
case 40:
$('#switcher')
.css('position','relative')
.animate({left: '+=20px'},700);
break;
default:
break;
}
});
});

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

AJAX
$('div.details').load('more.html #content')1.2
CSS 扩展插件 浏览器差异 集合对象(隐式迭代) 连缀chaining
api.jquery.com
1.3
解释性语言 CDN(content delivery networks内容分发系统)
$() 返回对象实例.addClass() / .removeClass()
$(document).ready() .ready()可以调用函数或匿名函数(lambda函数)
匿名函数 不重用 创建闭包
1.5开发工具
IE developer tools
safari web inspector
chrome developer tools
firebug (fireQuery扩展)

《jQuery基础教程（第3版）》的笔记-书中的toggle()和live()方法在jQuery1.9已被移除 - 书中的toggle()和live()方法在jQuery1.9已被移除

.toggle()无直接替代函数。谷歌可知自定义函数可模仿.toggle()行为：
$.fn.clicktoggle = function(a, b) {
return this.each(function() {
var clicked = false;
$(this).click(function() {
if (clicked) {
clicked = false;
return b.apply(this, arguments);
}
clicked = true;
return a.apply(this, arguments);
});
});
};
用以下代码调用：
$("#mydiv").clicktoggle(functionA,functionB);
.live()方法可用.on()和.delegate()替代。
$( selector ).live( events, data, handler ); // jQuery 1.3+
$( document ).delegate( selector, events, data, handler ); // jQuery 1.4.3+
$( document ).on( events, selector, data, handler ); // jQuery 1.7+

《jQuery基础教程（第3版）》的笔记-附录B　 　使用QUnit测试JavaScript - 附录B　 　使用QUnit测试JavaScript

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

jQuery这么吸引人因为它像css那么简单易用

《jQuery基础教程（第3版）》的笔记-第1页 - 第一章笔记

* $ 函数 :方法:
- 选择文档中的某一部分，这是通过 $() 函数来完成的
- 该函数需要一个字符串参数，参数中可以包含任何CSS选择符表达式
- 该函数会返回一个新的 jQuery 对象实例
* 添加新类 addClass :方法:
- 它会将一个 CSS 类应用到我们选择的页面元素，这个方法唯一的参数就是要添加的类名
- 反方法是 removeClass()
- 使用了隐式迭代机制，因此一次函数调用就可以完成对所有选择的文档部分的修改
#+begin_example javascript

function addHighlightClass() {
$('div.poem-stanza').addClass('highlight');
}

$(document).ready(addHighlightClass);

#+end_example
* 执行代码
- 通过使用 $(document).ready() 方法，jQuery 支持我们预定在 DOM 加载完毕后调用某个函数，而不必等待页面中的图像加载
* 匿名函数
- 以上实例的匿名函数写法
- 实质跟 lambda 表达式是相似的
#+begin_example javascript

$(document).ready(function () {
$('div.poem-stanza').addClass('highlight');
})

#+end_example
* 控制台显示
** console.log :方法:
- 示例：在console中加入招聘信息
#+begin_example javascript

function addHighlightClass() {
console.log('Maverick是一个小而精的团队，我们随时处于缺一个人的状态。');
console.log('想来 Maverick 工作吗？简历请发送至: job@maverick.com');
$('div.poem-stanza').addClass('highlight');
}

$(document).ready(addHighlightClass);

#+end_example

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

阿

《jQuery基础教程（第3版）》的笔记-第五章 - 第五章

$(document).ready(function(){
$('div.chapter a[href*="wikipedia"]').attr({
rel: 'external',
title: function() {
return 'Learn about ' + $(this).text() + ' at Wikipedia.';
},
id: function(index, oldValue) {
return 'wikilink-' + index;
}
});
// 解答
// (1)
var $forthParagraph = $('div.chapter p:gt(3)');
$('<a href="#top">back to top</a>').insertAfter($forthParagraph);
$('<a id="top"></a>').prependTo('body');
// (2)
$('a[href="#top"]').click(function(){
$(this).after('<p> You were here </p>');
});
// (3,4)
$('#f-author').click(function(){
if ($(this).html().indexOf('<b>') == "-1"){
$(this).wrapInner('<b></b>');
}else{
$(this).html($(this).text());
}
});
// (5) $('p').addClass('inhabitants');
$('p').each(function(){
var classContent = $(this).prop('class');
if (classContent.length===0){
$(this).prop('class','inhabitants');
}else{
$(this).prop('class',classContent + ' inhabitants');
}
});

/*
$('span.footnote')
.insertBefore('#footer')
.wrapAll('<ol id="notes"></ol>')
.wrap('<li></li>');
*/
var $notes = $('<ol id="notes"></ol>').insertBefore('#footer');
$('span.footnote').each(function(index){
$(this)
.before(['<a href="#footnote-', index+1, '" id="context-', index+1, '" class="context">', '^{', index+1, '}</a>'].join(''))
.appendTo($notes)
.append(['&nbsp;(<a href="#context-', index+1, '">context</a>)'].join(''))
.wrap('<li id="footnote-'+ (index+1) + '"></li>');
});

$('span.pull-quote').each(function(index){
var $parentParagraph = $(this).parent('p');
$parentParagraph.css('position', 'relative');

var $cloneCopy = $(this).clone();
$cloneCopy
.addClass('pulled')
.find('span.drop')
.html('&hellip;')
.end()
.text($cloneCopy.text())
.prependTo($parentParagraph)
.addClass('rounded-top')
.wrapInner('<div class="rounded-bottom"></div>');
});
});

《jQuery基础教程（第3版）》的笔记-第6章习题答案 - 第6章习题答案

$(document).ready(function() {
// exercise 1
// $('#dictionary').load('exercises-content.html');
// exercise 2
//$(".letter h3").mouseover(function(event) {
// var selector = 'exercises-content.html' + ' ' + '#' + $(this).parent().attr('id');
// $('#dictionary').load(selector);
//});
// exercise 3
$(".letter h3").mouseover(function(event) {
var selector = 'exercises-content.html' + ' ' + '#' + $(this).parent().attr('id');
$('#dictionary').load('a.html', function(response, status, xhr) {
if (status == 'error') {
$('#dictionary').load('does-not-exist.html');
}
});
});
// exercise 4
//Twitter change its api and now you can't access the Twitter api only using an browser.
});

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

作者和翻译都是聪明人，看html5和css3实例教程的时候看得稀里糊涂的nth-of-type和nth-of-child这个很简单几句就说明白了。

《jQuery基础教程（第3版）》的笔记-第5章练习题答案 - 第5章练习题答案

$(document).ready(function() {
// Use attr() to add an id, rel, and title.
$('div.chapter a[href*="wikipedia"]').attr({
rel: 'external',
title: function() {
return 'Learn more about ' + $(this).text() + ' at Wikipedia.';
},
id: function(index, oldValue) {
return 'wikilink-' + index;
}
});
// exercise 1
$('div.chapter p').filter(function(index) {
if (index >= 3) {
return true;
} else {
return false;
}
})
.after('<a href="#top">back to top</a>');
$('<a id="top"></a>').prependTo('body');
// exercise 2
$("a[href*='#top']").click(function() {
// remove the text when user click another link;
$("p.location-sign").hide();
$("<p class='location-sign'>You were here.</p>").insertAfter($(this));
});
// exercise 3 and 4
$("div#f-author").click(function(event) {
/* You can manipulate the event whether user click the <div id="f-author"> or <b> because of event bubble up
event target is "<div id="f-author">" when the first time user click the author name event target is <b> when user click it next time */
if (event.target.localName != "b") {
$(this).wrapInner("<b></b>");
} else {
$(this).html($(this).text());
}
})
// exercise 5
$('div.chapter > p').each(function() {
if ($(this).attr('class') != undefined) {
$(this).attr('class', $(this).attr('class') + ' ' + 'inhabitants');
} else {
$(this).attr('class', 'inhabitants');
}
});
});