初步认识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 相关文章推荐
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
jquery实现输入框动态增减的实例代码
Jul 14 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
JQuery包裹DOM节点的方法
Jun 11 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
JS组件Bootstrap Select2使用方法解析
May 30 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
使用webpack搭建vue环境的教程详解
Dec 31 Javascript
Node.js API详解之 assert模块用法实例分析
May 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缓存技术介绍
2006/11/25 PHP
用缓存实现静态页面的测试
2006/12/06 PHP
php SQL之where语句生成器
2009/03/24 PHP
解析thinkphp的左右值无限分类
2013/06/20 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
2016/11/30 Javascript
bootstrapValidator 重新启用提交按钮的方法
2017/02/20 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
Django开发的简易留言板案例详解
2018/12/04 Python
Python3.6.x中内置函数总结及讲解
2019/02/22 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
Python二元赋值实用技巧解析
2019/10/25 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
python爬虫使用正则爬取网站的实现
2020/08/03 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
2014新生大学四年计划书
2014/09/21 职场文书
法英专业大学生职业生涯规划书范文
2014/09/22 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
端午节寄语2015
2015/03/23 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
爱鸟护鸟的宣传语
2015/07/13 职场文书
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技