1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

プログラミング初心者のjQuery備忘録

Last updated at Posted at 2018-08-15

・jQueryとは
-JavaScriptを便利に扱うためのライブラリ

・jQueryの型
$(function(){
})

・セレクタとは
-処理対象となるDOM要素を指定するための記法
・メソッドとは
-処理

・セレクタとメソッドの書き方
-$('セレクタ').メソッド();

#メソッドの種類
・hide:要素を隠す

・fadeOut:要素を隠す際に徐々に消えていくアニメーションを追加
⇒fadeIn

・slideUp:要素を隠す際に下から消えていくスライドアニメーションを追加
⇒slideDown

・attr:HTMLの属性の値を取得や変更ができる

・data:data属性を操作できる

・text:テキストを変更する

・html:HTMLを取得する

・val:value属性を取得する

・remove/empty:要素を削除する

・before/after:要素内の前/後にHTMLを挿入

・insertBefore/insertAfter:他の要素の前/後に要素を移動する

・prepend/append:要素内の先頭/最後にHTMLを挿入

・prependTo/appendTo:他の要素内に先頭/最後に要素を移動する

#id
jQueryではタグに名前を付ける方法としてidを使用します。
HTMLでのclassと同じような使い方ですが、idは一度しか使えません。
使用例

index.html
<ul id="list">

classとidをセレクタにする場合「#」と「.」を使用します。
使用例

script.js
$(#'id名').メソッド名
$(.'class名').メソッド名

#イベント
イベントを用いると、処理を行うタイミングを指定できる。
構文は

$('セレクタ').イベント名(function(){  })

・clickイベント
clickイベントを用いると、セレクタがクリックされたタイミングで処理を実行する。

・mouseover
マウスが被ったときに処理を実行

・mouseout
マウスが離れた時に処理を実行

・mousemove
マウスが移動したときに処理を実行

#CSSメソッド
CSSを変更できるメソッド
構文

$('セレクタ').css('プロパティ名','値');

#フィルタ
取得した要素を要素の順序や属性の値などによって絞り込むもの。
**$('element:filter')**のように記述する
・種類
1.eq()
要素から、~番目指定で単一エレメントを取得できる。
eq(2)なら0から数えて3番目の要素を取得

2.gt(),lt();
要素から~番目より後を全て取得,ltはその逆で前を全て取得

3.even,odd
要素から(0から数えて)偶数行のみ取得できる。oddは奇数行。

4.contains()
引数で渡された文字列を含む要素を取得できる

5.first,last
要素の最初だけ取得。lastは最後だけ取得

#メソッドを使ったDOM要素の指定方法
**$('要素').next(セレクタ)**のような書き方が基本
・parent(),children()
指定した要素が持つ親要素(perent)、子要素(chidren)を取得する

・next(),prev()
指定した要素の次(next)と前(prev)の要素を取得する

・siblings()
指定した要素と同階層の要素を全て取得できる

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?