初步认识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五图轮播切换实用版
Aug 17 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
JavaScript中的原型链prototype介绍
Dec 30 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
学习Angularjs分页指令
Jul 01 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
vue-cli扩展多模块打包的示例代码
Apr 09 Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 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中使用Oracle数据库(3)
2006/10/09 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
PHP中echo和print的区别
2014/08/28 PHP
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
如何在PHP中生成随机数
2020/06/04 PHP
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
简单介绍Python中的round()方法
2015/05/15 Python
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
啤酒销售实习自我鉴定
2013/09/24 职场文书
大学三年计划书范文
2014/04/30 职场文书
法律服务所工作总结
2015/08/10 职场文书
分享几个简单MySQL优化小妙招
2022/03/31 MySQL
nginx静态资源的服务器配置方法
2022/07/07 Servers