初步认识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 相关文章推荐
Ajax+Json 级联菜单实现代码
Oct 27 Javascript
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 Javascript
jQuery的ajax下载blob文件
Jul 21 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
详解Angular如何正确的操作DOM
Jul 06 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 Javascript
Vue 中 filter 与 computed 的区别与用法解析
Nov 21 Javascript
VSCode搭建Vue项目的方法
Apr 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学习笔记之数组篇
2011/06/28 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
php结合ajax实现手机发红包的案例
2016/10/13 PHP
PHP运行模式汇总
2016/11/06 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
python处理csv数据的方法
2015/03/11 Python
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
python不同版本的_new_不同点总结
2020/12/09 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
医院党员公开承诺书
2014/08/30 职场文书
迎七一演讲稿
2014/09/12 职场文书
获奖感言怎么写
2015/07/31 职场文书
Go timer如何调度
2021/06/09 Golang