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;——事件传播与默认动作是独立的一个机制 

通过JQuerytrigger来模拟用户交互而触发的事件是不会造成事件传播,只有通过事件句柄直接附加到元素中而执行才会生成事件传播。



本文转自Sam Lin博客园博客,原文链接:http://www.cnblogs.com/samlin/archive/2008/02/20/1075704.html,如需转载请自行联系原作者


目录
相关文章
|
JavaScript
jQuery toggleClass()
jQuery toggleClass()
51 0
|
1月前
|
JavaScript 前端开发
JQuery 什么是JQuery?
JQuery 什么是JQuery?
32 0
|
5月前
|
Web App开发 JavaScript 前端开发
什么是jQuery
什么是jQuery
24 0
|
缓存 JavaScript 前端开发
jQuery
jQuery 语法 jQuery 选择器
104 0
|
6月前
|
JavaScript 前端开发
什么是jQuery?
什么是jQuery?
|
6月前
|
SQL JavaScript 前端开发
|
XML 缓存 JavaScript
jQuery(下)
jQuery(下)
|
JavaScript 前端开发
jQuery 效果
jQuery 效果
116 0
|
Web App开发 JSON JavaScript
|
Web App开发 前端开发 JavaScript
从零玩转jQuery-初识jQuery
课前须知: 学习jQuery前必须先掌握JavaScript jQuery虽然属于前端技术, 但是对于后端人员(诸如Java、PHP等,也需要掌握) jQuery是什么? jQuery是一款优秀的JavaScript库,从命名可以看出jQuery最主要的用途是用来做查询(jQuery=js+Query).
1836 0

相关课程

更多