jQueryのセレクター２　eq/lt/gt/headerセレクター

2015年8月3日

前回に引き続きjQuery独自の
セレクターについて紹介します。

eq/lt/gtセレクター

セレクターの中から
特定の順番の要素をeq(equal)セレクターで、
特定の要素より前の要素をlt(less than)で、
特定の要素より後の要素をgt(greater than)で、
指定できます。

要素は出てくる順番を数値を指定します。
１番目の要素は「１」ではなく「０」です。
２番目の要素は「２」ではなく「１」です。

実際の順番から「－１」をした値を指定します。

headerセレクター

headerセレクターは、h1～h6までのheading要素を
まとめて選択できるセレクターです。

実行結果はこちらです。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQueryStudy</title>

    <style>
	*{margin:0;padding:0;}
	
    #container{
        width:640px;
        height:400px;
        margin:0 auto;}
    ul{
        list-style-type:decimal;
        margin-left:24px;
        font-size:16px;
        background-color:#f0f0f0;
        font-family:"メイリオ";}
    </style>    
    
    <script src="js/jquery-1.11.3.js"></script>  
    
</head>
<body>

<div id="container">

<ul>
    <li>りんご</li>
    <li>なし</li>
    <li>もも</li>
    <li>ぶどう</li>
    <li>すいか</li>    
</ul>
    
<h1>地球</h1>
<h2>日本国</h2>
    <p>test</p>
<h3>東京都</h3>
<h4>品川区</h4>
<h5>上大崎</h5>
    <p>test</p>
<h6>1-1-1</h6>
    
</div><!--contatiner-->

<script>
$(document).ready(function(){
    //eq/lt/gtセレクター
    $("li:lt(2)").css("background-color","aquamarine");
    $("li:eq(2)").css("background-color","greenyellow");
    $("li:gt(2)").css("background-color","gold");
    
    //headerセレクター
    $(":header").css("background-color","skyblue")
});

</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>jQueryStudy</title>

<style>

*{margin:0;padding:0;}

#container{

width:640px;

height:400px;

margin:0 auto;}

ul{

list-style-type:decimal;

margin-left:24px;

font-size:16px;

background-color:#f0f0f0;

font-family:"メイリオ";}

</style>

</head>

<body>

<ul>

</ul>

</div>

$(document).ready(function(){

//eq/lt/gtセレクター

$("li:lt(2)").css("background-color","aquamarine");

$("li:eq(2)").css("background-color","greenyellow");

$("li:gt(2)").css("background-color","gold");

//headerセレクター

$(":header").css("background-color","skyblue")

});

</script>

</body>

</html>

-jQuery
-jQuery独自, セレクター

comment コメントをキャンセル

: jQuery

ページトップへスムーズにスクロールさせる。

今回は、ボタンをクリックしたらページのトップへ滑らかに遷移するというものを jQueryを使って作成します。１．jQueryのプラグインを入手する。今回は、トップページにスムーズに戻るためにイ ...

: jQuery

マウスの動きに合わせて処理を行うmousemove()

この命令は、特定の要素上でマウスカーソルが動いたときに処理を行います。 mousemoveを使用するのは、座標などの情報を取得する命令と組み合わせるケースがあります。 mousemove()の中の ...

: jQuery

表示中の要素を非表示にする hide()

hide()は、show()の逆の命令です。表示されている状態(display:block)のHTML要素を非表示(display:none)にします。 show()と同様にhide(...)の括 ...

jQuery

水平方向のアコーディオンメニュー

今回紹介するのは横にスライドするアコーディオンメニューです。実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>HorrizontalAccordion</title>
   
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/jquery.easing.1.3.js"></script>
    <script src="js/jquery.zaccordion.js"></script>

    <style>
    *{margin:0;padding:0;}
    ol,ul{list-style-type:none;}
        
    div#contents{
        width:920px;
        height:400px;
        padding:20px;
        background-color:brown;
        position:absolute;
        margin:-220px 0 0 -480px;
        left:50%;
        top:50%;
        -webkit-box-shadow:0 0 50px rgba(0,0,0,0,5);
    }
    h1{
        width:110px;
        height:370px;
        position:absolute;
        top:20px;
        right:20px;
        padding:30px 0 0 50px;
        background-color:skyblue;}
    ul#contentsList{width:760px;}
        
        ul#contentsList li{
            width:460px;
            position:relative;
            overflow:visible;}
        ul#contentsList li:nth-of-type(1){
            background-color:yellow;}
        ul#contentsList li:nth-of-type(2){
            background-color:yellowgreen;}
        ul#contentsList li:nth-of-type(3){
            background-color:purple;}
        ul#contentsList li:nth-of-type(4){
            background-color:turquoise;}
        ul#contentsList li:nth-of-type(5){
            background-color:pink;}
        ul#contentsList li:nth-of-type(6){
            background-color:coral;}

            ul#contentsList li h2{
                position:absolute;
                top:0;
                right:0;
                height:400px;
                padding:50px 15px 0 0;
            /*    border-right:1px solid #ddd;*/
                background-color:aquamarine;}

            ul#contentsList li.frame-open h2{
                background-color:red;}
    </style>

</head>
<body>

<div id="contents">
    <h1></h1>
    <ul id="contentsList">
        <li>
            <h2></h2>
            <div class="contentsBody">
            </div>
        </li>
        <li>
            <h2></h2>
            <div class="contentsBody">
            </div>
        </li>
        <li>
            <h2></h2>
            <div class="contentsBody">
            </div>
        </li>
        <li>
            <h2></h2>
            <div class="contentsBody">
            </div>
        </li>
        <li>
            <h2></h2>
            <div class="contentsBody">
            </div>
        </li>
        <li>
            <h2></h2>
            <div class="contentsBody">
            </div>
        </li>
    </ul>
</div>

<script>
$(function(){
    
    //アコーディオンの設定
    var li = $("#contentsList li").toArray().reverse();
    $("contentsList").empty().append(li);
    
    $("#contentsList").zAccordion({
        timeout:1000,            // 自動スライド時の１スライド当たりの表示時間
        slideWidth:460,           // アコーディオンのコンテンツの全体の幅
        width:760,                // アコーディオンのコンテンツの全体の高さ
        height:400,               // スライドするコンテンツ１枚分の幅
        speed:440,                // スライドするコンテンツ１枚分の高さ
        startingSlide:5,          // 最初に表示するコンテンツ番号
        slideClass:"frame",                 // スライドさせるコンテンツのli要素に付すクラス名
        slideOpenClass:"frame-open",        // 開いているコンテンツのli要素に付すクラス名
        slideClosedClass:"frame-closed",     // 閉じているコンテンツのli要素に付すクラス名
        slidePreviousClass:"frame-previous", // 前回開いていたコンテンツのli要素に付すクラス名
        easing:"easeInOutCubic",            // スライド時のアニメーション
        invert:true                         // 重なり順を逆にして見出しを右に持ってくる
    });
});
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

<!doctype html>

<html>

<head>

<title>HorrizontalAccordion</title>

<style>

*{margin:0;padding:0;}

ol,ul{list-style-type:none;}

div#contents{

width:920px;

height:400px;

padding:20px;

background-color:brown;

position:absolute;

margin:-220px 0 0 -480px;

left:50%;

top:50%;

-webkit-box-shadow:0 0 50px rgba(0,0,0,0,5);

}

h1{

width:110px;

height:370px;

position:absolute;

top:20px;

right:20px;

padding:30px 0 0 50px;

background-color:skyblue;}

ul#contentsList{width:760px;}

ul#contentsList li{

width:460px;

position:relative;

overflow:visible;}

ul#contentsList li:nth-of-type(1){

background-color:yellow;}

ul#contentsList li:nth-of-type(2){

background-color:yellowgreen;}

ul#contentsList li:nth-of-type(3){

background-color:purple;}

ul#contentsList li:nth-of-type(4){

background-color:turquoise;}

ul#contentsList li:nth-of-type(5){

background-color:pink;}

ul#contentsList li:nth-of-type(6){

background-color:coral;}

ul#contentsList li h2{

position:absolute;

top:0;

right:0;

height:400px;

padding:50px 15px 0 0;

/* border-right:1px solid #ddd;*/

background-color:aquamarine;}

ul#contentsList li.frame-open h2{

background-color:red;}

</style>

</head>

<body>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

</ul>

</div>

$(function(){

//アコーディオンの設定

var li = $("#contentsList li").toArray().reverse();

$("contentsList").empty().append(li);

$("#contentsList").zAccordion({

timeout:1000, // 自動スライド時の１スライド当たりの表示時間

slideWidth:460, // アコーディオンのコンテンツの全体の幅

width:760, // アコーディオンのコンテンツの全体の高さ

height:400, // スライドするコンテンツ１枚分の幅

speed:440, // スライドするコンテンツ１枚分の高さ

startingSlide:5, // 最初に表示するコンテンツ番号

slideClass:"frame", // スライドさせるコンテンツのli要素に付すクラス名

slideOpenClass:"frame-open", // 開いているコンテンツのli要素に付すクラス名

slideClosedClass:"frame-closed", // 閉じているコンテンツのli要素に付すクラス名

slidePreviousClass:"frame-previous", // 前回開いていたコンテンツのli要素に付すクラス名

easing:"easeInOutCubic", // スライド時のアニメーション

invert:true // 重なり順を逆にして見出しを右に持ってくる

});

</script>

</body>

</html>

今回使っているjQueryプラグイン ●jQuery ...

: jQuery

マウスのホイールを使って画像の切替を行う

タイトルの通りです。マウスのホイールをいじると画像が切り替わるjQueryの機能を作成してみました。サンプルコードの実行結果はこちら今回使用したプラグイン・imagesloaded ・jquer ...

jQueryのセレクター１　odd/even/first/lastセレクター

jQueryのセレクター３　parent/contains/hasセレクター

jQueryのセレクター２ eq/lt/gt/headerセレクター

eq/lt/gtセレクター

headerセレクター

jQueryのセレクター２　eq/lt/gt/headerセレクター