首页 > 编程语言 > 详细

JavaScript(14)jQuery(JavaScript 库)

时间:2014-05-18 10:28:13      阅读:309      评论:0      收藏:0      [点我收藏+]
JavaScript 框架(库)
JavaScript 高级程序设计(特别是对浏览器差异的复杂处理),通常很困难也很耗时。为了应对这些调整,许多的 JavaScript (helper) 库应运而生。
这些 JavaScript 库常被称为 JavaScript 框架。

jQuery
jQuery 是目前最受欢迎的 JavaScript 框架。它使用 CSS 选择器来访问和操作网页上的 HTML 元素(DOM 对象)。jQuery 同时提供 companion UI(用户界面)和插件。
jQuery 极大地简化了 JavaScript 编程,很容易学习。

jQuery 库 - 特性
jQuery 是一个 JavaScript 函数库。jQuery 库包含以下特性:
  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

如何使用呢?以前没用过,感觉很茫然啊。。。慢慢摸索着弄弄看。。。

一、下载
到jQuery官网http://jquery.com/,进行下载,我选择了“下载未压缩的,发展的jQuery 1.11.1”。
简单介绍下:
未压缩的文件,最好在开发或调试过程中使用;压缩文件,可以节省带宽,提高生产性能,用于实际的网站中。
jQuery的2.x与jQuery的1.x具有相同的API,但不支持Internet Explorer 6,7,8。

下载下来的东西是:jquery-1.11.1.js(jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数。)
如果不愿意在自己的计算机上存放 jQuery 库,那么可以从 Google 或 Microsoft 等地方,加载 CDN jQuery 核心文件。

二、使用
比如现在呢,我想实现一个隐藏的效果,比如我点击一段文字,这段文字就会消失。那如何利用jQuery来实现呢?

首先,我要查阅一下jQuery参考手册。网址:http://www.w3school.com.cn/jquery/jquery_reference.asp
这里面呢,有个“效果”选项,“效果”里面呢,有个 hide() 函数,函数说明是:隐藏被选的元素。
看来用 hide() 函数可以实现我想实现的功能,点击“ hide() ”可以看看如何使用该函数。

然后,看一下如何引用jquery-1.11.1.js”
“jquery-1.11.1.js”放在代码的同级目录下,通过以下代码来引用“jquery-1.11.1.js”:
<script src="jquery-1.11.1.js"></script>

如果不希望下载并存放 jQuery,那么也可以通过 CDN(内容分发网络) 引用它。
谷歌和微软的服务器都存有 jQuery 。从 Google 或 Microsoft 加载 CDN jQuery 核心文件:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.11.1.min.js"></script>
使用谷歌或微软的 jQuery,有一个很大的优势:
许多用户在访问其他站点时,已经从谷歌或微软加载过 jQuery。所以结果是,当他们访问你的站点时,会从缓存中加载 jQuery,这样可以减少加载时间。同时,大多数 CDN 都可以确保当用户向其请求文件时,会从离用户最近的服务器上返回响应,这样也可以提高加载速度。
对于 Google ,如果想访问新版本(假设不知道新版本的具体版本号),那么可以把“1.11.1”改为“1.11”或“1”,谷歌会返回相应系列中最新的可用版本。

接下来,学习一下jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。

基础语法是:$(selector).action()
美元符号$定义 jQuery
选择符(selector)“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

示例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。

注意:
jQuery 函数应该位于一个 document ready 函数(文档就绪函数)中:
$(document).ready(function(){

--- jQuery functions go here ----

});
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数,操作可能失败。

接下来就是代码啦:
<!DOCTYPE html>
<html>

<head>

<script src="jquery-1.11.1.js"></script>  //引用jquery

<script>
$(document).ready(function(){ //文档就绪函数
 $("p").click(function(){ //要消失的元素,如何操作该元素会触发效果 
  $(this).hide(); //触发怎样的效果 
 });
});
</script>

</head>

<body>

<p>如果您点击我,我会消失。</p>
<p>点击我,我会消失。</p>
<p>也要点击我哦。</p>

</body>

</html>

嗯,实践了一下,感觉不错。我在我的网站上运用了一下,点击打开链接

JavaScript(14)jQuery(JavaScript 库),布布扣,bubuko.com

JavaScript(14)jQuery(JavaScript 库)

原文:http://blog.csdn.net/u014194675/article/details/25974005

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!