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.

JQueryメソッド(自分が使ったやつ)

Posted at

よく使うとかではなく、ただ自分が使う機会があってわからなかったものを備忘録的に書き留めておきます。

.data()

  • jQueryの.data()メソッド
  • HTML要素にdata-〇〇となっているデータを取得することができる

<div id="myDiv" data-name="John" data-age="30"></div>
var name = $('#myDiv').data('name');
var age = $('#myDiv').data('age');

datepicker()

  • jQuery UIの1つで、カレンダー形式の日付選択機能を提供する
  • さまざまなオプションを指定して、様々なカスタマイズが可能

datepicker()を使用して日付選択機能を有効にする例

<input type="text" id="datepicker">
$(function() {
  $("#datepicker").datepicker();
});

new Date()

  • 現在の日時を含む新しいDateオブジェクトを作成

.val()

  • jQueryを使用してHTMLフォーム要素の値を取得または設定するためのメソッド
  • 主にinput、select、textareaなどのフォーム要素に対して使用される

var inputValue = $('input').val();

$.isNumeric(num)

  • 引数が数値かどうかを判定するために使用される

.chosen()

.on()

  • jQueryのメソッドで、イベントハンドラーを設定するために使用される
    ※.on('change')
  • 指定された要素の変更を監視し、変更が発生した際に登録されたイベントハンドラを呼び出す
$("button").on("click", function() {
  console.log("ボタンがクリックされました");
});

.prop()

  • 要素のプロパティ1を設定または取得するために使用される
  • プロパティ(checked、disabled、selected、value、srcなど)の名前、値(オプション)を取る

例 : #myCheckboxというIDを持つチェックボックス要素のcheckedプロパティをtrueに設定

$('#myCheckbox').prop('checked', true);

.closest()

  • 指定されたセレクターに最も近い祖先要素を取得するメソッド
  • 指定された要素の祖先要素の中で、最も近いセレクターに一致する要素を取得することができる

.closest()メソッドの使用例

<div>
  <ul>
    <li>
      <span class="target">Target</span>
    </li>
  </ul>
</div>

<script>
  $(document).ready(function(){
    var closestDiv = $('.target').closest('div');
    console.log(closestDiv); 
  });
</script>

.target要素の祖先要素の中で、最も近いdiv要素が取得される

$.ajax()

  • jQueryを使用して、Ajaxリクエストを送信するための機能を提供するメソッド
  • ページの再読み込みなしでサーバーとやり取りすることができる
  • 様々なオプションが用意されている

$.ajax({
  url: 'example.php',
  method: 'POST',
  data: {
    username: 'John',
    password: 'Doe'
  }
});

※オプション

  • dataプロパティは、 キーと値のペアの連想配列として提供される

.done()

  • $.ajax()メソッドを使用するときに使用される、Promiseのメソッドの1つ
  • サーバーからのレスポンスが成功(ステータスコード200番台)であった場合,指定した関数を実行

$.each()

  • jQueryで使用される一般的な関数の一つ
  • JavaScriptのforループと似たような機能を持っている
var myObject = {
  name: 'John',
  age: 30,
  gender: 'male'
};

$.each(myObject, function(key, value) {
  console.log('キー:', key, ' 値:', value);
});

.trigger()

  • イベントハンドラが登録されている要素に対して、手動でイベントを発生させることができる

$('#myButton').on('click', function() {
  alert('Button clicked!');
});

$('#myButton').trigger('click');

.chosen()

  • 検索可能なドロップダウンリストを実装するためのjQueryプラグイン
  • セレクトボックスを装飾する

  1. プロパティとは
    要素の状態を表す値であり、DOM要素自体の情報を含む

0
0
1

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?