《Head First jQuery》读书笔记

第一章 jQuery入门

HTML表示内容结构、CSS表示样式、jQuery负责给网页添加行为

p26 淡入淡出效果

$("div").slideUp();

$("div").slideDown();

$("div").slideToggle();

控制淡入淡出效果

$("div").slideToggle("slow"); //slow to slide

$("div").slideToggle(600); //600 duration

$("div").fadeIn();

$("div").fadeOut();

$("div").fadeToggle();

第二章 选择器与方法

p59 用append插入消息

$("div").append("<p>Hello</p>")

在div元素添加一个新的html代码

p61 用$(this)返回当前元素

$(this).click( function() { ... })

javascript中，“this”指的是代码中要处理的DOM元素；而jQuery就是使用$(this)用来得到当前DOM元素的jQuery选择器

p65 删除元素

$(".guess_box p").remove();

第三章 jQuery事件与函数

p81 事件绑定

$("#myElement").click( function() { ... } );

$("#myElement").bind( 'click', function() {...} );

方法1是方法2的快捷方式，不过只有在DOM已经存在的时候才能使用。对于代码中创建的DOM元素就要使用第二种方法。

选择器 + 事件 + 函数 = 复杂的交互

jQuery5类事件：浏览器事件、文档加载事件、表单事件、键盘事件和鼠标事件。

p86 删除事件

删除一个事件：$("#myElement").unbind('click');

删除所有事件：$("#myElement").unbind();

p91 触发事件

$("#myElement").trigger('click')

p91 live方法？？？？

p101 函数

函数声明：function myFunc1() { ... }

函数表达式：var myFunc2 = function() { ... }

两者的主要区别在调用时间：如果使用函数声明方法来定义，则可以在任何时候进行函数调用；如果使用的函数表达式的方法，则在遇到这个函数之前不能调用该函数。

p111 jQuery静态函数

$.contains(this, document.getElementById("has_discount"))

参数必须是DOM元素

p117 hover事件

$("#myElement").hover(func1, func2);

第四章 jQuery Web页面管理

p136 detach与remove

remove删除元素是直接从DOM中删除，而detach是从DOM中取出该元素，并由jQuery帮你维护

p141 遍历DOM树

parent、children、prev、next、siblings

replaceWith、before、after

first、equal、last、slice、filter、not

第五章 jQuery效果与动画

p180 动画调整元素的位置时，需要使用绝对（absolute）或相对（relative）定位

overflow设置为hidden，从而能隐藏图像条中延伸到parent以外的部分，还可以使用clip达到同样的目的。

p182 如果保留CSS position的默认设置（static），就无法应用上、右、左或下定位

p188 jQuery如何显示动画

显示（hide、show、toggle）改变CSS display属性

淡入淡出效果（fadeIn、fadeTo、fadeOut）改变CSS opacity属性

滑动（slideUp、slideDown、slideToggle）

p194 js定时函数 setTimeout

p201 animate

CSS的参数要使用DOM标准，而不是CSS标准（两个标准的区别有哪些？？？如css中border-width应写作borderWidth）。而且animate只能处理数值属性。

p207 相对元素变化

$('#box').animate({left:"+=20"})

第七章 定制函数

p256 window对象

onblur、onfocus、(setInterval、clearInterval、setTimeout、clearTimeout)

第八章 jQuery与Ajax

p304 用Ajax获取数据

$.ajax({

  url: "finishers.xml",

  cache: false,

  dataType: "xml",

  success: function(xml) {

  }

})

ajax快捷方法：get、getJSON、getScript（？？？）、post、load

第九章 处理JSON数据

p332 serialize、serializeArray

var data = $("#addRunner :input").serializeArray();

$.post(url, data, function(json) { ... });