jQuery スライドショー

jQuery

<div class="wrapper-slide">
 <div class="slide">
  <ul class="container">
   <li class="current"><img src="(画像1)" width=~ height=~ /></li>
   <li><img src="(画像2)" width=~ height=~ /></li>
   <li><img src="(画像3)" width=~ height=~ /></li>
  </ul>
  <a href="#" class="prev">前の画像</a>
  <a href="#" class="next">次の画像</a>
 </div>
</div>

<style>
/* スライドショー全体のスタイル */
.slide {
 position: relative;
 margin: 0 auto;
 max-width: 198px;
 font-size: 0; /* 画像下の隙間を埋めるため */
}
.slide img {
 max-width: 100%;
}
.slide > .container {
 position: relative;
 overflow: hidden;
 margin: 0;
 padding: 0;
 list-style: none;
}
/* 写真の配置 */
.slide > .container > li {
 position: absolute;
 z-index: 0;
 top: 0;
 left: 0;
 opacity: 0;
 transition: opacity 1s linear;
}
.slide > .container > li.current {
 position: relative;
 z-index: 1;
 opacity: 1;
}
/* スライドショーのボタン */
.slide a.prev,
.slide a.next {
 position: absolute;
 display: block;
 top: 45%;
 width: 40px;
 height: 40px;
 text-indent: -5000px;
 z-index: 10; /* ボタンを常に画像より上に配置 */
}
.slide a.prev {
 background: url(矢印画像左1) 50% 50% no-repeat;
 left: 0;
}
.slide a.prev:hover {
 background: url(矢印画像左2) 50% 50% no-repeat;
}
.slide a.prev:active {
 background: url(矢印画像左3) 50% 50% no-repeat;
}
.slide a.next {
 background: url(矢印画像右1) 50% 50% no-repeat;
 right: 0;
}
.slide a.next:hover {
 background: url(矢印画像右2) 50% 50% no-repeat;
}
.slide a.next:active {
 background: url(矢印画像右3) 50% 50% no-repeat;
}
/**
* RESPONSIVE: スマートフォン向けウィンドウ幅600px以下
*/
@media screen and (max-width:600px) {
 .slide a.prev,
 .slide a.next {
  top: 40%;
 }
}
</style>
<script>
$(function(){
 var intervalId;
 setTimer();
 
 function setTimer(){
  intervalId = setInterval(autoClick, 10000);
 }
 function autoClick(){
   $(‘.slide’).children(‘a.next’).click();
 }
 
 function changeImage($click){
  //console.log($click);
  var $current;
  var findSelector = ”;
  var $new;
  
  $current = $click.siblings(‘.container’).children(‘.current’);
  
  if($click.hasClass(‘next’)){
   $new = $current.next();
   findSelector = ‘:first-child’;
  } else {
   $new = $current.prev();
   findSelector = ‘:last-child’;
  }
  
  if($new.length == 0) {
   $new = $current.siblings(findSelector);
  }
  $current.removeClass(‘current’);
  $new.addClass(‘current’);
  setTimer();
 }
 
 $(‘.slide’)
 .on(‘click’, ‘> a’, function(event){
  event.preventDefault();
  clearInterval(intervalId);
  changeImage($(this));
 });
});
</script>

jQueryプラグイン

プラグイン:bxSlider設定

http://bxslider.com/
からダウンロード、解凍してフォルダごと参照設定

jquery.bxslider
└jquery.bxslider.js
└jquery.bxslider.css
└images
└plugins
test.html

※test.html
<script src="http://code.jquery.com/jquery-1.10.1.min.js"
integrity="sha256-SDf34fFWX/ZnUozXXEH0AeB+Ip3hvRsjLwp6QNTEb3k="
 crossorigin="anonymous"></script>

※jQueryのバージョンによっては動かないらしい
<script src="./jquery.bxslider/jquery.bxslider.js"></script>
<link rel="stylesheet" href="./jquery.bxslider/jquery.bxslider.css">

標準


<ul class="bxslider">
 <li><img src="画像1" width=~ height=~ /></li>
 <li><img src="画像2" width=~ height=~ /></li>
 <li><img src="画像3" width=~ height=~ /></li>
</ul>
<script>
$(document).ready(function(){
 $('.bxslider').bxSlider();
});
</script>

オプション

<script type="text/javascript">
$(document).ready(function(){
 $('.bxslider').bxSlider({
  auto: true, 自動再生
  speed: 1000, スライド速度
  pause: 4000, スライド間の停止時間
  mode: 'horizontal', 横スライド
  mode: 'vertical', 縦スライド
  mode: 'fade', フェードイン
  pager: 'false', ●〇ボタン
  controls: 'false' ←→ボタン
 });
});
</script>

Bootstrap

Bootstrap カルーセル(スライドショー)」参照

jQuery イベント

※詳細はhtmlイベント一覧参照

イベントをキャッチ

<input type="button" id="btnTest" value="aaa" />

$(function(){
  $('#btnTest').on('click' , function(){
    ~
  });
});
以下の様な書き方も可
$(function(){
  $('#btnTest').click(function(){
    ~
  });
});

$(function(){
  $('#btnTest').on('click' , (セレクタ) , function(){
  $('#btnTest').on('click' , 'input:not(.allow_submit)' , function(){
    ~
  });
});
“input:not(.allow_submit)”

サブルーチン呼び出し
function subRoutine(){
  window.alert('OK');
}
$(function(){
  $('#btnTest').click(function(){
    subRoutine();
  });
  または
  $('#btnTest').click(subRoutine);
  $('#btnTest').on('click',subRoutine);

});

イベントを発生させる

<input type="button" id="btnTest" value="aaa" />
先にイベントを書いておく

$(function(){
  $('#btnTest').trigger('click');
});

イベントのキャンセル

$(document).on("keypress", function (event) {

  イベント(この場合、全キー押下)をキャンセル
  event.preventDefault();
  

  Enterキー押下をキャンセル
  return event.which !== 13;
 }
});

特定の操作をキャンセル
$(document).on("keypress", function (event) {
 Enterキー押下時
 if (event.keyCode == 13) {
  イベント(この場合Enterキー押下)をキャンセル
  event.preventDefault();
 }
});

イベントの種類

click / dblclick
mouseout / mouseover / mousedown / mouseup / hover
mousemove
keypress / keydown / keyup
change
select
submit
focus/ blur
contextmenu
※詳細はhtmlイベント一覧参照

jQuery Ajax

概要

Asynchronous JavaScript + XML
非同期通信
JavaScriptを使用し、ページ全体の再ロードを行わずにXMLデータだけをやり取りする技術

$.get(url, params, callback, type);
$.post(url, params, callback, type)
$ajax(url, options);

load()

$(~).load(url, data, complete(data, textStatus, xhr));
urlで指定したリソースをAjaxで読み込み、要素に格納
$(~).load("http://test.html");

↑urlにパラメーターを渡す
$(~).load("http://test.html", "prm1=aaa&prm2=bbb");
$(~).load("http://test.html", { prm1:"aaa", prm2:"bbb"});

↑読み込み完了後コールバック関数を指定
$(~).load("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
  $("#log").append("status = " + status + "<br/>");  //error等
  $("#log").append("xhr.status = " + xhr.status + "<br/>");  404等
  $("#log").append("xhr.statusText = " + xhr.statusText + "<br/>");  Not Found等
});

get()

load()と違い戻り値がない。
$.get("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
  if (status == "success") {
    $(#result).html(data);
  }
});

$.get("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
  if (status == "success") {
    $(#result).html(data);
  }
}).done(function(data, status, xhr){
  $("#log").append("Done<br/>");
}).fail(function(data, status, xhr){
  $("#log").append("failed<br/>");
});

post()

$.post("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
  if (status == "success") {
    $(#result).html(data);
  }
});

$.post("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
  if (status == "success") {
    $(#result).html(data);
  }
}).done(function(data, status, xhr){
  $("#log").append("Done<br/>");
}).fail(function(data, status, xhr){
  $("#log").append("failed<br/>");
});

getJSON()

dataがJSON形式で返ってくる
$.getJSON("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
  $.each(data, function(key, val){
    $("#log").append("Data:" + key + "=" + val + "<br/>");
  });
})

汎用

非同期通信

$(document).ready(function(){
 $('#add_cart').click(function(){

  /**
  * Ajax通信メソッド
  * @param type : HTTP通信の種類
  * @param url  : リクエスト送信先のURL
  * @param data : サーバに送信する値
  */
  $.ajax(
  {
   type: "POST", GETも可
   dataType: "json", TEXT、HTML等も可
   contentType: 'application/json', 他タイプも可
   url: "http://test.com/",
   data:
   {
    "id":5,
   },
   success: function(data)
   {
    alert(data.count);
   },
   error: function(XMLHttpRequest,textStatus,errorThrown)
   {
    alert('処理できませんでした');
   },
  });
  return false;
 });
});

同期通信

$(document).ready(function(){
  function test(){
    /**
    * Ajax通信メソッド
    * @param type : HTTP通信の種類
    * @param url  : リクエスト送信先のURL
    * @param data : サーバに送信する値
    * @param async : 非同期通信
    */
    return $.ajax(
    {
     type: "POST", GETも可
     dataType: "json", TEXT、HTML等も可
     contentType: 'application/json', 他タイプも可
     url: "http://test.com/",
     data:
     {
      "id":5,
     },
     async: false
    }).responseText;
   });
  }
  
  $('#add_cart').click(function(){
  
   var result = test();
  
   if (result != 0) {
    var ret = window.confirm('カートには同商品を登録ずみです。追加しますか?');
    if (ret) {
     return true;
    }else{
     return false;
    }
   }
  });
});

サーバ側処理

jQuery Validation

jQueryライブラリ
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
jQueryValidationライブラリ
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.js"></script>

ユーザー名:
  
  
パスワード:
  
  

<form id="fm">
 ユーザー名:<label>
  <input type="text" id="username" name="username" size="20" />
 </label>
 パスワード:<label>
  <input type="text" id="password" name="password" size="20" />
 </label>
 <input type="submit" value="登録" />
</form>
<style>
 label {color: red;}
</style>

<script type="text/javascript">
  $(function(){
    $("#fm").validate({
      rules: {
        "username":{
          required: true,
          email: true
        },
        "password":{
          required: true,
          minlength: 6
        }
      },
      messages:{
        "username":{
          required: " ※ユーザー名は必須です。",
          email: " ※ユーザー名にはメールアドレスを入力して下さい。"
        },
        "password":{
          required: " ※パスワードは必須です。",
          minlength: $.validator.format(" ※パスワードは{0}文字以上を入力して下さい。")
        }
      }
    });
  });
</script>

jQuery 属性とCSSの操作

汎用

attr()

※html属性:attributeを取得/設定
htmlにおける属性については「html属性一覧」参照
$(要素).attr( 属性名 , 値 )
または、
$(要素).attr( 属性名 ) = 値;

$(要素).attr("disabled" , disabled)
$(要素).attr("disabled") = disabled

prop()

JavaScriptにおけるプロパティ(property)を取得/設定
$(要素).prop( プロパティ名 , 値 );
または、
$(要素).prop( プロパティ名 ) = 値;

$(要素).prop("disabled" , true)
$(要素).prop("disabled") = true

removeAttr()

$(要素).removeAttr(~)
属性~を削除

removeProp()

$(要素).removeProp(~)
属性~を削除

val()

$(要素).val(v)
要素eのvalueの取得/設定

CSS操作

css()

$(要素).css(~[,v])
CSSを取得/設定
$(要素).css("font-size" , "5em")
$(要素).css( { "font-size" : "5em" } )

addClass()

$(要素).addClass(c)
クラスcを追加

hasClass()

$(要素).hasClass(c)
クラスcが付いているか?

removeClass()

$(要素).removeClass(c)
クラスcを削除

toggleClass()

$(要素).toggleClass(c)
クラスcをトグルする

サイズ操作

height()

$(要素).height([v])
内容の高さを取得/設定

innerHeight()

$(要素).innerHeight([v])
ボーダーの内側の高さを取得/設定

innerWidth()

$(要素).innerWidth([v])
ボーダーの内側の幅を取得/設定

outerHeight()

$(要素).outerHeight()
ボーダーの外側の高さを取得

outerWidth()

$(要素).outerWidth()
ボーダーの外側の幅を取得

width()

$(要素).width([v])
内容の幅を取得/設定

位置

offset()

$(要素).offset()
eのドキュメント上での表示位置

offsetParent()

$(要素).offsetParent()
eの親要素内での表示位置

position()

$(要素).position()
eの親要素からの相対位置

scrollLeft()

$(要素).scrollLeft()
要素のスクロール位置

scrollTop()

$(要素).scrollTop()
要素のスクロール位置

データ属性操作

data()

$(要素).data()
データ属性を取得/設定

jQuery DOM操作

一覧

命令 機能
text(~) テキスト変更
text() テキスト取得
html(~) テキスト変更
html() テキスト取得
prepend(~) 要素の先頭へHTML挿入
append(~) 要素の末尾へHTML挿入
before(~) 要素の前にHTML挿入
after(~) 要素の後にHTML挿入
prependTo(~) 要素の先頭へHTML移動
appendTo(~) 要素の末尾へHTML移動
insertBefore(~) 要素の前へHTML移動
insertAfter(~) 要素の後へHTML移動
wrap(~) 要素で包む
wrapAll(~) 要素をまとめて包む
wrapInner(~) 子要素/テキストを要素で包む
unwrap() 親要素を削除
replaceWith(~) 要素を置換
remove() 要素を削除
attr(~,~) 属性値変更
attr(~) 属性値取得
removeAttr(~) 属性削除
addClass(~) class属性追加
removeClass(~) class属性削除
css(~,~) CSS属性値設定
css(~) CSS属性値取得

DOM操作命令

text(~)

変更前

<section id="text1">
 <h5>text(~)</h5>
 <p>変更前</p>
</section>

<script>
 $(function(){
  $("#text1 p").text("変更後");
 });
</script>

結果

text()

変更前

<section id="text2">
 <h5>text()</h5>
 <p id="texta">変更前</p>
 <p id="textb"></p>
</section>

<script>
 $(function(){
  $("#text2 p#textb").text($("#text2 p#texta").text());
 });
</script>

結果

html(~)

変更前

<section id="html1">
 <h5>html(~)</h5>
 <p>変更前</p>
</section>

<script>
 $(function(){
  $("#html1 p").html("変更後");
 });
</script>

結果

html()

変更前

<section id="html2">
 <h5>html()</h5>
 <p id="htmla">変更前</p>
 <p id="htmlb"></p>
</section>

<script>
 $(function(){
  $("#html2 p#htmlb").text($("#html2 p#htmla").text());
 });
</script>

結果

prepend(~)

 挿 入 前 

<section id="prepend">
 <h5>prepend(~)</h5>
 <p> 挿 入 前 </p>
</section>

<script>
 $(function(){
  $("#prepend p").prepend("<b>挿入後</b>");
 });
</script>

結果

append(~)

 挿 入 前 

<section id="append">
 <h5>append(~)</h5>
 <p> 挿 入 前 </p>
</section>

<script>
 $(function(){
  $("#append p").append("<b>挿入後</b>");
 });
</script>

結果

before(~)

 挿 入 前 

<section id="before">
 <h5>before(~)</h5>
 <p> 挿 入 前 </p>
</section>

<script>
 $(function(){
  $("#before p").before("<b>挿入後</b>");
 });
</script>

結果

after(~)

 挿 入 前 

<section id="after">
 <h5>after(~)</h5>
 <p> 挿 入 前 </p>
</section>

<script>
 $(function(){
  $("#after p").after("<b>挿入後</b>");
 });
</script>

結果

prependTo(~)

移動前

移動後

<section id="prependTo">
 <h5>prependTo(~)</h5>
 <p>移動前</p>
 <b>移動後</b>
</section>

<script>
 $(function(){
  $("#prependTo b").prependTo("#prependTo p");
 });
</script>

結果

appendTo(~)

移動前

移動後

<section id="appendTo">
 <h5>appendTo(~)</h5>
 <b>移動前</b>
 <p>移動後</p>
</section>

<script>
 $(function(){
  $("#appendTo b").appendTo("#appendTo p");
 });
</script>

結果

insertBefore(~)

移動前

移動後

<section id="insertBefore">
 <h5>insertBefore(~)</h5>
 <b>移動前</b>
 <p>移動後</p>
</section>

<script>
 $(function(){
  $("#insertBefore p").insertBefore("#insertBefore b");
 });
</script>

結果

insertAfter(~)

移動前

移動後

<section id="insertAfter">
 <h5>insertAfter(~)</h5>
 <b>移動前</b>
 <p>移動後</p>
</section>

<script>
 $(function(){
  $("#insertAfter b").insertAfter("#insertAfter p");
 });
</script>

結果

wrap(~)

wrap対象



<section id="wrap">
 <h5>wrap(~)</h5>
 <p>wrap対象</p>
</section>

<script>
 $(function(){
  $("#wrap p").wrap("<b></b>");
 });
</script>

結果

wrapAll(~)

wrapAll対象

wrapAll対象



<section id="wrapAll">
 <h5>wrapAll(~)</h5>
 <p>wrapAll対象</p>
 <p>wrapAll対象</p>
</section>

<script>
 $(function(){
  $("#wrapAll p").wrapAll("<b></b>");
 });
</script>

結果

wrap対象に別の要素がある場合

wrapAll対象

wrapAll対象外

wrapAll対象



<section id="wrapAll2">
 <h5>wrapAll(~)</h5>
 <p>wrapAll対象</p>
 wrapAll対象外<br>
 <p>wrapAll対象</p>
</section>

<script>
 $(function(){
  $("#wrapAll2 p").wrapAll("<b></b>");
 });
</script>

結果

jQuery エフェクト・アニメーション

設定値

ミリ秒の他に、"slow","normal","fast"を設定可能。

hide()

対象を非表示に
$(対象).hide();

show()

対象を表示させる
$(対象).show();

toggle()

対象が非表示の時は表示、表示されている時は非表示に
$(対象).toggle(s);

fadeOut()

段々薄く非表示に
$(対象).fadeOut(s);

fadeIn()

段々濃く表示させる
$(対象).fadeIn(s);

slideUp()

対象の下部がUpする様に非表示に
$(対象).slideUp(s);

slideDown()

対象の上部がDownする様に表示させる
$(対象).slideDown(s);

animate()

指定のアニメーションを実行させる
$(対象).animate( properties, [ duration ] , [ easing ] , [ complete ] )
$(対象).animate( properties, options )
の2種類の構文がある。

アニメーション無しで移動
$(要素).animate({ top: "0px", left: "0px" });

アニメーションの長さ(ミリ秒)
$(要素).animate({ top: "0px", left: "0px" } , 1000);
※1秒かけて移動(遅い)
$(要素).animate({ top: "0px", left: "0px" } , 10);
※0.01秒で移動(速い)
$(要素).animate({ top: "0px", left: "0px" } , 'slow');
$(要素).animate({ top: "0px", left: "0px" } , 'fast');
※ $(要素).animate( { top: "0px",}, { duration: 'slow'} )

加速(イージング)
swing:徐々に加速⇒減速して停止(デフォルト)
linear:加速0
$(要素).animate({ top: "0px", left: "0px" }, 'slow', "swing");
$(要素).animate({ top: "0px", left: "0px" }, 'slow', "linear");
※ $(要素).animate( { top: "0px",}, { duration: 'slow', easing: 'swing', } )

コールバック関数
$(要素).animate({ top: "0px", left: "0px" }, 1000, "linear", myFunc);
$(要素).animate({ top: "0px", left: "0px" }, 1000, "linear", function(){ ~ });
$(要素).animate({ top: "0px", left: "0px" }, 1000, "linear", myFunc1, myFunc2 );
※ $(要素).animate( { top: "0px",}, { duration: 'slow', easing: 'swing', step : myFunc1, complete: myFunc2 } )

メソッドチェーン
$(要素)
  .animate({ top: "0px", left: "0px" } , 1000)
  .animate({ top: "100px", left: "100px" } , 1000)
  .animate({ top: "0px", left: "0px" } , 1000)
  .animate({ top: "100px", left: "100px" } , 1000);

キュー
※即時実行
queue: false(デフォルト:true)
$(要素)
  .animate({ top: "0px", left: "0px", queue: false } , 1000)
  .animate({ top: "100px", left: "100px", queue: false } , 1000)

アニメーションの停止
$(要素).stop();

スクロール(animate)

<script type="text/javascript">
  $(function () {
    //クラス:aのtopからの絶対位置を取得
    var iniPlace = $(".a").offset().top;
    
    //↑位置へスクロール
    $("html,body").animate({ scrollTop: iniPlace }, "fast");
  })
</script>
<div>
  <p class="a">A</p>
  <p class="b">B</p>  ←ここへスクロールされる
  <p class="c">C</p>
<div>

※画面最上部へスクロール
$("html,body").animate({ scrollTop: 0 }, "fast");

jQuery用 セレクタ

一覧

CSSで使用可能なセレクタについては「CSS セレクタ」参照

セレクタ名 書式 機能
firstセレクタ $("要素:first") 指定した要素の最初の要素 $("li:first").css("color","red");
lastセレクタ $("要素:last") 指定した要素の最後の要素 $("li:last").css("color","red");
evenセレクタ $("要素:even") 指定した要素の偶数番目の要素
(0から数える)
$("li:even").css("color","red");
oddセレクタ $("要素:odd") 指定した要素の奇数番目の要素
(0から数える)
$("li:odd").css("color","red");
eqセレクタ(n) $("要素:eq(n)") 指定番目の要素
(0から数える)
$("li:eq(2)").css("color","red");
ltセレクタ(n) $("要素:lt(n)") 指定番目より前の要素
(0から数える)
$("li:lt(2)").css("color","red");
gtセレクタ $("要素:gt(n)") >指定番目より後の要素
(0から数える)
$("li:gt(2)").css("color","red");
containsセレクタ $("要素:contains("文字列")") 指定の文字列を含む要素 $("li:contain('テスト')").css("color","red");
hasセレクタ $("要素:has(要素)") 指定の要素を含む要素 $("li:has(div)").css("color","red");
parentセレクタ $("要素:parent") 子要素、テキストを含む要素 $("li:parent").css("color","red");
headerセレクタ $("要素:header") h1~h6見出し要素 $("li:header").css("color","red");

汎用

:first

最初の要素

  • aaa
  • bbb
  • ccc
  • ddd

<section id="first">
 <h5>first</h5>
 <ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
  <li>ddd</li>
 </ul>
</section>

<script>
 $(function(){
  $("#first li:first").css("color", "red");
 });
</script>

:last

最後の要素

  • aaa
  • bbb
  • ccc
  • ddd

<section id="last">
 <h5>last</h5>
 <ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
  <li>ddd</li>
 </ul>
</section>

<script>
 $(function(){
  $("#last li:last").css("color", "red");
 });
</script>

:even

偶数番目の要素

  • aaa
  • bbb
  • ccc
  • ddd

<section id="even">
 <h5>even</h5>
 <ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
  <li>ddd</li>
 </ul>
</section>

<script>
 $(function(){
  $("#even li:even").css("color", "red");
 });
</script>

:odd

奇数番目の要素

  • aaa
  • bbb
  • ccc
  • ddd

<section id="odd">
 <h5>odd</h5>
 <ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
  <li>ddd</li>
 </ul>
</section>

<script>
 $(function(){
  $("#odd li:odd").css("color", "red");
 });
</script>

:eq(n)

n番目の要素

  • aaa
  • bbb
  • ccc
  • ddd

<section id="eq">
 <h5>eq</h5>
 <ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
  <li>ddd</li>
 </ul>
</section>

<script>
 $(function(){
  $("#eq li:eq(2)").css("color", "red");
 });
</script>

:lt(n)

n番目より前の要素(nは含まない)

  • aaa
  • bbb
  • ccc
  • ddd

<section id="lt">
 <h5>lt</h5>
 <ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
  <li>ddd</li>
 </ul>
</section>

<script>
 $(function(){
  $("#lt li:lt(2)").css("color", "red");
 });
</script>

:gt(n)

n番目より後の要素(nは含まない)

  • aaa
  • bbb
  • ccc
  • ddd

<section id="gt">
 <h5>gt</h5>
 <ul>
  <li><span>aaa</span></li>
  <li>bbb</li>
  <li>ccc</li>
  <li>ddd</li>
 </ul>
</section>

<script>
 $(function(){
  $("#gt li:gt(1)").css("color", "red");
 });
</script>

:contains(~)

指定の文字列を含む要素

  • aaa
  • bbb
  • ccc
  • ddd

<section id="contains">
 <h5>contains</h5>
 <ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
  <li>ddd</li>
 </ul>
</section>

<script>
 $(function(){
  $("#contains li:contains(‘bbb’)").css("color", "red");
 });
</script>

:has(~)

~の要素を含む

  • aaa
  • bbb
  • ccc
  • ddd

<section id="has">
 <h5>has</h5>
 <ul>
  <li><span>aaa</span></li>
  <li>bbb</li>
  <li>ccc</li>
  <li>ddd</li>
 </ul>
</section>

<script>
 $(function(){
  $("#has li:has(span)").css("color", "red");
 });
</script>

:parent

小要素を持つ(自身が親)

  • aaa
  • bbb
  • ccc
  • ddd

<section id="parent">
 <h5>parent</h5>
 <ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
  <li>ddd</li>
 </ul>
</section>

<script>
 $(function(){
  $("#parent li:parent").css("color", "red");
 });
</script>

:children

小要素

<section id="header">
 <h5>header</h5>
 <ul>
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
  <li>ddd</li>
 </ul>
</section>

<script>
 $(function(){
  $("#header :header").css("color", "red");
 });
</script>

:only-child

唯一の子要素
var onlychild = $("span:only-child").text();
//⇒onlychild : div6-1

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 イベント」参照

html/JS/jQueryイベント一覧

一覧

onclick="" クリック時 多くの要素
ondblclick="" ダブルクリック時 多くの要素
onmousedown="" マウスのボタンが押し下げられた時 多くの要素
onmouseup="" マウスのボタンが放された時 多くの要素
onmouseover="" マウスカーソルが乗った時 多くの要素
onmousemove="" マウスカーソルが移動時 多くの要素
onmouseout="" マウスカーソルが離れた時 多くの要素
onkeypress="" キーが押されて放された時 多くの要素
onkeydown="" キーが押し下げられた時 多くの要素
onkeyup="" キーが放された時 多くの要素
onload="" ロード完了時 body要素、frameset要素
onunload="" 他のページに移動して現在のページが消える時 body要素、frameset要素
onfocus="" フォーカス時 a要素、area要素、button要素、input要素、label要素、select要素、textarea要素
onblur="" フォーカス喪失時 a要素、area要素、button要素、input要素、label要素、select要素、textarea要素
onsubmit="" フォーム送信時 form要素
onreset="" フォームリセット時 form要素
onselect="" 入力欄のテキスト選択時 input要素、textarea要素
onchange="" フォーカス喪失時、値が変化していた時 input要素、select要素、textarea要素
onContextmenu="" 右クリックメニュー表示時 document要素、body要素、他多くの要素

<a>タグ

onClick
リンクテキストをクリックした時

onClick
<a href="#" id="mylink1">onClick</a><br/>


<script type="text/javascript">
  document.getElementById(‘mylink1’).onclick = function(){
    window.alert("onClick");
  };
</script>

onMouseOver
リンクテキストの上にマウスポインタを乗せた時

onMouseOver
<a href="#" id="mylink2">onMouseOver</a><br/>


<script type="text/javascript">
  document.getElementById(‘mylink2’).onmouseover = function(){
    window.alert("onMouseOver");
  };
</script>

onMouseOut
リンクテキストの上からマウスポインタが外れた時

onMouseOut
<a href="#" id="mylink3">onMouseOut</a><br/>


<script type="text/javascript">
  document.getElementById(‘mylink3’).onmouseout = function(){
    window.alert("onMouseOut");
  };
</script>

onClick
リンクテキストをクリックした時

onClick
<a href="#" id="mylink1">onClick</a><br/>


<script type="text/javascript">
  $(function(){
    $("#mylink1").click(function(){
      window.alert("onClick");
    });
  });
</script>

onMouseOver
リンクテキストの上にマウスポインタを乗せた時

onMouseOver
<a href="#" id="mylink2">onMouseOver</a><br/>


<script type="text/javascript">
  $(function(){
    $("#mylink2").mouseover(function(){
      window.alert("onMouseOver");
    });
  });
</script>

onMouseOut
リンクテキストの上からマウスポインタが外れた時

onMouseOut
<a href="#" id="mylink3">onMouseOut</a><br/>


<script type="text/javascript">
  $(function(){
    $("#mylink2").mouseOut(function(){
      window.alert("onMouseOut");
    });
  });
</script>

onClick
リンクテキストをクリックした時

onClick

<a href="#" id="mylink1" onClick="fnOnClick()">onClick</a><br/>
<script type="text/javascript">
  function fnOnClick(){
    window.alert("onClick");
  }
</script>

onMouseOver
リンクテキストの上にマウスポインタを乗せた時

onMouseOver

<a href="#" id="mylink2" onMouseOver="fnOnMouseOver()">onMouseOver</a><br/>
<script type="text/javascript">
  function fnOnMouseOver(){
    window.alert("onMouseOver");
  }
</script>

onMouseOut
リンクテキストの上からマウスポインタが外れた時

onMouseOut

<a href="#" id="mylink3" onMouseOut="fnOnMouseOut()">onMouseOut</a><br/>
<script type="text/javascript">
  function fnOnMouseOut(){
    window.alert("onMouseOut");
  }
</script>

<img>タグ

onAbort
画像の読み込みが中止された時


<img id=”myimg1″ src=”~.gif” /><br/>

<script type="text/javascript">
  ※実際のこのページにはこれら記述は省略
  document.getElementById("myimg1").onabort = function(){
    window.alert("onAbort");
  }
</script>

onError
画像ファイルが見つからない時


<img id="myimg2" src="~.gif" /><br/>

<script type="text/javascript">
  ※実際のこのページにはこれら記述は省略
  document.getElementById("myimg2").onerror = function(){
    window.alert("onError");
  }
</script>

onLoad
画像の読み込みが完了した時


<img id=”myimg3″ src=”~.gif” /><br/>

<script type="text/javascript">
  ※実際のこのページにはこれら記述は省略
  document.getElementById("myimg3").onload = function(){
    window.alert("onLoad");
  }
</script>

onAbort
画像の読み込みが中止された時:無し

onError
画像の読み込みが中止された時


<img id="myimg2" src="~.gif" /><br/>


<script type="text/javascript">
  $(function(){
    $("#myimg2").error(function(){
      //省略
      //window.alert("onError");
    });
  });
</script>

onLoad
画像の読み込みが完了した時


<img id="myimg3" src="~.gif" /><br/>


<script type="text/javascript">
  $(function(){
    $("#myimg3").load(function(){
      //省略
      //window.alert("onLoad");
    });
  });
</script>

onAbort
画像の読み込みが中止された時


<img id="myimg1" onAbort="fnOnAbort()" src="~.gif" /><br/>

<script type="text/javascript">
  ※実際のこのページにはこの記述は省略
  function fnOnAbort(){
    window.alert("onAbort");
  }
</script>

onError
画像ファイルが見つからない時


<img id="myimg2" onError="fnOnError()" src="~.gif" /><br/>

<script type="text/javascript">
  ※実際のこのページにはこの記述は省略
  function fnOnError(){
    window.alert("onError");
  }
</script>

onLoad
画像の読み込みが完了した時


<img id="myimg3" onLoad="fnOnLoad()" src="~.gif" /><br/>

<script type="text/javascript">
  ※実際のこのページにはこの記述は省略
  function fnOnLoad(){
    window.alert("onLoad");
  }
</script>

windowオブジェクト,<body>タグ,<frameset>タグ

<body id=”mybody”>
 ~
</body>

onBlur
ウィンドウがフォーカスを失う時

<script type="text/javascript">
  window.onblur = function() {
    //window.alert("onBlur");
  };
  document.getElementById("mybody").onblur = function() {
    //window.alert("onBlur");
  };
</script>

onError
ページが正しく読み込まれなかった時

<script type="text/javascript">
  window.onerror= function() {
    //window.alert("onError");
  };
  document.getElementById("mybody").onerror= function() {
    //window.alert("onError");
  };
</script>

onFocus
ウィンドウがフォーカスを得る時

<script type="text/javascript">
  window.onfocus= function() {
    //window.alert("onFocus");
  };
  document.getElementById("mybody").onfocus= function() {
    //window.alert("onFocus");
  };
</script>

onLoad
ページの読み込みが完了した時

<script type="text/javascript">
  window.onload= function() {
    //window.alert("onLoad");
  };
  document.getElementById("mybody").onload= function() {
    //window.alert("onLoad");
  };
</script>

onUnload
現在のページから他のページに移る時

<script type="text/javascript">
  window.onunload= function() {
    //window.alert("onUnload");
  };
  document.getElementById("mybody").onunload= function() {
    //window.alert("onUnload");
  };
</script>

onBlur
ウィンドウがフォーカスを失う時

<script type="text/javascript">
  $(function(){
    $(window).blur(function(){
      //省略
      //window.alert("onBlur");
    });
  });
</script>

onError
ページが正しく読み込まれなかった時

<script type="text/javascript">
  $(function(){
    $(window).error(function(){
      //省略
      //window.alert("onError");
    });
  });
</script>

onFocus
ウィンドウがフォーカスを得る時

<script type="text/javascript">
  $(function(){
    $(window).focus(function(){
      //省略
      //window.alert("onFocus");
    });
  });
</script>

onLoad
ページの読み込みが完了した時

<script type="text/javascript">
  $(function(){
    $(window).load(function(){
      //省略
      //window.alert("onLoad");
    });
  });
</script>

onUnload
現在のページから他のページに移る時

<script type="text/javascript">
  $(function(){
    $(window).unload(function(){
      //省略
      //window.alert("onUnload");
    });
  });
</script>

onBlur
ウィンドウがフォーカスを失う時

<script type="text/javascript">
  function fnOnBlur(){
    window.alert("onBlur");
  }
</script>

<body id="mybody" onBlur="fnOnBlur()">
 ~
</body>

onError
ページが正しく読み込まれなかった時

<script type="text/javascript">
  function fnOnError(){
    window.alert("onError");
  }
</script>

<body id="mybody" onError="fnOnError()">
 ~
</body>

onFocus
ウィンドウがフォーカスを得る時

<script type="text/javascript">
  function fnOnFocus(){
    window.alert("onFocus");
  }
</script>

<body id="mybody" onFocus="fnOnFocus()">
 ~
</body>

onLoad
ページの読み込みが完了した時

<script type="text/javascript">
  function fnOnLoad(){
    window.alert("onLoad");
  }
</script>

<body id="mybody" onLoad="fnOnLoad()">
 ~
</body>

onUnload
現在のページから他のページに移る時

<script type="text/javascript">
  function fnOnUnload(){
    window.alert("onUnload");
  }
</script>

<body id="mybody" onUnload="fnOnUnload()">
 ~
</body>

<form>タグ

onReset
フォームがリセットされる直前に発生



<form id="myform1">
  <input type="text" /><br/>
  <input type="Reset" value="Reset" />
</form>
<script type="text/javascript">
  document.getElementById("myform").onreset = function(){
    window.alert("onReset");
  }
</script>

onSubmit
フォームがサブミットされる直前に発生


<form id="myform2">
  <input type="Submit" value="Submit" />
</form>
<script type="text/javascript">
  document.getElementById("myform").onSubmit = function(){
    window.alert("onSubmit");
  }
</script>

onReset
フォームがリセットされる直前に発生



<form id="myform3">
  <input type="text" /><br/>
  <input type="reset" id="myreset" value="reset" /><br/>
</form>

<script type="text/javascript">
  $(function(){
    //「reset」イベントは無い(多分)ので「click」イベントで代用
    $("#myreset").click(function(){
      window.alert("onReset");
    });
  });
</script>

onSubmit
フォームがサブミットされる直前に発生


<form id="myform4">
  <input type="submit" value="submit" /><br/>
</form>

<script type="text/javascript">
  $(function(){
    $("#myform").submit(function(){
      window.alert("onSubmit");
    });
  });
</script>

onReset
フォームがリセットされる直前に発生



<script type="text/javascript">
  function fnReset(){
    window.alert("onReset");
  }
</script>

<form onReset="fnReset()">
  <input type="Reset" value="Reset" />
</form>

onSubmit
フォームがサブミットされる直前に発生



<script type="text/javascript">
  function fnSubmit(){
    window.alert("onSubmit");
  }
</script>

<form onSubmit="fnSubmit()">
  <input type="submit" value="submit" />
</form>

<input type="text">,<input type="password">(<form>タグ内)

onBlur
フォーカスを失う時




<input type="text" id="mytext1" value="onblur"/>
<script type="text/javascript">
  document.getElementById("mytext1").onblur = function() {
    //window.alert("onBlur");
  };
</script>

onChange
テキストが変更され、フォーカスを失った時




<input type="text" id="mytext2" value="onchange"/>
<script type="text/javascript">
  document.getElementById("mytext2").onchange = function() {
    //window.alert("onChange");
  };
</script>

onFocus
フォーカスを得た時




<input type="text" id="mytext3" value="onfocus"/>
<script type="text/javascript">
  document.getElementById("mytext3").onfocus = function() {
    //window.alert("onFocus");
  };
</script>

onSelect
テキストの一部、または全部が選択状態(色が反転した状態のこと)になったとき発生




<input type="text" id="mytext4" value="onselect"/>
<script type="text/javascript">
  document.getElementById("mytext4").onselect = function() {
    //window.alert("onSelect");
  };
</script>

onBlur
フォーカスを失う時


<input type="text" id="mytext1" />



<script type="text/javascript">
  $(function(){
    $("#mytext1").blur(function(){
      window.alert("onBlur");
    });
  });
</script>

onChange
テキストが変更され、フォーカスを失った時


<input type="text" id="mytext2" />

<script type="text/javascript">
  $(function(){
    $("#mytext2").change(function(){
      window.alert("onChange");
    });
  });
</script>

onFocus
フォーカスを得た時


<input type="text" id="mytext3" />



<script type="text/javascript">
  $(function(){
    $("#mytext3").focus(function(){
      window.alert("onFocus");
    });
  });
</script>

onSelect
テキストの一部、または全部が選択状態(色が反転した状態のこと)になったとき発生


<input type="text" id="mytext4" />

<script type="text/javascript">
  $(function(){
    $("#mytext4").select(function(){
      window.alert("onSelect");
    });
  });
</script>

onBlur
フォーカスを失う時


<input type="text" id="mytext1" onBlur="fnOnBlur()" value="onBlur"/><br/>

<script type="text/javascript">
  function fnOnBlur(){
    window.alert("onblur");
  }
</script>

onChange
テキストが変更され、フォーカスを失った時


<input type="text" id="mytext3" onChange="fnOnChange()" value="onChange"/><br/>

<script type="text/javascript">
  function fnOnChange(){
    window.alert("onChange");
  }
</script>

onFocus
フォーカスを得た時


<input type="text" id="mytext2" onFocus="fnOnFocus()" value="onFocus"/><br/>

<script type="text/javascript">
  function fnOnFocus(){
    window.alert("onFocus");
  }
</script>

onSelect
テキストの一部、または全部が選択状態(色が反転した状態のこと)になったとき発生


<input type="text" id="mytext4" onSelect="fnOnSelect()" value="onSelect"/><br/>

<script type="text/javascript">
  function fnOnSelect(){
    window.alert("onSelect");
  }
</script>

<input type="button">,<input type="submit">,<input type="reset">(<form>タグ内)

onClick
クリックしたとき発生


<input type="button" id="mybutton3" /><br/>
<button id="mybutton4"></button><br/>

<script type="text/javascript">
  document.getElementById("mybutton3").onclick = function() {
    window.alert("onClick");
  };
  document.getElementById("mybutton4").onclick = function() {
    window.alert("onClick");
  };
</script>

<input id="htmlButton" type="button" value="htmlButton" />

<script type="text/javascript">
 $(function(){
  $("#htmlButton").click (function(){
    window.alert('click');
  });
  または
  $("#htmlButton").on("click", function(){
    window.alert(‘click’);
  });

 });
</script>

onClick
クリックしたとき発生

onClick=“fnOnClick()” />

<input type="button" id="mybutton1" onClick="fnOnClick()" /><br/>
<button id="mybutton2" onClick="fnOnClick()"></button><br/>

<script type="text/javascript">
  function fnOnClick(){
    windows.alert("onClick");
  ]
</script>

<input type="radio">


<input type="radio" id="rdoMan" name="gender" checked="checked" value="man" />
<label for="rdoMan">MAN</label><br/>
<input type="radio" id="rdoWoman" name="gender" value="woman" />
<label for="rdoWoman">WOMAN</label><br/>

changeイベント
<script type="text/javascript">
  $(function(){
    $("input[name='gender']:radio").change(function(){
      window.alert('checked');
    });
  });
</script>

index:0(=man)の要素を選択
$("input[name='gender']:eq('0')").attr("checked", true);

value:manの要素を選択
$("input[name='gender']").val(["man"]);

要素全体を未選択
$("input[name='gender']").attr("checked", false);

<select>

$(‘#optTime’).on('change',function(){
window.alert(‘changed’);
});