初步认识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代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
jquery简单的拖动效果实现原理及示例
Jul 26 Javascript
jquery序列化表单以及回调函数的使用示例
Jul 02 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
jQuery和JavaScript节点插入元素的方法对比
Nov 18 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
简单实现js轮播图效果
Jul 14 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 Javascript
深入理解redux之compose的具体应用
Jan 12 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&amp;mysql(二)
2006/10/09 PHP
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
jQuery中prop()方法用法实例
2015/01/05 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
详解python3实现的web端json通信协议
2016/12/29 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
Python环境Pillow( PIL )图像处理工具使用解析
2019/09/12 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
什么是lambda函数
2013/09/17 面试题
给孩子的新年寄语
2014/04/08 职场文书
慰问敬老院活动总结
2014/04/26 职场文书
留学生求职信
2014/06/03 职场文书
团队激励口号
2014/06/06 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
房屋租赁意向书范本
2015/05/09 职场文书