初步认识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中&quot;/&quot;运算符常见错误
Oct 13 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
jQuery定义插件的方法
Dec 18 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 Javascript
微信小程序 解析网页内容详解及实例
Feb 22 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
Express框架之connect-flash详解
May 31 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 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类中Static方法效率测试代码
2010/10/17 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
javascript中的作用域scope介绍
2010/12/28 Javascript
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
[48:38]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs Secret
2018/03/31 DOTA
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
pytorch构建多模型实例
2020/01/15 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
匡威荷兰官方网站:Converse荷兰
2018/10/24 全球购物
法国在线药房:DoctiPharma
2020/10/21 全球购物
大学生毕业求职简历的自我评价
2013/10/24 职场文书
电大自我鉴定
2013/10/27 职场文书
小组合作学习反思
2014/02/18 职场文书
2015年护士节慰问信
2015/03/23 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
改进工作作风心得体会
2016/01/23 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
解除合同协议书范本
2016/03/21 职场文书
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL