module5-01-jQuery 基础

jQuery基础

一、jQuery简介

• jQuery是一个高效、精简、并且功能丰富的JS工具库

1.1 版本发展

• ① 1.x：兼容 IE6 / 7 / 8，士工作中最长使用的，学习1.12版本

• ② 2.x：兼容IE 6 / 7 / 8，多用于jQuery 官方调整bug使用。工作中不使用。

• ③ 3.X：不兼容IE 6 / 7 / 8，只能在高版本浏览器中使用，是现在 jQuery官方主要的维护升级的版本。

1.2 下载与参考

• http:/ / jquery.com/download/

• https : //www.bootcdn. cn/jquery/

二、jQuery体验

• jQuery确实极大的简化了 DOM 操作，让编程变得 更加简单高效。

2.1 jQuery常见操作

• $() 方法

• 在DOM操作中，基本都是从获取元素开始的

• 在 jQuery 中，只有一个全局变量$.这是 jQuery 的一大特点，避免了全局变量的污染。

• 最开始变量不叫做$，叫做jQuery()方法，在库中两个名字是并存的，都可以使用。

• 经典错误：$未定义

2.2 jQuery对象

• $()方法获取到的内容叫做 jQuery对象

• 内部封装了大量的属性和方法,比如.oss()和.html()和.animate(等方法都是jQuery 对象的方法。

• 通过$()获取的元素是一组元素，进行操作时是批量操作。

2.3 jQuery 对象和原生js 对象

• jQuery对象得到后，只能使用jQuery对象的方法，不能使用原生 js 元素对象的方法。

• 原生JS对象也不能使用 jQuery的方法。

• jQuery对象实际是一个类数组对象，内部包含所有的获取的原生 js 对象，以及大量的jQuery 的方法和属性。

获取jQuery对象中原生js对象的个数

• $().length

• $().size()

2.4 js对象 jQ对象相互转换

• jQuery 转原生:直接利用数组下标方式，得到jQuery 封装的原生对象。

• 原生转 jQuery:将原生对象用$()方法包裹即可。

三、jQuery选择器

3.1 CSS 2.1 和 CSS3 选择器

• 参数：必须是字符串格式的选择器。

3.2 筛选选择器

• 也叫过滤选择器，jQuery中新增的自己的选择器。

• 用法:在基础选择器后面增加一些筛选的单词，筛选出前面选择器的选中内容中一部分。或者可以作为高级选择器的一部分。

• 常用:

语法	描述
$(':first')	第一个
$(':last')	最后一个
$(':eq(index)')	下标为index的项
$('gt(index)')	大于下标为index的项
$('lt(index)')	小于下标为index的项
$(':odd')	下标为奇数的项
$(':even')	下标为偶数的项
$(':not(selector)')	去除所有与给定选择器匹配的元素

3.3 筛选方法

• 也叫过滤方法，jQuery 中除了用选择器选择元素，jQuery对象内还封装了一些对应的筛选方法。

• 常用:

语法	描述
$('p').first()	第一个
$('p').last()	最后一个
$('p').eq(3)	下标为3