0
0

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 1 year has passed since last update.

JavaScript jQuery の基礎学習

Posted at

はじめに

今回は、JavaScriptとjQuery についての基礎学習をしたため、アウトプットするために記事を書きました。

jQueryの記述方法

$('.item').css('color', 'red');

基本的にはこの記述方法になる。

$(操作したい部分のクラスやIDを記述).処理する方法(処理する内容)

上記のように部分ごとに記述する内容は決まっており、クウォートなどの書き忘れに注意すること。

クラスの指定→.
IDの指定→#
この二つが基本で他のものはほとんど使用しなかった。

jQueryのアクション

click = 指定要素上で左クリック時に発生。
dblclick = 指定要素上でダブルクリック時に発生。
ダブルクリックした際もclickイベントは発生する点に注意。

contextmenu = 指定要素上でマウス右ボタンを押した際に発生。
コンテキストメニューを表示させたくない場合は、このイベントでreturn falseやpreventDefaultする。

mousedown = 指定要素上で左or右ボタンを押した際に発生。
mouseup = 指定要素上で左or右ボタンを離した際に発生。

jQueryのフォームからの値の取り出し

<body>
  <input type="text" id="value">
  <input type="button" id="button" value="ボタン">
</body>
 <script>
  $(function(){
    $('#button').on('click',function(){
      alert($('#value').val());
    });
  });
  </script>

上記の処理は、フォームに送信された値をアラートとしてブラウザ上で表示する処理になっており、($('#value').val());この部分でフォームから送信された値を取り出している。

※.valはvalue属性を持った値を取り出すことができる。

まとめ

今回は簡単に学習のアウトプットをしてみました。
初学者になりますので、何か誤った表現をしているところなどあれば、コメントいただけると幸いです。

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?