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等低版本的浏览器,官网主要维护更新的版本
所有版本的下载网址:
2.2 jquery的使用步骤
1.引入jquery文件
<script type=”text/javascript” >
其中jquery.min.js是你所下载下来的jquery文件
2.使用即可
2.3 jquery的入口函数
$(function(){
… //此处是页面dom加载完成的入口
//等着页面dom加载完毕再去执行js代码
});
$(document).ready(function(){
… //此处是页面dom加载完成的入口
//等着页面dom加载完毕再去执行js代码
});
- 等着dom结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jquery帮我完成了封装。
- 相当于原生js中的domcontentloaded
- 不同于原生js的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码
- 推荐使用第一种
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();//执行时会报错
- dom对象与jquery对象之间是可以相互转换的
(1) 因为原生js比jquery更大,原生的一些属性和方法jquery没有给我封装,要想使用这些属性和方法则需要把jquery对象转换为dom对象才能使用。
l dom对象转换为jquery对象 $(dom对象)
$(‘div’);
l jquery对象转换为dom对象(两种方式)
$(‘div’)[index] index是索引号
$(‘div’).get(index) index是索引号