前端培训-中级阶段（5）- jQuery的概念与基本使用（2019-07-11期）

前端最基础的就是 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) 、 :lang 1.9+、 :last 、 :lt(index) 、 :header 、 :animated 、 :focus 、 :root 1.9+、 :target 1.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-type 1.9+、 :last-child 、 :last-of-type 1.9+、 :nth-child 、 :nth-last-child() 1.9+、 :nth-last-of-type() 1.9+、 :nth-of-type() 1.9+、 :only-child 、 :only-of-type 1.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)

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对象。相应的，还有其他方法可以获取。

   1. 

html() 、 text() 、 val()

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

微信公众号：前端linong