jQuery 学习笔记(一)——jQuery简介、jQuery语法
2011-09-21 15:26
471 查看
内容选自w3cschool教程
一句话描述JQuery:jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。
一. jQuery简介
jQuery 库可以通过一行简单的标记被添加到网页中。
1. jQuery库的特性
jQuery是一个JavaScript函数库。
jQuery库包含以下特性:
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
2. 向页面添加jQuery
jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数。
可以通过下面的标记把 jQuery 添加到网页中:
请注意,<script> 标签应该位于页面的 <head> 部分。
3. 基础的jQuery实例
下面的例子演示了 jQuery 的 hide() 函数,隐藏了 HTML 文档中所有的 <p> 元素。
实例:
4. 下载 jQuery
共有两个版本的 jQuery 可供下载:一份是精简过的,另一份是未压缩的(供调试或阅读)。
这两个版本都可从 jQuery.com 下载。
5. 库的替代
Google 和 Microsoft 对 jQuery 的支持都很好。
如果您不愿意在自己的计算机上存放 jQuery 库,那么可以从 Google 或 Microsoft 加载
CDN jQuery 核心文件。
使用 Google 的 CDN:
使用 Microsoft的 CDN:
二. jQuery语法
通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行“操作”(actions)。
1. jQuery 语法实例:
(1)$(this).hide() - 隐藏当前元素。
(2)$("#test").hide() - 隐藏所有 id="test" 的元素
(3)$("p").hide() - 隐藏所有 <p> 元素。
(4)$(".test").hide() - 隐藏所有 class="test" 的段落
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
基础语法是:$(selector).action()
美元符号定义 jQuery
选择符(selector)“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
提示:jQuery 使用的语法是 XPath 与
CSS 选择器语法的组合。
2. 文档就绪函数
实例中的所有 jQuery 函数位于一个 document ready 函数中:
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:
试图隐藏一个不存在的元素
获得未完全加载的图像的大小
一句话描述JQuery:jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。
一. jQuery简介
jQuery 库可以通过一行简单的标记被添加到网页中。
1. jQuery库的特性
jQuery是一个JavaScript函数库。
jQuery库包含以下特性:
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
2. 向页面添加jQuery
jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数。
可以通过下面的标记把 jQuery 添加到网页中:
<head> <script type="text/javascript" src="jquery.js"></script> </head>
请注意,<script> 标签应该位于页面的 <head> 部分。
3. 基础的jQuery实例
下面的例子演示了 jQuery 的 hide() 函数,隐藏了 HTML 文档中所有的 <p> 元素。
实例:
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">Click me</button> </body> </html>
4. 下载 jQuery
共有两个版本的 jQuery 可供下载:一份是精简过的,另一份是未压缩的(供调试或阅读)。
这两个版本都可从 jQuery.com 下载。
5. 库的替代
Google 和 Microsoft 对 jQuery 的支持都很好。
如果您不愿意在自己的计算机上存放 jQuery 库,那么可以从 Google 或 Microsoft 加载
CDN jQuery 核心文件。
使用 Google 的 CDN:
<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /jquery/1.4.0/jquery.min.js"></script> </head>
使用 Microsoft的 CDN:
<head> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery /jquery-1.4.min.js"></script> </head>
二. jQuery语法
通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行“操作”(actions)。
1. jQuery 语法实例:
(1)$(this).hide() - 隐藏当前元素。
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $(this).hide(); }); }); </script> </head> <body> <button type="button">Click me</button> </body> </html>
(2)$("#test").hide() - 隐藏所有 id="test" 的元素
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p id="test">This is another paragraph.</p> <button type="button">Click me</button> </body> </html>
(3)$("p").hide() - 隐藏所有 <p> 元素。
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">Click me</button> </body> </html>
(4)$(".test").hide() - 隐藏所有 class="test" 的段落
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { $(".test").hide(); }); }); </script> </head> <body> <h2 class="test">This is a heading</h2> <p class="test">This is a paragraph.</p> <p>This is another paragraph.</p> <button type="button">Click me</button> </body> </html>
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
基础语法是:$(selector).action()
美元符号定义 jQuery
选择符(selector)“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
提示:jQuery 使用的语法是 XPath 与
CSS 选择器语法的组合。
2. 文档就绪函数
实例中的所有 jQuery 函数位于一个 document ready 函数中:
$(document).ready(function(){ --- jQuery functions go here ---- });
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:
试图隐藏一个不存在的元素
获得未完全加载的图像的大小
相关文章推荐
- JQuery简介及语法学习笔记
- jQuery学习笔记(一)简介、语法、HIDE实例
- JavaScript学习笔记8-jQuery简介、jQuery使用详解、DOM对象与jQuery对象的转换与区别
- jQuery学习笔记一:简介
- 学习笔记-·jQuery 语法
- [jQuery]学习笔记(一):jQuery的简介和安装教程
- 黑马程序员-IOS学习笔记-OC基础OC简介及基本语法
- 二.javaweb笔记之JQuery学习路线+语法+常用选择器
- jQuery学习笔记--------(选择器、事件、语法)
- day02_js学习笔记_01_js的简介、js的基本语法
- jQuery学习笔记(一)_简介
- jquery学习笔记——简介
- Jquery学习笔记——第一章 Jquery入门及基础语法
- jquery学习笔记一:选择器高级语法
- Python基础学习笔记(二)语法简介
- 廖雪峰的Python教程学习笔记一Python简介和基础语法
- jQuery学习笔记(一)基本语法内容
- Java学习笔记——MySQL的安装使用以及SQL语法简介
- mybatis学习笔记一 简介 4000
- Jquery学习笔记 --ajax删除用户,使用了js原生ajax