jQuery スライダー fotorama

読み込み

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/X.X.X/jquery.min.js"></script>
<script type="text/javascript" src="./js/fotorama.js"></script>
<link rel="stylesheet" href="./css/fotorama.css" />

設定

<div class="fotorama"
  オプション1=~
  オプション2=~
  オプション3=~>
  <img src="./images/1.jpg">
  <img src="./images/2.jpg">
</div>

画像でない要素もスライド可能
<div class="fotorama">
  <div>~</div>
  <div>~</div>
  <div>~</div>
</div>

オプション

<div class="fotorama"
  幅
  data-width="800&quot
  
  高さ
  data-height="600">
  
  サムネイル表示
  data-nav="thumbs"
  
  全画面表示
  data-allowfullscreen="true"
  
  フェード表示
  data-transition="crossfade"
  
  ループ再生
  data-loop="true"
  
  自動再生
  data-autoplay="true"
  
  矢印表示
  data-arrows="true"
  
  クリック移動
  data-click="true"
  
  スワイプ移動
  data-swipe="true"
  
 <img src="./images/1.jpg">
 <img src="./images/2.jpg">
</div>


幅を自動調整
<div class="fotorama" >
 <img src="./images/1.jpg">
 <img src="./images/2.jpg" data-fit="cover">
</div>


画像にキャプションを表示
<div class="fotorama">
 <img src="./images/1.jpg" data-caption="One">
 <img src="./images/2.jpg" data-caption="Two">
</div>

jQuery スライダー bxSlider

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>

結果

table要素操作

<table id="tbl">
  <tr><th>1</th><th>a</th></tr>
  <tr><td>2</td><td class="aaa">b</td></tr>
  <tr><td>3</td><td class="aaa">c</td></tr>
</table>

var tbl = document.getElementById('tbl')

$('.aaa').each(function(index, elm){
   var val = tbl.rows[index + 1].cells[1].innerHTML;
    →val:b

   var val = elm.innerHTML;
    →val:b
});

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