jQuery勉強めも②
jQueryのことで勉強したことめも続き
フィルタ
#subの子要素にあるli要素のうち、好きなものをフィルタを使って選び、文字色を赤にします。
<ul id="main"> <li>0</li> <li class="item">1</li> <li class="item">2</li> <li> 3 <ul id="sub"> <li>3-0</li> <li>3-1</li> <li class="item">3-2</li> <li class="item">3-3</li> <li>3-4</li> </ul> </li> </ul>
①:eq()
#sub直下の2番目のli要素にだけ反映
$(function)(){
$("#sub>li:eq(2)").css('color','red');
});()の中に選択したい番号を記述します。
この番号は添え字と言って、0から始まりますので、3-2を選択したいときは、:eq(2)となります。
<ul id="sub"> <li>3-0</li> //添え字[0] <li>3-1</li> //添え字[1] <li class="item">3-2</li> //添え字[2] <li class="item">3-3</li> //添え字[3] <li>3-4</li> //添え字[4] </ul>
以下の文字だけ赤くなります
<li class="item">3-2</li> //添え字[2]
②:gt()
添え字[n]より大きいものが選択されます
$(function)(){
$("#sub>li:gt(1)").css('color','red');
});この場合、添え字[1]より大きいものを選択していますので、以下のli要素に反映されます
<li class="item">3-2</li> //添え字[2] <li class="item">3-3</li> //添え字[3] <li>3-4</li> //添え字[4]
③:lt()
添え字[n]より小さいものが選択されます
$(function)(){
$("#sub>li:lt(1)").css('color','red');
});この場合、添え字[1]より小さいものを選択していますので、以下のli要素に反映されます
<li>3-0</li> //添え字[0]
④:odd
添え字[n]の奇数のものが選択されます
$(function)(){
$("#sub>li:odd").css('color','red');
});この場合、以下のli要素に反映されます
<li>3-1</li> //添え字[1] <li class="item">3-3</li> //添え字[3]
⑤:even
添え字[n]の偶数のものが選択されます
$(function)(){
$("#sub>li:even").css('color','red');
});この場合、以下のli要素に反映されます
<li>3-0</li> //添え字[0] <li class="item">3-2</li> //添え字[2] <li>3-4</li> //添え字[4]
⑥:contains()
要素の中身に入っているものを選択します
$(function)(){
$("#sub>li:contains('4')").css('color','red');
});この場合、li要素の中に「4」が入っているものにだけ反映されます
<li>3-4</li> //添え字[4]
⑦:first、:last
:firstでは、要素の最初にだけ反映されます
$(function)(){
$("#sub>li:first").css('color','red');
});この場合、li要素の最初にだけ反映されます
<li>3-0</li> //添え字[0]
また、:firstに対して、:lastでは要素の最後にだけ反映されます
$(function)(){
$("#sub>li:last").css('color','red');
});この場合、li要素の最後にだけ反映されます
<li>3-4</li> //添え字[4]
jQuery勉強めも①
jQueryのことで勉強したことめも
全く初心者なので書き方とかほんとに基本のとこから
準備
jQueryをローカルに落として、headの中に読み込ませます
<script src="files/js/jquery.js"></script>
記述
jQueryを読み込ませた後、ready関数（jQueryを実行するのに必要な関数）で処理を実行させます
$(document)ready(function(){
// 処理
}); htmlのページ構成（document）が読み込まれたら（ready）、｛ ｝の処理を実行します。
これは、以下の様に省略して書けます
$(function(){
// 処理
}); セレクタとメソッド
jQueryではセレクタとメソッドを使って処理を実行させます。
・セレクタ：処理対象となる要素を指定する記法
・メソッド：行いたい処理
htmlのp要素の文字を赤色にしたい場合、
$(function)(){
$("p").css('color','red');
}); となり、$("")の中にあるpがセレクタ、.css('color','red')がメソッドとなります
セレクタの指定は、htmlの要素を指定する場合は、$("p")とそのまま
mainというidを指定するときは$("#main")、classを指定するときは$(".main")と記述します
セレクタいろいろ
以下のhtmlを、セレクタを使って文字色を赤にします
<p>jQueryの勉強</p> <ul id="main"> <li>0</li> <li class="item">1</li> <li class="item">2</li> <li> 3 <ul id="sub"> <li>3-0</li> <li>3-1</li> <li class="item">3-2</li> <li class="item">3-3</li> <li>3-4</li> </ul> </li> </ul>
①「>」直下の子要素
$(function)(){
$("#main>.item").css('color','red');
});#mainのすぐ下の.itemにだけ反映されます
<li class="item">1</li> <li class="item">2</li>
②「 」（空白）それ以外の子要素
$(function)(){
$("#main .item").css('color','red');
});空白にすると、#mainの下のすべての.itemに反映されます
<li class="item">1</li> <li class="item">2</li>
この部分と
<li class="item">3-2</li> <li class="item">3-3</li>
この部分です
③「,」複数の要素
$(function)(){
$("p,.item").css('color','red');
});「,」で区切ると、p要素と、.itemの両方に反映されます
<p>jQueryの勉強</p>
p要素と、
<li class="item">1</li> <li class="item">2</li>
#mainの下の.itemと
<li class="item">3-2</li> <li class="item">3-3</li>
#mainの下のすべての.itemに反映されます
④「+」隣接する要素
$(function)(){
$(".item+.item").css('color','red');
});.itemに隣接する.itemにだけ反映されます
一つ目のitemが付いている「1」に隣接する以下の部分と、
<li class="item">2</li>
#mainの中の#subの下の、一つ目のitemが付いている「3-2」に隣接する
<li class="item">3-3</li>
この部分です
CSSスプライト
仕事でマークアップはじめたてのころCSSスプライトで何回もつまづいて、未だにあんまりわかってないので整理
CSSスプライト
- アイコンやナビゲーションなど、いっぱいあるものを一枚の画像にして、cssで1部分だけ見せるテクニック
- サイトの中で何回も出てくる汎用的な部分につかう
メリット
いっぱい画像使わないのでサイトの読み込みが早くなるみたいです
使い方
1.画像を作る
ナビの部分つくるときは、こんなかんじでボタンの画像ぜんぶくっつける
上にoff画像、下にhover用の画像くっつける
2.HTML
<ul id="globalNav"> <li class="nav01"><a href="/">TOP</a></li> <li class="nav02"><a href="/">ABOUT</a></li> <li class="nav03"><a href="/">NEWS</a></li> <li class="nav04"><a href="/">LINK</a></li> <li class="nav05"><a href="/">CONTACT</a></li> </ul>
3.CSS
ul#globalNav {position: relative; height: 35px;}liの親要素になるulにposition: relative;で基準値に指定して、高さつける
ul#globalNav li{
float: left;
width: 100px;
height: 35px;
text-indent: -9999px;
background: url(files/img/top/globalnav.png) no-repeat 0 0;
position: absolute;
}横並びにしたいのでfloat:left;で左づめ
ボタン１こぶんの横幅と高さとる
text-indent: -9999px;で文字かくす
背景画像おく
position: absolute;で、ulからのliいっこずつの位置を決めます
ul#globalNav li a{
display: block;
height: 35px;
}a要素をブロック要素にして、高さつけてボタン１こぶんのリンクの範囲を指定
ul#globalNav li.nav01{left: 0; background-position: 0 0;}
ul#globalNav li.nav02{left: 100px; background-position: -100px 0;}
ul#globalNav li.nav03{left: 200px; background-position: -200px 0;}
ul#globalNav li.nav04{left: 300px; background-position: -300px 0;}
ul#globalNav li.nav05{left: 400px; background-position: -400px 0;}ボタンいっこずつ表示させるために、
親要素のulからの位置と、表示させたい背景画像の位置を指定します
このとき、liいっこずつに背景画像を0,0の位置からはってるので、マイナスの値になるみたいです
ul#globalNav li.nav01:hover{left: 0; background-position: 0 -35px;}
ul#globalNav li.nav02:hover{left: 100px; background-position: -100px -35px;}
ul#globalNav li.nav03:hover{left: 200px; background-position: -200px -35px;}
ul#globalNav li.nav04:hover{left: 300px; background-position: -300px -35px;}
ul#globalNav li.nav05:hover{left: 400px; background-position: -400px -35px;}hoverしたときの表示
ボタンいっこぶんの高さが35pxなので、-35pxして画像を上にあげます
こうやって原理わかってるとすぐできそうっておもうのに
いざ使うときいっつもなんかいっこ抜けてててこずったり
別のとこでpositionつかいすぎてわけわからんようになったりする。。。
参考
CSSスプライトで画像を円滑に表示させる | Webクリエイターボックス
[CSS]CSSスプライトで容量を節約しつつロールオーバーを実現する | クロノドライブ
カルーセルスライダー
勉強したこと忘れないようにめもしていこうと思います。
スライダーでおすすめのjQueryプラグインおしえてもらったのでつかってみました。
Circular, Responsive jQuery Carousel – CarouFredSel
jsファイルよみこんで
<script type=\"text/javascript\" src=\"files/js/jquery.carouFredSel-6.2.1-packed.js\"></script>
jsかいて
$(document).ready(function() {
// Using default configuration
$(\"#slider\").carouFredSel();
});
htmlかく
<div id=\"slider\">
<div class=\"slide\"><img width=\"753\" height=\"500\" src=\"./files/img/top/mv_img01.jpg\" alt=\"1\"></div>
<div class=\"slide\"><img width=\"753\" height=\"500\" src=\"./files/img/top/mv_img02.jpg\" alt=\"2\"></div>
<div class=\"slide\"><img width=\"753\" height=\"500\" src=\"./files/img/top/mv_img03.jpg\" alt=\"3\"></div>
</div>
オプションがいっぱいあるらしく、、、
circular : true,
circular : false,
trueでループ指定、falseでは先頭に戻る とか
items サムネイルの設定
scroll スクロールの設定 とか
つくりたいやつあんのやけどなかなかうまくいかず。。。
こんどまたいろいろいじってちゃんとできたら載せてみようと思いますー
