1. Plug

1.1. Common plug-ins

Plugin: jquery not contain all the features, we can jquery functionality through plug-in extensions.

jQuery has a wealth of plug-ins, these plug-ins give jQuery provides some additional features.

1.1.1. jquery.color.js

animate color gradients are not supported, but after using jquery.color.js, can support a color gradient.

The use of plug-in step

1. 引入jQuery文件
2. 引入插件（如果有用到css的话，需要引入css）
3. 使用插件

<! DOCTYPE HTML> 
<HTML lang = "ZH-the CN"> 
<head> 
  <Meta charset = "UTF-. 8"> 
  <title> the Title </ title> 
  <style> 
    div { 
      width: 400px; 
      height: 400px; 
      background -color: Red; 
    } 
  </ style> 
</ head> 
<body> 

<div> </ div> 

<- -. 1 incorporated jquery js file!.> 
<Script the src = "jquery-1.12.4.js "> </ Script> 
<-!. 2 widget introduced js file -> 
<Script the src =" jquery.color.js "> </ Script> 
<Script> 
  $ (function () { 
  
    //. 3 directly. you can use. 
    // Description jquery does not support color gradient,Best color hexadecimal 
    $ ( 'div') Animate ({the backgroundColor: "# ffc0cb"}, 3000, function () {.  
        Alert ( "Oh");
    }); 
  
  });
</script>
</body>
</html>

1.1.2. jquery.lazyload.js

Lazy loading plugins

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      height: 4000px;
    }
  </style>
</head>
<body>
<div></div>
<img class="lazy" data-original="02.gif" alt="">

<script src="jquery-1.12.4.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
<script>
  
  $(function () {
  
    $("img.lazy").lazyload();
  
  });
  
</script>
</body>
</html>

1.1.3. Jquery.ui.js plug

jQueryUI specifically refers to the direction of the plug-in UI jQuery maintained by the official.

官方API：http://api.jqueryui.com/category/all/

Other tutorials: jQueryUI Tutorial

Basic use:

2.    1.    引入jQueryUI的样式文件
2.    引入jQuery
3.    引入jQueryUI的js文件
4.    使用jQueryUI功能

Use jquery.ui.js achieve the news module case

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="jquery-ui.css">
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    
    .drag-wrapper {
      width: 400px;
      margin: 50px auto 0;
      /*border: 10px solid #000;*/
    }
    
    .drag-bar {
      height: 40px;
      font-size: 20px;
      font-weight: bold;
      line-height: 40px;
      text-align: center;
      background-color: #E6E6E6;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      cursor: move;
    }
    
    .resize-item {
      height: 212px;
      border: 1px solid #e6e6e6;
    }
    
    .sort-wrapper {
      height: 100%;
      overflow: hidden;
    }
    
    .sort-item {
      list-style: none;
      padding-top: 10px;
    }
    
    .sort-item li {
      height: 40px;
      line-height: 40px;
      padding-left: 20px;
      cursor: pointer;
    }
    
    .sort-item li:hover {
      background-color: #e6e6e6;
    }
  </style>



</head>

<body>
<div class = "Drag-warpper">
<script>
  <div class = "drag-bar "> draggable, ordering, deformation news module </ div> 
  <div class = "Item-a resize"> 
    <div class = "Sort-warpper"> 
      <UL class = "Sort -Item "> 
        <li> this is the first news article! </ li> 
        <li> this is the second article news! </ li> 
        <li> this is Article 3 news! </ li> 
        <li> this Article 4 News! </ Li> 
        <Li> this is the article 5 News! </ Li> 
        <Li> this is the article 6 News! </ Li> 
        <Li> this article 7 News! </ li> 
        <li> this is Article 8 news! </ li> 
        <li> this is the Article 9 of the news! </ li> 
        <li> this is Article 10 of the news! </ li> 
      </ ul> 
    </ div> 
  </ div> 
</ div>

<script src="jquery-1.12.4.js"></script>
<script src="jquery-ui.js"></script>


  $(function () {
  
    $(".drag-wrapper").draggable({
      handle:".drag-bar"
    });
  
    
    $(".sort-item").sortable({
      opacity:0.3
    });
    
    
    $(".resize-item").resizable({
      handles:"s"
    });
  });
</script>

</body>

</html>

1.2. Production jquery plugins

Principle: jquery plugins fact that white is the jquery object to add a new way for jquery object has a particular function.

//通过给$.fn添加方法就能够扩展jquery对象
$.fn. pluginName = function() {};

Production accordion plugin

jQuery Basics - plug-in