FreeOZ论坛

标题: jQuery 简介 [打印本页]

作者: xblues 时间: 25-12-2008 08:12
提示: 作者被禁止或删除, 无法发言 标题: jQuery 简介
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]

作者: black_zerg 时间: 25-12-2008 10:24
提示: 作者被禁止或删除, 无法发言 这玩意就看他主页就行了，很好的API，

欢迎光临 FreeOZ论坛 (https://www.freeoz.org/forum/)