前端架构师之01_JQuery

1 jQuery快速入门

1.1 什么是jQuery

它是一个开源的JavaScript类库 。

常见的JavaScript类库：jQuery、Prototype、ExtJS、Mootools和YUI等。

jQuery的核心理念：write less，do more（写的更少，做的更多）。

jQuery的特点：

• jQuery是一个轻量级的脚本，其代码非常小巧。
• 语法简洁易懂，学习速度快，文档丰富。
• 支持CSS1~CSS3定义的属性和选择器。
• 跨浏览器，支持的浏览器包括IE6~IE11和Chrome等。
• 实现了JavaScript脚本和HTML代码的分离，便于后期编辑和维护。
• 插件丰富，可以通过插件扩展更多功能。

1.2 下载jQuery

jQuery下载链接

• jQuery 1.x系列：已经停止更新，保持了对早期浏览器的支持，最终版本是jQuery 1.12.4。
• jQuery 2.x系列：已经停止更新，不再支持IE6~8浏览器，从而更加轻量级，最终版本是jQuery2.2.4 。
• jQuery 3.x系列：只支持最新的浏览器，因此除非特殊要求，一般不会使用此版本。

• minified 压缩后的生产版、
• uncompressed 未压缩的开发版

打开链接 -> 右键，网页另存为（或者 Ctrl + S）-> 选择保存目录

1.3 使用jQuery

<!-- 方式1：引入本地下载的jQuery -->
<script src="jquery-1.12.4.min.js"></script>
<!-- 方式2：通过CDN(内容分发网络)引入jQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

• 方式1引入了当前目录下的jquery-1.12.4.min.js文件。
• 方式2则通过公共的CDN的优势加快了jQuery文件的加载速度。

在HTML页面中创建含有文本“测试”和属性（align=“center”）的<h2>元素。

// 原生JavaScript的实现方式
var h2 = document.createElement('h2'); 	// 创建h2元素节点
var text = document.createTextNode('测试'); // 创建文本节点
var attr = document.createAttribute('align');	// 创建属性节点
attr.value = 'center'; 			// 为属性节点赋值
h2.setAttributeNode(attr);  	// 为h2元素添加属性节点
h2.appendChild(text); 		// 为h2元素添加文本节点
// 将h2节点追加为body元素的子节点
document.querySelector('body').appendChild(h2);

// jQuery的实现方式
$('<h2 align="center">测试</h2>').appendTo('body');

• 美元符号“$”表示jQuery类。
• “$()”等价于“jQuery()”，即jQuery的构造函数，为该构造函数传递一个元素，就可以创建出一个元素对象。

2 元素操作

2.1 jQuery对象

jQuery对象：是对DOM对象的一层包装。

作用：是通过自身提供的一系列快捷功能来简化DOM操作的复杂度，提高程序的开发效率。

解决的问题：不同浏览器的兼容问题。

// 创建一个jQuery对象，该对象包装了document对象
var $doc = $(document);
// 在控制台中输出jQuery对象
console.log($doc);       

• $(document)表示将document对象转换为jQuery对象。
• 通过console.log()可以查看其内部结构。
• jQuery对象内部有3个元素。
• 下标为0的元素表示其内部的DOM对象，即document对象。
• length表示其内部DOM对象的个数，一个jQuery对象中可以包装多个DOM对象。
• 通过 __proto__ 可以查看该对象的的原型（即jQuery本身）所具有的属性和方法。

2.2 jQuery选择器

jQuery选择器类似CSS选择器的机制的一种操作HTML元素的方式。

好处：可以轻松的获取DOM元素。

jQuery选择器的基本语法：$(选择器)。

根据选择器获取方式的不同大致可以将其分为以下几类。

• 基本选择器
• 层级选择器
• 基本过滤选择器
• 内容选择器
• 可见性选择器
• 属性选择器
• 子元素选择器
• 表单选择器

2.2.1 基本选择器

jQuery中基本的选择器，常用的分别为：标签选择器、类选择器和ID选择器。

2.2.2 层级选择器

层级选择器，通过一些指定符号，如空格、>、+和~完成多层级元素之间的获取。

2.2.3 基本过滤选择器

基本过滤选择器，表示对获取到的元素进行筛选，如偶数行中的元素等。

2.2.4 内容选择器

根据元素的内容完成指定元素的获取。例如，获取所有元素内容不为空的<li>等。

2.2.5 可见性选择器

为了方便开发，jQuery中还提供了可见或隐藏元素的获取。

• 当指定元素的display设置为none时，可以通过“:hidden”获取隐藏的元素。
• 当指定元素的display设置为block时，可以通过“:visible”获取可见的元素。

2.2.6 属性选择器

根据元素的属性获取指定元素的方式。如获取class值为current的<div>元素等。

2.2.7 子元素选择器

带有“of-type” 与未带有“of-type”项的选择器有一定的区别。

2.2.8 表单选择器

选择器$("input")与$(":input")虽然都可以获取表单项，但是它们表达的含义有一定的区别，前者仅能获取表单标签是<input>的控件，后者则可以同时获取页面中所有的表单控件，包括表单标签是<select>以及<textarea>的控件。

2.3 元素遍历

在操作HTML文档中的DOM元素时，经常需要进行元素遍历。

jQuery提供的方法：each()。

<ul>
    <li>PHP</li><li>iOS</li>
    <li>Java</li><li>UI</li>
</ul>
<script src="jquery-1.12.4.min.js"></script>
<script>
    $('li').each(function(index, element) {
        console.log('第' + (index + 1) + '个:' + $(element).text());
    });
</script>

提示：在回调函数内部还可以直接使用$(this)来表示当前元素。

2.4 元素内容

元素内容的操作有两种：获取和设置。

<div class="desc">
    <font color="red"><b>Smiles to the rocky</b></font>
    <ul>
        <li>天生我材必有用，千金散尽还复来。</li>
        <li>行到水穷处，坐看云起时。</li>
    </ul>
</div>
<script src="jquery-1.12.4.min.js"></script>
<script>
    var desc = $('.desc');     // 获取class为desc的元素
    var html = desc.html();    // 获取desc的HTML内容（含有标签）
    var text = desc.text();    // 获取desc的文本内容
    console.log(html);
    console.log(text);
</script>

val()方法还可以操作表单（select、radio和checkbox）的选中情况，当要获取的元素是<select>元素时，返回结果是一个包含所选值的数组；当要为表单元素设置选中情况时，可以传递数组参数。

2.5 元素样式

元素样式操作是指获取或设置元素的style属性。

在jQuery中，可以很方便的设置元素的样式、位置、尺寸等属性。

例如，通过css()方法可以设置背景色。

css()方法中传递的参数若是对象，则需要去掉CSS属性中的“-”，将第2个单词的首字母变为大写。

<div style="width:100px; height:100px; background-color: red"></div>
<script src="jquery-1.12.4.min.js"></script>
<script>
    var ele = $('div');
    var w = ele.css('width');
    var h = ele.css('height');
    ele.css({border: '2px solid black', backgroundColor: '#ccc'});
    console.log('div元素的宽：' + w + '，高：' + h);
</script>

2.6 元素筛选

jQuery提供的元素过滤和查找方法可提供元素个性化的处理，增强对文档的控制能力。

查找方法：

过滤方法：

<div>
    <ul><li>Spring</li><li>summer</li></ul>
    <ul><li>autumn</li><li>winter</li></ul>
</div>
<script src="jquery-1.12.4.min.js"></script>
<script>
    // 获取div下的所有ul
    $uls = $('div').find('ul');
    // 为下标为1的ul设置背景色
    $uls.eq(1).css('background-color', '#ccc');
</script>	

2.7 元素属性

基本属性的操作有三种：获取、设置和删除。

• attr()和prop()方法只能获取第一个匹配元素的属性值。

• 要获取所有匹配元素的属性值，则需要配合jQuery提供的each()方法进行元素遍历。

在获取或设置属性时，建议操作元素的状态，如checked、selected或disabled时使用prop()方法，其他的情况使用attr()方法。

虽然attr()方法可完成基本的属性操作，但是对于class属性的操作却不够灵活。

因此，为了方便操作，jQuery专门提供了针对class属性操作的方法。

• addClass()和removeClass()方法经常一起使用来切换元素的样式。
• 若要为匹配到的元素添加和移除多个样式类名，则样式类名之间可使用空格进行分隔。

2.8 练习作业

• 折叠菜单

  • 编写网页，设置CSS完成折叠菜单的结构和样式设置。
  • 通过层级选择器、基本过滤选择器以及查找的方法获取指定的元素对象。
  • 通过css()方法设置需要折叠以及需要展开的菜单的display值。

3 DOM节点操作

3.1 节点追加

节点追加指的是在现有的节点树中，进行父子或兄弟节点的追加。

• 父子节点添加指的是在匹配到的元素内部添加指定的content内容。
• 兄弟节点指的是在匹配到的元素外部添加指定的content内容。

3.2 节点替换

节点替换是指将选中的节点替换为指定的节点。

replaceWith()方法的参数是一个函数时，它的返回值类型必须是字符串类型，用于完成指定元素的替换操作。

3.3 节点删除

• empty()方法仅能删除匹配元素的文本内容，而元素节点依然存在。
• remove()方法则可以同时删除匹配元素本身和文本内容。

3.4 节点复制

开发中若在复制元素节点时，想要同时复制该节点的所有事件的处理，则可以将clone()方法的操作设置为true，否则节点复制时使用默认操作false即可。

3.5 练习作业

• 左移与右移

  • 编写网页，设置CSS完成左移右移的结构和样式设置。
  • 通过层级选择器和表单选择器获取选中的操作项。
  • 通过append()方法将匹配到的内容追加到指定元素的尾部。

4 事件操作

4.1 常用事件

标签中通过属性设置事件，每个属性都由一个on和事件名组成。例如，点击事件对应的属性为onclick。

在jQuery中则可直接使用其提供的与事件类型同名的方法。例如，点击事件对应的方法为click()。

这些事件方法允许重复绑定处理程序，按照绑定顺序依次执行。

若省略参数，则表示触发事件。

• 参数function表示触发事件时执行的处理程序（函数）。

• 参数data用于为事件处理函数传递数据。（可在事件处理函数中使用“事件对象.data”获取）

$('input[type=text]').focus(function() { // 文本框获取焦点
    var tips = $('<span></span>');
    tips.html('请按要求输入');
    $('input:focus').after(tips);
});
$('input[type=text]').blur(function() {  // 文本框失去焦点
    $(this).next().remove();
});

// div块的移动
// 事件对象.which：获取当前按下键盘的对应码值keyCode
// 通过offset()获取当前按下键盘时div元素的位置（left和top值）
// 根据码值修改div元素位置（ left和top值）
// 提示：37（左）、38（上）、39（右）、40（下）
$(document).keydown(function(event) {
    var opt = event.which;            // 获取当前按下键盘的对应码值keyCode
    var item = $('.boxes');           // 获取操作的元素
    var left = item.offset().left;    // 获取元素距离文档左侧的位置，单位像素
    var top = item.offset().top;      // 获取元素距离文档上面的位置，单位像素
    switch(opt) {
        case 37: item.offset({left: left - 1, top: top}); break;    // 左
        case 38: item.offset({left: left, top: top - 1}); break;    // 上
        case 39: item.offset({left: left + 1, top: top}); break;    // 右
        case 40: item.offset({left: left, top: top + 1}); break;    // 下
    }
});

// 鼠标移入
$('.hit').mouseover(function() {
    $(this).css('background-color', 'green');
});
// 鼠标移出
$('.hit').mouseout(function() {
    $(this).css('background-color', '');
});

4.2 页面加载事件

jQuery中的ready与JavaScript中的onload相比，不仅可以在页面加载后立即执行，还允许注册多个事件处理程序。

// jQuery中的页面加载事件方法有3种语法形式，具体如下。
$(document).ready(function() {  });  // 语法方式1
$().ready(function() {  });		     // 语法方式2
$(function() {  });			         // 语法方式3

4.3 事件绑定与切换

事件处理机制，即事件绑定和事件切换，统一了事件处理的各种方法。

• 参数events表示事件名（多个用空格分隔）。
• 参数selector表示选择器。
• 参数data表示将要传递给事件处理函数function的数据。
• 参数type表示为元素添加的事件类型（多个用空格分隔）。
• 参数over和out分别表示鼠标移入移出时的事件处理函数。

// 事件的绑定
$('div').on('click', function() {
    console.log('已完成单点击');
});
// 事件的取消
$('div').off('click');
// 绑定单次事件
$('div').one('click', function() {
    console.log('已完成1次单点击');
});
// 多个事件绑定同一个函数
$('div').on('mouseover mouseout', function() {
    console.log('鼠标移入或移出');
});
// 多个事件绑定不同的函数
$('div').on({
    mouseover: function() {
        console.log('鼠标移入');
    },
    mouseout: function() {
        console.log('鼠标移出');
    }
});
// 为以后创建的元素委派事件
$('body').on('click', 'div', function() {
    console.log('收到');
});
//测试：创建<div>元素
$('body').append('<div>测试</div>');
// 鼠标移入移出事件切换
$('div').hover(function() {
    console.log('鼠标移入')
}, function() {
    console.log('鼠标移出');
});

on()方法与off()方法是jQuery从1.7版本开始新增的方法。jQuery官方推荐使用on()方法进行事件绑定，在新版本中已经取代了bind()、delegate()和live()方法。

4.4 练习作业

• 手风琴效果
  • 编写网页，设置CSS完成手风琴的结构和样式设置。
  • 为所有图片添加鼠标移入与移出事件。
  • 鼠标移入时，将当前元素的width设为图片的原宽，其他图片的width= (<div>的宽度 - 图片的原宽) / 剩余图片元素个数。
  • 鼠标移出时，所有图片的width=<div>的宽度 / 所有图片的个数。

5 动画特效

5.1 常用动画

• 参数speed表示动画的速度，可设置为动画时长的毫秒值（如1000），或预定的3种速度（slow、fast和normal）。
• 参数easing表示切换效果，默认效果为swing，还可以使用linear效果。
• 参数fn表示在动画完成时执行的函数。
• 参数opacity表示透明度数值（范围在0~1之间，0代表完全透明，0.5表示50%透明，1代表完全不透明）。

5.2 自定义动画

• 参数params表示一组包含动画最终属性值的集合。
• 参数settings是easing与fn组成的一个对象集合。
• 参数queueName表示队列名称，默认值为fx（标准效果队列）。
• 参数clearQueue与jumpToEnd都是布尔类型，默认值为false，前者规定是否停止被选元素所有加入队列的动画，后者规定是否立即完成当前的动画。

<input id="btn" type="submit" value="开始动画"><div></div>
<script>	
    $('#btn').click(function () {
        $('div').css({background: 'red', width: 0, height: 0});
        var params = {width: '100px', height: '100px'};
        var settings = $.speed(2000, 'linear');
        $('div').animate(params, settings);
    });
</script>

// 动画队列
$('div').show('slow')
    .animate({left: '+=200'}, 2000)
    .animate({left: '-=200'}, 1500)
    .slideUp('normal', runQue);
// 队列长度
$('div').queue('fx').length;

div.show('slow')
    .animate({left: '+=200'}, 2000)
    .queue(function() {
    // 为队列添加额外操作
    $(this).css('background', 'green').dequeue();
})
    .animate({left: '-=200'}, 1500)
    .slideUp('normal', runQue)
    .queue(function() {
    // 为队列添加额外操作
    $(this).css('background', 'red').dequeue();
});

5.3 练习作业

• 无缝轮播图
  • 焦点图的各个图片（即需要轮播的图片）依次横向排列。
  • 设置焦点图的外边框的宽度以及超出隐藏，限定其只能显示一张图片。
  • 切换到下一张时，只需要修改焦点图外层样式中的left值，就可以将焦点图整体向左移动，从而显示第2张图片。
  • 当焦点图显示到最后一张图片时，再向左切换就会回到第一张图片，这就是无缝切换效果。
  • 为了实现这种效果，将第一张图片连接到最后一张图片的后面，然后等这张图片向左移动直到完全显示之后，立即将焦点图的left值设为0，就切换到第1张图片了。

6 jQuery操作Ajax

传统的Ajax是通过XMLHttpRequest实现的，不仅代码复杂，而且浏览器兼容问题也比较多。

jQuery中通过对Ajax操作的封装，极大地简化了Ajax操作的开发过程。

• 参数url表示待请求页面的URL地址。
• data表示传递的参数。
• 参数fn表示请求成功时，执行的回调函数。
• 参数type用于设置服务器返回的数据类型，如XML、JSON、HTML、TEXT等。
• 参数options用于设置Ajax请求的相关选项。

$.post('index.php', {'id': 2, 'name': 'JS'}, function(msg) {
    console.log(msg.id + '-' + msg.name);    // 输出结果：2-JS
}, 'json');

上述代码表示处理当前Ajax请求的地址是同级目录下的index.php，在Ajax请求成功后，接收index.php返回的JSON格式的数据并在控制台进行输出。

• 在jQuery中对Ajax的操作方法中，$.ajax(url,[options])是底层方法。

• 通过该方法的options参数，可以实现$.get()、$.post()、

  ‘

  .

  g

  e

  t

  J

  S

  O

  N

  (

  )

  ‘

  和

  ‘

  `.getJSON()`和`

  ‘.getJSON()‘和‘.getScript()`方法同样的功能。

• 下面列举$.ajax()方法的3种常用方式。

  • 只发送GET请求

    $.ajax('index.php');
    

  • 只配置setting参数，同样实现Ajax操作

    $.ajax('index.php',{
        data: {'book': 'PHP', 'sales': 2000},  // 要发送的数据
        success:function(msg){// 请求成功后执行的函数
            alert(msg);
        }
    });
    

  • 发送GET请求并传递数据，接收返回结果

    $.ajax({
        type: 'GET
        url: 'index.php',
        data: {'id': 2, 'name': 'JS'},
        success: function(msg) {
            console.log(msg);
        }
    });
    
    $.ajaxSetup({
        type: 'GET',
        url: 'index.php',
        data:{'id': 2, 'name': 'JS'},
        success: function(msg) {
            alert(msg);
        }
    });
    $.ajax();
    

除此之外，在jQuery中还为操作Ajax额外的提供了一些辅助的函数以及相关的Ajax事件处理方法，方便开发。

// 序列化对象
var data = {'id': 2, 'name': 'Lucy', skill: ['PHP', 'JS']};
var seri_data = $.param(data);
var deseri_data = decodeURIComponent(seri_data);
// 输出结果：id=2&name=Lucy&skill%5B%5D=PHP&skill%5B%5D=JS
console.log(seri_data); 
// 输出结果：id=2&name=Lucy&skill[]=PHP&skill[]=JS
console.log(deseri_data);

上述代码表示处理当前Ajax请求的地址是同级目录下的index.php，在Ajax请求成功后，接收index.php返回的JSON格式的数据并在控制台进行输出。

// 序列化表单数据
$('input[type=button]').on('click', function () {
    console.log($('form').serialize());
    console.log($('form').serializeArray());
});

Ajax各个事件处理的先后顺序为ajaxStart() > ajaxSend() > ajaxSuccess()、ajaxError() > ajaxComplete() > ajaxStop()。

根据Ajax请求是否发生错误在Ajax发送后执行ajaxSuccess()还是ajaxError()方法进行相关的处理。

$(document).ajaxError(function() {
    console.log('ajaxError');
});
$.post('index.php', {'id': 2, 'name': 'JS'}, function(msg) {
    console.log(msg.id + '-' + msg.name);
}, 'xml');

7 插件机制

7.1 自定义插件

• 封装jQuery对象方法

  // 在插件中封装1个方法
  (function($){
      $.fn.方法名 = function() {
          // 实现插件的代码
          ……
      };
  })(jQuery);
  

  • .

    f

    n

    是

    j

    Q

    u

    e

    r

    y

    的原型对象（相当于

    .fn是jQuery的原型对象（相当于

    .fn是jQuery的原型对象（相当于.prototype）。

  • 通过“$.fn.方法名”的方式将封装的功能方法对每一个jQuery实例都有效，成为jQuery的插件。
  • jQuery的简写“

    ”是可以被修改的，为了避免影响到插件中的代码，建议将插件方法放在“

    ‘

    (

    f

    u

    n

    c

    t

    i

    o

    n

    (

    ”是可以被修改的，为了避免影响到插件中的代码，建议将插件方法放在“`(function(

    ”是可以被修改的，为了避免影响到插件中的代码，建议将插件方法放在“‘(function(){……})(jQuery);`”这个包装函数中，该函数的参数$就表示jQuery全局对象。

  // 在插件中封装多个方法
  jQuery.fn.extend({
      方法名1:function(参数列表) {
          // 实现插件的代码
          ……
      },
      方法名2:function(参数列表) {
          // 实现插件的代码
          ……
      }
  });
  

  • 若要在一个插件中封装多个方法，则可以借助extend()方法，为该方法传递对象类型的参数。
  • 参数的设置按照JavaScript对象语法的编写方式即可实现多个方法的封装。
  • 插件文件的名称建议遵循“jquery.插件名.js”的命名规则，防止与其他JavaScript库插件混淆。

• 定义全局函数

  // 定义全局函数的插件
  jQuery.extend({
      方法名1: function(参数列表){
          // 实现插件的代码
          ……
      },
      方法2: function(参数列表){
          // 实现插件的代码
          ……
      }
  });
  

  • 将自定义函数附加到jQuery命名空间下，从而作为一个公共的全局函数使用。
  • 例如，jQuery的ajax()方法就是利用这种途径内部定义的全局函数。

• 自定义选择器

  $.expr[":"].方法名称 = function(obj) {
      // 自定义选择器代码
      return 匹配HTML元素的条件;
  };
  

  • 用户可以利用jquery.expr实现选择器的自定义。
  • obj表示进行匹配的HTML元素对应的jQuery对象。
  • 根据需要对jQuery对象的属性进行判断，并使用return返回匹配结果。

7.2 jQuery插件库

随着jQuery的发展，诞生了许多优秀的插件。

网站地址为：http://plugins.jquery.com/。

通过在搜索框中输入插件名即可搜索需要的插件。

7.3 jQuery UI

• jQuery UI是在jQuery基础上新增的一个库。
• 特点： 拥有强大的可扩展功能，具有吸引人的漂亮页面，能够更轻松地在网页中添加专业级的UI元素。
• 举例：日历、菜单、拖拽、调整大小等交互效果。
• 下载地址

<!-- 引入所需文件 -->
<script src="jQuery-1.12.4.min.js"></script>
<script src="jquery-ui/jquery-ui.min.js"></script>
<link rel="stylesheet" href="jquery-ui/jquery-ui.css">

<div id="datepicker"></div>

<!-- 实例化datepicker -->
<script>
    $('#datepicker').datepicker();
    
    // 自定义日历显示样式
    $('#datepicker').datepicker({
        changeMonth: true,      	// 下拉列表方式选择月份
        changeYear: true,       	// 下拉列表方式选择年
        firstDay: 1,            	// 星期显示顺序为：“Mo Tu We Th Fr Sa Su”
        showOtherMonths: true, // 当前月中空白的日期利用相邻月日期填充
    });
    
    // 自定义中文显示
    var m = ['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'];
    var d = ['日', '一', '二', '三', '四', '五', '六'];
    $('#datepicker').datepicker({
        ……
        monthNamesShort: m,
        dayNamesMin: d,
    });
</script>

在实际项目中若只做中文开发，则每次使用时都配置这些属性会比较麻烦，建议将中文相关的配置保存到一个JavaScript文件中，每次使用时直接引用即可。

7.4 练习作业

• 自定义全选与反选插件
  • 编写表格展示数据，为其提供“全选”、“反选”和“全不选”操作按钮。
  • 引入jQuery文件以及自定义的插件文件（待编写）。
  • 编写自定义插件文件，利用封装jQuery对象方法的方式实现插件。
  • 在HTML中，调用插件封装的方法，实现全选、反选以及全不选的功能。

ery-ui.min.js”>

> 在实际项目中若只做中文开发，则每次使用时都配置这些属性会比较麻烦，建议将中文相关的配置保存到一个JavaScript文件中，每次使用时直接引用即可。



### 7.4 练习作业

- 自定义全选与反选插件
  - 编写表格展示数据，为其提供“全选”、“反选”和“全不选”操作按钮。
  - 引入jQuery文件以及自定义的插件文件（待编写）。
  - 编写自定义插件文件，利用封装jQuery对象方法的方式实现插件。
  - 在HTML中，调用插件封装的方法，实现全选、反选以及全不选的功能。

代码007普通

打赏 收藏 海报 链接