jQueryの勉強メモ

jQueryに関する私的なメモです。書いた本人にしかわからない所が多いです。

jQueryの勉強メモ

jQuery

・jQueryはJavascriptで扱う処理を簡単に記述できるようにするライブラリ。 ・jQueryを使うとDOM操作、CSS操作、イベント、Ajaxの処理を簡単に記述できるようになる。

jQueryの使用方法

方法１．スクリプトでCDNから読み込む <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script> 方法２．サーバーに置いたファイルを読み込む <script src=”https:// URLを書く /jquery.min.js”></script>

jQueyの要素の取得

var 変数名 = $(セレクタ); #sample IDで取得 p p要素を取得 .classA クラス名で取得 .classA .classB クラスAの要素の中のクラスBを取得 .classA, .classB クラスAとクラスBを取得 .classA.classB クラスAクラスBの両方のクラスを持つ要素を取得　and条件

jQueryで要素にアクセスするメソッド

.text() 要素のテキストを取得 .text(値) 要素のテキストを書き換え .html() 要素内のHTMLを取得 .html(値) 要素内のHTMLを書き換え

jQueryで要素の属性を操作するメソッド

.attr(属性名) 属性を取得 .attr(属性名, 値) 属性の値を書き換え .val() value属性の値を取得 .val(値) value属性の値を書き換え .addClass(クラス名) クラスを追加 .css(プロパティ名, 値) スタイルを変更

jQueryのscriptの書き出し

・下のように書き始める。JSのこの書き出しと同じ意味になる　→document.addEventListener(‘DOMContentLoaded’, function () {　コード　}); 【jqueryの書き出し】 $(function () { コード });

jQueryのメソッドチェーン

・メソッドをつなげることで、同じセレクタに複数のメソッドを実行できる。 【書式】 $(‘セレクタ’).メソッド().メソッド()….メソッド();