jQuery 学习笔记(TryjQuery)
第一集.
页面加载完成后执行 js 代码：
$(document).ready(function(){
$("h1").text("Where to?");
});
第二集.
jQuery选择器：
$("h1") //使用标签获取网页元素
$("#ID") //使用标签ID获取网页元素
$(".ClassName") //使用标签类名获取网页元素
CSS
p { ... }
#container { ... }
.articles { ... }
jQuery
$("p");
$("#container");
$(".articles");
第三集.
更多的jQuery选择器：
$("#destinations li"); //获取 id 为 destinations 的网页元素中包含的所有标签为 li 的元素，包含儿子、孙子、子孙万代...。
$("#destinations > li"); //获取 id 为 destinations 的网页元素中直属的标签为 li 的元素，仅包含儿子。
$(".promo, #france"); //获取类名为 promo 或 id 为 france 的多个元素。
$("#destinations li:first"); //获取 id 为 destinations 的网页元素中第一个 li
$("#destinations li:last"); //获取 id 为 destinations 的网页元素中最后一个 li
$("#destinations li:odd"); //获取 id 为 destinations 的网页元素中 li 中的奇数部分
$("#destinations li:even"); //获取 id 为 destinations 的网页元素中 li 中的偶数部门
注：li列表中的元素的下标从 0 开始（watch out, the index starts at 0）
第四集.
jQuery遍历，使用.first() 的效率比使用伪类:first选择的效率更高：
$("#destinations li");
$("#destinations").find("li"); //速度快
$("li:first");
$("li").first(); //速度快
$("li:last");
$("li").last(); //速度快
$("li").first().next().prev(); //方法链
$("#destinations").parent(); //parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
$("#destinations").parents(); //parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
$("#destinations").children("li"); //children() 方法返回被选元素的所有直接子元素。
$("#destinations").find("li"); //find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
children(), unlike find(), only selects direct children
第五集.
把元素<element>添加到目标元素的下级的后面、下级的前面、同级的后面、同级的前面
.append(<element>)
.prepend(<element>)
.after(<element>)
.before(<element>)
把目标元素添加到元素<element>下级的后面、下级的前面、同级的后面、同级的前面
.appendTo(<element>)
.prependTo(<element>)
.insertTo(<element>)
.insertBefort(<element>)
例：price.appendTo($('.vacation'));
第六集.
事件，jQuery Object Methods： .on(<event>, <event handler>)
$(document).ready(function() {
$('button').on('click', function() {
var price = $('<p>From $399.99</p>');
$('.vacation').append(price);
$('button').remove();
});
});
第七集.
$(this) 激活当前事件的网页元素
$(document).ready(function() {
$('button').on('click', function() {
var price = $('<p>From $399.99</p>');
$(this).closest('.vacation').append(price);
$(this).remove();
});
});
第八集.
自定义 data 属性值的获取和赋值
$('.vacation').on('click', 'button', function() {}); //仅给类名为 vacation 的元素中的 button 标签添加 click 事件。
$('.vacation').filter('.onsale'); //class="vacation onsale" Finds elements with a class of .vacation and .onsale 。
.addClass(<class>) //添加类名，用于改变样式
.removeClass(<class>) //移除类名，用于改变样式
$('#filters').on('click', '.onsale-filter', function() {
$('.highlighted').removeClass('highlighted');
$('.vacation').filter('.onsale').addClass('highlighted');
});
第九集.
滑动效果：使目标元素以滑动的方式显示/隐藏/显示隐藏交替，滑动方式比直接使用hide()/show()效果和体验要好
.slideDown()
.slideUp()
.slideToggle()
简单网页调试：
alert('Hello'); //网页对话框
$('li').length; //选择元素的个数
第十集.
鼠标事件：
click
dblclick
focusin
focusout
mousedown
mouseup
mousemove
mouseout
mouseover
mouseleave
mouseenter
调用函数：
function showTicket () {
$(this).closest('.confirmation').find('.ticket').slideDown();
}
$(document).ready(function() {
$('.confirmation').on('click', 'button', showTicket);
$('.confirmation').on('mouseenter', 'h3', showTicket);
});
Don’t add () at the end - that would execute the function immediately
第十一集.
键盘事件，Keyboard Events：
keypress
keydown
keyup
表单事件，Form Events
blur
select
change
focus
submit
字符串转换为数值类型：+
var price = $(this).closest('.vacation').data('price'); //Returns price as a string
var price = +$(this).closest('.vacation').data('price'); //Use + to convert the string to a number
输入控件取值赋值：.val()、.val(<new value>)
var quantity = +$(this).val();
第十二集.
渐变效果：使目标元素以渐变的方式显示/隐藏/显示隐藏交替，渐变方式比直接使用hide()/show()效果和体验要好
.fadeIn()
.fadeOut()
.fadeToggle()
浏览器事件：
event.stopPropagation(); //阻止向父节点冒泡传递事件，The browser will still handle the click event but will prevent it from “bubbling up” to each parent node.
event.preventDefault(); //阻止浏览器的默认行为，如页面置顶，The click event will “bubble up” but the browser won’t handle it.
$(document).ready(function() {
$('.vacation').on('click', '.expand',
function(event) {
event.stopPropagation(); //阻止向父节点冒泡传递事件
event.preventDefault(); //阻止浏览器的默认行为，页面置顶
$(this).closest('.vacation')
.find('.comments')
.fadeToggle();
}
);
});
第十三集.
改变样式，推荐使用第三种写法：
显示/隐藏，推荐使用Show(), Hide():
改变样式，推荐通过添加和移除标签上的类名来控制 css 样式：
元素中类名的处理，添加、移除、添加移除交替：
.addClass(<class>)
.removeClass(<class>)
.toggleClass() //Adds the class if $(this) doesn’t have it, removes it if $(this) already has it
第十四集.
动画效果，.animate(<object>)：
.hasClass(<class>) //是否包含类名
改变动画速度，设置动画执行的总时间：Effects methods like animate(), slideToggle() and fadeToggle() can also be given a specific speed as a String or in milliseconds
$(this).animate({'top': '-10px'}); //默认 400 毫秒
$(this).animate({'top': '-10px'}, 400);
$(this).animate({'top': '-10px'}, 'fast'); //加速
$(this).animate({'top': '-10px'}, 200);
$(this).animate({'top': '-10px'}, 'slow'); //减慢
$(this).animate({'top': '-10px'}, 600);
使用 css 实现动画效果：(此处考虑不同浏览器对 transition 属性的支持不同)
学习网站：http://try.jquery.com/
中文字幕视频：http://blog.jobbole.com/37699/
