Learning JQuery(一)
第二章 Selectors—How to Get Anything You Want
1. addClass
$("#selected-plays > li").addClass("horizontal"); 通过addClass方法为某些元素添加样式类，若该元素存在相同的类名则不添加，否则则累加类。通过“>”操作符来查找ID为“selected-plays”的元素的所有顶级子节点；
$("#selected-plays li:not(.horizontal)").addClass("sub-level");——1、查询ID为“selected-plays”的元素；2、查询属性这个元素的所有li元素其中包括子孙。3、再通过伪类”:”将所有的不包含“horizontal”样式类的元素；4、为这些所返回的元素添加类名“sub-level”；
2. Styling Links
$('a[@href^="mailto:"]').addClass("mailto"); ——“@”在出现在中括号中的开始符号时表示取相应元素的属性，在这里的意思是取得所有<a>元素中包含“href”属性并且其值以“mailto”开头的所有元素并且为其添加样式“mailto”，又如：“$("input[@value='showHTML']").addClass("odd");”；
$('a[@href$=".pdf"]').addClass('pdflink');——查找标签为<a>并且属性href以“.pdf”为结尾的元素并为其添加样式；
$('a[@href*="mysite.com"]').addClass('mysite');——查找~包含“mysite.com"”~。
3. Styling Alternate Rows
$("tr:odd").addClass("odd");——为表格table奇数行添加样式odd；
$("tr:even").addClass("even");
$('td:contains("Henry")').addClass('highlight');——向表格包含有“Henry”字符串的单元格添加样式；
$('tr:not([th]):even').addClass('even');——向表格的奇数行添加样式，但先决条件是此行不包含“th”标签；
$('tr:not([th]):odd').addClass('odd');
var myTag = $('#my-element').get(0).tagName;
第三章 Events—How to Pull the Trigger
toggle——切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的；
防冒泡——$(document).ready(function() {
$('#switcher .button').click(function(event) {
[ 51 ]
Events—How to Pull the Trigger
$('body').removeClass();
if (this.id == 'switcher-narrow') {
$('body').addClass('narrow');
}
else if (this.id == 'switcher-large') {
$('body').addClass('large');
}
$('#switcher .button').removeClass('selected');
$(this).addClass('selected');
event.stopPropagation();
});
});
Event propagation and default actions are independent mechanisms;——事件传播与默认动作是独立的一个机制 ；
通过JQuery的trigger来模拟用户交互而触发的事件是不会造成事件传播，只有通过事件句柄直接附加到元素中而执行才会生成事件传播。