JQuery实用教程(含语法和特效)
基本语法：
$("HTML元素").action()
实例:
$(this).hide(); 隐藏当前元素
$("p").hide(); 隐藏所有段落
$("p.test").hide(); 隐藏所有class="test"的段落
$("#test").hide(); 隐藏所有id="test"的元素
文档就绪函数
$(document).ready(function(){
--------
});
这是为了防止文档在完全加载（就绪）之前运行jQuery 代码。
下面是两种假如文档完全加载之前运行函数的话，操作失败的情况：
?试图隐藏一个不存在的元素。
?获得未完全加载的图像的大小。
.divcss{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
jQuery 元素选择器
jQuery 使用CSS 选择器来选取HTML 元素。
$("p") 选取
元素。
$("p.intro") 选取所有class="intro" 的
元素。
$("p#demo") 选取id="demo" 的第一个
元素。
jQuery 属性选择器
jQuery 使用XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有href 属性的元素。
$("[href='#']") 选取所有带有href 值等于"#" 的元素。
$("[href!='#']") 选取所有带有href 值不等于"#" 的元素。
$("[href$='.jpg']") 选取所有href 值以".jpg" 结尾的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变HTML 元素的CSS 属性。
下面的例子把所有p 元素的背景颜色更改为红色：
$("p").css("background-color","red");
更多实例
$(this) 当前HTML 元素
$("p") 所有
元素
$("p.intro") 所有class="intro" 的
元素
$(".intro") 所有class="intro" 的元素
$("#intro") id="intro" 的第一个元素
$("ul li:first") 每个
- 的第一个
- 元素
$("[href$='.jpg']") 所有带有以".jpg" 结尾的href 属性的属性
("div#intro .head") id="intro" 的
元素中的所有class="head" 的元素jQuery 事件函数jQuery 事件处理函数是jQuery 中的核心函数。
事件处理函数是当HTML 中发生事件时自动被调用的函数。
由“事件”（event）“触发”（triggered）是经常被用到的术语。
jQuery 名称冲突
jQuery 使用$ 符号作为jQuery 的简介方式。
某些其他JavaScript 库中的函数（比如Prototype）同样使用$ 符号。
jQuery 使用名为noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如jq）来代替$ 符号。jQuery 事件
下面是jQuery 中事件函数的一些例子：
$(document).ready(function) 文档的就绪事件（当HTML 文档就绪可用）
$(selector).click(function) 被选元素的点击事件
$(selector).dblclick(function) 被选元素的双击事件
$(selector).focus(function) 被选元素的获得焦点事件
$(selector).mouseover(function) 被选元素的鼠标悬停事件
jQuery 隐藏和显示
通过hide() 和show() 两个函数，jQuery 支持对HTML 元素的隐藏和显示：hide() 和show() 都可以设置两个可选参数：speed 和callback。
callback 参数是在hide 或show 函数完成之后被执行的函数名称
speed 参数可以设置这些值："slow", "fast", "normal" 或milliseconds
jQuery 切换
jQuery toggle() 函数使用show() 或hide() 函数来切换HTML 元素的可见状态。
隐藏显示的元素，显示隐藏的元素。
speed 参数可以设置这些值："slow", "fast", "normal" 或milliseconds
jQuery 滑动函数
- slideDown, slideUp, slideToggle
jQuery 拥有以下滑动函数：
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
peed 参数可以设置这些值："slow", "fast", "normal" 或毫秒。
callback 参数是在hide 或show 函数完成之后被执行的函数名称。
jQuery Fade 函数
- fadeIn(), fadeOut(), fadeTo()
jQuery 拥有以下fade 函数：
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)
peed 参数可以设置这些值："slow", "fast", "normal" 或毫秒。
fadeTo() 函数中的opacity 参数规定减弱到给定的不透明度。
allback 参数是在hide 或show 函数完成之后被执行的函数名称。
jQuery 自定义动画
jQuery 函数创建自定义动画的语法：
$(selector).animate({params},[duration],[easing],[callback])关键的参数是params。
它定义了产生动画的属性。可以同时设置多个此类属性：
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
第二个参数是duration。它定义用来应用于动画的时间。
它设置的值是："slow", "fast", "normal" 或毫秒。
HTML 元素默认是静态定位，且无法移动。
如需使元素可以移动，请把CSS 的position 设置为relative 或absolute。
改变HTML 内容
语法
$(selector).html(content)html()
函数改变所匹配的HTML 元素的内容（innerHTML）。
添加HTML 内容
语法
$(selector).append(content)append()
函数向所匹配的HTML 元素内部追加内容。
语法
$(selector).after(content)after()
函数在所有匹配的元素之后插入HTML 内容。
语法
$(selector).before(content)before()
函数在所有匹配的元素之前插入HTML 内容。
jQuery CSS 操作
jQuery 拥有三种供CSS 操作的重要函数：
?$(selector).css(name,value)
?$(selector).css({properties})
?$(selector).css(name)
CSS 操作实例
函数css(name,value) 为所有匹配元素的给定CSS 属性设置值：
实例
$(selector).css(name,value)
$("p").css("background-color","yellow");
函数css({properties}) 同时为所有匹配元素的一系列CSS 属性设置值：
实例
$(selector).css({properties})
$("p").css({"background-color":"yellow","font-size":"200%"});
函数css(name) 返回指定的CSS 属性的值：
实例
$(selector).css(name)
$(this).css("background-color");
jQuery Size 操作
jQuery 拥有两种供尺寸操作的重要函数：
?$(selector).height(value)
?$(selector).width(value)
Size 操作实例
函数height(value) 设置所有匹配元素的高度：
实例
$(selector).height(value)
$("#id100").height("200px");
函数width(value) 设置所有匹配元素的宽度：
实例
$(selector).width(value)
$("#id200").width("300px");
AJAX 和jQuery
Query 的load 函数是一种简单的（但很强大的）AJAX 函数。它的语法如下：
$(selector).load(url,data,callback)
请使用选择器来定义要改变的HTML 元素，使用url 参数来指定您的数据的web 地址。
只有当您希望向服务器发送数据，才需要使用data 参数。
只有当您需要在完毕之后触发一个函数时，您才需要使用callback 参数。
jQuery AJAX 请求
请求描述
$(selector).load(url,data,callback) 把远程数据加载到被选的元素中
$.ajax(options) 把远程数据加载到XMLHttpRequest 对象中
$.get(url,data,callback,type) 使用HTTP GET 来加载远程数据
$.post(url,data,callback,type) 使用HTTP POST 来加载远程数据
$.getJSON(url,data,callback) 使用HTTP GET 来加载远程JSON 数据
$.getScript(url,callback) 加载并执行远程的JavaScript 文件
(selector) jQuery 元素选择器语法
(url) 被加载的数据的URL（地址）
(data) 发送到服务器的数据的键/值对象
(callback) 当数据被加载时，所执行的函数
(type) 被返回的数据的类型(html,xml,json,jasonp,script,text)
(options) 完整AJAX 请求的所有键/值对选项
jQuery 教程
Next Page
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。
每一章中用到的实例
If you click on me, I will disappear.
TIY
通过点击 "TIY" 按钮来看看它是如何运行的。
您将学到什么
在本教程中，您将通过文字以及许多在线实例，学到如何通过使用 jQuery 网页应用 JavaScript 效果。
jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。
基本上，您将学习到如何选取 HTML 元素，以及如何对它们执行类似隐藏、移动以及操作其内容等任务。
您需要具备的基础知识
在您开始学习 jQuery 之前，您应该对以下知识有基本的了解：?HTML
?CSS
?JavaScript
如果您需要首先学习这些科目，请在我们的首页查找这些教程。
jQuery 实例
通过实例来学习！在 W3School，您将找到很多能够编辑并测试的 jQuery 实例。jQuery 实例
jQuery 参考手册
在 W3School，您将找到包含所有 jQuery 对象和函数的完整参考手册。jQuery 参考手册
jQuery 简介
?Previous Page
?Next Page
jQuery 库可以通过一行简单的标记被添加到网页中。
jQuery 库 - 特性
jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：
?HTML 元素选取
?HTML 元素操作
?CSS 操作
?HTML 事件函数
?JavaScript 特效和动画
?HTML DOM 遍历和修改
?AJAX
?Utilities
向您的页面添加 jQuery 库
jQuery 库位于单个的 JavaScript 文件中，其中包含所有 jQuery 函数。
可以通过下面的标记把 jQuery 添加到网页中：
请注意，
This is a heading
This is a paragraph.
This is another paragraph.