前端培训中级阶段5-jQuery的概念与基本使用20190711期

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

前面我们已经基本掌握常规的语法语义，以及基本的使用方法。接下来我们讲深入进去了解其中内在的原理。
也了解 DOM、BOM，但是因为规范是一在变的，有没有什么类库可以方便操作这些呢？进入我们今天的主题jQuery

jQuery

这东西出来很久了，一般来说都用过。提供一个速查地址

jQuery 简介

jQuery 设计的宗旨是“write Less，Do More”，即倡导 写更少的代码，做更多的事情 。
jQuery 是一个 跨浏览器 （兼容所有常见浏览器，包括 IE6）的工具库。
提供了 元素选取 、 元素操作 、CSS 操作、 事件处理 、 动画 、AJAX 等功能。

jQuery 的特点

1. 链式操作（很优秀）
2. 高效、灵活的选择器（id、class、tag、伪元素、attr、层级）
3. 插件机制
4. 兼容主浏览器，提供了统一的功能接口

jQuery 插件机制

1. jQuery.fn.extend(object) 对应 $('div'). 的操作。

   jQuery.fn.extend({check: function() {return this.each(function() {this.checked = true;});
     },
     uncheck: function() {return this.each(function() {this.checked = false;});
     }
   });
   $("input[type=checkbox]").check();
   $("input[type=radio]").uncheck();

2. jQuery.extend(object) 对应 $. 的操作。

   jQuery.extend({min: function(a, b) {return a < b ? a : b;},
     max: function(a, b) {return a > b ? a : b;}
   });
   jQuery.min(2,3); // => 2
   jQuery.max(4,5); // => 5

3. jQuery.extend([deep], target, object1, [objectN])
   用一个或多个其他对象来扩展一个对象，返回被扩展的对象。

   如果不指定 target，则给 jQuery 命名空间本身进行扩展。这有助于插件作者为 jQuery 增加新方法。 如果第一个参数设置为 true，则 jQuery 返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构。 未定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。

jQuery 选择器

1. 基本
   #id、element、.class、*、selector1,selector2,selectorN
2. 层级
   ancestor descendant、parent > child、prev + next、prev ~ siblings
3. 基本筛选器
   :first、:not(selector)、:even、:odd、:eq(index)、:gt(index)、:lang1.9+、:last、:lt(index)、:header、:animated、:focus、:root1.9+、:target1.9+
4. 内容
   :contains(text)、:empty、:has(selector)、:parent
5. 可见性
   :hidden、:visible
6. 属性
   [attribute]、[attribute=value]、[attribute!=value]、[attribute^=value]、[attribute$=value]、[attribute*=value]、[attrSel1][attrSel2][attrSelN]
7. 子元素
   :first-child、:first-of-type1.9+、:last-child、:last-of-type1.9+、:nth-child、:nth-last-child()1.9+、:nth-last-of-type()1.9+、:nth-of-type()1.9+、:only-child、:only-of-type1.9+、
8. 表单
   :input、:text、:password、:radio、:checkbox、:submit、:image、:reset、:button、:file
9. 表单对象属性
   :enabled、:disabled、:checked、:selected
10. 混淆选择器
    $.escapeSelector(selector)3.0+
    这个方法通常被用在类选择器或者 ID 选择器中包含一些 CSS 特殊字符的时候，这个方法基本上与 CSS 中 CSS.escape() 方法类似，唯一的区别是 jquery 中的这个方法支持所有浏览器。

jQuery()

核心函数，我认为这是很优秀的一个点。小小的 $ 函数，包含了我们想要的大多数功能。

jQuery(Function)

等价于 $.ready(Function)
当DOM 载入就绪 执行一个函数回调。可以避免当页面 DOM 还没有加载就操作了 DOM。（会报错）
简单地说，这个方法纯粹是对向 window.load 事件注册事件的替代方法。不同的是可以绑定多次（addEventListener也可以绑定多次）。ready如果页面加载完成之后，还会继续调用（load 不会）

jQuery(element)

将原生 DOM 转换为 jQuery 封装的 DOM。
也可以传入一个elementArray，来批量转换一组原生DOM

jQuery([selector,[context]])

传入一个选择器，并且可以限制范围。返回 一组 匹配的元素。

jQuery(html,[ownerDocument])

据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。同时设置一系列的属性、事件等。
也可以用来处理XML

$.fn.attr()、$.fn.prop()、$.fn.data()

$.fn.attr()

设置或返回被选元素的 属性值 。比如href,src,id,class
对应attribute

$.fn.prop()

设置或返回被选元素的 状态值 。可以理解为原始值、状态。比如checked、disabled
对应properties

$.fn.data()

早期是直接绑定在 DOM 对象上的。
目前如果浏览器 支持 HTML5，会在 DOM 元素上 data-* 读取和存储。

data-* 也可以 DOM 方法 dataset 来读取或修改。

$.fn.get()、$.fn.eq、[]

1. $.fn.get()等价于[]
2. get获取到的是真是的DOM

3. eq获得到的还是 jQuery 包裹的 DOM 对象。相应的，还有其他方法可以获取。

html()、text()、val()

1. html()对应innerHTML
2. text()对应innerText
3. val()对应value

微信公众号：前端 linong

初级阶段文章目录

1. 前端培训 - 初级阶段（17）– 数据存储（cookie、session、stroage）
2. 前端培训 - 初级阶段（13）– 正则表达式
3. 前端培训 - 初级阶段（13）– 类、模块、继承
4. 前端培训 - 初级阶段（13）– ECMAScript（内置对象、函数）
5. 前端培训 - 初级阶段（13）– ECMAScript（语法、变量、值、类型、运算符、语句）
6. 前端培训 - 初级阶段（13、18）
7. 前端培训 - 初级阶段（9 -12）
8. 前端培训 - 初级阶段（5 – 8）
9. 前端培训 - 初级阶段（1 – 4）

中级阶段文章目录

1. 前端培训 - 中级阶段（2）– 事件(event) 事件冒泡、捕获 –（2019-06-20 期）
2. 前端培训 - 中级阶段（3）– DOM 文档对象模型（2019-06-27 期）
3. 前端培训 - 中级阶段（4）- BOM 浏览器对象模型（2019-07-04 期）

资料

1. 前端培训目录、前端培训规划、前端培训计划