初步认识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 相关文章推荐
指定位置如果有图片显示图片,无图片显示广告的JS
Jun 05 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
jQuery实现分隔条左右拖动功能
Nov 21 Javascript
js实现简单排列组合的方法
Jan 27 Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 Javascript
JavaScript中const、var和let区别浅析
Oct 11 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 Javascript
javascript的var与let,const之间的区别详解
Feb 18 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
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
php获取文件内容最后一行示例
2014/01/09 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
php判断文件上传图片格式的实例详解
2017/09/30 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
js动态创建、删除表格示例代码
2013/08/07 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
超实用的JavaScript表单代码段
2016/02/26 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
js中DOM三级列表(代码分享)
2017/03/20 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
jQuery实现动态删除LI的方法
2017/05/30 jQuery
JavaScript全屏和退出全屏事件总结(附代码)
2017/08/17 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
Python中的装饰器用法详解
2015/01/14 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
如何通过命令行进入python
2020/07/06 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
python爬取招聘要求等信息实例
2020/11/20 Python
python3判断IP地址的方法
2021/03/04 Python
德国电子商城:ComputerUniverse
2017/04/21 全球购物
小学教育毕业生自荐信
2013/11/18 职场文书
美术专业自荐信
2014/07/07 职场文书
教师党员个人整改措施
2014/10/27 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书