jquery插件学习

1. +function ($) {   
2.   
3. }(window.jQuery); 

1. 函数表达式与函数申明的区别
2. var test = function() {};   //函数表达式
   
3. function test() {}           //函数申明

1. 函数表达式中的函数可以为匿名函数，也可以有函数名，但是该函数实际上不能直接使用，只能通过表达式左边的变量 a 来调用。 

   Js代码  

   1. var a = function(){  
   2.   alert('Function expression');  
   3. }  
   4. var b = new a();  
   
   

2. 函数声明时必须有函数名。 

   Js代码  

   1. function a(){  
   2.   alert('Function declaration');  
   3. }  
   4. a(); 
   
   

3. 通过一元操作符+变成了函数表达式。也可以使用 - ~ ！等其他一元运算符或者括号，目的是为了引导解析器，指明运算符附近是一个表达式。以下是三种经典方式 ：

   Js代码  

   1. +function () {   
   2.   
   3. };  
   4.   
   5. (function () {  
   6.   
   7. });  
   8.   
   9. void function() {  
   10.   
   11. }; 

   12. 函数表达式通过 末尾的() 来调用并运行。就是一个IIFE（即时执行）。

       Js代码  

       1. +function () {   
       2.   
       3. }();  
       4.   
       5. (funtion () {  
       6.   
       7. })();  
        

   13. 传参，为了避免$与其他库或者模板申明冲突，window.jQuery 作为参数传递。

       Js代码  

       1. +function (x) {  
       2.     console.log(x);  
       3. }(3);  
       4.   
       5. +function ($) {  
       6.   
       7. }(window.jQuery); 
       
       

   
   
   
   

4. a页面需要使用KindEditor，a.html引入kindeditor.js 和 a.js,  b页面不需要使用Kindeditor，没有引入kindeditor.js。但是在合并JS代码后，b页面也会执行a.js中的代码，页面报错Uncaught ReferenceError: KindEditor is not defined。也就是b页面执行了KindEditor，难道所有页面都要加载Kindeditor源文件？ 

   可以这么修改a.js，将KindEditor变量参数化，通过给立即执行的函数表示式的参数赋值，那么其他页面都不需要加载Kindeditor源文件

   Js代码  

   1. +function( KindEditor){  
   2.   
   3.     var editor  
   4.     if(KindEditor){  
   5.         KindEditor.ready(function(K) {  
   6.   
   7.             editor = K.create('textarea[data-name="kindeditor"]', {  
   8.             resizeType : 1  
   9.             })  
   10.         })  
   11.     }  
   12.   
   13. }(KindEditor || undefined)  

   
   

5. jQuery优化    ready、load区别

   一段看上去写法有点像的代码。大部分项目用这段代码做作用域，这段代码会在DOM加载完成时初始化jQuery代码。

   Js代码  

   1. $(function(){   
   2.   
   3. });   

    

   这种写法等同于 

   Js代码  

   1. $(document).ready(function(){  
   2. // 在DOM加载完成时初始化jQuery代码。  
   3. });  

   区别于

   Js代码  

   1. $(window).load(function(){  
   2. // 在图片等媒体文件加载完成时，初始化jQuery代码。  
   3. });  

   结合IIFE的最佳实践，更好的写法是，立即执行document ready

   Js代码  

   1. +function ($) {  
   2.   
   3.   $(function(){  
   4.   
   5.   })  
   6.   
   7. }(window.jQuery)  

   最佳实践

   Js代码  

   1. // IIFE - Immediately Invoked Function Expression  
   2.   +function(yourcode) {  
   3.   
   4.     // The global jQuery object is passed as a parameter  
   5.     yourcode(window.jQuery, window, document);  
   6.   
   7.   }(function($, window, document) {  
   8.   
   9.     // The $ is now locally scoped   
   10.   
   11.    // Listen for the jQuery ready event on the document  
   12.    $(function() {  
   13.   
   14.      // The DOM is ready!  
   15.   
   16.    }));  

   
   

1. $(document).ready(function(){  });  
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：
  
  
试图隐藏一个不存在的元素
获得未完全加载的图像的大小

2. jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
$("ul li:first")   获取每个 <ul> 的第一个 <li> 元素
3. jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色：
实例
$("p").css("background-color","red");
4.jQuery 名称冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

5.结论
由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
  
  
把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库

6.
$(selector).hide(speed,callback);

$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。Callback 函数在当前动画 100% 完成之后执行。
下面的例子演示了带有 speed 参数的 hide() 方法：
$("button").click(function(){
  $("p").hide(1000,function(){alert('ok');});
});
jQuery toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
实例
1. $("button").click(function(){
     $("p").toggle();
   });
2. $(selector).toggle(speed,callback);  //speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒

7. jQuery Fading 方法
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
   
   
fadeIn()          //淡入
fadeOut()       //淡出
fadeToggle()    // 淡入/淡出 切换
fadeTo()   
语法：$(selector).fadeIn(speed,callback); //speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒     
特殊：$(selector).fadeTo(speed,opacity,callback);                                                        //speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。                                                                      //fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）                                   
8.jQuery 滑动方法
通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：
   
   
slideDown()
slideUp()
slideToggle()
 
语法：$(selector).slideDown(speed,callback);
9.jQuery 动画 - animate() 方法
jQuery animate() 方法用于创建自定义动画。
语法：
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用；它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止：
实例
$("button").click(function(){
  $("div").animate({left:'250px'});
});                                                                                                    默认地，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！                               
       
请注意，生成动画的过程中可同时使用多个属性：
实例
$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});                                                                                                    
提示：可以用 animate() 方法来操作所有 CSS 属性吗？
是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同时，色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。
 
jQuery animate() - 使用相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
实例
$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});
 
jQuery animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
实例
$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});
 
jQuery animate() - 使用队列功能
默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
实例 1
隐藏，如果您希望在彼此之后执行不同的动画，那么我们要利用队列功能：
$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});
实例 2
下面的例子把 <div> 元素移动到右边，然后增加文本的字号：
$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

10.jQuery 方法链接
  
  

   
   
例子 1
   
   
下面的例子把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动：
   
   
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
   
   
如果需要，我们也可以添加多个方法调用。
   
   
提示：当进行链接时，代码行会变得很差。不过，jQuery 在语法上不是很严格；您可以按照希望的格式来写，包含折行和缩进。
   
   
例子 2
   
   
这样写也可以运行：
   
   
$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);
   
   

  
  
  
  

   
   11.attr() 方法也允许您同时设置多个属性
   
   
下面的例子演示如何同时设置 href 和 title 属性：
实例
$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
});
attr() 的回调函数
jQuery 方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 attr() 方法：
实例
$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
});