jQuery基础教程

1、使用$()函数

  $()函数其实是创制了三个jQuery对象.
那些函数接受CSS采用符作为参数,充当1个工厂,
重返包含页面中对应成分的jQuery对象.
全数能在体制表中使用的挑叁拣4符都能够传给这一个函数,
随后就能够对金童玉女的成分集合应用jQuery方法.

  在jQuery中,美金符号$其实就是标志符jQuery的”小名”. 

2、选择符

1. 基本选择符
    $('p')          //取得所有标签为p的元素
    $('.class')     //取得所有类为class的元素
    $('#id')        //取得id为id的元素
                    //以及其他css中的选择符
2. 属性选择符
    $('img[alt]')   //选择带有alt属性的所有图像元素
    //^表示值在字符串的开始, $表示值在字符串的结尾. *表示要匹配的值可以出现在字符串的任意位置, !表示对值取反
    $('a[href^="mailto:"]')     //选择页面中所有mailto:链接
    $('a[href$=".pdf"]')        //选择页面中所有pdf文档链接
    $('a[href^="http"][href*="henry"]') //选择href属性以http开头且在任意位置包含henry的元素

3. 自定义选择符
    $('div.horizontal:eq(1)')   //取得集合中的第二个元素
    $('tr:even')                //选择奇数行. 之所以是奇数行是因为第一行的编号是0    还可以写作:  $('tr').filter(':even')


    $('tr:nth-child(odd)')      //选择奇数行. :nth-child()是jq中唯一从1开始计数的选择符
    $('tr:contains(Henry)')     //根据上下文内容选择元素. contains选择符区分大小写

4. 基于表单的选择符
    $('input[type="radio"]:checked')    //可以选择所有选中的单选按钮
    $('input[type="text"]:disabled')    //选择禁用的文本输入字段

越来越多的根据表单的选取符

    :input
    :button
    :enabled
    :disabled
    :checked:selected

3、 DOM遍历方法

filter方法

    $('tr').filter(':even')
    $('a').filter(function(){
        return this.hostname && this.hostname!=location.hostname;
    })                          //选择包含带有域名的href属性的,且域名不等于页面当前所在域的名称的a元素

 

    .next()     //选择下一个最接近的同辈元素
    $('td:contains(Henry)').next()

    .nextAll()  //选择后面的全部同辈元素

    //对应方法
    .prev()
    .prevAll()

    .siblings()     //选择处于相同DOM层次的所有其他元素,无论这些元素处于当前元素之前还是之后
    .parent().children()        //另一种方法

 

接通方法的原理:

  差不多全数的jQuery方法都会回去一个jQuery对象,
由此可连缀调用七个jQuery方法.

 

4. 访问DOM元素

    .get()
    var myTag = $('#my-element').get(0).tagName;    //获取带有id为my-element属性的元素的标签名
    var myTag = $('my-element')[0].tagName;         //一种简写方式

            

函数 描述
.add() 将元素添加到匹配元素的集合中。
.andSelf() 把堆栈中之前的元素集添加到当前集合中。
.children() 获得匹配元素集合中每个元素的所有子元素。
.closest() 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素。
.contents() 获得匹配元素集合中每个元素的子元素,包括文本和注释节点。
.each() 对 jQuery 对象进行迭代,为每个匹配元素执行函数。
.end() 结束当前链中最近的一次筛选操作,并将匹配元素集合返回到前一次的状态。
.eq() 将匹配元素集合缩减为位于指定索引的新元素。
.filter() 将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。
.find() 获得当前匹配元素集合中每个元素的后代,由选择器进行筛选。
.first() 将匹配元素集合缩减为集合中的第一个元素。
.has() 将匹配元素集合缩减为包含特定元素的后代的集合。
.is() 根据选择器检查当前匹配元素集合,如果存在至少一个匹配元素,则返回 true。
.last() 将匹配元素集合缩减为集合中的最后一个元素。
.map() 把当前匹配集合中的每个元素传递给函数,产生包含返回值的新 jQuery 对象。
.next() 获得匹配元素集合中每个元素紧邻的同辈元素。
.nextAll() 获得匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选)。
.nextUntil() 获得每个元素之后所有的同辈元素,直到遇到匹配选择器的元素为止。
.not() 从匹配元素集合中删除元素。
.offsetParent() 获得用于定位的第一个父元素。
.parent() 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选)。
.parents() 获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选)。
.parentsUntil() 获得当前匹配元素集合中每个元素的祖先元素,直到遇到匹配选择器的元素为止。
.prev() 获得匹配元素集合中每个元素紧邻的前一个同辈元素,由选择器筛选(可选)。
.prevAll() 获得匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选)。
.prevUntil() 获得每个元素之前所有的同辈元素,直到遇到匹配选择器的元素为止。
.siblings() 获得匹配元素集合中所有元素的同辈元素,由选择器筛选(可选)。
.slice() 将匹配元素集合缩减为指定范围的子集。

第3章 事件

1. $(document).ready()和window.onload事件

  • $(document).ready()注册是事件处理程序会在DOM完全就绪并得以行使时调用.那表示全数因素对剧本而言都以足以访问的,但是并不意味着全部涉及的文件都已经下载实现.
    即当HTML下载完成并分析成DOM树后,代码就能够运营.
  • 而window.onload意味着文书档案完全下载到浏览器中了.
  • 一般的话,使用$(document).ready()要优于onload.
    可是因为援救文件或然还尚未加载成功,所以类似图像的莫斯中国科学技术大学学和宽窄那样的属性不肯定有效.
    如若需求拜访那一个属性, 或然需求选拔达成3个onload事件处理程序,
    使这二种体制能够和平共存.

(document).ready()可简写为:();
即:

    $(function(){
        //code here
    });

为了防止的争论,能够设置出让标示符控制权

jQuery.noConflict();        //之和就通过jQuery来调用jQuery的方法

那种情状下,能够在.ready()函数中选用的技艺     
 

  传递给ready函数的回调函数能够接收一个参数

  jquery对象自笔者,利用那些参数,能够重新命名ready,而不要担心导致抵触

   jQuery(function($){
        //使用$的代码
    });

二、 事件添加

    //.on绑定事件
    $(this).on('click',function(){});
    //.click
    $(this).click(function(){})

    //添加类
    $('btn').addClass('classname');
    //移除类
    $('btn').removeClass('classname');
    //根据相应的类是否存在而添加或删除类
    $('btn').toggleClass('classname');

.hover()方法:
接受三个函数参数,第贰个会在鼠标指针进入被增选的成分时实施,而第一个函数会在鼠标指针离开该因素时触非法律

//设定事件目标
    $('#switcher').click(function(event){
        if(event.target = this){
            $('#switcher button').toggleClass('hidden');
        }

    });
    //停止事件传播
    event.stopPropagation();        //避免其他DOM元素响应事件
    //阻止默认操作
    .preventDefault();

再者调用.stopPropagation()和preventDefault()的壹种简写方式: 在事件处理程序中回到false

    $(function(){
        $('#switcher').click(function(event){
            if($(event.target).is('button')){       //.is()方法接收一个选择符表达式,然后用选择符来测试当前jQuery对象. 如果集合中至少有一个元素与选择符匹配,.is()返回true
                var bodyClass = event.target.id.split('-')[1];
                $('body').removeClass().addClass(bodyClass);
                $('#switcher button').removeClass('selected');
                $(event.target).addClass('selected');   //这里this引用的都是"#switch"对象,因此要访问被单击的按钮斗殴要通过event.target来引用
                event.stopPropagation();
            }
        });
    });

.on()方法也得以吸收相应参数达成事件委托.
若是给.on()方法传入的第壹个参数是四个增选符表达式,jQuery会把click事件处理程序绑定到#switch对象,同时相比较event.target和选取符表明式.
假诺匹配, jQuery会把this关键字映射到10分的因素,
不然不会履行事件处理程序.

四、移除事件处理

.off(‘click’)

仍是能够为事件处理程序添加命名空间

    $('#switcher').on('click.collapse', function(){});
    $('#switcher').off('click.collapse');

对于事件处理系统而言, 后缀.collapse是不可知的.

若是不使用匿名函数,则就足以不应用事件命名空间,
.off()会把命名函数作为第2个参数, 结果只会化解对一定处理程序的棒的.

 

第、四章 样式与动画

一、 通过.css()来取得或改动成分样式属性的值.

  为了拿走有个别样式属性的值, 能够为这么些方法传递四个字符串方式的属性名,
然后1致赢得三个字符串方式的质量值. 要博取多少个样式属性的值,
能够流传属性名的数组, 获得的则是性质和值勾搭的对象.

  对于由多少个单词构成的属性名,
jQuery既能够表明连字符版的css表示法(background-color),
也能够解释驼峰大小写方式的DOM表示法(backgroundColor)

  对于带浏览器前缀的属性值(比如-webkit-property-name,
-ms-property-name), 用jQuery不须求提前检测, 而能够一贯动用正式的习性名.
比如:

 

.css('propertyName','value'). //如果样式对象中不存在这个属性,jQuery就会依次检测所有带前缀(Webkit, o, Moz, ms)的属性, 然后使用第一个找到的那个属性.

二、 隐藏和展现成分

  • .hide()方法会把相称的要素集合的内联style属性设置为display:none.
    它能够在把display的值变为none以前, 记住原先的display值
  • .show()方法会将相称的要素集合的display属性,复苏为利用display:none以前的可知属性

  能够为hide()和show()方法中钦赐时间长度参数, 发生动画效果.比如

  .hide(‘duration’)方法会同时削减成分的万丈, 宽度和不反射率,
直到四个脾性的值都为0. 而且会为该因素运用display:none.
而show(‘duration’)方法相反.

  其余,还足以钦定两种预设的快慢参数 ‘slow’ 和 ‘fast’
,分别在600ms和200ms内完结效果.
假若传入的是其余字符串,jQuery就会在暗许的400ms内成功能果.要钦点更可相信的进程,能够选用阿秒数值.
数值不须要用引号.

  1部分别的彰显/隐藏成分的函数:

//参数: 1. speed(毫秒/'slow'/'normal'/'fast')
//       2. callback[执行完的回调参数]

//淡入淡出 只是改变不可见性
.fadeIn();     //逐渐增大不透明度, 淡入
.fadeOut();    //逐渐减少不透明度, 淡出

//滑上和滑下
.slideDown()
.slideUp()

//切换可见性
.slideToggle();

三、创立自定义动画

  .animate():三种方式

先是种方式. 接收多少个参数  

  1. 三个带有样式属性及值的对象: 与前方议论的.css()方法中的参数近似
  2. 可选的时长参数: 既能够是预置的字符串, 也足以是纳秒数值
  3. 可选的缓动(easing)类型
  4. 可选的回调函数

    .animate({

    property1:'value1',
    property2:'value2'
    

    }, {

    duration:'value',
    easing: 'value',
    specialEasing: {
        property1: 'easing1',
        property2: 'easing2'
    },
    complete: function(){
        //...
    },
    queue: true,
    step: callback
    

    });

当使用 animate() 时,必须运用 Camel
标记法书写全部的属性名,比如,必须使用 paddingLeft 而不是
padding-left,使用 marginRight 而不是 margin-right,等等。

   还足以用.animate()为同样组成分应用多重效能,
能够经过连接那一个成效来兑现排队

   不难回顾:

  1. 1组成分上的成效
    1. 当在一个.animate()方法中以几个属性的点子运用时, 是同时发生的
    2. 当以艺术连缀的花样利用时,
      按顺序发生的(排队效果)除非queue选项值为false
  2. 多组成分上的效能
    1. 暗中认可意况下是同时发生的
    2. 当在另一个功效方法恐怕在.queue()方法的回调函数中动用时,
      是按梯次产生的(排队效果)

第5章  操作DOM

一、 操作属性

  1) .attr()  .removeAttr()

//操作非类属性
.attr();    //和.css()方法类似, 可以接收一对属性名/属性值参数 或者是一个包含键值对的对象
.removeAttr();

//还可以使用值回调为每个元素设置不同的属性值
$(document).ready(function() {
  // Use attr() to add an id, rel, and title.
  $('div.chapter a[href*="wikipedia"]').attr({
    rel: 'external',
    title: function(){                  return  'Learn more about ' + $(this).text()    //利用值回调的上下文          + ' at Wikipedia.';     },
    id: function(index, oldValue) {  //值回调
      return 'wikilink-' + index;
    }
  });
});

 

每一遍触发值回调, 都会给它传到多少个参数. 第3个参数是整数, 表示迭代次数.
第二个参数保存的是修改在此之前的习性的值, 那里并不曾用到.

  2) DOM成分属性

  HTML属性和DOM属性:

  • HTML属性是指页面标记中位居引号中的值
  • DOM属性则是指通过JavaScript能够存取的值

 在jQuery中, 可以透过.prop()方法赢得和安装DOM属性:

//取得"checked"属性的当前值
var currentChecked = $('.my-checkbox').prop('checked');
//设置"checked"属性的值
$('.my-checkbox').prop('checked', false);

 

  3) 表单控件的值  

  HTML属性和DOM属性差距最大就数表单控件的值.
比如,文本输入框的value属性在DOM中的属性叫defaultValue,
DOM中就一直不value值. 而选取列表(select)成分,
其采取的值在DOM中司空眼惯是经过selectedIndex属性,
恐怕经过其采用成分的selected属性来取得.

  由于存在那几个差别, 在得到和设置表明控件值时,最棒不用用.attr()方法.
而对此选取列表, 最棒也不用用.prop()方法. 建议用jQuery提供的val()方法:

//取得文本输入框的当前值
var inputValue = $('#my-input').val();
//取得选项列表的当前值
var selectValue = $('#my-select').val();
//设置单选列表的值
$('#my-single-select').val('value3');
//设置多选列表的值
$('#my-multi-select').val(['value1','value2']);

2. DOM树操作

  1. ####  $() 能够创设新因素

  2. #### 插入新因素

    1. .insertBefore():   在存活成十分部, 此前增进内容
    2. .prependTo():      在现有成分内部, 以前增进内容
    3. .appendTo():       在存活成分内部, 之后添加内容
    4. .insertAfter():       在存活成万分部, 之后添加内容
      1
      2
      3
      // Add "back to top" links.
      $('<a href="#top">back to top</a>').insertAfter('div.chapter p');
      $('<a id="top"></a>').prependTo('body');
  3. #### 移动成分

    1
    2
    // Create footnotes.
    $('span.footnote').<strong>insertBefore</strong>('#footer');
  4. #### 包装成分

    1
    2
    3
    4
    5
    // Create footnotes.
    $('span.footnote')
      .insertBefore('#footer')
      .<strong>wrapAll</strong>('<ol id="notes"></ol>')    //把所有脚本都包含在一个<ol>中
      .<strong>wrap</strong>('<li></li>')                  //把每一个脚注分布包装在自己的<li>中

    用.each()方法作为显式迭代器, 为领取脚注的地方加标记和编码

    1. // Create footnotes.

    2. var $notes = $(‘<ol
      id=”notes”></ol>’).insertBefore(‘#footer’);

    3.   $(‘span.footnote’).each(function(index) {

    4.     $(‘<sup>’ + (index + 1) + ‘</sup>’).insertBefore(this);

    5.     $(this).appendTo($notes).wrap(‘<li></li>’);

    6. });

  5. #### 使用反向插入方法

    相应的反向方法: 

    1
    2
    3
    $('<p>Hello</p>').appendTo('#container');
    //与下面的代码结果一样
    $('#container').append('<p>Hello</p>');

    所以地点的代码还足以编写:

    1
    2
    3
    4
    5
    6
    7
    8
    // Create footnotes.
    var $notes = $('<ol id="notes"></ol>').insertBefore('#footer');
    $('span.footnote').each(function(index) {
      $(this)
        .before('<sup>' + (index + 1) + '</sup>')
        .appendTo($notes)
        .wrap('<li></li>');
    });  
  6. #### 复制成分

    .clone()

    1
    $('div.chapter p:eq(0').clone().insertBefore('div.chapter');
  7. #### 成分内容

    1. .html()     //再次回到相配成分的html标记, 或调换来分内容(若是有参数)
    2. .text()    
      //也能够获得匹配成分的内容,或然用新字符替换相配成分的内容.
      可是.text()始终会博得或安装纯文本内容. 全部html标签都将被忽视掉,
      而全数html实体也会被转化为对应的字符
  8. #### DOM操作方法的简易总计

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    //要在html中创建新元素, 使用$()标签
     
    //要在每个匹配的元素中插入新元素:
    .append()
    .appendTo()
    .prepend()
    .prependTo()
     
    //要在每个匹配的元素相邻的位置上插入新元素
    .after()
    .insertAfter()
    .before()
    .insertBefore()
     
    //要在每个匹配的元素外部插入新元素
    .wrap()
    .wrapAll()
    .wrapInner()
     
    //要用新元素或文本替换每个匹配的元素
    .html()
    .text()
    .replaceAll()
    .replaceWith()
     
    //要移除每个匹配的元素中的元素
    .empty()
     
    //要从文档中移除每个匹配的元素及其后代元素, 但不实际删除它们
    .remove()
    .detach()

第4章 通过Ajax发送数据

  Ajax实质:
正是一种无需刷新页面即可从服务器(或客户端)上加载数据的手腕  

图片 1

$(document).ready(function() {
  $('#letter-a a').click(function(event) {
    event.preventDefault();

    $.ajaxSetup({               //$.ajaxSetup()函数可以修改调用Ajax方法时每个选项的默认值. 
                                //这个函数与$.ajax()接受相同的选项对象参数. 之后所有Ajax请求都使用传递给该函数的选项, 除非明确覆盖
      url: 'a.html',
      type: 'POST',
      dataType: 'html'
    });

    $.ajax({
      type: 'GET',
      success: function(data) {
        $('#dictionary').html(data);
      }
    });
  });

  $('#letter-b a').click(function(event) {
    event.preventDefault();
    $.getJSON('b.json', function(data) {            //$.getJSON()方法会在取得相应文件后对文件进行处理. 在数据从服务器返回后, 它只是一个简单的JSON格式的文本字符串. 
                                                    //$.getJSON()方法会解析这个字符串, 并将处理得到的JavaScript对象提供给调用代码
                                                    //接受两个参数, 第2个参数是当加载完成时调用的函数
                                                    //$.getJSON()函数: 没有该方法适用的DOM元素;作为结果的对象只能提供给脚本,而不能插入到页面中.
                                                    //getJSON()是作为全局jQuery对象(由jQuery库定义的jQuery或$对象)的方法定义的, 而不是个别jQuery对象实例的方法
                                                    //可把getJSON()方法看做类方法, 称其为全局函数. 这些全局函数使用的是jQuery命名空间.
      var html = '';
      $.each(data, function(entryIndex, entry) {    //$.each()函数不操作jQuery对象, 它以数组或对象作为第一个参数,以回调函数作为第二个参数. 
                                                    //此外还需要将每次循环中数组或对象的当前索引和当前项作为回调函数的两个参数
        html += '<div class="entry">';
        html += '<h3 class="term">' + entry.term + '</h3>';
        html += '<div class="part">' + entry.part + '</div>';
        html += '<div class="definition">';
        html += entry.definition;
        if (entry.quote) {
          html += '<div class="quote">';
          $.each(entry.quote, function(lineIndex, line) {
            html += '<div class="quote-line">' + line + '</div>';
          });
          if (entry.author) {
            html += '<div class="quote-author">' + entry.author + '</div>';
          }
          html += '</div>';
        }
        html += '</div>';
        html += '</div>';
      });
      $('#dictionary').html(html);
    });
  });

  $('#letter-c a').click(function(event) {
    event.preventDefault();
    $.getScript('c.js');        //$.getScript()也是一个全局函数. 接受一个url参数以查找脚本文件. 
                                //以这种方式取得的脚本会在全局环境下执行. 这意味着脚本有权访问在全局环境中定义的函数和变量, 当然也包括jQuery自身
  });

  $('#letter-d a').click(function(event) {
    event.preventDefault();
    $.get('d.xml', function(data) {     //加载xml文档. 
                                        //通常,$.get()函数只是取得由url指定的文件, 然后将纯文本格式的数据提供给回调函数. 但是在根据服务器提供的mine类型知道相应的是xml的情况下, 提供给回调函数的将是xml dom树
      $('#dictionary').empty();
      $(data).find('entry').each(function() {
        var $entry = $(this);
        var html = '<div class="entry">';
        html += '<h3 class="term">' + $entry.attr('term');
          html += '</h3>';
        html += '<div class="part">' + $entry.attr('part');
          html += '</div>';
        html += '<div class="definition">';
        html += $entry.find('definition').text();   //jQuery内部的选择符引擎, 对查找xml文档元素也有效
        var $quote = $entry.find('quote');
        if ($quote.length) {
          html += '<div class="quote">';
          $quote.find('line').each(function() {
            html += '<div class="quote-line">';
              html += $(this).text() + '</div>';
          });
          if ($quote.attr('author')) {
            html += '<div class="quote-author">';
              html += $quote.attr('author') + '</div>';
          }
          html += '</div>';
        }
        html += '</div>';
        html += '</div>';
        $('#dictionary').append($(html));
      });
    });
  });

  $('#letter-e a').click(function(event) {
    event.preventDefault();                             //为了防止单击这些链接时打开新的url.
                                                        //当默认动作是重新加载页面或重新打开新页面时, 推荐使用preventDefault()而不是return false结束该处理程序.
                                                        //return false意味着同时调用event.preventDefault()和event.stopPropagation(), 因此想要阻止事件冒泡, 还得调用后者
    var requestData = {term: $(this).text()};
    $.get('e.php', requestData, function(data) {        //向服务器传递数据. 第二个参数是一个用来构建查询关键字符串的键和值的对象.
      $('#dictionary').html(data);
    }).fail(function(jqXHR) {
      $('#dictionary')
      .html('Sorry, but an error occurred: ' + jqXHR.status)
      .append(jqXHR.responseText);
    });
  });

  $('#letter-f form').submit(function(event) {
    event.preventDefault();
    var formValues = $(this).serialize();
    $.get('f.php', formValues, function(data) {
      $('#dictionary').html(data);
    });
  });

  var url = 'http://examples.learningjquery.com/jsonp/g.php';
  $('#letter-g a').click(function(event) {
    event.preventDefault();
    $.getJSON(url + '?callback=?', function(data) {     //使用JSONP加载远程数据, 实现跨域
                                  //可以通过使用 JSONP 形式的回调函数来加载其他网域的 JSON 数据,如 "url?callback=?"。jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。 注意:此行以后的代码将在这个回调函数执行前执行。
                                  //该函数是简写的Ajax函数. 等价于: $.ajax({url:url, data: data, success: callback, dataType: json});  

      var html = '';
      $.each(data, function(entryIndex, entry) {
        html += '<div class="entry">';
        html += '<h3 class="term">' + entry.term + '</h3>';
        html += '<div class="part">' + entry.part + '</div>';
        html += '<div class="definition">';
        html += entry.definition;
        if (entry.quote) {
          html += '<div class="quote">';
          $.each(entry.quote, function(lineIndex, line) {
            html += '<div class="quote-line">' + line + '</div>';
          });
          if (entry.author) {
            html += '<div class="quote-author">' + entry.author + '</div>';
          }
          html += '</div>';
        }
        html += '</div>';
        html += '</div>';
      });
      $('#dictionary').html(html);
    });
  });

  $('#letter-h a').click(function(event) {
    event.preventDefault();
    $('#dictionary').load('h.html .entry');
  });

  var $loading = $('<div id="loading">Loading...</div>')
    .insertBefore('#dictionary');
                                                //jQuery提供的一组观察员函数, 来为各种与Ajax相关的事件注册回调函数.
                                                //这些观察员都是全局性的,且只能由$(document)调用
  $(document).ajaxStart(function() {            //当Ajax请求开始且尚未进行其他传输时出发.ajaxStart()的回调函数
    $loading.show();
  }).ajaxStop(function() {                      //最后一次活动请求终止时出发
    $loading.hide();
  });                                           //全局观察员函数还有.ajaxError()

  $('body').on('click', 'h3.term', function() {
    $(this).siblings('.definition').slideToggle();  //事件委托
  });
});

图片 2

 

 

第天问 使用插件

第九章 开发插件

一. 在插件中运用$别称

  为了预防jQuery的小名$已经被让渡出去,
能够在插件的功用域钦点义这一个火速格局, 使用即时调用的函数表明式(IIFE,
Immediately Invoked Function Expression)

1
2
3
(function($){
    //code here
})(jQuery);

二. 添加新的大局函数  

  所谓全局函数, 实际上正是jQuery对象的方式,
但从推行的角度上看,它们是放在jQuery命名空间内部的函数. 比如图片 3图片 4图片 5图片 6图片 7图片 8图片 9图片 10.ajax(),.each(),
$.map(). 

  给jQuery添加新的大局方法正是假如在首先节中的IIFE内部定义三个主意,
在函数外部就足以调用了. 因为它已经是jQuery的对象方法了. 比如:  

图片 11

/******************************************************************************
  Our plugin code comes first in this document. Normally, plugins would
  appear in separate files named jquery.plugin-name.js, but for our examples
  it's convenient to place this plugin code in the same JavaScript file as
  the code that calls it.
******************************************************************************/

/******************************************************************************
  $.sum()
  Return the total of the numeric values in an array/object.
******************************************************************************/
(function($) {
  $.sum = function(array) {
    var total = 0;

    $.each(array, function(index, value) {
      value = $.trim(value);
      value = parseFloat(value) || 0;

      total += value;
    });
    return total;
  };

  $.average = function(array) {
    if ($.isArray(array)) {
      return $.sum(array) / array.length;
    }
    return '';
  };
})(jQuery);


/******************************************************************************
  End plugin code; begin custom script code.
******************************************************************************/
$(document).ready(function() {
  var $inventory = $('#inventory tbody');
  var quantities = $inventory.find('td:nth-child(2)')
    .map(function(index, qty) {
      return $(qty).text();
    }).get();

  var sum = $.sum(quantities);
  $('#sum').find('td:nth-child(2)').text(sum);
});

图片 12

 

  其它, 还是能使用$.extend()函数通过另1种语法定义全局函数:

图片 13

(function($) {
  $.extend({
    sum: function(array) {
      var total = 0;

      $.each(array, function(index, value) {
        value = $.trim(value);
        value = parseFloat(value) || 0;

        total += value;
      });
      return total;
    },
    average: function(array) {
      if ($.isArray(array)) {
        return $.sum(array) / array.length;
      }
      return '';
    }
  });
})(jQuery);

图片 14

 

  为了幸免争辨, 可以把属于一个插件的全局对象都打包到贰个目的中.
固然用取名空间隔离函数 .比如:

图片 15

(function($) {
  $.mathUtils = {
    sum: function(array) {
      var total = 0;

      $.each(array, function(index, value) {
        value = $.trim(value);
        value = parseFloat(value) || 0;

        total += value;
      });
      return total;
    },
    average: function(array) {
      if ($.isArray(array)) {
        return $.mathUtils.sum(array) / array.length;
      }
      return '';
    }
  };
})(jQuery);

图片 16

  调用时索要:

  var sum = $.mathUtils.sum(quantities);
  var average = $.mathUtils.average(prices);

 

叁. 添加jQuery对象方法

  1. 扩展jQuery.fn对象. jQuery.fn是jQuery.prototype的别名
  2. 因为jQuery的选料符表明式恐怕会相称零,三个或八个因素,
    全部在设计插件时应该思考隐式迭代
    图片 17

    (function($) {
      $.fn.swapClass = function(class1, class2) {
        this.each(function() {
          var $element = $(this);
          if ($element.hasClass(class1)) {
            $element.removeClass(class1).addClass(class2);
          }
          else if ($element.hasClass(class2)) {
            $element.removeClass(class2).addClass(class1);
          }
        });
      };
    })(jQuery);
    

    图片 18

  3. 办法连缀. 因而要在装有插件方法中回到八个jQuery对象,
    除非相应的措施显然用于获取分歧的新闻.
    重回的jQuery对象平日正是this所引述的对象.
    假诺使用.each()迭代遍历this, 那么能够只回去迭代的结果. 比如:

    图片 19

    (function($) {
      $.fn.swapClass = function(class1, class2) {
        return this.each(function() {
          var $element = $(this);
          if ($element.hasClass(class1)) {
            $element.removeClass(class1).addClass(class2);
          }
          else if ($element.hasClass(class2)) {
            $element.removeClass(class2).addClass(class1);
          }
        });
      };
    })(jQuery);
    

    图片 20

     那样, 就足以在插件方法上衔接内置方法了

四. 提供灵活的章程参数

  • 伏贴的时候, 利用回调函数协助灵活地修改插件行为, 从而不必修改插件代码
  • 假设插件是为了实现用户界面成分, 只怕供给跟踪成分的事态, 使用jQuery
    UI部件工厂来创建

 

附录A JavaScript闭包

一. 内部函数

  所谓内部函数, 正是概念在另1个函数中的函数. 可以制止污染命名空间. 

  而JS中的内部函数能够规避定义它们的外部函数. 逃脱的点子有七种:

  1. 能够给在这之中函数钦命给三个全局变量

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var globalVar;
      
    function outerFn() {
      console.log('Outer function');
      function innerFn() {
        console.log('Inner function');
      }
      globalVar = innerFn;
    }
    console.log('outerFn():');
    outerFn();
    console.log('globalVar():');
    globalVar();
  2. 能够透过在父函数中返回值来赢得在那之中等高校函授数的引用:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function outerFn() {
      console.log('Outer function');
      function innerFn() {
        console.log('Inner function');
      }
      return innerFn;
    }
    console.log('var fnRef = outerFn():');
    var fnRef = outerFn();  //Outer function
    console.log('fnRef():');
    fnRef();//Inner function

  当个中等高校函授数在概念它的效用域的外部被引出时,
就创办了该内部函数的2个闭包.

  那种景象下, 大家称既不是里面函数局地变量,
也不是其参数的变量为私自变量
,
外表函数的调用环境为封闭闭包的条件. 从本质准将,
假设内部函数引用了位于外部函数中的变量, 约等于授权该变量可以被推迟使用.
由此, 当外部函数引用完结后, 这么些变量的内部存款和储蓄器不会被释放,
因为闭包依旧须求利用它们.

贰. 在jQuery中开创闭包

  依旧要注意以下那几个标题:

1
2
3
4
5
6
7
8
9
$(document).ready(function($) {
    // Stuff to do as soon as the DOM is ready;
    for(var i=0; i<5; i++){
        $('<div>Print ' + i + '</div>')
        .click(function(){
            console.log(i);
        }).insertBefore('body');
    }
});

  那里单击在这之中一项并不晤面到相应的数码输出, 而是都会来得数值五.
 即即便在绑定程序时i的值每一趟都不等同,
每一个click处理程序最终引用的i都相同.
都极度单击事件其实发生时i的最终值(五).

  要解决那么些标题, 方法有:

  1. #### 使用jQuery的$.each()函数来代替for循环:

    图片 21

        $(document).ready(function() {
            // Stuff to do as soon as the DOM is ready;
            $.each([0,1,2,3,4], function(index, value) {
                $('<div>Print ' + value + '</div>')
                .click(function(){
                    console.log(value);
                }).insertBefore('body');
            });
        });
    

    图片 22

     那是因为函数的参数近似于在函数中定义的变量,
    所以每趟循环的value值实际上都以见仁见智的变量. 结果,
    每种click处理程序都指向1个见仁见智的value变量,
    由此每一遍单击输出的值会与成分的标签文本相称.

  2. #### 在for循环内部, 能够定义并实施七个新函数: 固然用即时调用的函数表明式(IIFE)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $(document).ready(function() {
        for(var i=0; i<5; i++){
            (function(value){
                $('<div>Print '+ value + '</div>')
                .click(function(){
                    console.log(value);
                }).insertBefore('body');
            })(i);
        }
    });
  3. #### 使用jQuery的事件系统, 利用.on()方法.

    该情势接受三个对象参数, 该参数以event.data的格局传播事件处理函数中

    图片 23

        $(document).ready(function() {
            for(var i=0; i<5; i++){
                $('<div>Print '+ i + '</div>')
                .on('click', {value: i}, function(event){
                        console.log(event.data.value);
                }).insertBefore('body');
            }
        });
    

    图片 24

     因为event是函数的参数, 每一回调用处理程序时它都以多个独自的实例,
    而不是在拥有调用中国共产党享的一个值. 

三. 回复内部存款和储蓄器走漏的高危害

一) 幸免不测的引用循环

  闭包只怕会促成在不经意间创制引用u型拟合. 比如:

1
2
3
4
5
6
7
8
function outerFn() {
  var outerVar = {};
  function innerFn() {
    console.log(outerVar);
  }
  outerVar.fn = innerFn;
  return innerFn;
};

  那里innerFn()创立了一个引用outerVar的闭包,
而outerVar又引述了innerFn()

  而更加暗藏的动静是:

1
2
3
4
5
6
7
8
function outerFn() {
  var outerVar = {};
  function innerFn() {
    <strong>console.log('hello');</strong>
  }
  outerVar.fn = innerFn;
  return innerFn;
};

  那里纵然innerFn()未有引用outerVar. 不过照旧未有断开循环.
就算innerFn()不再引用outerVar, outerVar也依旧位居innerFn()的封闭环境中.
由于闭包的原由, 位于outerFn()中的全体变量都隐含地被innerFn()所引用.
因而, 闭包会使意外省成立那几个引用循环变得不难.

2) 控制DOM与JavaScript的循环

  以上那种境况见惯司空简单处理,
因为js能够检验到这一个景况并在它们孤马上将其清除.

  旧版本IE中留存的一种难以处理的引用循环难题.
当一个巡回中同时含有DOM成分和常规JS成分时,
IE无法释放其余贰个指标—-因为这两类对象是由不一样的内部存款和储蓄器管理程序负责管理的.
即唯有关闭浏览器, 不然那种循环在IE中永远得不到释放. 比如:

1
2
3
4
5
6
7
$(document).ready(function() {
  var button = document.getElementById('button-1');
  button.onclick = function() {
    console.log('hello');
    return false;
  };
});

  当内定单击事件处理程序时,
就创办了一个在其查封的条件中隐含button变量的闭包. 而且,
将来的button也蕴藏三个针对闭包(onclick属性本人)的引用. 那样,
就招致了在IE中不怕距离当前页面也不会放出那些循环.

  为了释放内部存款和储蓄器, 就供给断开循环引用, 例如在闭馆窗口关删除onclick属性.
别的, 能够向如下重写代码来幸免:

1
2
3
4
5
6
7
8
function hello() {
  console.log('hello');
  return false;
}
$(document).ready(function() {
  var button = document.getElementById('button-1');
  button.onclick = hello;
});

  那样,因为hello函数不再包蕴button, 引用就成了一只的(从button到hello),
不存在的循环, 就不会招致内存走漏了.

三) 用jQuery消除引用循环

1
2
3
4
5
6
7
$(document).ready(function() {
  var $button = $('#button-1');
  $button.click(function(event) {
    event.preventDefault();
    console.log('hello');
  });
});

  固然此时还是会成立3个闭包, 并且也会导致同后面壹样的轮回,
但那里的代码却不会使IE发生内部存款和储蓄器走漏.
由于jQuery思考到了内部存款和储蓄器走漏的潜在风险,
所以它会手动释放本人钦赐的有所事件处理程序. 

  另一种制止走漏的工具—–使用.data()措施能够像使用扩大属性1样,
将音讯附加到DOM成分. 由于此处的数码毫无平素保存在扩大属性中,
因而永远也不会结合引用循环.

 

 http://www.cnblogs.com/haoyijing/p/5815647.html

相关文章