比較一覧 - つぶデコジェネレーターメーカー

ハクト@WEBエンジニア

hakuto00

clickイベントなどで、radioボタンの何番目が押されたか調べたい場合などに使えます。

#jqueryとjavascriptの比較
 #駆け出しエンジニアと繋がりたい
 #プログラミング初心者

$(e.currentTarget).index('.radio');
jQuery要素の順番を取得Array.prototype.indexOf.call(document.querySelect

ハクト@WEBエンジニア

hakuto00

要素にidが付いてたら
document.getElementById('id').value
でも取得できます

#jqueryとjavascriptの比較
 #駆け出しエンジニアと繋がりたい
 #プログラミング初心者

$('#id').val();jQueryinputなどフォーム要素のvalue値を取得する方法document.querySelector('#id').value;javaScript

ハクト@WEBエンジニア

hakuto00

同じ階層の直後の要素を取得します

#jqueryとjavascriptの比較
 #駆け出しエンジニアと繋がりたい
 #プログラミング初心者

$('#id').next();jQuery直後の兄弟要素を取得する方法document.getElementById("id"). nextElementSiblingjavaScript

ハクト@WEBエンジニア

hakuto00

jQueryの場合、以下のような書き方もできます。
動作は全て同じです。

jQuery(document).ready(function() {
..
});

jQuery(function(){
..
});

#jqueryとjavascriptの比較
 #駆け出しエンジニアと繋がりたい
 #プログラミング初心者

$(function(){
...
});
jQueryDOMにアクセスできる準備が出来たら実行するdocument.addEventListener("DOMContentLoaded

ハクト@WEBエンジニア

hakuto00

同じ階層の直前の要素を取得できます

#jqueryとjavascriptの比較
 #駆け出しエンジニアと繋がりたい
 #プログラミング初心者

$('#id').prev();jQuery直前の兄弟要素を取得する方法document.getElementById("id").previousElementSiblingjavaScript

ハクト@WEBエンジニア

hakuto00

比較できるテンプレを作りました。
https://generator.tubudeco.com/g6570/

varとletの違いはスコープ（有効範囲）
「var」は広いスコープ：宣言した変数はブロック外でも有効
「let」は狭いスコープ：宣言した変数は{}で囲まれたブロック内のみ有効

#比較
 #駆け出しエンジニアと繋がりたい
 #今日の積み上げ

違いは何？JavaScript var var num = 1;
console.log(num);
if(true){
var num = 2;
console.l

ハクト@WEBエンジニア

hakuto00

JavaScriptで書くと少し面倒ですね

#jqueryとjavascriptの比較
 #駆け出しエンジニアと繋がりたい
 #プログラミング初心者

$el.siblings();jQuery兄弟要素を取得する方法Array.prototype.filter.call(el.parentNode.children, function(child)

ハクト@WEBエンジニア

hakuto00

最初の要素を取得する場合
jQuery:「$('#id').find('p').eq(0)」
JavaScript:「id.querySelector('p')」
です

#jqueryとjavascriptの比較
 #駆け出しエンジニアと繋がりたい
 #プログラミング初心者

$('#id').find('p');jQuery子要素を取得する方法let id=document.getElementById('id');
id.querySelectorAll('p');j

ハクト@WEBエンジニア

hakuto00

最初の要素の値を確認する場合
・jQuery
=> $('input[type=checkbox]').eq(0).val();

・JavaScript
=>document.querySelectorAll('input[type=checkbox]')[0].value;

#jqueryとjavascriptの比較
 #駆け出しエンジニアと繋がりたい
 #プログラミング初心者

$('input[type=checkbox]');jQuery属性を指定して要素を取得する方法 document.querySelectorAll('input[type=checkbox]')

ハクト@WEBエンジニア

hakuto00

IDの取得はJavaScriptの記法でもよく使います。
最近はブログもJavaScriptのみサンプルも増えてきたのでどちらも覚えたほうがいいですね。

#jqueryとjavascriptの比較
 #プログラミング初心者
 #駆け出しエンジニアと繋がりたい

$('#id')jQueryIDを指定して要素を取得する方法document.getElementById('id');javaScript

ハクト@WEBエンジニア

hakuto00

クラス指定で取得する場合の書き方の比較です

#jqueryとjavascriptの比較

$(’.class-name’)jQueryクラスを指定して要素を取得する方法document.getElementsByClassName('class-name')javaScript

ハクト@WEBエンジニア

hakuto00

比較用のテンプレです
https://generator.tubudeco.com/g6555/

jQueryとJavaScriptの書き方の違いを比較してみました。
jQueryシンプル

#jqueryとjavascriptの比較

つぶデコ

投稿一覧