1、jQuery简介

1.1jQuery概述

• jQuery是兼容多浏览器JavaScript库
• jQuery：写的少，做的多
• jQuery的优势：
  • 免费、开源的
  • 轻量级
  • 出色的DOM操作的封装
  • 完善的Ajax使用
  • 出色的多浏览器兼容性
  • 文档说明全
  • 可扩展插件：对集合对象做相同操作，jQuery自动进行遍历
  • 隐式迭代

2、jQuery快速入门

2.1 $\mathrm{与}与$()

• $：jQuery，jQuery函数引用
• $()：调用核心函数

jQuery：通过链接引入

2.2核心函数的作用【$()】

• 传入参数为函数时：$(function(){})

  • $(fn) 与window.onload = fn 区别

    1. 加载时机不同，前者当前文档【绘制成功】后执行fn,后者当前文档【完全加载】后执行fn.

       • 绘制成功：节点加载成功【标签、属性、文本】
       • 总结：$(fn)先执行，window.onload = fn 后执行

    2. 在当前文档中，书写次数不同；前者书写多次，后者只能书写一次

       • 后者如果书写多次，后面的window.onload 会覆盖前面

    3. 语法结构不同：前者有两种，后者只有一种

       //当前文档完全加载后执行
             window.onload = function () {
               alert("window.onload");
             }
             //当前文档完全加载后执行
             window.onload = function () {
               alert("window.onload2");
             }
             //当前文档绘制成功
             $(function () {
               alert("jQuery");
             });
             //当前文档绘制成功
             $(function () {
               alert("jQuery2");
             });
       
             $(document).ready(function () {
               alert("jQuery3");
             });
       

• 传入参数为选择器字符串时：$(选择器字符串)

• 传入参数为HTML字符串时：$(HTML字符串)，创建HTML元素节点

  $(function () {
        var $li = $("<li>深圳</li>");
        $("#city").append($li);
      });
  

• 传入参数为DOM对象是：$(DOM对象)，将DOM对象转换为jQuery对象

   //区分DOM与jQuery对象
        var bjEle = document.getElementById("bj");
        // alert(bjEle);
  
        var $bj = $("#bj");
        // alert($bj);
        //将DOM对象转换jQuery对象
        var $bjEle = $(bjEle);
        alert($bjEle);