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来模拟用户交互而触发的事件是不会造成事件传播，只有通过事件句柄直接附加到元素中而执行才会生成事件传播。