jQuery Basicの使用方法

7955 ワード
jquery テキストリンク
📌 1.jQueryとは?
📎 jQueryって何?
jQueryは자바스크립트 라이브러리で、HTMLのDOM操作とイベント制御、アニメーション、Ajaxに関する.
📎 jQueryの基本特性
👉 DOMに関する処理を容易に実施することができる.
👉 規則的に事件を処理することができる.
👉 アニメーション効果は簡単に作成できます.
👉 Ajax処理方式は便利に使えます.
👉 互換性がよく、ほとんどのWebブラウザに対応できます.
👉 関連プラグインは種類が多く、直接プラグインを実施または拡張することができます.
📎 jQueryの重要な特性
👉 JavaScriptに比べてコード量が著しく減少した.
👉 중간에 html이라는 메소드가 껴있어도, 뒤에다 점을 붙여 css를 사용할 수 있다.👉 jQuery가 제공하는 모든 메소드들은 그 메소드가 리턴될 때, 그 메소드가 제어했던 대상을 리턴해준다.👉 꼬리에 꼬리를 물면서 계속 뒤에다 여러가지 메소드를 붙여넣을 수 있다. 사슬처럼 얽혀있어서 체인(chain)이라고 한다.📎 主語と述語
  • 主語は、制御対象$から始まり、そのパラメータで制御対象を伝達する.
  • では、cssセレクタに相当する문자열がある可能性がある.
  • 2.と入力すると、その制御対象のメソッド1()のコマンドを同時に発行することができる.
    • $(管理対象).method1().メソッド2()主語述語
    📌 2.jQueryの使い方
    📎 jQuery 1の使用方法
    👉 jQueryライブラリは、https://jquery.com/download/のWebサイトからダウンロードして参照して使用できます.
  • をダウンロードする場合は、「
  • 非圧縮:デフォルトファイル
  • 圧縮:圧縮型(通常は圧縮型)
    • 👉 method1()構文でseojQueryを参照します.
    👉 jQueryファイルのアクセスパスは、通常のファイルのアクセスパスと同じです.
    📎 jQueryの使い方1例
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery 사용방법1</title>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
	
	$(document).ready(function(){
		
		$("body").css("background" , "cyan");
		
	});

</script>
</head>
<body>

</body>
</html>
    📎 jQuery 2の使用方法
    👉 jQueryライブラリをダウンロードせず、サイトで直接参考にして使用します.
  • をダウンロードする場合は、「
  • 非圧縮:デフォルトファイル
  • 圧縮:圧縮型(通常は圧縮型)
    • 👉 <script src="jQuery파일 경로"></script>構文でseojQueryを参照します.
    👉 https://code.jquery.com/jquery/で参照urlを表示できますが、インターネットができない場合は使用できません.
    📎 jQueryの使い方2例
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery 사용방법2</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

	$().ready(function(){
		$("body").css("background","red");
	});

</script>
</head>
<body>

</body>
</html>
    📖 リファレンス
  • https://shuchong.tistory.com/178
  • https://velog.io/@kay9508/jQuery%EB%9E%80
  • https://7942yongdae.tistory.com/13
    • 魔法とストライプで有料メンバーシップサイトを構築:PT.4 - Herokuへの配備
    機能巻上げ✨