Javascript/jQuery

jQuery超基本の書き方とメソッド

投稿日:2019年3月30日 更新日:

基本の書き方

$(‘セレクタ’).メソッド();
//セレクタに対してメソッドを呼び出す

$(‘セレクタ’).イベント名(function(){
//イベント発生時の処理を記載
});

//セレクタに対してイベントが発生したときに、処理をおこなう

cssメソッド

$(‘セレクタ’).css(‘cssのプロパティ名’,’cssの値’,);
//セレクタに対してcssの変更を行う。
使用例↓

クリック時、#change-cssの#textのカラーをブルーに、フォントサイズを30pxに変更

textメソッド

HTMLの変更ができる。
使用例↓

[HTML]
<p>こんばんは</p>

[jQuery]


p要素がこんばんはこんにちはに書き換えられる。

その他基本のメソッド – 隠す系

hide→要素を隠す
fadeOut→要素を隠す際にアニメーションをつけられる。
  └(引数)で速度を指定できる。

その他基本のメソッド – 表示する系

slideUP→要素を隠す際にアニメーションを付けられる。上から下からなど。
  └(引数)で速度を指定できる。
fadeIn→要素を表示する際、徐々に表示する。
  └(引数)
show→要素を表示する

id, classに適用させる系

[HTML]

[jQuery]

 
スポンサーリンク

テスト

テスト

-Javascript/jQuery

関連記事

WordPressのテーマにJavaScriptを正しく読み込む方法

HTMLでJavaScriptを読み込む時、一般的には</head>前や</body>前に直接記述することが多いが、Wordpressで読み込みたい場合は、関数を用いてfunctions. …

IEブラウザを判定してアラートを表示する方法

Web制作に携わっていると、IEを(いまだに…)利用しているユーザーのための対応が必要になってくる。対応パターンとしては、 パターン1:IE用に別途cssを書くパターン2:「(レイアウトが崩れる)IE …