一 jQuery简介

1.1 概述

jQuery是一个优秀的javascript的轻量级框架，兼容css3和各大浏览器，提供了HTML文档操作、事件处理、动画设计和Ajax交互操作。并且jquery的插件非常丰富，大多数功能都有相应的插件解决方案。jquery的宗旨是write less do more。

• jQuery是一个JavaScript框架，目的：简化JS开发。
• 本质上是一个外部的js文件，在该文件中封装了很多js代码,实现了很多功能。

轻量级：1）学习难易程度、2）该框架对项目的影响程度

框架：是完成某种功能的半成品软件

1.2 自定义JS框架

框架（Framework）是完成某种功能的半成品，抽取重复繁琐的代码，提供简洁强大的方法实现。

需求

定义一个，指定id获取js的dom对象的方法

jquery-my.js

// 抽取到函数（方法）中
function $(id) {
    return document.getElementById(id);
}

测试页面

<script>
    // 获取div dom对象
    //let myDiv = document.getElementById('myDiv');
    // 操作innerHTML修改
    $('myDiv').innerHTML = '添加的动态内容...';
</script>

1.3 快速入门

步骤分析

1. 下载
      官网下载地址：http://jquery.com
      jquery-3.4.1.js：开发版本 提供良好缩进格式和注释，方便开发者阅读
      jquery-3.4.1.min.js ：生产版本 将代码进行压缩，方便网络传输和程序解析
2. 页面引入
      <script src="../js/jquery-3.3.1.js"></script>
3. 操作API
      $('#myDiv').html('修改动态内容');

1.4 jQuery与JS区别【重点】

jQuery虽然本质上也是js，但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象而不是js对象。

通过js方式获取的是js对象，通过jQuery方式获取的是jQuery对象。两者的关系与区别总结如下：

1. jQuery对象与js对象相互转换
      * js --> jq
            $(js对象) 或 jQuery(js对象)
      * jq --> js
            jq对象[索引] 或 jq对象.get(索引)
            注意：jq对象本质上是js数组
			
2. 页面加载事件
      * js
            window.onload=function(){}
      * jq
            $(function(){})
            $(document).ready(function(){})
      * 区别
            js：只能定义一次，如果定义了多次，后加载的后覆盖先加载的
            jq：可以定义多次
			
3. 事件绑定
      * js
            js对象.onclick=function(){}
      * jq
            jq对象.click(function(){}) 回调函数
			
4. css样式设置：通过对象直接修改（有耦合性）
      * js
            js对象.style.样式名=样式值
      * jq
            jq对象.css('样式名','样式值')
            样式名：驼峰式，css横杠 都支持