- A+
所属分类:Web前端
1. jQuery概述
1.1 JavaScript 库
即 library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show、获取元素等。
简单理解: 就是一个JS 文件,里面对原生JS代码进行了封装,存放到里面。这样可以快速高效使用这些封装好的功能了。
jQuery,就是为了快速方便操作DOM,里面基本都是函数(方法)。
1.2 jQuery 的概念
jQuery 是一个快速、简洁的 JavaScript 库,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码, 做更多的事情。
j就是 JavaScript;Query 查询;意思就是查询js,把js中的DOM操作做了封装,可以快速查询使用里面的功能。
jQuery 封装了 JavaScript 常用的功能代码,优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
学习jQuery本质:学习调用这些函数(方法)。
2. jQuery的基本使用
2.1 jQuery 的入口函数
$(function () { ... // 此处是页面DOM加载完成的入口 });
$(document).ready(function(){ ... // 此处是页面DOM加载完成的入口 });
- 等着 DOM 结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jQuery 帮我们完成了封装。
- 相当于原生 js 中的
DOMContentLoaded
。 - 文档加载完毕,图片不加载的时候就可以执行这个函数。
- 更推荐使用第一种方式。
2.2 jQuery 的顶级对象 $
-
$
是jQuery的别称,在代码中可以使用jQuery代替$
,但一般为了方便,通常都直接使用$
。 -
$
是jQuery的顶级对象, 相当于原生JavaScript中的window。把元素利用$
包装成jQuery对象,就可以调用jQuery的方法。
2.3 jQuery 对象和 DOM 对象
相互转化:
- DOM 对象转换为 jQuery 对象: $(DOM对象)
$('div')
- jQuery 对象转换为 DOM 对象(两种方式)
$('div')[index] // index 是索引号
$('div').get(index) // index 是索引号
3. jQuery 选择器
3.1 基础选择器
$(“选择器”) // 里面选择器直接写 CSS 选择器即可,但是要加引号
3.2 层级选择器
jQuery 设置样式:
$('div').css('属性', '值')
3.3 隐式迭代(重要)
遍历内部 DOM 元素(伪数组形式存储)的过程就叫做隐式迭代。
简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。
3.4 筛选选择器
3.5 jQuery 筛选方法(重点)
未完待续...