jQuery��UI�R���|�[�l���g�̍������w�ԑO�ɁAjQuery�v���O�C���̍����Ǝd�g�݂���������Ƃ������悤�B
�@���̘A�ڂŎ�舵���Ă���jQuery��JavaScript�̃��C�u�����G���W���ł��B
�@���̒��ɂ͎��ɂ��܂��܂ȃv���O���~���O���ꂪ����܂��B�����嗬�ƂȂ��Ă�����̂̑唼�́A�I�u�W�F�N�g�w���v���O���~���O����ƌĂ�Ă�����̂ł��B
�@��\�I�ȗ��������ƁAJava�AC#�ARuby�APython�AObjective-C�Ƃ������Ƃ���ł��傤�B�����̌���̓N���X�x�[�X�Ƃ����J�e�S���ɑ����Ă��܂��B�N���X�x�[�X�̓A�v���P�[�V�����ɂ����邳�܂��܂ȋ@�\���N���X�ƌĂ��P�ʂŃL�b�`���ƕ������邱�ƂŁA�v���O�����S�̂��L���C�ɐ������ڂł���Ƃ��������������Ă��܂��B��K�͂ȊJ���ɂȂ�قǁA���̓������З͂����邽�߁A��ɋ������v���O���~���O���ꂪ�ϋɓI�ɍ̗p�����v����1�ƂȂ��Ă���킯�ł��ˁB
�@�����JavaScript�ł����A�I�u�W�F�N�g�w���v���O���~���O����ł͂�����̂́A������̓N���X�x�[�X�ł͂Ȃ��v���g�^�C�v�x�[�X�Ƃ����J�e�S���ɑ����Ă��܂��B�ڂ�������͏Ȃ��܂����A�v���g�^�C�v�x�[�X�̓N���X�̂悤�Ȏd�g�݂������Ă��Ȃ����߁A�@�\���ƂɃL�b�`���������Đ������ڂ��邱�Ƃ��ł��܂���B��������l�����̒m�b�Ɠw�͂ɂ���Ă���炵������������m�E�n�E�͂���܂����A�����܂��[���I�Ȉ�����Ă��܂���B
�@���Ƃ��ƁAJavaScript��Web�u���E�U��œ��삷��y�ʂȃX�N���v�g����Ƃ��Đ��ɏo�Ă������߁A�����Ɍ�����悤�ȑ�K�͊J���ɗp�����邱�Ƃ͑z�肳��Ă��܂���ł����B
�@����������͕ς���āAWeb�u���E�U��Ń��b�`�ȃA�v���P�[�V����������邱�Ƃ��g�����h�ƂȂ������A���̂���JavaScript�ł̑�K�͊J���������Ă��܂��B�v���O���}�����͂ǂ��ɂ����� JavaScript�ł������ǂ��J�����i�߂���悤�ɃN���X�x�[�X�̂悤�ȃA�[�L�e�N�`�����\�z�ł��Ȃ����Ǝ��s���낵�Ă��܂����B���̓����͍����Ȃ������ŁA����Љ��jQuery�v���O�C��������ȃA�[�L�e�N�`����1�ł��B
�@�����ƑO�u���������Ȃ��Ă��܂��܂����B����A���̘A�ڂł�jQuery�ł��܂��܂�UI�R���|�[�l���g�̍��������Љ�Ă����\��ł����A���̂��߂ɂ͂܂�jQuery�v���O�C���̍����ɂ��Ă�������Ɗw��ł����K�v������܂��B�d�g�݂����������Ă��܂�����قǓ�����̂ł�����܂��A��Ԃ̊|������̂ł�����܂���B
�@�ȉ��̊���p�ӂ��܂��傤�B
�@����̃T���v���t�@�C����wakamsha/learning-jqueryplugin - GitHub����_�E�����[�h�ł��܂��B�K�v�ɉ����Ă��Q�Ƃ��������B
�@HTML�t�@�C���ɂ�jQuery�t�@�C����ǂݍ��ލۂ́A�ȉ��̃R�[�h�̂悤�ɃI�t�B�V�����T�C�g��CDN�𗘗p���܂��B
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
�@�t�@�C�����̂��̂ڃ��[�J�����Ƀ_�E�����[�h���Ă���肠��܂��A�Ǘ�����t�@�C����������̂���ԂȂ̂ŁA�l�b�g���[�N�ォ�璼�ړǂݍ��ޕ��𐄏����܂��B
�@�ׂ������͂���ǁA��{�I��jQuery�v���O�C���͈ȉ��̂悤�ȍ\���Ő��藧���Ă��܂��B
// �������őS�̂����b�v - (5) (function($) { // ���̃v���O�C���̖��O - (1) $.fn.name_space = function() { //�v�f��ޔ� - (2) var elements = this; // �v�f��1������ - (3) elements.each(function() { // ��̓I�ȏ����������ɋL�q }); // method chain�p�ɗv�f��Ԃ� - (4) return this; }; }) (jQuery);
�@�ł͎��ۂɃT���v�������Ȃ���ڂ������Ă����܂��傤�B
�@�܂��͍ŏ��K�͂Ȃ��̂���B��͂�ŏ��Ɏ��s����v���O�����Ƃ������ƂŁAK��R�ȗ��̓`���ɂ̂��Ƃ��� "Hello, World!" ����n�߂����Ǝv���܂��B�u�܂�����c�c�v�Ǝv����������������邩������܂��A�V�������̂��w�Ԃɂ́A"Hello, World!"�͂ƂĂ��d�v�Ȃ̂ł��B
�@�e�L�X�g�G�f�B�^�ŐV�K�t�@�C�����쐬���A"jquery.myplugin.js"�Ɩ��O��t���ĕۑ����܂��B��ʓI��jQuery�v���O�C���̃t�@�C�����ɂ�jquery.�Ƃ����ړ�����t���邱�ƂŁA���g�������Ƃ����ꂪjQuery�v���O�C���ł��邱�Ƃ�������悤�ɂ���̂������܂�ƂȂ��Ă��܂��i�����ׂẴv���O�C���������Ȃ��Ă���킯�ł͂Ȃ��A�����܂Ŋ��K�I�Ȃ��̂ł��j�B�t�@�C�����쐬�ł�����ȉ��̃R�[�h�������Ă݂܂��傤�B
// ���̃v���O�C���̖��O $.fn.myplugin = function() { //�v�f��ϐ��ɑޔ� var elements = this; // �v�f��1������ elements.each(function() { $('body').append('<p>Message: ' + this.innerHTML + '</p>'); }); // method chain�p�ɗv�f��Ԃ� return this; };
�@�ł͏�L�̃R�[�h��1��������Ă����܂��傤�B
�@jQuery�v���O�C�����J�X�^��jQuery���\�b�h�Ƃ���jQuery���g���������̂ł��B��`����ɂ�$.fn�I�u�W�F�N�g���v���O�C���̖��O�i�J�X�^�����\�b�h���j�Ŋg�����܂��B
�@this�ɂ͎w�肳�ꂽ�v�f���i�[����Ă��܂��B�����ϐ��ɑޔ����Ă����܂��i���K�{�Ƃ����킯�ł͂���܂���B���Ă��Ȃ��v���O�C������������܂��j�B
�@jQuery�I�u�W�F�N�g�͗v�f�������܂܂�Ă��邱�Ƃ��O��ƂȂ��Ă��܂��B���̂���elements�ɂ������̗v�f���܂܂�Ă���ƍl���A�����ɑ��Ă��ׂē��l�ɏ������Ȃ��Ă͂Ȃ�܂���B�Ƃ������Ƃ� each() ���g����elements�����[�v�Ɋ|���āA�v�f��1���������Ă��܂��B
�@jQuery�ɂ�Method chain�Ƃ���������A��������A�[�L�e�N�`��������܂��B
$('div') // div�v�f���擾 .text('new context') // �B����div�v�f�Ƀe�L�X�g��'new context'�ɂ��� .addClass('update') // �N���X��lj����� .show(); // div�v�f��\������
�@���̂悤�ȏ���������������̂́Ahide()��text()�Ƃ��������\�b�h�������̍Ō�ɑΏۂƂȂ����v�f���ۂ��ƕԂ��Ă��邩��ł��BjQuery�v���O�C���ŃJ�X�^�����\�b�h���`����ۂ��A�Ō�ɗv�f��Ԃ����Ƃŏ�����A���ichain�j�������܂��B�Ԃ����@�̓J�X�^�����\�b�h���̍Ō��return this;�Ə��������ł��B���܂蕶��Ƃ��Ċo���Ă����܂��傤�B
�@����ŏ��߂Ă�jQuery�v���O�C�����ł��܂����B�g������jQuery�f�t�H���g�̊��Ƃ܂����������ł��BHTML�t�@�C���ō쐬����jQuery�v���O�C���t�@�C����ǂݍ���A�ȉ��̂悤�ɐV�������\�b�h�����w�肷��Ύ��s����܂��B
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My plugin | Learning jQuery plugin</title> <style> p { color: #4c5069; font-size: 3em; } </style> </head> <body> <div>Hello, world!</div> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="js/jquery.myplugin.js"></script> <script> $('div').myplugin(); </script> </body> </html>
�@�J�X�^�����\�b�h�ɃI�v�V������n�����ƂŁA�v���O�C���̗��������{�ɂ����߂邱�Ƃ��ł��܂��B�I�v�V������n�����@�́Aoptions�I�u�W�F�N�g��ʂ��ăJ�X�^�����\�b�h�ɓn���̂���ʓI�ł��Boptions�I�u�W�F�N�g�ɂ��邱�ƂŁA�����̃p�����[�^���܂Ƃ߂ēn�����Ƃ��ł���悤�ɂȂ邩��ł��B
�@�v���O�C���ɃI�v�V�����@�\��lj�����ۂ́A�f�t�H���g�l���`����̂��Z�I���[�ł��B���̃f�t�H���g�l�ɑ��ăv���O�C���̃��[�U�[�͔C�ӂ̃I�v�V������n���āi���K�{�Ƃ����킯�ł͂���܂���B���Ă��Ȃ��v���O�C������������܂��j�㏑���ł���悤�ɂ��܂��B
�@jquery.shake.js�Ƃ����t�@�C����V�K�ɍ쐬���A�ȉ��̃R�[�h���L�q���܂��B
$.fn.shake = function(options) { // �v�f��ޔ� var elements = this; // �n���ꂽ�I�v�V�����ƃf�t�H���g���}�[�W���� var opts = $.extend({}, $.fn.shake.defaults, options); // �v�f��1������ elements.each(function() { for (var i=0; i<opts.shakes; i++) { $(this).animate({marginLeft: opts.x}, opts.speed) .animate({marginLeft: opts.x * -1}, opts.speed); } // �v�f�����ɖ߂� $(this).animate({marginLeft: 0}, opts.speed); }); // method chain�p�ɗv�f��Ԃ� return this; }; // shake�v���O�C���̃f�t�H���g�I�v�V���� $.fn.shake.defaults = { speed: 'slow', shakes: 2, x: 10 };
�@�f�t�H���g�I�v�V�����͏�L�̂悤�ɂ��Ē�`���܂��B����� extend() ���\�b�h���g���āA���[�U�[���w�肵���I�v�V�����ŏ㏑�����܂��Bextend() �̑������� {} �i��I�u�W�F�N�g�j���w�肷��ƁA�f�t�H���g�I�v�V�������̂��̂͏㏑�����ꂸ�Ƀf�t�H���g�I�v�V�����ƃ��[�U�[�w��I�v�V�������}�[�W���ꂽ���̂�����܂��B������Ƃ������Z�ł����A�o���Ă����đ��͂���܂���B
�@�f�t�H���g�I�v�V�������`���邱�ƂŁA�v���O�C���̃��[�U�[�͕K�v�ȃI�v�V�����݂̂��w�肷�邱�Ƃ��ł��܂��B
// �I�v�V������1�����w�� $('div').shake({speed: 'fast'}); // �I�v�V���������ׂĎw�� $('div').shake({speed: 'fast', shakes: 10, x: 20}); // �I�v�V�������w�肵�Ȃ� $('div').shake();
Copyright © ITmedia, Inc. All Rights Reserved.