jQuery概述

在这里插入图片描述

什么是jQuery

(1)快速获取文档元素。jQuery的选择机制构建于CSS的选择器，提供了快速查询DOM文档中元素的能力，而且大大强化了 JavaScript 中获取页面元素的方式。
(2)提供漂亮的页面动态效果。jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页,许多网站都使用jQuery的内置效果,例如淡入淡出、元素移除等动态特效。
(3)创建Ajax无刷新网页。使用Ajax可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，需要客户端与服务器进行通信。如果不使用Ajax，每次数据更新后必须重新刷新整个网页，而使用Ajax特效后，可以对页面进行局部刷新，提供动态的效果。
(4)jQuery对基本 JavaScript 结构进行了增强，例如元素迭代和数组处理等操作。(5)增强的事件处理。jQuery提供了各种页面事件，可以避免程序员在HTML中添加太多的事件处理代码，最重要的是，其事件处理器消除了各种浏览器的兼容性问题。
(6)更改网页内容。jQuery可以修改网页中的内容，例如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用 JavaScript 代码处理的方式。
JavaScript 与jQuery有本质的区别。 JavaScript 是一种语言，而jQuery是建立在 JavaScript 脚本语言上的一个基本库，把 JavaScript 进行了封装，利用jQuery可以更简单地使用 JavaScript 。jQuery是当前最流行的 JavaScript 库，封装了很多预定义的对象和实用函数，jQuery是一个轻量级的 JavaScript 库，压缩之后很小，与CSS、浏览器兼容。

配置jQuery环境

1.获取jQuery

在jQuery的官方网站 http://jquery.com/download/,可以直接下载jQuery的最新库。目前jQuery有三个版本。

jQuery官网图片：

2.jQuery库的类型说明

3.在页面中引入jQuery

要想使用jQuery库，使用如下语句先引入jQuery库：

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

例：

<!doctype html>
<html>
   <head>
     <meta charset="utf-8">
      <title>jQuery</title><script src="js/jquery-1.11.2. js"></script><!--引人jQuery库-->
      <script>
         $(document). ready(function(e){／／网页加载完毕后执行
            alert("hello jQuery World!");／／弹出一个警告框
         })
      </script>
   </head>
 <body>
 </body>
</html>

说明如下：
(1)$()是jQuery的缩写，可以在DOM中搜索与指定的选择器匹配的元素，并创建一个引用该元素的jQuery对象。
(2)通过jQuery对象选择document元素，将document元素封装成jQuery对象，然后调用jQuery对象的ready()方法，将自定义匿名函数添加到document元素上，该函数将在DOM结构加载完毕之后执行。

4.jQuery基本语法

$(selector). action()

其中，$()是jQuery的缩写；selector是选择器，表示选中网页文档中的哪些HTML元素；action()表示对选中的元素进行什么操作。
例:网页中p标记包含的一段文字，单击这段文字时，文字自动消失。

<!doctype html>
<html>
  <head>
     <meta charset="utf-8">
     <title>jQuery</title>
     <script src="js/jquery=1.11.2. js"></script>
     <script>
       $(document). ready(function(e){
         $("p"). click(function(){
            $(this). hide();
          });
        });
      </script>
   </head>
<body>
    <p>单击我，我会自动消失 </p>
</body>
</html>

说明：
$(“p”)是jQuery的一个选择器，用于选择网页中所有的p元素;
$(“p”).click()方法指定选中的p元素的click单击事件处理函数，click事件在用户单击元素对象时被触发。
$(this)是一个jQuery对象，表示当前引用的HTML元素对象(此处指p元素)
$(this). hide()表示选中当前的HTML元素，并将其隐藏。

一、jQuery概述

jQuery