jquery

jquery.md

unbind

$('button')
.bind('click',clickListener)
.bind('click',otherListener);

// unbind all click listeners
$('button').unbind('click');

// unbind only the specified listener
$('button').unbind('click'.clickListener);

shorthand syntax

• .submit()
• .change()
• .focus()
• .focusin()
• .blur()
• .focusout()
• .mouseover()
• .mouseout()
• .mouseenter()
• .mouseleave()
• .mousemove()
• .dbclick()
• .keydown()
• .keypress()
• .keyup()
• .scroll()
• .resize()
• .error()

Event Delegation

$('button').live('click',function(event){
// button got clicked
});

// unbind click on button
$('button').die('click);

// !!! they don't work as expected in some situations
// they are deprecated as of jQuery 1.7
$('#wrapper').find('a, span').live('click',fn);

Quirky

'' == 0   // true
0 == '0'  // true
'' == '0' // false
false == 'false' // false
false == '0' // true
false == undefined // false
false == null  // false
null == undefined  // true
typeof null // "object"
typeof undefined // "undefined"
'' === 0   // false
0 === '0'  // false
'' === '0' // false
false === 'false' // false
false === '0' // false
false === undefined // false
false === null  // false
null === undefined  // false

functions

function multiple(n) {
  function f(x) {
    return x * n;
  }
  return f;
}
var triple = multiple(3);
var quadruple = multiple(4);
console.log( triple(5) ); // 15
console.log( quadruple(5) ); // 20
console.log( multiple(4)(5) ); // 20

selectors

.eq(), .slice(0, n), .slice(n)
.first(), .last()
input[type="checkbox"], input[type="radio"],
input[type="password"], input[type="text"]

jquery

$('#nav a').each(function(index) {
  // DOM
  var thisId = this.id; // good
  var otherId = $(this).prop('id'); // unnecessary
  // jQuery
  var thisHref = this.href; // unreliable
  var otherHref = $(this).attr('href'); // better
  // both
  $(this).prop('id', this.id + index).addClass('indexed');
});

Anoymous Functions

var foo = function() { /* do something */ };
$('div.reckless').slideToggle(300, function() {
/* do something */
});
$('div.endangerment').slideToggle(150, foo);

event object example

$('button').on('mouseenter mouseleave',function(event){
    var isEntered = event.type = 'mouseenter';
    $('#something').toggleClass('active-related',isEntered);
    if(isEntered){
        //do one thing
    }else{
        // do another
    }
});

original event

var sideSwipe = {
    touchstart: function(event,firstTouch){},
    touchmove: function(event,firstTouch){},
    touchend: function(event){}
};
if(document.createTouch){
    $('body').bind('touchstart touchmove touchend',function(event){
        event = event.originalEvent;
        var touch = event.targetTouches[0];
        sideSwipe[event.type](event,touch);
    });
}

handler functions

var myEvents = {
    focus: function(){
        alert('focused!');
    },
    blur: function(){
        alert('blurry!');
    }
};
$('input').on(myEvents);

on

推荐使用 on

$(document).on('start.game',myGameStartFn);

Element Content

• .html()

  execute embedded javascript when setting

• .text()

  escapes html entites(<,>,&)

• .val()

  get and set form element values

• .attr()

$('input').attr({
    title: 'this is my title',
    name: 'some_name'
});
$('input').attr('title','this is my title');

• .css()

$('a').css({
    backgroudColor: 'red',
    'margin-top': '10px'
});

• .width()

$('#mydiv').offset().left

ajax

$.ajax({
    url: '/url/to/serverResource',
    data: {
        key1: 'value1',
        key2: 'value2'
    }
});

ajax form

$('#myform').submit(function(event){
    event.preventDefault();
    var formUrl = $(this).attr('action'),
        formData = $(this).serialize();
    $.ajax({
        url: formUrl,
        data: formData
    });
});

ajax response

$.ajax({
    url: '/url/to/serverResource',
    success: function(response,status,xhr){
    },
    error: function(xhr,status,errorThrown){
    },
    complete: function(xhr,status){
    }
});

Caching Ajax Responses

(function(){
    var api = {},$response = $('#response');
    $('#ajaxForm').bind('submit',function(event){
        event.preventDefault();
        var search = $('#title').val();
        $response.empty().addClass('loading');
        if(!api[search]){
            api[search]=$.ajax({
                url: 'http://api.jquery.com/jsonp/',
                dataType: 'jsonp',
                data:{
                    title: search
                },
                timeout: 15000
            });
        }
        api[search].done(successFn).fail(errorFn).always(completeFn);
    }
})():

function errorFn(xhr){
    if(xhr.status == '402'){
        setTimeout(function(){
            $('#myform').trigger('submit');
        },500);
    }
}
function success(json){
    if( json && json.error){
        return errorFn(json.error);
    }
}

Callback

$('div.toRemove).slideUp('slow',function(){
    $(this).remove();
});
$('div.move).slideDown(250).promise().done(function(){
    alert('Fininshed!');
});

Animate

$('#badges li').hover(function(){
    $(this).stop(true,true)
    .animate({bottom:"30px"},200);
},function(){
    $(this).stop(true,false)
    .animate({bottom:"8px"},500};
});

function

二者等价

$(function(){
    $('li:first-child').addClass('emphasis');
});
$(document).ready(function(){
    $('li:first-child').addClass('emphasis');
});

selector

<ul class="emphasis">
    <li>item</li>
    <li>item 2 </li>
    <li>
        <ul>
            <li> hello from the nest.</li>
        </ul>
    </li>
</ul>

ul.emphasis li {
// 表示所有li标签
}
ul.emphasis > li {
// 表示 父元素直接的 li
}

// 表示直接的子元素
$('ul.emphasis').children('li').css('color','green');
// 表示所有的子元素
$('ul.emphasis').find('li').css('color','green');
// 第一个子元素
$('ul.emphasis').find('li:nth-child(1)').css('color','green');
$('ul.emphasis').children('li:first').css('color','green');
$('ul.emphasis').children('li').first().css('color','green');
$('ul.emphasis').children('li').eq(0).css('color','green');
$('ul.emphasis').children('li').eq(1).prev().css('color','green');
// 第二个元素
$('ul.emphasis').children('li:nth-child(2)').text('added with jQuery');
// 直接父元素
$('li').parent('ul').removeClass('emphasis');
// 所有父元素
$('li').parents('.container').removeClass('emphasis');
// closest 与 parents 区别
// parents 返回所有的
console.log($('ul').parents('.container'));
// closest 有多个的话，返回最近的一个
console.log($('ul').closest('.container'));

Defered

• Deferred.done(callback) 成功时执行
• Deferred.fail(callback) 失败时执行
• Deferred.porgress(callback) 还在跑,成功用 notify 通知
• Deferred.always(callback) 成功或失败都会执行
• Deferred.when(callback) 呼叫前先执行

var d1 = $.Deferred(),d2 = $.Deferred(),
    w = $.when(d1,d2);
w.done(function(msg){
console.log(msg);
});

d1.resolve("Part one");
d2.resolve("Part two");

var myVar;
var setVal = function() {
    var deferred  = $.Deferred();
    setTimeout(function(){
        myVar = 'my value';
        deferred.resolve();
    },2000);

    // 返回一个只供查询的对象
    return deferred.promise();
};
setVal().always(function(){
    console.log('all done:' + myVar);
});

Ajax Deferred

$.searchTwitter = function( search ) {
    return $.ajax({
        url: 'http://search.twitter.com/search.json',
        data: { q: search },
        dataType: 'jsonp'
    }).promise();
};

var outer = $.searchTwitter('cats');

outer.then(function( results ) {
    console.log(results);
});

//...

outer.then(function( results ) {
    console.log(results);
});

function getTweets( search ) {
    return $.ajax({
        url: 'http://search.twitter.com/search.json',
        data: { q: search },
        dataType: 'jsonp'
    });
};
$.when( getTweets('dogs'),getTweets('cats') ).done(function(results1,results2){
    console.log(results1);
    console.log(results2);
});