jQuery学习笔记之总体架构

jQuery学习笔记之总体架构 完整攻略

背景

在前端开发中，jQuery库是广泛应用的一种JavaScript库。由于其使用简单、功能强大、扩展性强等特性，已经成为开发高质量Web应用程序的首要选择。对于不同技术背景或从未接触过前端技术的学者，学习jQuery是一个很好的入门和了解基础前端技术的方法。

总体结构

本文主要内容是总结了一些关于jQuery学习的笔记和具体的实例说明，包括如下总体结构：

- jQuery基础入门
    - jQuery基本语法
    - DOM遍历和操作
    - jQuery事件
    - jQuery动画
    - jQuery效果
    - jQuery AJAX
- jQuery插件开发
    - 插件基础架构
    - 插件封装思路和技巧
- 例子实战
    - 例子1： 折叠面板插件开发
    - 例子2： 拖拽排序插件开发

jQuery基础入门

jQuery基本语法

jQuery 是一个快速、简洁的 JavaScript 库。 它由简单的 HTML DOM 遍历和操作、事件处理、动画效果、ajax交互和其他功能组成。jQuery的基本语法是：

$(selector).action()

其中，$定义 jQuery ， selector 是 HTML 元素， action 是对元素的操作，例如：

$(document).ready(function(){
  $("button").click(function(){
    $(this).hide();
  });
});

上述代码表示当页加载完成后，当用户单击按钮时，隐藏它。

DOM遍历和操作

jQuery 可以对 HTML 元素进行操作。通过 jQuery 您可以选取（选中） HTML 元素，并对它们进行操作（如改变内容、改变样式等）。jQuery 以浏览器可识别的方式操作 HTML 元素。基本的 DOM 遍历用法是：

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

jQuery事件

jQuery 事件是当 HTML 元素发生改变时执行的函数。 jQuery事件处理的语法格式如下：

$(selector).event(function(){
  // 对某些事件执行操作的代码
});

例如：

$("p").click(function(){
  $(this).hide();
});

该代码表示当用户单击某段文本时，隐藏该段文本。

jQuery动画

jQuery 动画效果是改变 HTML 元素的样式属性。jQuery 可以实现不同的动画效果，效果过程中可以指定 speed 和 easing。

$(selector).animate({params},speed,easing,callback)

例如：

$("button").click(function(){
  $("div").animate({left:'150px'});
});

表示当用户单击按钮时，将 div 元素以动画效果向右移动 150 个像素。

jQuery效果

jQuery 效果（hide、show、toggle、fadeIn、fadeOut、fadeToggle、slideUp、slideDown、slideToggle）可以在页面上操作元素的显示和隐藏。

例如：

$("button").click(function(){
  $("p").hide();
});

该代码表示当用户单击某个按钮时，隐藏该元素。

jQuery AJAX

jQuery AJAX 可以帮助实现在不重新加载整个网页的情况下，向服务器请求数据。下面是 jQuery 的一个 AJAX 方法：

$.ajax({url:"demo_test.txt",success:function(result){
  $("div").html(result);
}});

jQuery插件开发

插件基础架构

jQuery插件是一个非常强大和灵活的方式，可以增强jQuery的能力，使其更容易开发。jQuery 插件的基本结构如下：

(function($){
  $.fn.myPlugin = function(options){
    // 插件代码
  };
})(jQuery);

插件封装思路和技巧

编写jQuery插件的基本思路包括以下几个步骤：

• 编写jQuery插件基础结构；
• 定义插件参数和默认参数；
• 编写插件函数；
• 链式编程支持；
• 兼容各种不同的浏览器。

例如，下面是一个基于jQuery的折叠面板插件实现代码：

(function($){
    // 插件代码
    $.fn.accordion = function(option){
        // 设置默认参数
        var defaultOptions = {
            panel: '.accordion-panel',
            header: '.accordion-header',
            content: '.accordion-content',
            activeClass: 'active',
            multiple: false
        };

        // 设置插件参数
        var options = $.extend({},defaultOptions,option||{});

        // 插件函数
        return this.each(function(){
            var $self = $(this),
                $panel = $self.find(options.panel),
                $header = $self.find(options.header),
                $content = $self.find(options.content),
                cls = options.activeClass,
                flag = options.multiple;

            $header.on('click',function(){
                if(flag){
                    $(this).parent().toggleClass(cls);
                }else{
                    $panel.removeClass(cls);
                    $(this).parent().addClass(cls);
                }
            });
        });
    };
})(jQuery);

例子实战

例子1：折叠面板插件开发

以折叠面板插件为例，下面实现如何使用该插件：

<div class="accordion">
  <div class="accordion-panel">
    <div class="accordion-header">Accordion1</div>
    <div class="accordion-content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis odio sed libero dictum sit amet dignissim dui ultricies.
    </div>
  </div>
  <div class="accordion-panel">
    <div class="accordion-header">Accordion2</div>
    <div class="accordion-content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis odio sed libero dictum sit amet dignissim dui ultricies.
    </div>
  </div>
  <div class="accordion-panel">
    <div class="accordion-header">Accordion3</div>
    <div class="accordion-content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis odio sed libero dictum sit amet dignissim dui ultricies.
    </div>
  </div>
</div>

$(function(){
  $('.accordion').accordion({
    multiple: true
  });
});

例子2：拖拽排序插件开发

以拖拽排序插件为例，下面实现如何使用该插件：

<div class="sortable">
  <div class="sortable-item">Item1</div>
  <div class="sortable-item">Item2</div>
  <div class="sortable-item">Item3</div>
  <div class="sortable-item">Item4</div>
</div>

$(function(){
  $('.sortable').sortable({});
});