JQuery了解-简洁API设计思想

目录

前言

1.jQuery 提供了一个简单而又经典的范例供大家学习

2.jQuery 对事件监听的简化

3.jQuery 对元素选择的简化

4.jQuery当时能迅速的风靡全球的原因无外乎下面三条

5.jQuery能支持IE8以下版本

6.jQuery与Javascript入口函数的区别

---

前言

jQuery已过时，新项目不会使用，但大量网站仍旧在使用jQuery（在网站按F12，Console中输入一个$，按下回车，大部分还是会返回一个"function(a，b){return new r.fn.init(a,b,h)}"【以京东为例】），学习jQuery对写代码和封装库也很有帮助。

但jQuery 的 API 设计思想并未过时，一直流传至今，简洁风格使得它很受欢迎。

jQuery 使用版本：我们可以在浏览器的 Console 窗口中使用 $.fn.jquery 命令查看当前 jQuery 使用的版本。

网页中添加 jQuery

可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法：

• 从 jquery.com 下载 jQuery 库
• 从 CDN （内容分发网络）中载入 jQuery, 如从 Google 中加载 jQuery

 

1.jQuery 提供了一个简单而又经典的范例供大家学习

 jQuery 用到的一些设计模式（其实就是编程套路）。

一、发布订阅模式

var eventHub = $({})
eventHub.on('xxx', function(){ console.log('收到') })
eventHub.trigger('xxx')

二、用原型继承实现插件系统

$.fn.modal = function(){ ... }
$('#div1').modal()

Vue 2 的插件也是类似的思路。

三、事件委托

$('div').on('click', 'span', function(){...})

四、链式调用

$('div').text('hi').addClass('red').animate({left: 100})

五、函数重载（伪）

$(fn)
$('div')
$(div)
$($(div))
$('span', '#scope1')

你会发现 $ 这个函数的参数可以是函数、字符串、元素和 jQuery 对象，甚至还能接受多个参数。

六、命名空间

// 你的插件在一个 button 上绑定了很多事件
$button.on('click.plugin', function(){...})
$button.on('mouseenter.plugin', function(){...})
// 然后你想在某个时刻移除以上所有事件
$button.off('.plugin')

如果你不用 jQuery 就很麻烦了。

七、高阶函数

var fn2 = $.proxy(fn1, asThis, param1)

$.proxy 接受一个函数，返回一个新的函数。

2.jQuery 对事件监听的简化

// 那时，如果不用 jQuery，监听事件（兼容 IE 6）你要这么写
if (button.addEventListener)  
  button.addEventListener('click',fn);
else if (button.attachEvent) { 
  button.attachEvent('onclick', fn);
}else {
  button.onclick = fn;
}

// 但是如果你用 jQuery，你只需要这么写
$(button).on('click', fn)

3.jQuery 对元素选择的简化

// 如果你想获取 .nav > .navItem 对应的所有元素，用 jQuery 是这样写的
$('.nav > .navItem')

// 在 IE 6 上，你得这么写
var navItems = document.getElementsByClassName('navItem')
var result = []
for(var i = 0; i < navItems.length; i++){
  if(navItems[i].parentNode.className.match(/\bnav\b/){
    result.push(navItems[i])
  }
}

4.jQuery当时能迅速的风靡全球的原因无外乎下面三条

(1)出色的DOM操作封装
例如原来你要修改样式，原生JavaScript是这么写的

var dom = document.getElementById('test');
dom.style.color = 'blue';

用上jQuery后，一行搞定

$('#test').css('color', 'blue');

(2)便捷的Ajax操作
原生的JavaScript在ajax请求上的代码，嗯，我就不贴代码了！具体多复杂，懂前端的人都明白。
用上了jQuery后，简洁了不少！如下所示

 $.ajax({url:"/guduyan",
    success:function(result){
        //dosomething
    }});

(3)出色的动画效果
例如，我们需要把 一个<div>元素移动到左边，直到left属性等于250像素为止。
使用jQuery，我们可以这么写

$("div").animate({left:'250px'});

 

5.jQuery能支持IE8以下版本

由于Vue之类的框架，只能支持IE8以上的版本。现在很多那种事业单位里头的古董电脑，很多都还是IE7，像这种情况下，用vue之类的MVVM框架显然不适合。

6.jQuery与Javascript入口函数的区别

jQuery 入口函数:

$(document).ready(function(){
    // 执行代码
});
或者
$(function(){
    // 执行代码
});

JavaScript 入口函数:

window.onload = function () {
    // 执行代码
}

jQuery 入口函数与 JavaScript 入口函数的区别：

•  jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
•  JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。