jQuery 概要

設定

Download

公式サイト
1.X系：IE8以前ブラウザ安定稼働向け
2.X系：IE8以降ブラウザ高速稼働向け

jQueryライブラリ読み込み

ローカルファイル参照
<script src="jquery/js/jquery-1.9.1.js"></script>
<script src="jquery/js/jquery-ui-1.10.3.custom.js"></script>
WEB参照
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"
></script>
圧縮版
～.min.js

記述ルール

JavaScript

実態はJavaScriptライブラリ。
JavaScriptはhtml、XMLの各要素へアクセスできる仕様なので、
jQueryでも同様の事が可能。
JavaScriptなので<script>タグ内に書く
<script type="text/javascript">
　　jQueryプログラム
</script>

jQuery関数($)

jQuery();関数の引数内に書く
jQuery(function(){
　　jQuery("#test").html("aaa");
});
「jQuery」⇒「$」へ省略して書くのが一般的
$(function(){
　　$("#test").html("aaa");
});
※ただし「$」はprototype.js等のライブラリとは一緒に使えない。

読み込み完了時に実行させる処理

DOMの読み込みが完了してからjQueryを実行する
$(document).ready(function(){
　　～
});
※正式な書き方
　↓
$(function(){
　　～
});
※省略系(一般的)

画像の読み込みが完了してからjQueryを実行する
$(window).("load" , function(){
　　～
});

css

cssを操作する場合はhtmlと書き方が異なるので注意
css
<style>
　　#test {
　　　　background-posision: left -50px;
　　　　color: 'red';
　　}
</style>
jQuery
$(～).attr({
　　'backgroundPosision' : 'left -50px' ,
　　'color' : 'red'
});
「-」を無くし、先頭を「大文字」、値を「''」で囲む
複数の値を設定する場合は「,」で繋ぐ。

コールバック関数

関数の引数に別の関数を渡す事で、
１つ目の関数実行後に、引数で渡した関数を実行させる処理
(下の例では、引数で渡す関数に無名関数：function(){～}を指定している)
$('#gotop').on('mouseover' , function(){
　　$(this).css({
　　　　color: 'left -50px';
　　});
});
※マウスオーバー処理に無名関数を実行

$(～).fadeOut(500, function(){
　　～
});
※fadeOut完了の0.5秒後に無名関数を実行

セレクタ

CSSで使用できるセレクタはjQueryでも同様に使用できる。
CSSセレクタ参照

フィルター(jQuery独自のセレクタ)

「jQuery フィルタ(jQuery独自のセレクタ)」参照
「jQuery フィルタリング」参照

イベント

「jQuery イベント」参照