jQuery之概念以及基本使用

1. jQuery的概述

1.1 jQuery的概念

jQuery是一个快速、简洁的JavaScript库，其设计的宗旨是“Write Less，Do More”

jQuery主要是封装了JavaScript常用的功能代码，优化了DOM操作、时间处理、动画设计和Ajax交互。

学习jQuery的本质就是：学习调用这些函数（方法）

jQuery出现的目的就是加快前端人员的开发速度，我们可以灰常方便地调用以及使用它，从而提高开发效率

jQuery与原生js形象比喻

 

1.2 jQuery的优点

• 轻量级，核心文件才几十kb，不会影响页面加载速度
• 跨浏览器兼容，基本兼容了现在的主流浏览器
• 链式编程，隐式迭代
• 对事件、样式、动画支持，大大优化了DOM操作
• 支持插件扩展开发，有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
• 免费、开源

2. jQuery的基本使用

2.1 jQuery的下载

官网网址：https://jquery.com/

 

 

版本信息：

1x：兼容IE678等低版本的浏览器，官网不再维护更新

2x：不兼容IE678等低版本的浏览器，官网不再维护更新

3x：不兼容IE678等低版本的浏览器，官网主要维护更新的版本

所有版本的下载网址：https://code.jquery.com/

2.2 jQuery的使用步骤

1.引入jQuery文件

<script type=”text/javascript” href=”jquery.min.js”></script>

       其中jquery.min.js是你所下载下来的jQuery文件

2.使用即可

2.3 jQuery的入口函数

$(function(){

       … //此处是页面DOM加载完成的入口

         //等着页面DOM加载完毕再去执行js代码

});

$(document).ready(function(){

       … //此处是页面DOM加载完成的入口

//等着页面DOM加载完毕再去执行js代码

});

1. 等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我完成了封装。
2. 相当于原生js中的DOMContentLoaded
3. 不同于原生js的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码
4. 推荐使用第一种

2.4 jQuery的顶级对象 $

1. $是jQuery的别称，在代码中可以使用jQuery代替$，但一般为了方便，通常直接使用$

       $(function(){

              alert(11);

});

jQuery(function(){

              alert(11);

});

       以上代码的结果是一样的

2. $是jQuery的顶级对象，相当于原生js中的window对象。把元素利用$包装成jQuery对象就可以调用jQuery的方法

2.5 jQuery对象和DOM对象

1. 利用原生js来获取的对象就是DOM对象

       var myDiv = document.querySelector(‘div’); //myDiv 是DOM对象

2. 用jQuery方式获取的对象就是jQuery对象。

       $(‘div’); // $(‘div’)是jQuery对象

3. jQuery对象的本质：利用$把DOM对象包装后产生的对象（伪数组形式存储）

4. jQuery对象只能使用jQuery方法，DOM对象则使用原生js的属性以及方法

       myDiv.style.display=’none’;//正常执行

       $(‘div’).style.display=’none’;//执行时会报错

       $(‘div’).hide();//正常执行

       myDiv.hide();//执行时会报错

1. DOM对象与jQuery对象之间是可以相互转换的

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

l  DOM对象转换为jQuery对象 $(DOM对象)

$(‘div’);

l  jQuery对象转换为DOM对象（两种方式）

$(‘div’)[index] index是索引号

$(‘div’).get(index) index是索引号