初步认识JavaScript函数库jQuery


Posted in Javascript onJune 18, 2015

jQuery 库可以通过一行简单的标记被添加到网页中。
jQuery 库 - 特性

jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性:

  •     HTML 元素选取
  •     HTML 元素操作
  •     CSS 操作
  •     HTML 事件函数
  •     JavaScript 特效和动画
  •     HTML DOM 遍历和修改
  •     AJAX
  •     Utilities

向您的页面添加 jQuery 库

jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数。

可以通过下面的标记把 jQuery 添加到网页中:

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

请注意,<script> 标签应该位于页面的 <head> 部分。
基础 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>

亲自试一试
下载 jQuery

共有两个版本的 jQuery 可供下载:一份是精简过的,另一份是未压缩的(供调试或阅读)。

这两个版本都可从 jQuery.com 下载。
库的替代

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>

Javascript 相关文章推荐
实例:用 JavaScript 来操作字符串(一些字符串函数)
Feb 15 Javascript
asp javascript 实现关闭窗口时保存数据的办法
Nov 24 Javascript
Javascript实现颜色rgb与16进制转换的方法
Apr 18 Javascript
javascript+ajax实现产品页面加载信息
Jul 09 Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 Javascript
js querySelector() 使用方法
Dec 21 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 Javascript
Vue常用的全选/反选的示例代码
Feb 19 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
Jun 18 #Javascript
浅谈Jquery核心函数
Jun 18 #Javascript
$.extend 的一个小问题
Jun 18 #Javascript
纯js实现无限空间大小的本地存储
Jun 18 #Javascript
JS实现当前页居中分页效果的方法
Jun 18 #Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 #Javascript
javaScript中Math()函数注意事项
Jun 18 #Javascript
You might like
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
PHP简单遍历对象示例
2016/09/28 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
javascript 事件绑定问题
2011/01/01 Javascript
javascript实现博客园页面右下角返回顶部按钮
2015/02/22 Javascript
javascript倒计时效果实现
2015/11/12 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
Python高斯消除矩阵
2019/01/02 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
Python request操作步骤及代码实例
2020/04/13 Python
什么是python的函数体
2020/06/19 Python
python中return不返回值的问题解析
2020/07/22 Python
python简单实现插入排序实例代码
2020/12/16 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
高校毕业生自我鉴定
2013/10/27 职场文书
酒店保安员岗位职责
2014/01/31 职场文书
国庆节文艺活动方案
2014/02/03 职场文书
暑期培训随笔感言
2014/03/10 职场文书
英语教研活动总结
2014/07/02 职场文书
施工安全责任书范本
2014/07/24 职场文书
投标承诺函格式
2015/01/21 职场文书
python 安全地删除列表元素的方法
2022/03/16 Python