diadia

興味があることをやってみる。自分のメモを残しておきます。

jQueryのメモ

jQuery

基本的な使い方参考url
jQuery入門 - Qiita
https://jquery-master.net/
ajax : http://www.koikikukan.com/archives/2012/10/02-005555.php
ajax : http://www.semooh.jp/jquery/api/ajax/jQuery.ajax/options/


jQueryの基本構文

$("セレクタ").メソッド(引数);

まず$("hoge")でオブジェクトを指定する。そのオブジェクトのあとに .メソッド(引数)を用いるのがjQueryの基本構文である。jQuery特有の記法は＄()と書くことだ。メソッドの一部は以下の通り。

メソッド 用途
.attr() 属性操作
.removeAttr() 属性操作
.addClass() クラス操作
.removeClass() クラス操作
.toggleClass() クラス操作
.hasClass() クラス操作
.css() CSS操作
.width() 幅、高さ操作
.height() 幅、高さ操作
.innerWidth() 幅、高さ操作
.innerHeight() 幅、高さ操作
.outerWidth() 幅、高さ操作
.outerHeight() 幅、高さ操作
.scrollTop() スクロール
.scrollLeft() スクロール
.offset() 座標位置
.position() 座標位置



jQueryのイベントの構文

$("セレクタ").メソッド(引数);

例

$(document).ready(function(){
            $("body").alert("hello");
                      })

readyはhtmlファイルをすべて読み込んでからプログラムを起動させるイベントである。

jqueryはcssの役割もできる

jqueryはjavascriptを短くかけるものというイメージだったがcssの効果も持たせることができるとわかった。

body{
     background-color : red ;
          }


$(document).ready(function(){
       $("body").css("background-color" , "red");
             })

セレクタについて

セレクタの選定はいかの種類がある。

$("h1").css("color", "red");

$("#second_name").css("color", "red");
# cssでは h1#second_name{ } となる

$("h1:nth-child(2)").css("color", "red");

$(".forms").css("color", "red");
# cssでは h1.forms{ } となる

繰り返し処理をする

参考url :
【jQuery】複数の要素に対して繰り返し処理をする（each・for） - TASK NOTES

ajax(option)

参考資料：http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/

オプションは以下。
dataはサーバに送信する値。

done()について

おそらく.done()はajax()のあとに続くいわゆるメソッドだろう。
ajax()でサーバにデータが送信されたのちに他に挙動を指定したいときに使うってことだと思われる。

.done(function( msg ) {

    alert( "Data Saved: " + msg );

  });