很容易学习的JQuery库 : (一) 简介

jQuery 是一个 JavaScript 库;

jQuery 极大地简化了 JavaScript 编程;

jQuery 很容易学习。

上面的三句话是结合最近的学习整理后的心得,个人感觉可以很好地解释JQuery。

是什么

     jQuery,顾名思义,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库。

     jQuery是一个兼容多浏览器的javascript库,核心理念是write
less,do more(写得更少,做得更多)。

 
   jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可。

     jQuery是免费、开源的,使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外,jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

特性

    jQuery 库可以通过一行简单的标记被添加到网页中。

      jQuery 库包含以下特性:

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

   示例:

向页面添加 jQuery 库

   jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数。

  可以通过下面的标记把 jQuery 添加到网页中:

<span style="font-size:18px;"><span style="font-size:18px;"> <span style="font-size:18px;"><strong> <head>
 <script type="text/javascript" src="jquery.js"></script>
 </head></strong></span></span></span>

  值得注意的是,<script> 标签应该位于页面的 <head> 部分。

  基础 jQuery 实例

  下面的例子演示了 jQuery 的 hide() 函数,隐藏了 HTML 文档中所有的 <p> 元素。

<span style="font-size:18px;"><strong><span style="font-size:18px;"> <span style="font-size:18px;"><strong> <html>
 <head>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
 $("button").click(function(){
 $("p").hide();
 });
 });
 </script>
 </head></strong></span></span></strong></span>
<span style="font-size:18px;"><strong><span style="font-size:18px;"> <span style="font-size:18px;"><strong>
 </strong></span></span></strong></span>
<span style="font-size:18px;"><strong><span style="font-size:18px;"> <span style="font-size:18px;"><strong><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></strong></span></span></strong></span>

安装

把 jQuery 添加到网页

如需使用 jQuery,您需要下载 jQuery 库(会在下面为您讲解),然后把它包含在希望使用的网页中。

 jQuery 库是一个 JavaScript 文件,您可以使用 HTML 的 <script> 标签引用它:

<head>
<script src="jquery.js"></script>
</head>

  值得注意的是,<script> 标签应该位于页面的 <head> 部分。

  提示:您是否很疑惑为什么我们没有在 <script> 标签中使用 type="text/javascript" ?

  在 HTML5 中,不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言!

下载 jQuery

  有两个版本的 jQuery 可供下载:

  • Production version - 用于实际的网站中,已被精简和压缩。
  • Development version - 用于测试和开发(未压缩,是可读的代码)

   这两个版本都可以从 jQuery.com 下载。

   提示:您可以把下载文件放到与页面相同的目录中,这样更方便使用。

替代方案

   如果您不希望下载并存放 jQuery,那么也可以通过 CDN(内容分发网络) 引用它。

   谷歌和微软的服务器都存有 jQuery 。

   如需从谷歌或微软引用 jQuery,请使用以下代码之一:

   Google CDN:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>

JQuery语法

   通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行“操作”(actions)。

jQuery 语法实例

  $(this).hide()
  演示 jQuery hide() 函数,隐藏当前的 HTML 元素。
  $("#test").hide()
  演示 jQuery hide() 函数,隐藏 id="test" 的元素。
  $("p").hide()
  演示 jQuery hide() 函数,隐藏所有 <p> 元素。
  $(".test").hide()
  演示 jQuery hide() 函数,隐藏所有 class="test" 的元素。

  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 函数中:

<span style="font-size:18px;"><span style="font-size:18px;"> $(document).ready(function(){

 --- jQuery functions go here ----

 });</span></span>

  这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。

  如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:

  • 试图隐藏一个不存在的元素
  • 获得未完全加载的图像的大小

学习小结

      通过近半个月的B/S的牛腩新闻发布的系统学习,感觉很有意思儿,蛮觉得网页的编辑比C/S的学习简单好些。但是,其中的许多函数的学习也是有点儿头晕(主要是因为函数的种类太多了),算是发点儿小牢骚吧!

      JQuery的学习很是重要,是在web学习过程中的一个很重要的工具,可以更完善设计,很有目的性的一个工具。         希望可以好好的总结一下最近的学习,连续的写几篇博客吧,期待自己更好完善的学习!

时间: 2024-09-03 20:57:50

很容易学习的JQuery库 : (一) 简介的相关文章

很容易学习的JQuery库 : (四) 效果

简介    本篇博文介绍JQuery的效果,主要包括隐藏.显示.切换.滑动.淡入淡出以及动画,希望搜集学习来的东西总结起来,可以方便今后的学习和工作,也希望对大家有所帮助. 隐藏与显示 jQuery hide() 和 show()方法 通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: <span style="font-size:18px;"><span style="font-size:18px;"

很容易学习的JQuery库 : (七) AJAX

AJAX 简介   AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新. 什么是 ?   AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).   简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示.   使用 AJAX 的应用程序案例:谷歌地图.腾讯微博.优酷视频.人人网等等. 关于 j & A   jQuery 提供多个与 AJAX 有关的方法.   通过

很容易学习的JQuery库 : (三) 事件

JQuery 是为事件处理特别设计的. 事件函数  jQuery 事件处理方法是 jQuery 中的核心函数. 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法.术语由事件"触发"(或"激发")经常会被使用. 通常会把 jQuery 代码放到 <head>部分的事件处理方法中: 实例 <span style="font-size:18px;"><html> <head> <scri

很容易学习的JQuery库 : (六) 遍历

定义 jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止. 下图展示了一个家族树.通过 jQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞).这种移动被称为对 DOM 进行遍历. 图示解释: <div> 元素是 <ul> 的父元素,同时是其中所有内容的祖先: <

很容易学习的JQuery库 : (二) 选择器

作用 选择器允许您对元素组或单个元素进行操作. 在前面的章节中,我们介绍了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素. jQuery 元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择. 选择器允许您对 HTML 元素组或单个元素进行操作. 在 HTML DOM 术语中: 选择器允许您对 DOM 元素组或单个 DOM 节点进行操作. 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元

很容易学习的JQuery库 : (五) HTML

关于JQuery的学习,来总结一下近段时间学习的与HTML交互的桥段:   jQuery -获取   jQuery 拥有可操作 HTML 元素和属性的强大方法.  jQuery DOM 操作   jQuery 中非常重要的部分,就是操作 DOM 的能力.   jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易.   提示:DOM = Document Object Model(文档对象模型)    DOM 定义访问 HTML 和 XML 文档的标准:   "W3C

jQuery学习笔记(一)简介、语法、HIDE实例

向您的页面添加 jQuery 库 jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数. 可以通过下面的标记把 jQuery 添加到网页中: <head> <script type="text/javascript" src="jquery.js"></script> </head> 请注意,<script> 标签应该位于页面的 <head> 部分. 下载

JavaWeb学习----JSTL标签库

一.JSTL简介: JSTL全名为JavaServer Pages Standard Tag Library,中文名称为JSP标准标签函数库,目前最新的版本为1.2.JSTL是由JCP(Java Community Process)所指定的标准规格,它主要提供给Java Web开发人员一个标准通用的标签函数库. Web 程序开发人员能够利用JSTL和EL来开发Web程序,取代传统直接在页面上嵌入Java程序(Scripting)的做法,以提高程序可读性.维护性和方便性. 既然是库文件,那我们就要

jQuery库的导入与选择符

本人最近学图灵系列丛书中<jQuery基础教程>,现将相关摘录整理如下(后续章节也会相继整理出来). 关于库的导入: 引用jQuery库文件的<script>标签,必须放在引用自定义脚本文件的<script>标签之前.否则,在我们编写的代码中将引用不到jQuery框架. jQuery中基本的操作就是选择文档中的某个部分.这是通过$()结构来完成的.通常,该结构中需要一个字符串参数,参数可以包含任CSS选择符表达式.$()函数实际上就是jQuery对象的一个制造工厂.jQ