�摜�X���C�h�V���[��jQuery�v���O�C���̊�{���w���FjQuery�~HTML5�~CSS3��^�ʖڂɕ׋��i2�j�i1/4 �y�[�W�j

jQuery��UI�R���|�[�l���g�̍������w�ԑO�ɁAjQuery�v���O�C���̍����Ǝd�g�݂���������Ƃ������悤�B

» 2013�N04��22�� 18��00�� ���J
[�R�c�@�����C�N���X���\�b�h]

�͂��߂�

�@���̘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

�v���O��������������

�@�ȉ��̊‹���p�ӂ��܂��傤�B

  • UTF-8 ��������e�L�X�g�G�f�B�^
  • Web�u���E�U�@�����A�ڂł�Chrome��W���Ƃ��Đi�߂Ă����܂�

�T���v���t�@�C���̃_�E�����[�h

�@����̃T���v���t�@�C����wakamsha/learning-jqueryplugin - GitHub����_�E�����[�h�ł��܂��B�K�v�ɉ����Ă��Q�Ƃ��������B

jQuery�̓ǂݍ��݂ɂ‚���

�@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>
HTML

�@�t�@�C�����̂��̂𒼐ڃ��[�J���‹��Ƀ_�E�����[�h���Ă���肠��܂��񂪁A�Ǘ�����t�@�C����������̂���ԂȂ̂ŁA�l�b�g���[�N�ォ�璼�ړǂݍ��ޕ��𐄏����܂��B

�͂��߂� - jQuery �v���O�C���̍\��

�@�ׂ������͂���ǁ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);
JavaScript
  1. $.fn�I�u�W�F�N�g���v���O�C�����i���J�X�^��jQuery���\�b�h�j�Ŋg������
  2. this�ɂ͎w�肳�ꂽ�v�f���i�[����Ă���A�����ϐ��ɑޔ����Ă���
  3. �w�肳�ꂽ�v�f���ׂĂɏ������K�p�����悤�ɁAeach() ���g����1�‚��“��l�̏������s��
  4. method chain���r�؂�Ȃ��悤�ɁA�Ō��return this������
  5. �S�̂𓽖��֐��Ń��b�v����

�@�ł͎��ۂɃT���v�������Ȃ���ڂ������Ă����܂��傤�B

jQuery�v���O�C���̑���

�@�܂��͍ŏ��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;
};
 
JavaScript

�@�ł͏�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

Method chain�̗�

$('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>
HTML

View sample

jQuery �v���O�C���ɃI�v�V������n��

�@�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
};
JavaScript

�@�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();
JavaScript

View sample

�@�@�@�@�@�@ 1|2|3|4 ���̃y�[�W��

Copyright © ITmedia, Inc. All Rights Reserved.

'; if( !this.isSubscription ) { this.insertTarget = document.querySelector('#cmsBody .subscription') || document.querySelector('#cmsBody .inner'); } }; BodyAdIMSWithCCE.prototype = Object.create(BodyAdContent.prototype); BodyAdIMSWithCCE.prototype.activate = function () { refreshGam('InArtSpecialLink'); } // global reference window.itm = itm; //entry point BodyAdEventBase.polyfill(); const bodyAdManager = BodyAdManager.getInstance(); bodyAdManager.addEventListener(BodyAdManager.EVENTS.READY, function (ev) { bodyAdManager.loadAdvertise(); }); bodyAdManager.init(); })();
�X�|���T�[����̂��m�点PR

���ڂ̃e�[�}

4AI by IT - AIAAA
Microsoft  WindowsőO2025
AI for GWjAO
[R[h^m[R[h Zg by IT - ITGWjArWlX̒SŊ􂷂gD
Cloud Native Central by IT - XP[uȔ\͂gD
�V�X�e���J���m�E�n�E �y�����i�r�zPR
���Ȃ��ɂ������߂̋L��PR

RSS�ɂ‚���

�A�C�e�B���f�B�AID�ɂ‚���

���[���}�K�W���o�^

��IT�̃��[���}�K�W���́A �������A���ׂĖ����ł��B���Ѓ��[���}�K�W�������w�ǂ��������B