2018

9

11

脱jQueryのコードまとめてやんよ!!!

Pocket
LINEで送る
Facebook にシェア
reddit にシェア
LinkedIn にシェア

jQueryもなんだかんだでメジャーバージョンも3までいって、バージョン依存だったり中規模クラスのサイトになるとコードの再利用やらコンポーネント管理しにくかったりとかの問題もチラホラ出てきて簡単に書けるコードの数々が積もっていつの間にか払拭できない負債になる様な場面に出くわした方も多いんじゃないでしょうか? かくいう私も長い事jQueryで書く事に慣れてしまうとプレーンのJavaScriptをコード書くのに必要以上に時間が掛かってしまうので覚えるよりまとめます!

DOM要素の指定を脱jQuery

id要素を取得

var idElem = document.getElementById("id");

class要素を取得

var classElem = document.getElementsByClassName("class");

タグ要素を取得

var tagElem = document.getElementsByTagName('p');

最初にマッチする要素を取得

var query = document.querySelector("div span");

マッチする全ての要素を取得

var query = document.querySelectorAll("div span");

親要素を取得

document.getElementById("id").parentNode;

子要素を取得

document.getElementById("id").children;

最初にマッチする子要素を取得

document.getElementById("id").firstElementChild;

最後にマッチする子要素を取得

document.getElementById("id").lastElementChild;

1つ前の要素を取得

document.getElementById("id").previousElementSibling;

1つ後の要素を取得

document.getElementById("id").nextElementSibling;

DOM要素の操作を脱jQuery

要素を新規作成

var div = document.createElement('div');
div.textContent = 'hoge';

最後の子要素として追加

document.getElementById("id").appendChild(div);

最初の子要素として追加

const $main = document.getElementById("id");
$main.insertBefore(div, $main.firstChild);

要素の直後に追加

const $main = document.getElementById("id");
$main.parentNode.insertBefore(div, element.nextSibling); 

classを追加【addClass()】

// 指定classのみを追加
document.getElementById("main").classList.add("add-class");

// 複数classを追加
document.getElementById("main").classList.add('make', 'me', 'look', 'rad');

classを削除【removeClass()】

// 指定classのみを削除
document.getElementById("main").classList.remove("remove-class");

// 複数classを削除
document.getElementById("main").classList.remove('cool', 'make', 'me');

classを切り替え【toggleClass()】

const $main = document.getElementById("main");
$main.classList.toggle("toggle-class");

// clickイベントの場合
$main.addEventListener('click', () => {
  $main.classList.toggle('toggle-class');
});

classの存在を確認【hasClass()】

const $main = document.getElementById("main");

// "active"クラスを持っていればtrueが返る
var a = $main.classList.contains("active");
console.log(a); // true

// "active"クラスを持っていたら削除・持っていなかったら追加
if ($main.classList.contains('active')) {
  $main.classList.remove('active');
} else {
  $main.classList.add('active');
}

Form要素関連を脱jQuery

input、textareaの値取得

var textbox = document.getElementById('main').value;

radioボタン(単品)の値取得

var radio = document.getElementById("main");
if(radio.checked){
    console.log("チェックされている");
} else {
    console.log("チェックされていない");
}

radioボタン(グループ)の値取得

var formElem = document.getElementById("form") ;
var radioList = formElem.radio;
var val = radioNodeList.value;
if (val === "") {
    console.log("未選択");
} else {
    console.log(val);
}

select要素の値変更を取得

const selectElement = document.querySelector('.form-select');
selectElement.addEventListener('change', (event) => {
    console.log(event.target.value);
});

input要素の値変更を取得

const input = document.querySelector('input');
input.addEventListener('change', updateValue);
function updateValue(e) {
  console.log(e.srcElement.value);
}

その他のよく使うメソッド系から脱jQuery

css()メソッド

// 要素#mainの文字色を#fffに変更
document.getElementById("main").style.color = "#fff";

// プロパティに"-"が含まれる場合(background-color)
document.getElementById("main").style.backgroundColor = "#fff";

// 一括でstyle指定したい場合
document.getElementById("main").setAttribute("style","position:absolute; bottom:0, left:0; z-index:1;");

// 複数の要素に共通style指定したい場合
const cssString = "font-size:18px; background-color:red";
document.getElementById("elemA").setAttribute("style",cssString);
document.getElementById("elemB").setAttribute("style",cssString);

// 既存要素のスタイル状態を取得
var thisStyle = document.defaultView.getComputedStyle(document.getElementById("main"), null).color;

attr()メソッド

// 画像要素#thumbのsrc属性を取得
document.getElementById("thumb").getAttribute("src");

// 画像要素#thumbのsrc属性を「/thumb.png」に変更
document.getElementById("thumb").setAttribute("src", "/thumb.png")

hover()メソッド

const btn = document.querySelector('.btn');
btn.addEventListener('mouseenter', (e) => {
  console.log('マウスオーバー');
});
btn.addEventListener('mouseleave', (e) => {
  console.log('マウスアウト');
});

on()メソッド

// 対象がIDを持っている場合
document.addEventListener("click", function(event) {
    if(event.target.id === "button") {
        alert("クリックされました");
    }
}, false);

// 対象がclassを持っている場合
document.addEventListener("click", function(event) {
    if(event.target.classList.contains("button")) {
        alert("クリックされました");
    }
}, false);

post()メソッド

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://httpbin.org/post');
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
xhr.send('data=yanyo&since=2012');

animate()メソッド

// 2秒間で上100px、左100px移動
document.getElementById("main").animate([
    { 'top' : '100px' },
    { 'left' : '100px' }
], 2000);

// 5秒間で2フレームに分けてフェードイン
document.getElementById("main").animate([ 
  { opacity: 0, color: "#fff"}, 
  { opacity: 1, color: "#000"}
], 5000);
Pocket
LINEで送る
Facebook にシェア
reddit にシェア
LinkedIn にシェア

トップへ