otaku-tokyo

 

jQuery

DOMの操作

//誤り

const hoge = document.getElementsByClassName(‘hoge’);
hoge.classList.add(‘is-close’);

// 正しい例
const hoge = document.getElementsByClassName(‘hoge’)[0];
hoge.classList.add(‘is-close’);

classはidと違い複数存在するので、getElementsByClassName()で取得できるのはHTMLCollectionという配列になる。だからClassName()のあとに[ ]が必要。

(e)

$(セレクタ).click(function(e){ console.log(e); });をしてみるとコンソールタブで

altKey: false
bubbles: true
button: 0
buttons: undefined
cancelable: true
clientX: 99
clientY: 47
ctrlKey: false
currentTarget: input#sample
data: null
delegateTarget: input#sample
…(省略)

と出てくる。これがjQueryイベントの正体。clientXなどを利用する場合は(e)が必要

WordPressでJqueryを使う場合

jQuery(function($){
   // ここでは $ が使える。
   var div_all = $('div');
   ...
});とすると良い

jQuery起動確認

consoleタブで$ is not defined と表示されたらjQueryが読み込めていない

おまじない

readyイベントによりHTMLの読み込みが完了してからjQueryを実行する。documentに””は不要。

$(“セレクタ”).メソッド(引数);

$(document).ready(function(){});
↓省略すると
$(function(){});

 

hoverイベント

pタグの中身にaタグが入る。aタグはシングルクォーテーションで囲まないとsrc=”URL”が認識されないので注意!

$("div").hover(
  function(){$("p").html('<a>Hello</a>'); }
  ,functioin(){$("p").text("書き換える文字");}
);

 

clickイベント ※thisに””は不要

$("#title").click(function(){
  $("img").hide();
  $(".lesson").css("display"."block");
});
$("li").click(function(){
  $(this).slideDown();
});

toggleメソッド

クリックするたびに切り替える

$("li").toggle(
  function(){},
  function(){}
);

 

findメソッド

子要素の中から、指定したセレクタを持つ要素を全て取得

$(“#wrapper”).find(“a”).fadeIn(slow);;

 

childrenメソッド

子要素の中から、指定したセレクタを持つ要素で1階層だけ下のものを全て取得

$(“.lesson”).children(“a”).slideUp(1500);

 

〇〇Classメソッド

addClass(“”)にドットは不要!

$(“.lesson”).addClass(“lesson-active”);

$(“.lesson”).removeClass(“lesson-active”);

if($(“.lesson”).hasClass(“lesson-active”)){}else{}

<head>
  <script src=""></script>
</head>
<body>
  <script src="script.js"></script>
</body>

eqメソッド & indexメソッド & next(),prev()メソッド

eq()内は””不要!

$(function() {

$('.index-btn').click(function() {
$('.active').removeClass('active');
var clickedIndex = $('.index-btn').index($(this));
$('.slide').eq(clickedIndex).addClass('active');
});

$('.change-btn').click(function() {
$(".active").removeClass("active");
if($(this).hasClass("next-btn")){
$(".active").next().addClass("active");
}else{
$(".active").prev().addClass("active");
}
});

});

最初のスライドが表示されてるときは「←前へ」は消したいので次のようにする

function toggleChangeBtn(){
var slideIndex = $(".slide").index($(".active"));
$(".change-btn").show();
if (slideIndex == 0){
$(".prev-btn").hide();
} else if (slideIndex == $(".slide").length - 1){
$(".next-btn").hide();
}
toggleChangeBtn();

要素の値を取得する

HTMLが<div id=”main” style=”color:red;”><p>Hello</p></div>だったとする。

$(“p”).text(); //Helloを取得

$(“#main”).html(); //<p>Hello</p>を取得

$(“#main”).css(“color”); //redを取得

ランダム表示

$(“#btnFortuneslip”).click(function(){
var number = Math.floor(Math.random()*4);
var result;
if(number === 0) result = “だ、だいしゅき…間違えました、大吉ですっ!!”;
if(number === 1) result = “はい!中吉ですね”;
if(number === 2) result = “小吉でしゅっっっ!!!”;
if(number === 3) result = “き、凶です…何が不吉な予感が…..”;
document.getElementById(“result”).innerHTML = result;
document.getElementById(“fortuneslip”).setAttribute(‘src’,’https://blue-archives.com/wp-content/uploads/2021/02/omikuji’ + number + ‘.png’);
document.getElementById(“btnFortuneslip”).innerHTML = “もう一度引く”;
});