jQueryはユーザーのクリックに反応するフォームやアニメーションを実装できる言語。
Java Scriptを使いやすくするためのモノ
##使い方
①ダウンロード
②指定、読み込み
<script type="text/javascript" src="/C:\Users\kgasn\Desktop/jquery-3.3.1.min.js"></script>
##セレクタとメソッド
セレクタ:処理対象となるDOM(Document Object Model)要素。HTMLのこと。
メソッド:処理対象に行いたい処理のこと
$('セレクタ').メソッド(引数);
何を どうするか
<body>
<script type="text/javascript" src="/C:\Users\kgasn\Desktop/jquery-3.3.1.min.js"></script>
<p>jQueryの練習</p>
<script>
$(document).ready(function(){
$('p').css('color','red');
})
</script>
ちなみに、functionは以下のような書き方で略すことができる。
(function(){
$('p').css('color','red');
})
-
直下の子要素
- 空白 それ以下の要素
- ,複数の要素
- +隣接する要素
- フィルタ（:eq(＝),:gt(greter than),:lt(less than),:even,:odd,:contains()←中身のテキストを指定できる）
<ul id="main">
<li>0</li>
<li class="item">1</li>
<li class="item">2</li>
<li>
3
<ul id="sub">
<li>3-0</li>
<li>3-1</li>
<li class="item">3-2</li>
<li class="item">3-3</li>
<li>3-4</li>
</ul>
</li>
</ul>
$("#main >.item").css('color','red');←main IDの直下のitemクラスが赤くなる。
$("p, .item").css('color','red');←これだと、p要素とitem要素が赤くなる。
$(".item + .item").css('color','red');←これだと、itemの隣にあるitem要素が赤くなる。位置としては下のitem要素。
$("#sub > li:eq(2)").css('color','red');←listの中でも2番目
$("#sub > li:gt(1)").css('color','red');←1以降がすべて赤色に
$("#sub > li:lt(1)").css('color','red');←1から手前が赤色に
$("#sub > li:odd").css('color','red');←奇数がすべて赤色に
その他
-
parent()…親要素全体を指定 -
Next()…次の要素を指定←→prex() -
siblings()…すべての兄弟要素を指定
###属性セレクタ
- = 等しい
- != 等しくない
- *= ～～を含む
- ^= 先頭が～～から始まる
- $= ～～で終わる
<p>jQueryの練習</p>
<p><a href="http://google.com">Google</a></p>
<p><a href="http://yahoo.co.jp">Yahoo!</a></p>
<p><a href="http://dotinstall.com">Dotinstall</a></p>
</ul>
<script>
$(function(){
// $('a[href="http://google.com"]').css('background','red');
$('a[href !="http://google.com"]').css('background','red');
})
</script>
</body>
###属性の値を取る
console.log ($('a').attr('href'));
(phpのvar_dumpとかの感じ。ブラウザでctrl+shift+iでみれる)
###attr(アトリビュートメソッド)/data
console.log ($('a').attr('href'));
$('a').attr('href' , 'http://google.co.jp')←属性の上書き
<title>jQuery練習</title>
</head>
<body>
<script type="text/javascript" src="/C:\Users\kgasn\Desktop/jquery-3.3.1.min.js"></script>
<p>jQueryの練習</p>
<a href="https://google.com" data-sitename="google">google</a>
<script>
$(function(){
console.log ($('a').data('sitename'));
})
</script>
##タグの中身をいじる
##addClass/removeClass
何度も同じスタイルを使用したい場合、そのスタイルをクラスに格納して、あとからいつでも呼び出せるようにすることができる。
<title>jQuery練習</title>
<style>
.mystyle{
border:5px solid green;
font-size:48px;
}
</style>
</head>
<body>
<script type="text/javascript" src="/C:\Users\kgasn\Desktop/jquery-3.3.1.min.js"></script>
<p>jQueryの練習</p>
</ul>
<script>
$(function(){
$('p').addClass('mystyle');←ここ
})
</script>
</body>
###HTMLのクラスとID
HTMLのクラスとIDにjQueryを対応させるためには、
$('#list').css(~~~);←id
$('.list').css(~~~);←クラス
以上のようにする。
##イベント
イベントを用いると、動作を行うタイミングを決めることができる。
ユーザーのクリックなどをきっかけに動作が行われるようにしておくことができる。
$('セレクタ').イベント名(function(){ });
##cssの変更
##タグの中身をいじる
HTMLメソッドを使えば、HTML自体を書き換えることができる。
例えば、
① $('p').text('<span>こんばんは</span>')
② $$('p').html('<span>こんばんは</span>')
①だと、textメソッドなので、も同時に表示してしまうが、htmlメソッドならhtmlタグだと認識され、「こんばんは」だけが表示される。
<script type="text/javascript" src="/C:\Users\kgasn\Desktop/jquery-3.3.1.min.js"></script>
<p>jQueryの練習</p>
<a href="https://google.com" data-sitename="google">google</a>
<input type="text" value="hello">
<script>
$(function(){
// $('p').text('just change')
// $('a').html('<a href="">click me</a>')
console.log ($('input').val());←valはvalueのこと
$('input').val("hello, again!");←こうすることで値の上書きも可能
$('p').empty();←p要素を空にする
$('p').remove();←p要素を無に
})
##要素の追加
- before,insertBefore
- after,insertAfter
- prepend
- append
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
</ul>
<script>
$(function(){
var li = $('<li>').text('just added');
$('ul > li:eq(1)').before(li);=(同じ意味) li.insertBefore($('ul > li:eq(1)'));
$('ul').append(li);←liの末尾に追加
$('ul').prepend(li);←liの先頭に追加
li.appendTo($('ul'));←書き方が違うだけで意味は一緒
})
</script>
以上のようにすると、1の前に、just addedというテキストが追加される。
##エフェクト
- hide,show
- fadeOut,fadeIn
- toggle ←表示されていれば消す。消されていれば表示する。
メソッドのすぐ後に()で600や'slow'などを記述すると、エフェクトの速さ、遅さを調節することが可能。
また、以下のように
<script>
$(function(){
$('#box').fadeOut(600 , function(){
alert("gone!!");
});
})
</script>
第二引数に関数を取ることにより、処理が終わった後にメッセージを出したりするとも可能。
##this
thisはそのイベントの中で、起こった要素を取得することができる。
##変数とメソッドチェーン
同じjQueryオブジェクトを複数回使用する場合は、変数にする。
変数宣言にはvarを用いる。
またメソッドチェーンを用いることで、処理速度を高速化することができる。
var $div=$('deiv');←右辺を左辺に代入する。
$div.css(~~~);
$div.html(~~~);
$div.css(~~~);
$div.css(~~~).html.(~~~);
##findメソッドとchildrenメソッド
findメソッドはすべての子要素（自分よりも下の子要素全て）の中から、指定したセクレタを持つ要素を取得したいときに用いる。
$(function() {
$('#find-method').click(function() {
// findメソッドで、「#wrapper」内にあるすべての「a」要素を取得し、
// cssメソッドで文字の色をredに指定してください
$('#wrapper').find('a').css('color','red');
});
$('#children-method').click(function() {
// childrenメソッドで、「#wrapper」の一階層下にある「a」要素を取得し、
// fadeOutメソッドで隠してください
$('#wrapper').children('a').fadeOut();
});
});
##イベント
- click…クリックしたとき
- mouseover…マウスが要素にかかったとき
- mouser…マウスがそこから離れたとき
- mousemoveマウスが動いた時
- hover
<script>
$(function(){
$('#box').click(function(){
alert("hi!");
})
})
また以下のように、$(this)で指定することもできる。
<script>
$(function(){
$('#box').mouseover(function(){
$(this).css('background','green');
})
})
$('セレクタ').hover(マウスをのせた時の処理, マウスをはずした時の処理);
$('セレクタ').hover(
function{
マウスを乗せたときの処理
},
function{
マウスをどけたときの処理
}
)
ここに大概のイベントが載っている。便利
###form部品に関するイベント
- focus
- blur
- change
<script>
$(function(){
$('#name').focus(function(){
$(this).css('background','red');
})
$('#name').blur(function(){
$(this).css('background','white');
})
$('#menbers').change(function(){
alert('changed!!');
});
</script>
inputエリアの背景色が、選択されたとき赤になる。
###onメソッド
onメソッドはドキュメントが読み込まれた時点で存在していないドキュメント要素に対して働くプログラムを作るときはonメソッドが必要。
構文は以下みたいな感じ
<script>
$(function(){
$('button').click(function(){
var p = $('<p>').text('vanish').addClass('vanish');
$(this).before(p);
});
$('body').on('click' , '.vanish',function(){
$(this).remove();
})
});
</script>
##Ajax(Asynchironous Javascript + XML)
サーバーとの通信 ＋ ページの書き換え
ページ内からJavascriptだけでサーバーとの通信を行い、部分的に変更していく。
スピード感がいい
dotinstallを参照。説明文に書きにくい
###非同期通信
下記の書き方だと、more.htmlからメッセージを読み込む前に、次のcssの命令が通ってしまいエラーが出ることになるので、
<script>
$(function(){
$('button').click(function(){
$('#result').load('more.html');
$('#message').css('color' , 'red');
});
});
</script>
関数で囲ってやれば、cssがメッセージを読み込んだ後に動作するのでエラーが出ずに済む。
<script>
$(function(){
$('button').click(function(){
$('#result').load('more.html', function(){
$('#message').css('color' , 'red');
})
});
});
</script>
###$.get``$.post
dotinstallで見よう。postとgetの概念はphpと一緒。
###Jsonで値を返す