Catatan Pembaharuan JQuery

Versi 1.0

Daftar API untuk JQuery versi 1.0:

1. .add()
2. .addClass()
3. .after()
4. .ajaxComplete()
5. .ajaxError()
6. .ajaxSend()
7. .ajaxStart()
8. .ajaxStop()
9. .ajaxSuccess()
10. .animate()
11. .append()
12. .appendTo()
13. .attr()
14. .before()
15. .bind()
16. .blur()
17. .change()
18. .children()
19. .click()
20. .clone()
21. .css()
22. .dblclick()
23. .each()
24. .empty()
25. .end()
26. .error()
27. event.preventDefault()
28. event.stopPropagation()
29. event.target
30. event.type
31. .fadeIn()
32. .fadeOut()
33. .fadeTo()
34. .filter()
35. .find()
36. .focus()
37. .get()
38. .height()
39. .hide()
40. .hover()
41. .html()
42. .index()
43. .insertAfter()
44. .insertBefore()
45. .is()
46. jQuery.ajax()
47. jQuery.boxModel
48. jQuery.browser
49. jQuery.each()
50. jQuery.extend()
51. jQuery.get()
52. jQuery.getJSON()
53. jQuery.getScript()
54. jQuery.grep()
55. jQuery.map()
56. jQuery.merge()
57. jQuery.noConflict()
58. jQuery.post()
59. jQuery.trim()
60. .keydown()
61. .keypress()
62. .keyup()
63. .length
64. .load() (AJAX)
65. .load() (Event)
66. .mousedown()
67. .mouseenter()
68. .mouseleave()
69. .mousemove()
70. .mouseout()
71. .mouseover()
72. .mouseup()
73. .next()
74. .not()
75. .parent()
76. .parents()
77. .prepend()
78. .prependTo()
79. .prev()
80. .ready()
81. .pushStack()
82. .remove()
83. .removeAttr()
84. .removeClass()
85. .resize()
86. .scroll()
87. .select()
88. .serialize()
89. .show()
90. .siblings()
91. .size()
92. .slideDown()
93. .slideToggle()
94. .slideUp()
95. .submit()
96. .text()
97. .toggle() (Efek)
98. .toggle() (Event)
99. .toggleClass()
100. .trigger()
101. .unbind()
102. .unload()
103. .val()
104. .width()
105. .wrap()

Daftar API untuk selektor:

1. * All Selector
2. [name|="value"] Attribute Contains Prefix Selector
3. [name*="value"] Attribute Contains Selector
4. [name~="value"] Attribute Contains Word Selector
5. [name$="value"] Attribute Ends With Selector
6. [name="value"] Attribute Equals Selector
7. [name!="value"] Attribute Not Equal Selector
8. [name^="value"] Attribute Starts With Selector
9. :button
10. :checkbox
11. :checked
12. parent > child Child Selector
13. .class Class Selector
14. ancestor descendant Descendant Selector
15. :disabled
16. tag Element Selector
17. :empty
18. :enabled
19. :eq()
20. :even
21. :file
22. :first
23. :gt()
24. [attribute] Has Attribute Selector
25. :hidden
26. #id ID Selector
27. :image
28. :input
29. :last
30. :lt()
31. [name="value"][name2="value2"] Multiple Attribute Selector
32. selector1, selector2, selectorN Multiple Selector
33. prev + next Next Adjacent Selector
34. prev ~ siblings Next Siblings Selector
35. :not()
36. :odd
37. :parent
38. :password
39. :radio
40. :reset
41. :selected
42. :submit
43. :text
44. :visible

Versi 1.0.4

Baru:

1. event.metaKey
2. event.pageX
3. event.pageY
4. jQuery.globalEval()

Versi 1.1

Baru:

1. event.data
2. jQuery.ajaxSetup()
3. .one()

Memperbaharui .attr(), dari sebelumnya yang hanya berfungsi untuk mendapatkan nilai atribut elemen menjadi berfungsi untuk mendapatkan atribut dan juga mengeset atribut dalam berbagai cara seperti ini:

// Konsep awal
var src = $('img').attr('src');

// Mengeset nilai atribut
$('img').attr('src', '/path/to/image.jpg');

// Mengeset beberapa atribut sekaligus
$('img').attr({
    alt: 'My profile photo',
    src: '/path/to/image.jpg'
});

// Concat/menyisipkan nilai atribut baru tanpa menghilangkan nilai atribut awal
$('img').attr('id', function(i, value) {
    return value + '-main';
});

Versi 1.1.2

Baru:

1. .eq()

Versi 1.1.3

Baru:

1. jQuery.browser ⇒ jQuery.browser.version
2. event.which
3. jQuery.unique()

Versi 1.1.4

Baru:

1. event.relatedTarget
2. jQuery.isXMLDoc()
3. .slice()
4. :contains()
5. :first-child
6. :last-child
7. :has()
8. :nth-child()
9. :only-child

Versi 1.2

Baru:

1. .andSelf()
2. .contents()
3. .dequeue()
4. .hasClass()
5. .map()
6. .nextAll()
7. .offset()
8. .position()
9. .prevAll()
10. .queue()
11. .replaceAll()
12. .replaceWith()
13. .serializeArray()
14. .stop()
15. .triggerHandler()
16. .wrapAll()
17. .wrapInner()
18. :animated
19. :header
20. jQuery.inArray()
21. jQuery.isFunction()
22. jQuery.makeArray()
23. jQuery.param()

Versi 1.2.3

Baru:

1. .data()
2. .removeData()
3. jQuery.data()
4. jQuery.removeData()

Versi 1.2.6

Baru:

1. event.timeStamp
2. .innerHeight()
3. .innerWidth()
4. .outerHeight()
5. .outerWidth()
6. .scrollLeft()
7. .scrollTop()

Versi 1.3

Baru:

1. .closest()
2. .context
3. .die()
4. event.currentTarget
5. event.isDefaultPrevented()
6. event.isImmediatePropagationStopped()
7. event.isPropagationStopped()
8. event.result
9. event.stopImmediatePropagation()
10. jQuery.dequeue()
11. jQuery.fx.off
12. jQuery.isArray()
13. jQuery.queue()
14. jQuery.support
15. .live()
16. .pushStack()
17. .toggleClass()

Menerapkan .toggle() tanpa parameter durasi dan/atau callback akan menghasilkan sikap tampil dan menghilang, tanpa efek:

// Dasar
$('div').click(function() {
    $(this).toggle(600);
});

// Penerapan seperti ini bisa dilakukan di JQuery 1.3
$('div').click(function() {
    $(this).toggle(); // Lebih baik dibandingkan dengan `$(this).toggle(0)`
});

Deprecated/Usang:

1. jQuery.boxModel
2. jQuery.browser

Versi 1.4

Baru:

1. .clearQueue()
2. .delay()
3. .detach()
4. .first()
5. .focusin()
6. .focusout()
7. .has()
8. jQuery() (pembaharuan kecil)
9. jQuery.contains()
10. jQuery.isEmptyObject()
11. jQuery.isPlainObject()
12. jQuery.noop()
13. jQuery.proxy()
14. .last()
15. .nextUntil()
16. .not()
17. .parentsUntil()
18. .prevUntil()
19. .toArray()
20. .unwrap()

Pembaharuan .addClass() dan .removeClass(), yang kini bisa menerima fungsi anonim untuk keperluan bypass/jalan pintas seperti ini:

// KASUS: Menambahkan kelas dengan akhiran berupa indeks elemen

// Cara panjang: Menggabungkan `.each()` dengan `.addClass()`
$('ul li').each(function(index) {
    $(this).addClass('item-' + index);
});

// Jalan pintas dengan fungsi anonim
$('ul li').addClass(function(index) {
    return 'item-' + index;
});

// Contoh untuk `.removeClass()`
$('ul li').removeClass(function(index) {
    return $(this).prev().attr('class')
});

Pembaharuan .before(), .after(), .css(), .filter(), .html(), .text(), dan beberapa fungsi yang sudah ada yang kini bisa menerima fungsi anonim untuk keperluan jalan pintas. Selengkapnya baca di dokumentasi. Berikut ini adalah beberapa contoh:

// `.before()`
$('p').before(function(index) {
    return '<div class="new-class-' + index + '"></div>';
});

// `.after()`
$('p').after(function(index) {
    return '<div class="new-class-' + index + '"></div>';
});

// `.css()`
$('div').css("border", function(i) {
    return (i + 1) + 'px solid black';
});

$('div').css({
    "border": function(index) {
        return (index + 1) + 'px solid black'
    },
    "background-color": function(index) {
        return '#' + (index < 7 ? index : "a") + '00'
    }
});

// `.filter()`
$('li').filter(function() {
  return $('strong', this).length == 1;
}).css('background-color', 'red');

// dst...

Pembaharuan .offset(), yang kini bisa menerima argumen koordinat untuk mengeset posisi elemen. Sebelumnya hanya berfungsi untuk mendapatkan posisi elemen dari dokumen:

// Sebelum 1.4
var top = $('div').offset().top;
var left = $('div').offset().left;

// 1.4
$('div').offset({
    top: 30,
    left: 200
});

Versi 1.4.1

Baru:

1. jQuery.error()
2. jQuery.parseJSON()

Dan beberapa pembaharuan kecil.

Versi 1.4.2

Baru:

1. .delegate()
2. .undelegate()

Versi 1.4.3

Baru:

1. event.namespace
2. jQuery.cssHooks
3. jQuery.fx.interval
4. jQuery.isWindow()
5. jQuery.now()
6. jQuery.type()

Memungkinkan menerapkan easing pada .show(), .hide(), .toggle(), .slideDown(), .slideUp(), .slideToggle(), .fadeIn(), .fadeOut() dan .fadeTo()

// Sebelum 1.4.3
$('div').slideDown(400, function() {
    alert("Complete!");
});

// 1.4.3
$('div').slideDown(400, "swing", function() {
    alert("Complete!");
});

Versi 1.4.4

Baru:

1. .fadeToggle()

Versi 1.5

1. deferred.done()
2. deferred.fail()
3. deferred.isRejected()
4. deferred.isResolved()
5. deferred.promise()
6. deferred.reject()
7. deferred.rejectWith()
8. deferred.resolve()
9. deferred.resolveWith()
10. deferred.then()
11. jQuery.ajaxPrefilter()
12. jQuery.ajaxTransport()
13. jQuery.Deferred()
14. jQuery.hasData()
15. jQuery.parseXML()
16. jQuery.sub()
17. jQuery.when()

Versi 1.5.1

Pembaharuan jQuery.ajax() dan jQuery.support

Versi 1.6

Baru:

1. deferred.always()
2. deferred.pipe()
3. jQuery.holdReady()
4. jQuery.map()
5. .promise()
6. .prop()
7. .removeProp()
8. :focus

Pembaharuan .is() yang kini bisa menerima fungsi anonim untuk melakukan pengecekan yang lebih kompleks dibandingkan dengan pengecekan sebelumnya yang hanya berdasarkan selektor:

// Sebelum 1.6
if ($('#foo').is('input')) {
    $('#foo').val("");
} else {
    $('#foo').html("");
}

// 1.6
var fooHasChildren = $('#foo').is(function() {
    return $(this).children().length;
});
if (fooHasChildren) {
    $('#foo').children().addClass('item');
} else {
    $('#foo').addClass('empty');
}

Versi 1.7

Baru:

1. callbacks.add()
2. callbacks.disable()
3. callbacks.disabled()
4. callbacks.empty()
5. callbacks.fire()
6. callbacks.fired()
7. callbacks.fireWith()
8. callbacks.has()
9. callbacks.lock()
10. callbacks.locked()
11. callbacks.remove()
12. deferred.notify()
13. deferred.notifyWith()
14. deferred.progress()
15. deferred.state()
16. event.delegateTarget
17. jQuery.Callbacks()
18. jQuery.isNumeric()
19. .off()
20. .on()

Pembaharuan .removeAttr(), yang kini bisa menghapus beberapa atribut sekaligus dalam satu kali eksekusi dengan cara menuliskan beberapa nama atribut terpisah oleh spasi:

// Sebelum 1.7
$('img').removeAttr('title').removeAttr('src').removeAttr('alt');
		
// 1.7
$('img').removeAttr('title src alt');

Deprecated/Usang:

1. deferred.isRejected() digantikan oleh deferred.state()
2. deferred.isResolved() digantikan oleh deferred.state()
3. .die() digantikan oleh .off()
4. jQuery.sub()
5. .live() digantikan oleh konteks yang lebih kecil untuk performa yang lebih baik, dengan JQuery .on()
6. .selector

// Usang
$('a').live("click", function() {
    alert('OK!');
});

// Baru
$(document.body).on("click", "a", function() {
    alert('OK!');
});

// Disarankan, jika ada induk statis yang lebih dekat, gunakan induk itu sebagai konteks
// Mirip dengan `$('#container').delegate("a", "click", function() {})`
$('#container').on("click", "a", function() {
    alert('OK!');
});

Versi 1.8

Baru:

1. .addBack()
2. jQuery.parseHTML()

Pembaharuan selektor :eq() yag kini bisa menyeleksi urutan elemen melalui alur mundur dengan menuliskan nilai berupa angka negatif.

Deprecated/Usang:

1. .andSelf() digantikan oleh .addBack()
2. deferred.pipe()
3. .error()
4. jQuery.error()
5. .load() (Event)
6. .size() digantikan oleh kembarannya .length
7. .toggle() (Event)
8. .unload()

Versi 1.9

Baru:

1. .finish()
2. :first-of-type
3. :lang
4. :last-of-type
5. :nth-last-child()
6. :nth-last-of-type()
7. :nth-of-type()
8. :only-of-type
9. :root
10. :target

Pembaharuan untuk .css(), yang sebelumnya hanya bisa mendapatkan satu nilai properti saja setiap kali eksekusi, sekarang kita bisa menggunakan array untuk mengelompokkan properti-properti CSS yang ingin didapatkan, sedangkan hasilnya nanti akan berubah menjadi objek:

// Sebelum 1.9
var width = $('div').css('width');
var height = $('div').css('height');
var paddTop = $('div').css('padding-top');

// 1.9
var props = $('div').css(["width", "height", "padding-top"]); // Hasil => `props = {width:N,height:N,padding-top:N}`
var width = props.width;
var height = props.height;
var paddTop = props["padding-top"];

Disingkirkan:

1. .toggle() (Event)
2. jQuery.browser()
3. .live()
4. .die()
5. jQuery.sub()