|
|
提示: 作者被禁止或删除, 无法发言
|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?FreeOZ用户注册
x
http://www.west-wind.com/presentations/jQuery/default.aspx
jQuery 的主要特性
方便的DOM对象定位方式 DOM Element Selectors
jQuery用CSS3.0风格的语法,可以使用 id class 和 属性过滤 进行选择DOM对象。
比如: $("#gdEntries td:nth-child(2)") 选择所有表格gdEntries中第2列的TD
jQuery的选择的对象集的访问方式 The jQuery Object: The Wrapped Set
jQuery中,被选择的对象集是一个数组结构。
访问方式如: $(sel)[0] 访问sel集合的第一个元素
对选择集的操作方式 Wrapped Set Operations
对象集合.操作.操作...操作
比如: $("#gdEntries tr : odd".addClass("gridalternate") 隔行添加属性
简化的事件处理 Simplified Event Handling
统一的事件方式方式,自动区分不同的浏览器,尤其是使处理AJAX的异步更新变得格外方便
短小精悍 Small Footprint
带有注释的未压缩版本才只有94K,去注释的压缩版本只有16K
Easy Plug-in Extensibility
集中提供基础核心功能,极容易被扩展,支持众多插件
jQuery 基础
添加jQuery 支持
从此处下载 www.jQuery.com 支持以下几种页面引用方式
- 使用 <script> 把jQuery 直接包含在页面内部 (极其不常用)
- 使用ScriptManager 引用
- 引用远程服务器上的脚本 (可以考虑)
- 从页面引用本地客户端脚本 (最常见的引用方式)
关于以上几种引用方式,详见: http://www.west-wind.com/Weblog/posts/413878.aspx
提供远程脚本的URL
- http://www.jQuery.com
- http://code.google.com/apis/ajaxlibs/
从页面引用本地客户端脚本- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title></title>
- <script src="scripts/jquery.js" type="text/javascript"></script>
- </head>
- <body>
复制代码 怎样选择DOM Getting started with Selectors
通过ID选择
$("#gdEntries").css("border", "solid 1px navy");
通过类选择
$(".gridalternate").css("background", "lightsteelblue ");
同时选择多个类
$(".gridrow, .gridalternate").attr("tag", "row");
通过名称选择
$("input:button ").click(function(event) { alert("clicked"); });
多级选择
$("#gdEntries>tbody>tr").css("border", "solid 1px red");
更多选择实例:
元素 $("td")
ID $("#divMessage")
CSS类 $(".gridalternate")
容器 $("input:button, input:text")
继承 $("#divMessage a")
继承 $("p > b")
$("#row_11:nth-child(2)~td")
$("~td")
$("#tdMoneyCol+td")
$("+td")
$("input:button")
$("p[class=gridalternate] |
|