初步认识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 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
javascript基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
jquery实现一个简单好用的弹出框
Sep 26 Javascript
js实现可控制左右方向的无缝滚动效果
May 29 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
基于Vue实现后台系统权限控制的示例代码
Aug 29 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
Dec 24 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
vue改变循环遍历后的数据实例
Nov 07 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
zend api扩展的php对象的autoload工具
2011/04/18 PHP
PHP-FPM之Chroot执行环境详解
2015/08/03 PHP
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
jQuery 开天辟地入门篇一
2009/12/09 Javascript
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
Bootstrap Table使用整理(四)之工具栏
2017/06/09 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
Electron整合React使用搭建开发环境的步骤详解
2020/06/07 Javascript
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
在pycharm中实现删除bookmark
2020/02/14 Python
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
工程部经理岗位职责
2013/12/08 职场文书
开工仪式策划方案
2014/05/23 职场文书
武当山导游词
2015/02/03 职场文书
2015年暑假生活总结
2015/07/13 职场文书