基本语法: $(\"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\
更多实例 $(this) 当前 HTML 元素 $(\"p\") 所有
元素 $(\"p.intro\") 所有 class=\"intro\" 的
元素 $(\".intro\") 所有 class=\"intro\" 的元素 $(\"#intro\") id=\"intro\" 的第一个元素 $(\"ul li:first\") 每个
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\或 milliseconds
jQuery 切换 jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。 隐藏显示的元素,显示隐藏的元素。 speed 参数可以设置这些值:\"slow\或 milliseconds
jQuery 滑动函数 - slideDown, slideUp, slideToggle jQuery 拥有以下滑动函数: $(selector).slideDown(speed,callback) $(selector).slideUp(speed,callback) $(selector).slideToggle(speed,callback) peed 参数可以设置这些值:\"slow\或 毫秒。 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\或 毫秒。 fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。
allback 参数是在 hide 或 show 函数完成之后被执行的函数名称。
jQuery 自定义动画 jQuery 函数创建自定义动画的语法:
$(selector).animate({params},[duration],[easing],[callback])关键的参数是 params。 它定义了产生动画的属性。可以同时设置多个此类属性:
animate({width:\"70%\第二个参数是 duration。它定义用来应用于动画的时间。 它设置的值是:\"slow\或 毫秒。 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\
函数 css({properties}) 同时为所有匹配元素的一系列 CSS 属性设置值: 实例 $(selector).css({properties}) $(\"p\").css({\"background-color\":\"yellow\ 函数 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 paragraph.
This is another paragraph.