一. 3W1H
1.1 what ? 是什么
jQuery就是JavaScript库,封装了很多js代码(类库)
官方地址:http://jquery.com/
1.2 why?为什么要学习
为了简化JavaScript开发:选择器,CSS,HTML事件处理,JS动画,浏览器兼容,丰富插件
理解官方jQueryLOGO:理念write less,do more
1.3 where?哪些情况下用
- 中大型网站开发
- 一些前端框架的基础:比如easyUI,bootstrap
1.4 how?怎么用
工具:HBuilderX
使用jQuery步骤:1.下载jQuery库
2.引入:将js文件复制到项目中
3.使用
二.jQuery文件结构
jQuery版本:
1.x版本:能够兼容IE678浏览器(不再更新版本)
2.x版本:不能兼容IE678浏览器(不再更新版本)
3.x版本:不能兼容IE678浏览器,更加的精简(在国内不流行,因为国内使用jQuery的主要目的就是兼容IE678)
jQuery文件中可以看出是一个自执行函数
(function(){
window.jQuery=window.$=jQuery
}());
自执行函数
自执行函数也叫立执行函数,是将函数的声明和调用合并在一起
三. $ 和 $()
- $代表jQuery对象(Java类),同时也是一个函数对象,即 $和jQuery是等价的。
- $()构造了一个jQuery对象。所以,
$()可以叫做jQuery的构造函数
$(function(){}) $("选择器") $("标签") $(DOM对象)
- 在jQuery文件中,$和jQuery作为了window对象的一个属性
源码:window.jQuery=window. $=jQuery;
检测 $的类型:object.prototype.toString.call( $);
四. jQuery选择器
1.1 基本选择器
- ID选择器:#ID —单个元素
- 类选择器:.class —元素集合
- 元素选择器:element —元素集合
- 通配符选择器:* —元素集合
- 群组选择器(并集):selector1,selector2 —元素集合
1.2 层次选择器
- 后代选择器(交集):selector1 selector2 —元素集合
- 子代选择器:> —元素集合
1.3 过滤选择器
- 获取第一个元素 :first
- 获取最后一个元素 :last
- 获取偶数下标的元素 :even
- 获取奇数下标的元素 :odd
- 获取某一范围元素 :gt大于 :lt小于
1.4 表单选择器
- 获取选择单选框的值
- 获取选择多选框的值
- 获取选择下拉框