裏紙に書く程度の内容

jQueryを使わないjavascriptでのかきかた

jQueryを使用しない場合のjavascriptの書き方。

要素のセレクタ

// jquery
var $hoge = $(".hoge");

// js
var hoge = document.querySelectorAll(".hoge")[0];

ID取得(#hoge)やタグ取得もこれでいける。

親子兄弟要素

// jquery
$obj.parent();
$obj.children();
$obj.find('.hoge');
$obj.next();
$obj.prev();

// js
obj.parentNode;
obj.children;
obj.querySelectorAll('.hoge');
obj.nextElementSibling;
obj.previousElementSibling;

要素の作成・追加・削除

form作成してinput要素を追加、bodyに追加してsubmitする例。

// jquery
$('<form>').attr('action', 'http://xxx.xxx.xx')
    .attr('method', 'post')
    .append($('<input>')
        .attr('type', 'hidden')
        .attr('name', 'item_name').val('xxxxx'))
    .appendTo('body')
    .submit()
    .remove();

// js
var form = document.createElement('form');
form.action = 'http://xxx.xxx.xx'
form.method = 'post';

var input = document.createElement('input');
input.type = 'hidden';
input.name = 'item_name';
input.value = 'xxxxx';

form.appendChild(input);

document.body.appendChild(form);
form.submit();
document.body.removeChild(form);

クラス追加・削除、存在確認

// jquery
$obj.addClass('hoge');
$obj.removeClass('hoge');
$obj.hasClass('hoge');

// js
obj.classList.add('hoge');
obj.classList.remove('hoge');
obj.classList.contain('hoge');

ready

// jquery
$(document).ready(function () {

});

// js
document.addEventListener('DOMContentLoaded', function() {

});

click

// jquery
$obj.on('click', function() {
});

// js
obj.addEventListener('click', function() {
});
Index