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'
});
「-」を無くし、先頭を「大文字」、値を「''」で囲む
複数の値を設定する場合は「,」で繋ぐ。

コールバック関数

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

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

セレクタ

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

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

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

イベント

jQuery イベント」参照

コメントを残す

メールアドレスが公開されることはありません。