jQuery 的下载

进入jQuery官网下载，旧版本可以在 Download 最底下找到。

版本:

  • 1x : 兼容 IE6、7、8等低版本的浏览器，但是官网不再更新维护
  • 2x : 不兼容 IE6、7、8等低版本的浏览器，官网也不再更新维护
  • 3x : 不兼容 IE6、7、8等低版本的浏览器，官网主要更新维护的版本

jQuery 的使用步骤

  1. 引入 jQuery 文件（和一般 JS 文件 的引入方式一样）
  2. 就可以开始 jQuery 的使用

jQuery 的入口函数

  • 页面 DOM 结构加载完成的入口。
  • 相当于原生 JS 中的 DOMContentLoaded。

有以下三种写法:

  1. 文档加载完毕（不包含图片等非文字媒体文件），不等图片加载就可以执行这个函数。

    1
    2
    3
    //第一种写法
    $(document).ready(function() {	
    	});

  2. 同上，文档加载完毕（不包含图片等非文字媒体文件），不等图片加载就可以执行这个函数。

    1
    2
    3
    //第二种写法
    $(function() {
    	});

  3. 文档加载完毕，且图片加载完毕的时候在执行这个函数，与原生js的onload的加载模式一样。

    1
    2
    3
    //第三种写法
    $(window).ready(function () {
    	})
  • 原生Js如果编写多个入口函数，后面编写的会覆盖前面编写的；
  • JQuery中编写多个入口函数，后面的不会覆盖前面的。

jQuery 对象

jQuery 的顶级对象 $

  1. $ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $ ,但一般为了方便，通常直接使用 $ 。
  2. $ 是 jQuery 的顶级对象，相当于原生 JavaScript 中的 window 。把元素利用 $ 包装成 jQuery 对象，就可以调用 jQuery 的方法。

jQuery 对象和 DOM 对象

  • DOM 对象 ：用原生 JS 获取来的对象就是 DOM 对象
  • jQuery 对象 ：用 jQuery 方法获取的元素就是 jQuery 对象
  • jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScript 属性和方法
  • DOM对象与jQuery对象的方法不能混用。

jQuery 对象和 DOM 对象的相互转换

因为原生 js 比 jQuery 更大，原生的一些属性和方法 jQuery 没有给我们封装，要想使用这些属性和方法需要把 jQuery 对象转换为 DOM 对象才能使用。

  1. DOM 对象转换成 jQuery 对象 ：$(DOM 对象)

    1
    2
    3
    $('div');
    //
    var $obj = $(''div'');

  2. jQuery对象转换成DOM对象：(两种方法)

    1
    2
    3
    4
    5
    //第一种方法
    $('div')[index]
    //第二种方法
    $('div').get[index]
    // index 是索引号