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”：

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

假设不希望下载并存放 jQuery，那么也能够通过 CDN（内容分发网络） 引用它。

谷歌和微软的server都存有 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 都能够确保当用户向其请求文件时，会从离用户近期的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 代码。假设在文档没有全然载入之前就执行函数，操作可能失败。



接下来就是代码啦：

<!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 库）的更多相关文章

  1. jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题

    jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互.特效.小部件及主题.无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器,jQuery ...

  2. python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

  3. JavaScript、Jquery选择题

    尚学堂Java EE软件工程师认证考试 试题库-选择题     一.    选择题(包括单选和双选) 1.B 在JavaScript中,以下变量命名非法的是(   )(选择一项) A. numb_1 ...

  4. 前端工具 - 15个最佳的 JavaScript 表单验证库

    客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...

  5. 15个最佳的 JavaScript 表单验证库

    客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...

  6. 原生 JavaScript 代替 jQuery【转】

    目录 用原生JavaScript代替jQuery Query Selector CSS & Style DOM Manipulation Ajax Events Utilities Promi ...

  7. HTML、CSS、Javascript、jQuery、Xml

    HTML HTML简介 Hyper Text Markup Language (超文本标记语言)简写:HTML.通过标签来标记要显示的网页中的各个部分.网页文件本身是一种文本文件,通过在文本文件中添加 ...

  8. 推荐一些好用的 HTML5 & JavaScript 游戏引擎开发库

    推荐一些好用的 HTML5 & JavaScript 游戏引擎开发库 0. 引言 如果你是一个游戏开发者,并且正在寻找一个可以与 JavaScript 和 HTML5 无缝工作的游戏引擎.那么 ...

  9. jQuery学习之路（7）- 用原生JavaScript实现jQuery的某些简单功能

    ▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...

  10. 【JavaScript与JQuery获取H2的内容】

    撰写日期:2016-7-13 11:05:07 JavaScript与JQuery获取DOM内容是有区别的,接下来看一例子 栗子: Jquery-获取H3中的内容然后Dom转换为Jquery < ...

随机推荐

  1. Linux 操作系统启动流程

    1.加载bios bios中包含的硬件CPU 内存 硬盘等相关信息 2.读取MBR 读取完bios信息之后,计算机会查找bios制定的硬盘MBR引导扇区,将其内容复制到 0x7c00 地址所在的物理内 ...

  2. 大道至简第一章读后感 Java伪代码形式

    观看了大道至简的第一章之后,从愚公移山的故事中我们可以抽象出一个项目, 下面用Java 伪代码的形式来进行编写: import java(愚公移山的故事) //愚公移山 public class yu ...

  3. 加密中加salt的意思

    所谓加Salt,就是加点“佐料”.当用户首次提供密码时(通常是注册时),由系统自动往这个密码里加一些“Salt值”,这个值是由系统随机生成的,并且只有系统知道.然后再散列.而当用户登录时,系统为用户提 ...

  4. WinServer-AD域控入门

    计算机账户和用户账户的区别 域控中不需要事先建立计算机账户,但必须建立登录用户账户. 计算机只要知道域控管理员或者授权管理账户,就可以利用此账户为所有计算机加域. 计算机加域成功之后,都会在AD管理里 ...

  5. SEO分享：关于SEO的十个问题

    想写的幽默一点,幽默细胞太少,想写的专业一点,又不够专业,结果就出现了这篇不伦不类的怪文,望海涵! 导读:前面写过一篇类似的文章,受到的评价好坏都有吧.有人说讲的没有实质性的内容,有些人抱怨回答的太过 ...

  6. FreeRTOS系列第13篇---FreeRTOS内核控制

    内核控制的一些功能须要移植层提供,为了方便移植.这些API函数用宏来实现,比方上下文切换.进入和退出临界区.禁止和使能可屏蔽中断.内核控制函数还包含启动和停止调度器.挂起和恢复调度器以及用于低功耗模式 ...

  7. nyoj--18--The Triangle(dp水题)

    The Triangle 时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描述 7 3 8 8 1 0 2 7 4 4 4 5 2 6 5 (Figure 1) Figure ...

  8. RAC IP 地址修改

    RAC 修改IP: 版本信息: REDHAT AS5 ORACLE 11G R2, 两个节点. 修改如下: 1.修改/etc/host(rac1,rac2) 192.168.3.205   rac-s ...

  9. [雅礼NOIP2018集训 day3]

    考试的时候刚了T1两个小时线段树写了三个子任务结果发现看错了题目,于是接下来一个半小时我自闭了 result=历史新低 这告诉我们,打暴力要端正态度,尤其是在发现自己之前出锅的情况下要保持心态的平和, ...

  10. BZOJ 2045 容斥原理

    思路: 同BZOJ 2005 http://blog.csdn.net/qq_31785871/article/details/54314774 //By SiriusRen #include < ...