jQuery的入门以及选择器的使用
1.3W1H
1.1.What?jQuery是什么?
1.1.1.JavaScript库:封装了很多JS代码(类库)
1.1.2.JavaScript库:
Prototype:是最早成型的JS库之一,对于JS的内置对象做了大量的扩展。
Do jo:提供了很多奇特JS库没有提供的功能。例如:离线存储的API,生成图标的组件等等。
YUI:是由Yahoo公司开发的一套完备的,扩展性良好的富交互网页程序工作集。
Ext JS:原本是对YUI的一个扩展,主要用于创建前端用户界面。
Moo Tools:是一套轻量、简洁、模拟化和面向对象的JS框架。
jQuery:同样是一个轻量级的库,拥有强大的选择器等更多优点,吸引了更多开发者去学习使用它。
1.1.3.官方地址:http://jquery.com/
1.2.Why?为什么要学习?
为了简化JavaScript开发:选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件
1.3.Where?哪些情况下使用?
1.1.1.中大型网站开发
1.1.2.是一些前端框架的基础,比如EasyUI,Bootstrap
1.4.How?怎么用
工具:HBuilderX
使用jQuery步骤
1.下载jQuery库
2.引入:将js文件复制到项目中
3.开始使用
2.jQuery文件结构
1.1.jQuery版本:
1.1.1.x版本:能够兼容IE678浏览器(不再更新版本)
1.1.2.x版本:不能兼容IE678浏览器(不再更新版本)
1.1.3.x版本:不能兼容IE678浏览器,更加的精简(在国内不流行,因为国内使用jQuery的主要目的就是兼容IE678)
1.2.jQuery文件中可以看出是一个自执行函数
代码:(function(){
window.jQuery = window.$ = jQuery
}());
1.3.自执行函数
自执行函数也叫立执行函数
是将函数的声明和调用合并在一起
3.$和$()
$代表的是一个对象(Java类),同时也是一个函数对象,即$和jQuery是等价的
$()构造了一个jQuery对象。所以"$()"可以叫做jQuery的构造函数,包括(
$(function(){})
$("选择器")
$("标签")
$(DOM对象)
)
总结:在jQuery文件中,$和jQuery作为了window对象的一个属性
源码:window.jQuery = window.$ = jQuery;
检测$的类型:Object.prototype.toString.call($);
4.jQuery选择器
4.1 基本选择器>常用选择器:
ID选择器:#ID ——单个元素
类选择器:.class ——元素集合
元素选择器:element ——元素集合
通配符选择器:* ——元素集合
群组选择器(并集):selector1,selector2 ——元素集合
4.2 层次选择器
后代选择器(交集):selector1 selector2 ——元素集合
子代选择器:> ——元素集合
查找所有元素,查询子元素
4.3 过滤选择器
参考jQuery文档
获取第一个元素:first
最后一个元素:last
获取偶数下标的元素:even
获取奇数下标的元素:odd
获取某一范围元素: gt大于 lt小于
4.4 表单选择器
参考jQuery文档
获取选择单选框的值
获取选择多选框的值
获取选择下拉值