JavaScript类库
JavaScript类库简称为JS库，是为了简化JavaScript的开发或者是DOM的操作等。其中一些JS库也会根据特定场景封装一系列的操作，例如日期控件等。
JavaScript类库会预定义一系列对象和函数，降低开发人员使用JavaScript的难度，兼容各个刘览器提供简单易用的相应功能。
目前，市面上的JavaScript类库数量众多，质量也是参差不齐。一般会选用生命周期比较久的，或者市场占有率较高的JavaScript类库使用。
工厂函数
jQuery的工厂函数是作为jQuery操作的一个入口，通过该函数可以实现定位页面元素、将DOM对象包装成jQuery对象，以及创建页面元素等功能。
jQuery的工厂函数有两种写法：
$(selector/element)
jQuery（selector/element）
示例代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>工厂函数</title> <!--引入jQuery文件--> <script src="../jquery-1.12.4.js"></script> </head> <body> <button id="btn">按钮</button> </body> <script> // DOM操作（返回值为DOM对象）：获取页面的按钮元素 var btn = document.getElementById('btn'); console.log(btn); /* * jQuery操作 - 获取页面的按钮元素 * jQuery（） - 称为jQuery的工厂函数 *作用：该函数是jQuery操作的一个入门 * 用法： *1、jQUery('#btn') *2、$() * 返回值：jQuery对象 * */ // var btn = jQuery('#btn'); var btn = $('#btn'); console.log(btn) </script> </html>
说明：“$”符号与“jQuery”单词的含义是一致的，这是jQuery核心库的一个约定。
1、jQuery约定
为了区分DOM变量与jQuery变量的区别，约定jQUery返回变量增加一个前缀“$”。
示例代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> jQuery约定</title> </head> <body> <button id="btn">按钮</button> </body> <script> // DOM操作（返回值为DOM对象）：获取页面的按钮元素 var btn = document.getElementById('btn'); console.log(btn); /* * jQuery操作 - 获取页面的按钮元素 返回值 - 返回的变量增加一个前缀“$” * */ // var btn = jQuery('$btn'); var $btn = $('#btn'); console.log($btn) </script> </html>
2、DOM对象与jQuery对象之间的转换
将DOM对象转换为jQuery对象—-使用工厂函数
将jQuery对象转换为DOM对象
①：jQuery对象是一个类数组的对象使用：jQuery对象[索引值]
②：jQuery对象提供了get（index）方法 – index表示索引值
示例代码如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>对象与jQuery对象</title> </head> <body> <button id="btn">按钮</button> </body> <script> var btn = document.getElementById('btn'); // 1、将DOM对象转换为jQuery对象 --- 使用工厂函数 var $btn = $(btn); console.log($btn); // 2、将jQuery对象转换成DOM对象 //(1)jQuery对象是一个类数组的对象 - jQuery对象[索引值] var $btn1 = $btn[0] console.log($btn1); //(2)jQuery对象提供了get（index）方法 -- index表示索引值 var btn2 = $btn.get(0); console.log(btn2); </script> </html>
