Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

【jQueryの基礎(1)】

More than 1 year has passed since last update.

1.jQueryとは

Javascriptのライブラリ
Javascriptで行えるほぼ全てのことをJavascriptより簡単に行える

2.特徴

①少なく、簡単な記述でHTML/CSSを操作できる
②全てのブラウザに対応
③jQueryは他のJavascriptファイルよりも先に読み込まないとエラーが出る

3.ライブラリとは

汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたもので、他のプログラムに何らかの機能を提供するコードの集合体

4.HTML要素の取得

$("セレクタ")

5.HTMLを操作

$("セレクタ").jQueryの命令(引数);

6.text()

取得したHTML要素のテキストを書き換える
引数には書き換えたいテキストを文字列で指定

$("#title").text("変更したタイトル");

7.html()

取得したHTMLのタグを含むテキストを書き換える
引数には書き換えたいHTML要素を文字列で指定

$("p").html("<strong>変更されたコンテンツ</strong>");

8.$(function(){})

HTML要素が全て読み込み終わったタイミングで処理を実行

9.イベント

HTML要素に対して行われた処理欲求のこと
「ユーザーがボタンをクリックした」など

10.イベント駆動

JavascriptやjQueryはイベント駆動という概念に基づいて設計せれている
イベントが発生したら、それをきっかけにコードが実行される仕組み

11.on()メソッド

jQueryオブジェクトに対してイベントを設定するメソッド

$("セレクタ").on("イベント", function(){
  //イベントが起きた後に行う処理
});

12.イベントに種類

click
dbclick
mouseover
mouseout
keydown
keyup
change

13.イベントバブリング

あるdiv要素の子要素がクリックされたとする。そうするとそのイベントが伝播して、親要素もクリックされたことになる

$("#input-text").on("keyup", function(){
    var charNum = String($(this).val().length);
    $("#char-count").text(charNum + "文字");
  });

14.hide()

要素を非表示にする

15.show()

非表示の要素を表示

16.fadeOut()

指定したHTML要素がフェードアウトしていく

17.fadeIn()

指定してHTML要素がフェードインしていく

18.append()

引数で指定したHTML要素を追加

19.remove()

引数で指定したHTML要素を削除

20.addClass()

要素に引数で設定したクラスを追加

21.removeClass()

要素から引数で指定したクラスを削除

22.attr()

HTML要素の属性値を取得・変更できる

$("セレクタ").attr("変更したい属性名", "変更したい属性値");

23.val()

フォームに入力された値を取得する

$("#valButton").on("click", function() {
    console.log($("input").val());
  });
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away