Zenn
💡

【初心者向け/ITスクール59日】JQuery

2023/10/10に公開
JavaScript
tech

はじめに

今日は、ITスクールに通った59日目の日で、今日学んだ知識を記事にシェアしたいと思います。本記事が、ITを勉強を始めた方々にもロードマップになればいいと思います。

今日は以前、MyBatisからDBアクセスすることを復習し、JQueryでイベント処理をすることを勉強しました。

JQuery

DOMオブジェクトを操作するJavaScript基盤のオープンソースライブらぢです。素直なところ、今はだんだん利用しないことが多いので、
こういうのがあるんだ、みたいな感覚で勉強しました。
JQueryはまず重い点と、今ブラウザー、JSのAPIで十分処理ができるからです。

$() : selector

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type ="text/javascript" src=jQuery.js></script>
<script type ="text/javascript">

  //CSSセレクターで指定
 $(function(){
	 
　　　$("h1").click(() => {
		$("h2").click(function(){
			alert('wow');
		});
	});
	
　　　//switch機能
　　　let b = false;
      $("h3").click(()=> {
		b = !b;
		alert(b);
	});
	
     let iInput = $("#i");
     $("button")
     .click(()=>{alert(iInput.val());});
	 
 });

</script>
</head>
<body>
   <h1>1</h1>
   <h2>2</h2>
   <h3>3</h3>
   <input id ="i">
   <button>出力</button>
   <hr>
   <button>Print</button>
</body>
</html>

https://jquery.com/

こちらから、JQueryをダウンロードすることができるので、勉強してみたい方はご参考ください！

.css,.clean, .mouseenter, .mouseleave,.attrなどでDOMのCSSを操作することができます！

Discussion