JQuery 学习

Write Less , Do more
jQuery 介绍
Cssrain.cn

1. jQuery 概述
1.1 基本概念
jQuery是一个轻量级 javascript库 .
兼容各种浏览器（ I E 6.0+ , FF 1.5+ , Safari 2.0+ , Opera9.0+ ），也支持 CSS 1-3
选择器 .
能将 JavaScript代码和 HTML 代码完全分离，便于代码维护和修改。
使用户能更方便地处理 HTML 文档、事件、实现动画效果，并且方便地为网站
提供 Ajax 交互
容易扩展，插件丰富

1.2 能做什么
获取页面的内容
修改页面的外观
修改页面的内容
在页面中响应用户的交互
给页面加上动画
无刷新返回服务器端的信息
还提供了改进函数，如迭代和数组操作
1. jQuery 概述

1.3 主流 javascript 库
Prototype
YUI
D ojo
mooTools
jQuery:
短小精悍，支持 dom1-3 ， css支持；简单的动画实现，支持自定义动画；支持插
件开发，现有插件多；完整的 api 文档以及范例，易学；拥有官方 UI 程序供使
用，效果好。
性能测试： http://mootools.net/slickspeed
1. jQuery 概述

1. jQuery 下载和引入
2.1 jQuery 下载
当前版本 1.4.4
官方网站下载： http://www.jquery.com/
2.2 jQuery 引入
在页面头部 head 中，引入 js ：
< script type="text/javascript" src="./script/jquery.js"> < /script>
2.3 Dw和 VS2008 中可以实现 jQuery 的智能提示
http://code.google.com/p/jquery-api-zh-cn/downloads/list

1. 学习 jQuery ，主要从哪些方面下
手
（ 1 ）核心函数
（ 2 ）选择器
（ 3 ） D OM 操作
（ 4 ）事件和动画
（ 5 ） Ajax
（ 6 ）常用工具函数
（ 7 ）插件

4. jQuery 基础
4.1 jQuery 核心函数
$( expression,[ context] )
这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元
素。 jQuery 的核心功能都是通过这个函数实现的。这个函数最基本的用法就是向它传递
一个表达式（通常由 CSS 选择器组成），然后根据这个表达式来查找所有匹配的元素。
$( html)
根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 D OM 元素
$( elements)
将一个或多个 D OM 元素转化为 jQuery对象。
$( callback)
$(document).ready() 的简写。允许你绑定一个在 D OM 文档载入完成后执行的函数。这个函数
的作用如同 $(document).ready() 一样，只不过用这个函数时，需要把页面中所有需要在 D OM
加载完成时执行的 $() 操作符都包装到其中来。

4. jQuery 基础
4.2 jQuery 选择器
返回 jQuery 对象。
基本选择器（如： $(“#id”) , $(“.class”) ）
层次选择器（如： $(“div > span”) ）
简单选择器（如： $(“tr:last”) ）
内容选择器 ( 如： $("div:contains(' John' )") )
可见性选择器 ( 如： $("tr:hidden") )
属性选择器（如： $("input[name= ‘john' ]") ）
子元素选择器（如： $("ulli:first-child") ）
表单选择器（如： $(":input") ）
表单对象选择器（如： $("select option:selected") ）
自定义选择器（自己写选择器插件）

4. jQuery 基础
4.3 jQuery Dom 操作
属性操作（如： $("img").attr("src","test.jpg") ）
样式操作（如： $("p").addClass("selected") ）
设置和获取 HTML 代码（如： $(“p”). html(‘val’) ）
设置和获取文本（如： $(“p”). text(‘val’) ）
设置和获取值（如： $(“input”). val(‘val’) ）
查找操作（如： $(“p”). find(“a”) , $(“p”). find(“a”) .end() ）
插入操作 ( 如： $("p").appendTo("div") )
删除操作 ( 如： $("p").remove() )
复制操作 ( 如： $("b").clone().prependTo("p") )
设置样式 ( 如： $("p").css({ color: "#ff0011", background: "blue"}) )
获取尺寸 ( 如： $("p").height() )

4. jQuery 基础
4.4 jQuery 事件和动画
页面载入事件 ( 如： $(document).ready(function(){ // 在这里写你的代码 ... }); )
事件处理 ( 如： bind , trigger, unbind )
交互处理 ( 如： hover, toggle )
普通事件 ( 如： click, mouseover 等 )
基本效果 ( 如： $("p").show() )
滑动效果 ( 如： $("p").slideD own("slow") )
淡入淡出效果 ( 如： $("p").fadeI n("slow") )
自定义效果 ( 如： $(".block").animate({left: ' -50px' }, "slow") )

4. jQuery 基础
4.5 jQuery 中的 Ajax
$.ajax( options) : 通过 HTTP 请求加载远程数据
$.ajax({
url: "test.html",
cache: false,
success: function(html){
$("#results").append(html);
}
});
$.get(”search.do”,{id:1},rend); function rend(xml){ alert(xml);}
$.post(”search.do”,{id:1},rend); function rend(xml){alert(xml);}
$(”#msg”).ajaxStart(function(){$(this).html(”正在载入 ..”);});
$(”#msg”).ajaxSuccess(function(){$(this).html(” ”加载完成！ ); });

4. jQuery 基础
4.6 jQuery 中的工具函数
$.browser.msie
$.each()
$.trim()
$.param()
$.isArray()
…等等 .

4. jQuery 基础
4.7 jQuery 插件
(1) 官方： http://ui.jquery.com
(2)240 插件： http://www.cnblogs.com/Terrylee/archive/2007/12/09/the-ultimate-jquery-plugin-list.html
(3) http://www.cssrain.cn
参考网站：
jQuery官方网站 http://jquery.com
jQuery 中文社区 http://bbs.jquery.org.cn
jQuery中文 API 站点 http://code.google.com/p/jquery-api-zh-cn/downloads/list

Thank you
http://www.cssrain.cn

JQuery 学习

More Related Content

What's hot (20)

Viewers also liked (10)

Similar to JQuery 学习 (20)

Recently uploaded (20)

JQuery 学习