第二章 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来模拟用户交互而触发的事件是不会造成事件传播,只有通过事件句柄直接附加到元素中而执行才会生成事件传播。
本文转自Sam Lin博客园博客,原文链接:http://www.cnblogs.com/samlin/archive/2008/02/20/1075704.html,如需转载请自行联系原作者