首先，来了解一下jQuery学习的整体思路

• XMind源文件提供参考下载

# 第一节 jQuery初步认知

# jQuery概述

• JQuery概念

  • javascript概念
    • 基于Js语言的API和语法组织逻辑，通过内置window和document对象，来操作内存中的DOM元素
  • JQuery概念
    • 基于javascript的，同上，提高了代码的效率

• jQuery是什么:

  • 是一个javascript代码仓库，我们称之为javascript框架。
  • 是一个快速的简洁的javascript框架，可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。
  • 它可以帮我们做什么(有什么优势)
  • 轻量级、体积小，使用灵巧(只需引入一个js文件)
  • 强大的选择器
  • 出色的DOM操作的封装
  • 出色的浏览器兼容性
  • 可靠的事件处理机制
  • 完善的Ajax
  • 链式操作、隐式迭代
  • 方便的选择页面元素(模仿CSS选择器更精确、灵活)
  • 动态更改页面样式/页面内容(操作DOM，动态添加、移除样式)
  • 控制响应事件(动态添加响应事件)
  • 提供基本网页特效(提供已封装的网页特效方法)
  • 快速实现通信(ajax)
  • 易扩展、插件丰富

• 如何引入JQuery包

  • 引入本地的JQuery

  • 引入Google在线提供的库文件（稳定可靠高速）

  • 使用Google提供的API导入 <script type=“text/javascript” src=“jquery.js”></script>

  • 写第一个JQUery案例

    • 解释:在JQuery库中，$是JQuery的别名，$()等效于就jQuery()

<script type=“text/javascript” src=“”></script>
<script type=“text/javascript”>
   $(function(){
   	alert(“jQuery 你好!”);
   });
</script>

• 讲解$(function(){});

  • $是jQuery别名。如$()也可jQuery()这样写,相当于页面初始化函数，当页面加载完毕，会执行jQuery()。

  • 希望在做所有事情之前，JQuery操作DOM文档。必须确保在DOM载入完毕后开始执行，应该用ready事件做处理HTML文档的开始

  • $(document).ready(function(){});

    • 类似于js的window.onload事件函数，但是ready事件要先于onload事件执行
    • window.onload = function(){};

  • 为方便开发，jQuery简化这样的方法，直接用$()表示

  • JQuery的ready事件不等于Js的load：

    • 执行时机不同：load需要等外部图片和视频等全部加载才执行。ready是DOM绘制完毕后执行，先与外部文件
    • 用法不同：load只可写一次，ready可以多次
• window.onload与$(document).ready()对比