JQUERY-定义-查找

正课:

1. 什么是jQuery

2. 如何使用jQuery

3. 查找

1. 什么是jQuery

第三方开发的 执行DOM操作的 极简化的 函数库

第三方: 下载

执行DOM操作: 学习jQuery，还是在学DOM

极简化: jQuery是DOM操作的终极简化: 4个方面:

1. 增删改查

2. 事件绑定

3. 动画

4. Ajax

函数库: jQuery中一切都是函数

为什么: 2个原因:

1. 终极简化

2. 解决了大部分浏览器兼容性问题:

凡是jQuery让用的，都没有兼容性问题

如果不兼容，jQuery在底层用程序模拟实现

2. 如何使用:

3步:

1. 上官网看是什么:

2. 看快速入门:

3. 下载手册，备查:

下载: 版本:

1.x 兼容旧浏览器

未压缩: jquery-1.11.3.js

具有: 完备的注释，代码格式和见名知意的变量名

可读性好，体积大——开发和学习阶段使用

压缩: jquery-1.11.3.min.js

移除所有注释, 清除所有空字符格式，极简化变量名

体积小，可读性差——生产环境

2.x 不再兼容旧浏览器

3.x 也不兼容旧浏览器，还增加了新功能

1. 所有代码运行在严格模式下

2. 支持for...of，代替原有each()

3. 新动画API: requestAnimationFrame()

4. 支持Promise

引入: 2种:

1. 将js文件下载的项目本地

2. 引入CDN网络中的js文件

CDN网络: 内容分发网络

可根据客户端据不同服务器的网络状况，自动选择最优的服务器下载资源

原理:

引入jquery.js，其实是在全局创建了一种新类型: 2部分

1. 构造函数: 创建jQuery类型的子对象

2. 原型对象: 保存所有jQuery类型的子对象共有API

创建jQuery类型的子对象:

什么是jQuery类型的子对象: 专门封装一个或多个DOM元素，并提供操作DOM元素的简化版API

本质是一个类数组对象。

为什么: 普通DOM元素不是jQuery类型，不能用简化版API

只有将找到的DOM元素，放入jQuery对象中，才能使用简化版API

何时: 只要想使用jQuery的简化版API，都要先创建jQuery对象

如何: 2种:

1. 用选择器查找DOM元素，并创建jQuery对象:

var $elems=new jQuery("selector")

先找到符合selector要求的DOM元素,再创建一个jQuery类型的子对象，保存找到的DOM元素

简化: var jQuery=function("selector"){//工厂函数

return new 构造函数("selector")

}// jQuery("selector") 等效于 new 构造函数()

更简化: window.jQuery = window.$ = jQuery;

//调用$() 等效于调用jQuery()

对原型对象的简化: jQuery.fn = jQuery.prototype = {

jQuery.fn也是jQuery类型的原型对象的别名

2. 直接将获得的DOM元素封装进jQuery对象:

var $elem=$(dom元素对象);

3. 查找:

1. 按选择器查找:

jQuery支持所有CSS选择器，并扩展了部分自有的选择器

基本选择器: 5个 同CSS

#id  element   .class    *     selector1,selector2,...

层级选择器: 4个 同CSS

parent child   parent>sub   prev+next    prev~nextsiblings

子元素过滤: 4个 同CSS

特点: 在各自父元素内分别编号，从1开始

:first-child   :last-child   :nth-child(n)   :only-child

基本过滤(位置过滤): 7个 jQuery中新增

特点: 先取出所有符合条件的元素放入一个集合中统一编号。编号从0开始

:first/last    :even/odd  :eq/gt/lt(i)

属性过滤: 同CSS

[属性名]

[属性名=值]

[属性名^=值]

[属性名$=值]

[属性名*=值]

[属性名!=值]

input.txt[title=用户名]

何时:代替class选取多个元素，添加行为

可见性过滤: 2个:

:visible   :hidden(display:none   input type="hidden")

内容过滤: 2组:

1. 用子元素或内容的特征判断父元素:

1. 以内容文本作为特征: :contains(text)

2. 以子元素特征:  :has(选择器)

2. 以是否有子元素或内容为条件:

:parent  非空

:emty   空

表单元素过滤:

:input   选择所有表单元素(input  select textarea  button)

每种type都有专门的选择器:

:text   :password   :radio   :checkbox    :file   :submit...

状态过滤:  :enabled   :disabled    :checked  :selected

2. 按节点间关系查找:

2大类:

1. 父子:

$elem.parent() 父元素

$parent.children() 直接子元素

$parent.children().first()

$parent.children().last()

2. 兄弟:

$elem.next()

$elem.prev()

$elem.is("selector")  判断$elem是否符合selector选择器的要求

$elem.show()/hide()  代替display="block"/"none"

$elem.css("CSS属性名","属性值")  style.css属性名=值

$elem.html("内容")   innerHTML="内容"

jQuery API三大规律:

1. 自带遍历: 对整个jQuery对象调用API等效于对其中每个DOM元素都调用一次API

2. 一个函数两用: 给新值，就修改。没给新值，就返回旧值

3. 返回当前正在操作的jQuery对象本身