什么是 jQuery

1.jQuery 是一个快速、简洁的 JavaScript 框架，是继 Prototype 之后又一个优秀的 JavaScript 代码库（或 JavaScript 框架）。
2.jQuery 设计的宗旨是 “write Less，Do More”，即倡导写更少的代码，做更多的事情。
3.优化 HTML 文档操作、事件处理、动画设计和 Ajax 交互。

体验 jQuery

原生 js 代码：

var div = document.getElementsByClassName("mydiv");
div.style.backgroundColor = "red";

使用 jQuery 后

$(document).ready(function () {
    // 查询，操作CSS一步到位
     $(".mydiv").css('background', 'red');
 });

为什么要使用 jQuery

1. 强大的选择器：能够快速找到 DOM 元素

   · 如上面实例所展示一样，通过 jQuery 查找 DOM 元素要比原生 js 快捷很多

2. 链式调用: 可以通过.不断调用 jQuery 对象的方法

   · jQuery 可以通过.（点）不断调用 jQuery 对象的方法，而原生 JavaScript 则不一定

      
   // 1.原生JavaScript
   var div = document.getElementsByClassName("mydiv");
   // 报错,必须分开写
   div[0].style.backgroundColor = "red".width = 200+"px";
   //  div[0].style.width = 200+"px";
   
   // 2.jQuery
   $(document).ready(function () {
   // 不报错,后面还可以接着继续写
       $(".mydiv").css('background', 'yellow').css('width', '200px');
   });

   · 隐式遍历(迭代): 一次操作多个元素

       // 1.原生JavaScript
       var div = document.getElementsByTagName("div");
   //    div.style.backgroundColor = "red";// 无效
       for(var i = 0; i<div.length; i++){
           div[i].style.backgroundColor = "red";
       }
   
       // 2.jQuery
       $(document).ready(function () {
           // 隐式遍历(迭代)找到的所有div
           $("div").css('background', 'yellow');
       });

   · 读写合一: 读数据/写数据使用是一个函数

      
   $(document).ready(function () {
       // 读取数据
       var $tx = $("div").eq(0).text();
       alert($tx);
       // 写入数据
       $("div").eq(0).text("新的数据");
   });

   · 事件处理

   · DOM 操作(增改删)

   · 样式操作

   · 动画

   · 丰富的插件支持

   · 浏览器兼容(前端开发者痛点）

jQuery 的安装

1.网页中添加 jQuery

​ ·直接从 CDN 引用（推荐使用）

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

2.从官网下载 jQuery

下载后在 html 文件中直接引用，注意存放文件的地址要写对。

<script src="jquery-1.10.2.min.js"></script>