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是索引号

posted @ 2019-11-26 22:01  Jim_Wang  阅读(...)  评论(...编辑  收藏