iklan space 728x90px
Home » , , » Catatan Pembaharuan JQuery

Catatan Pembaharuan JQuery

Posted by Unknown Posted on 06.26 with No comments

Baru: Fitur baru ditambahkan ke dalam perpustakaan

Deprecated/Usang: Fitur sudah usang, dan akan disingkirkan suatu saat nanti. Alasan sebuah fitur/API menjadi usang biasanya adalah karena beberapa fitur baru yang ditambahkan memiliki kemampuan yang lebih baik dibandingkan dengan fitur yang lama sehingga disarankan untuk beralih ke metode yang baru dan melupakan metode yang lama. Selain itu, perbaikan struktur perpustakaan juga menjadi salah satu penyebab.

Disingkirkan: Fitur benar-benar disingkirkan dari perpustakaan. Anda sudah tidak bisa lagi memakai fitur-fitur yang sudah disingkirkan jika Anda menggunakan JQuery pada versi tersebut.

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()

Referensi: API JQuery

Label: , ,

0 komentar:

Posting Komentar