* 类库、插件、UI组件、框架
* 1.类库:JQ/ZEPTO... 提供一些真实项目中常用的方法,任何项目都可以把类库导入进来,调取里面的方法实现自己需要的业务逻辑
* 2.插件:具备一定的业务功能,例如,我们可以封装轮播图插件、选项卡插件、模态框插件等(插件规定了当前这个功能的样式结构,把实现功能的JS进行封装,以后想实现这个功能直接导入插件即可) swiper\iscroll\jquery-dialog\jquery-drag\jquery-datepicker\ECharts...
* 3.UI组件:把结构、CSS、JS全部都封装好了,我们想实现一个功能直接导入进来即可(偶尔需要我们修改一下) bootstrap...
* 4.框架:具备一定的编程思想,要求我们按照框架的思想开发,一般框架中提供了常用的类库方法,提供了强大的功能插件,有的也提供了强大的UI组件... React(React native) / Vue / Angular / Backbone / Sea.js / Require.js ...
*
* jQuery(JQ)非常优秀的JS“类库”
* ->基于原生JS封装的一个类库,提供了很多的方法,而且这些方法是兼容所有浏览器的
* ->JQ版本
* V1 (常用) 1.8.3 1.9.3 1.11.3
* V2
* V3
/*
(function () {
var version = "1.11.3",
jQuery = function (selector, context) {
return new jQuery.fn.init(selector, context);//=>创建了init这个类的实例,也相当于创建了jQuery这个类的实例(因为在后面的时候,让init.prototype=jQuery.prototype)
};
//=>JQUERY是一个类,在它的原型上提供了很多的属性和方法,供JQ的实例调取使用
jQuery.fn = jQuery.prototype = {
jquery: version,
constructor: jQuery,//=>当前类的原型重定向后,自己开辟的堆内存中是没有CONSTRUCTOR的,需要手动增加保证它的完整性
filter:function(){
},
...
};
//=>给JQ原型上增加EXTEND方法,同时把JQ当做一个普通对象,给这个对象设置了一个私有的方法
/!*
* JQ是一个类(也是一个普通对象):函数的两种角色,JQ是一个类库提供了很多的方法,其中这些方法有两部分
* 1.放到JQ原型上的(jQuery.fn/jQuery.prototype),这里面的方法是供JQ实例调取使用的
* 2.把JQ当做一个普通的对象,在对象上设置一些私有的属性和方法,这类方法以后用的时候直接的jQuery.xxx()执行即可
*!/
jQuery.extend = jQuery.fn.extend = function () {
//=>EXTEND是把一个对象中的属性和方法扩展到指定的对象上
};
jQuery.extend({
isFunction: function (obj) {
},
isArray: function () {
},
...
});
//jQuery:{extend:...,isFunction:...,isArray:...}
// jQuery.fn.extend({
// find:...
// });
// //jQuery.prototype:{...,find:...}
var init = jQuery.fn.init = function (selector, context) {
};
init.prototype = jQuery.fn;//=>把init当做一个类,但是让这个类的原型指向了jQuery.prototype(init这个类的实例最后找到的也是jQuery这个类原型上的方法 =>init的实例其实也可以理解为jQuery的实例)
window.jQuery = window.$ = jQuery;
})();
$().filter() //=>创建一个JQUERY类的实例,可以调取JQ.FN中的方法
$.isFunction() //=>把JQ当做一个普通对象,直接的使用对象上扩展的那些私有属性和方法(这些方法和实例没关系)
*/
// let Fn = function () {
// return new init();//=>创建INIT的实例
// };
// let init = function () {
//
// };
// init.prototype = Fn.prototype;
// let f = Fn();//=>目的:不加NEW也能创建FN的实例
JQ的选择器源码解读
//=>JQ选择器:基于各种选择器创建一个JQ实例(JQ对象)
//1.selector 选择器的类型(一般都是字符串,但是支持函数或者元素对象)
//2.context 基于选择器获取元素时候指定的上下文(默认document)
//JQ对象:一个类数组结构(JQ实例),这个类数组集合中包含了获取到的元素
<div class="tabBox">
<ul class="header clearfix">
<li class="active">新闻</li>
<li>电影</li>
<li>音乐</li>
</ul>
<div class="active">时事新闻</div>
<div>最新电影</div>
<div>欧美音乐</div>
</div>
// console.log($('.tabBox'));
// console.log($('.tabBox li'));
/*
* JQ对象(类数组)=>JQ实例
* 0: div.tabBox
* length: 1
* context: document
* selector: '.tabBox'
*
* __proto__:jQuery.prototype
* add
* ...
* __proto__:Object.prototype
* hasOwnProperty
* ...
*/
* 获取页面中的元素对象
* 1.基于原生JS提供的属性和方法获取 =>"原生JS对象"
* 可以调取使用内置的JS属性和方法
* className
* onclick
* ...
*
* 2.基于JQ选择器获取 =>"JQ对象"
* 可以调取JQ原型上提供的属性和方法
* add
* find
* ...
* 把JQ对象和原生JS对象之间相互的转换
*
* [把JQ->原生JS]
* JQ对象是一个类数组集合,集合中每个索引对应的都是原生JS对象,我们基于索引获取即可
* let $tabBox=$('.tabBox'); 变量名前面是以$开始的,一般代表基于JQ选择器获取的结果
* let tabBox=$tabBox[0];
* tabBox=$tabBox.get(0); //=>GET是JQ原型上提供的方法,供JQ实例基于索引获取到指定的JS对象
* $tabBox.eq(0):它也是基于索引获取集合中的某一项,只不过GET获取的是JS对象,EQ会把获取的结果包裹成一个新的JQ对象(JQ实例返回)
*
* [把原生JS->JQ]
* let tabBox=document.querySelector('.tabBox');
* $(tabBox) 直接使用选择器把原生JS对象包裹起来,就会把JS转换为JQ对象(因为$()就是创建JQ的一个实例)
* 分析选择器源码,我们发现SELECTOR传递的值支持三种类型
* 1.STRING :基于选择器获取元素
* 2.元素对象 selector.nodeType: 把JS对象转换为JQ对象
* 3.函数:把传递的函数执行,把JQ当做实参传递给函数
* selector(jQuery)
// $(function ($) {
// //=>$:传递进来的jQuery
//
// });
// $ = '哈哈哈';
// // $();//=>Uncaught TypeError: $ is not a function
// jQuery(function ($) {
// //=>$:私有变量,而且特定就是JQ
// $();
// });
// jQuery(() => {
// //=>函数肯定会执行,但是会在当前页面中的HTML结构都加载完成后再执行
// //=>函数执行会形成一个闭包
// });
$(function () {
//=>写自己的代码
});
JQ中常用的方法
* JQ选择器的SELECTOR可以是字符串,字符串这种格式也有两种
* 1.选择器
* 2.HTML字符串拼接的结构:把拼接好的HTML字符串转换为JQ对象,然后可以基于APPEND-TO等方法追加到页面中
$('<div id="AA"></div>').appendTo(document.body);
* EACH:JQ中的EACH方法是用来进行遍历的(类似于数组的FOR-EACH)
* [可遍历内容]
* 1.数组
* 2.对象
* 3.类数组(JQ对象)
* ...
* [三种EACH]
* 1.给JQUERY设置的私有属性 $.each()
* 2.给实例设置的公有属性 $([selector]).each()
* 3.内置的EACH
// $.each([12, 23, 34], (index, item) => {
// //=>参数的顺序和内置FOR-EACH相反
// console.log(index, item);
// });
// $.each({name: 'xxx', age: 25, 0: 100}, (key, value) => {
// //=>原理其实就是FOR-IN循环
// console.log(key, value);
// });
// $('.tabBox li').each(function (index, item) {
// //=>非箭头函数:THIS===ITEM,当前遍历的这一项 (原生JS对象)
// //=>$(THIS)把当前遍历的这一项转换为JQ对象
// $(this).click(function () {
// //=>给每一个遍历的LI都绑定一个点击事件
// //THIS:当前点击的LI(原生JS对象)
// $(this).css({
// color: 'red'
// });
// });
// });
// $('.tabBox li').click(function () {
// //=>获取的JQ集合中有三个,我们此处相当于给三个LI都绑定了点击事件(JQ在调取CLICK的时候,会默认的把集合进行EACH遍历,把每一项都给CLICK了)
// });
// $('.tabBox li').css({
// color: 'green'
// });
// $.ajax({
// url: 'json/product.json',
// method: 'GET',
// dataType: 'json',
// async: false,
// success: function (result) {
// console.log(result);
// }
// });
//=>常用的筛选方法:
// filter:同级筛选
// children:子集筛选
// find:后代筛选
基于JQ完成选项卡
//=>当HTML结构都加载完成执行函数
// jQuery(function ($) {
// let $tabBox = $('.tabBox'),
// $tabList = $tabBox.find('.header>li');
// $divList = $tabBox.children('div');
// // let $tabList = $('.tabBox>.header>li'),
// // $divList = $('.tabBox>div');
//
// //=>基于JQ内置EACH机制,给每个LI都绑定了点击事件
// $tabList.on('click', function () {
// let index = $(this).index();//=>获取当前点击LI的索引
// $(this).addClass('active')
// .siblings().removeClass('active')
// .parent().nextAll()
// .eq(index).addClass('active')
// .siblings('div').removeClass('active');
// });
// });
jQuery(function ($) {
$('.tabBox>.header>li').on('click', function () {
let index = $(this).index();
$(this).addClass('active')
.siblings().removeClass('active')
.parent().nextAll()
.eq(index).addClass('active')
.siblings('div').removeClass('active');
});
});