目录
前言
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 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。