JavaScript 框架(库) JavaScript 高级程序设计(特别是对浏览器差异的复杂处理),通常非常困难也非常耗时。为了应对这些调整,很多的 JavaScript (helper) 库应运而生。 这些 JavaScript 库常被称为 JavaScript 框架。jQuery jQuery 是眼下最受欢迎的 JavaScript 框架。
它使用 CSS 选择器来訪问和操作网页上的 HTML 元素(DOM 对象)。jQuery 同一时候提供 companion UI(用户界面)和插件。
jQuery 极大地简化了 JavaScript 编程,非常easy学习。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”: 假设不希望下载并存放 jQuery,那么也能够通过 CDN(内容分发网络) 引用它。 谷歌和微软的server都存有 jQuery 。从 Google 或 Microsoft 载入 CDN jQuery 核心文件: 使用谷歌或微软的 jQuery。有一个非常大的优势: 很多用户在訪问其它网站时。已经从谷歌或微软载入过 jQuery。所以结果是,当他们訪问你的网站时,会从缓存中载入 jQuery,这样能够降低载入时间。同一时候,大多数 CDN 都能够确保当用户向其请求文件时,会从离用户近期的server上返回响应,这样也能够提高载入速度。 对于 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 代码。假设在文档没有全然载入之前就执行函数,操作可能失败。 接下来就是代码啦:
//引用jquery假设您点击我。我会消失。
</p> <p>点击我,我会消失。</p> <p>也要点击我哦。</p> </body> </html>
嗯,实践了一下,感觉不错。我在我的站点上运用了一下, 。