DOMããããAdvent Calendar 2015 – 23æ¥ç®
jQueryããŸããŸã䜿ãçšãããªããã©ã¡ãã£ãšjQueryçãªæ©èœã欲ãããªãšããå Žé¢ã¯ãšãã©ãããããšæããã§ããããããããšãã«ãjQueryé¢šã®æ©èœããèªäœããããã®å®è£
äŸã幟ã€ãæããŠã¿ãããšæããŸãã
ã»ã¬ã¯ã¿ãŒããæ€çŽ¢ããŠãåèŠçŽ ãæäœ
ãããªé¢šã«äœ¿ãããå Žåã
var $el = $('#foo .bar [boo=123]');
$el.css({ color:'red' });
以äžã®äºã€ã®æ©èœãå¿
èŠã§ãã
ã»ã¬ã¯ã¿ãŒããèŠçŽ ãååŸãã確ä¿ããŠãã
確ä¿ããèŠçŽ å
šãŠã«å¯ŸããŠåŠçããã
ä»ã«ã諞ã
ã®æ©èœãå¿
èŠããšæããŸããããããã®åºç€ãšãªãã®ãæ¬æ©èœã§ããã
ã»ã¬ã¯ã¿ãŒããæ€çŽ¢ããŠèŠçŽ ã確ä¿
ããã§é
åé¢šã«æ±ããããã«ãªããŸãã
// ã€ã³ã¿ãŒãã§ã€ã¹ãããã䜿ãã
function $(selector) {
return new MyQuery(selector);
}
// ã³ã³ã¹ãã©ã¯ã¿ãŒã宿
ã
function MyQuery(selector) {
var nodes = document.querySelectorAll(selector);
// é
å颚ã«åèŠçŽ ãä¿æ
for (var i=0, l=nodes.length; i<l; i++) {
this[i] = nodes[i];
}
// é
å颚ã«èŠçŽ æ°ãä¿æ
this.length = nodes.length;
}
var $links = $('a');
console.log($links.length, $links[0]);
ãšãã£ãŠãäœãæ©èœããªãã®ã§å€§ããŠå¬ãããªãã§ãããããããã§ãã
åèŠçŽ ã«å¯ŸããŠäžæ¬æäœ
forEach()
ãªãã®ãå®è£
ããŸãããšãããé
åãæã€é¢æ°ããã®ãŸãŸäœ¿ã£ã¡ãã£ãŠå€§äžå€«ã§ãã
MyQuery.prototype.forEach = Array.prototype.forEach;
ããç°¡åãïŒIE 9+ãIE 8ã®å Žåã¯èªåã§å®è£
ããŸããïŒãããã ãã§ãã ãã¶äœ¿ãããšæããŸãã
var $links = $('a');
$links.forEach(function(el, index) {
console.log(el, index);
});
ã¡ãªã¿ã«jQuery㯠forEach()
ãããªã㊠each()
ãšããAPIã§ãã³ãŒã«ããã¯é¢æ°ã«äžããããåŒæ°ã®é åºãéããŸãããã©ãŸãããããã
APIèšèšã®åºç€ææ³
jQueryã¯äœ¿ãå¿å°ãè¯ãã®ã§ããã以äžã®å
±é仿§ã倧ããè²¢ç®ããŠãããã®ãšæããŸãã
ã¡ãœãããã§ã€ã³ã®ãããæäœåŸãªããžã§ã¯ãèªèº«ãè¿ã
å¯Ÿè±¡ã®æç¡ã«ããåå²ãçããããæ€çŽ¢çµæã0ä»¶ã®ç¶æ
ã§ãåæ©èœã§ãšã©ãŒã«ããªã
ãšããããã§ããããã«æ°ãä»ããªãã諞ã
å®è£
ããŠãããŸãã
ã€ãã³ãç£èŠ
å²ãšããäœ¿ãæ°ãããŸãã®ã§ããããããããŸãããã on()
㯠addEventListener()
ã§å®è£
ã§ããŸãã
MyQuery.prototype.on = function(type, listener) {
this.forEach(function(el) {
el.addEventListener(type, listener);
});
return this;
};
ç°¡åã ïŒ
æ¡åŒµãããããã
jQueryã®ã¡ãœãã㯠$.fn
ã«ç»é²ããäºã§èªç±ã«è¿œå ã§ããããã«ãªã£ãŠããŸããç䌌ãŠãããŸãããã
$.fn = MyQuery.prototype;
ã§ããã
å
šç¶APIãªãã§ãããåºæ¬çã«ã¯ãããªããã§ããããã
// ã€ã³ã¿ãŒãã§ã€ã¹ãããã䜿ãã
function $(selector) {
return new MyQuery(selector);
}
// ã³ã³ã¹ãã©ã¯ã¿ãŒã宿
ã
function MyQuery(selector) {
var nodes = document.querySelectorAll(selector);
// é
å颚ã«åèŠçŽ ãä¿æ
for (var i=0, l=nodes.length; i<l; i++) {
this[i] = nodes[i];
}
// é
å颚ã«èŠçŽ æ°ãä¿æ
this.length = nodes.length;
}
$.fn = MyQuery.prototype;
$.fn.forEach = Array.prototype.forEach;
$.fn.on = function(type, listener) {
this.forEach(function(el) {
el.addEventListener(type, listener);
});
return this;
};
30è¡ã«ãæºããªãã³ãŒãã§ãããããã§ãããªé¢šã«äœ¿ããŸãã
$('#el').on('click', function(event) {
alert('!');
});
ã¡ãã£ãšãµã³ãã«ã³ãŒãæžããããã©jquery.jsãæ¢ããŠããã®é¢åã ãªãŒã¿ãããªãšãã«äŸ¿å©ãããããŸãããè¯ãæãã«éåãæŽåã§ãããªãè¯ãããã©ã
ãšããã®ã©ã€ãã©ãªãŒãäœã£ãŠãŸã
ãããã°ãå©çšãã ããã