【授業メモ】jQuery モーダルウィンドウ
jQueryによるモーダルウィンドウ
- ライトボックスからダウンロードし、ライトボックスのサイトを見ながら、必要なファイルと画像（矢印とか）を作成しているフォルダに持ってくる ※minファイルは改行がないデータなので、持ってこない！minファイルでよいのはjQuery本体だけ！！！！！！！！！
- プラグインは、作った人がcssやjsを作ってくれているが、同じid名を指定しないと自分の方で動かないので同じ属性をつける
※プラグインの画像（矢印とか）はプラグインcssで「images」というフォルダ名になっていたりするので、自分の作ったフォルダ名と合わせないと動かない - 以下の順番でリンクさせる
プラグインのリンクの方法
li {
width: 300px;
float: left;
margin: 10px;
}
</style>
<script src="js/jquery.min.js"></script>
<script src="js/lightbox.js"></script>
<script>
</script>
</head>
【授業メモ】jQuery animateとスムーススクロール
独自のアニメーションを設定できるanimate
height,top,opacityのように、数値で指定できるものは全てアニメーションに設定できる。
※colorのように、数値以外で指定するものはアニメーションにはできない。
動きに設定できるのはlinear swingで設定する。
$(function(){
$('一枚目画像').on('click',function(){
$('画像が入っている要素:not(:animated)').animate({
'動かしたい方向':'動かしたい距離（次の画像が出てくるために必要な距離）'},'秒数','動き');
});
$('二枚目画像').on('click',function(){
$('画像が入っている要素:not(:animated)').animate({
'動かしたい方法':'一枚目が戻ってくる距離'},'秒数','動き');
});
});
★記述例
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>アニメーションを設定するanimate</title>
<style>
html,body,p {
margin: 0;
padding: 0;
line-height: 1.0;
}
img {
vertical-align: bottom;
border: none;
}
img {
width: 400px;
height:267px;
}
p {
width: 800px;
height: 267px;
margin: 0;/*pをぴったりにくっつけたいのでmargin0*/
}
div {
width: 400px;
height: 267px;
overflow: hidden;
}
/*二枚の画像を横に並べてdivに入れるが、動かして表示したいので二枚目を隠す
そのためにdivの幅を画像一枚分にし、はみ出した二枚目が隠れるようにする
*/
</style>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('#dog1').on('click',function(){
$('p:not(:animated)').animate({//一枚目のimgをクリック→pを左に400px(画像一枚分)動かす
'margin-left':'-400px'},'200','linear');//一枚目がずれるため、二枚目が見えるようになる
});
$('#dog2').on('click',function(){//左に一枚分-400pxしたのを戻すために0にすれば初期値に戻る
$('p:not(:animated)').animate({//そうすると一枚目が戻ってくる
'margin-left':'0'},'200','swing');
});
});
</script>
</head>
<body>
<div>
<p>
<img src="img/1.jpg" alt="" id="dog1"><img src="img/2.jpg" alt="" id="dog2">
</p>
</div>
</body>
</html>
★animateで作るページ内リンク スムーススクロール
トップに戻る場合
複数の場所を指定する場合
★記述例
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スムーススクロール ページ内リンクの作り方</title>
<style>
html,body,ul,li {
margin: 0;
padding: 0;
line-height: 1.0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
ul {
padding: 20px;
background: white;
position: fixed;/*ナブを固定にすれば移動がラク*/
top: 0;
right:0;
}
li {
display: inline-block;/*横並びにするための指示 これを使うとfloatさせずとも横に並べる*/
margin-right: 20px;
}
div{
width: 100%;
height: 100vh;/*view port height 一画面分 今見ている画面分ということ*/
}
#one {
background:#FFFF00;
}
#two {
background:#F90;
}
#three {
background:#F66;
}
#four {
background:#6CF;
}
#five {
background:#6C9;
}
</style>
<script src="js/jquery.min.js"></script>
<script>
//topに戻るだけの場合
//$(function(){
// $('#to-top a').on('click',function(){
// $('#top').animate({ scrollTop: 0 }, 'swing');
// return false;//アンカーのイベントに必須
// });
// });
//複数要素&TOPに戻る場合 このまま覚える
$(function(){
$('a[href^="#"]').on('click',function() {// #で始まるアンカーをクリックした場合に処理
var speed = 400; // スクロールの速度 ミリ秒
var href= $(this).attr("href"); // 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得
var position = target.offset().top; // スムーススクロール
$('#top').animate({
scrollTop:position}, speed, 'swing');
return false;
});
});
</script>
</head>
<body id="top">
<ul>
<li><a href="#one">一個目</a></li><!--div idにリンクさせるとページ内リンクができる-->
<li><a href="#two">二個目</a></li>
<li><a href="#three">三個目</a></li>
<li><a href="#four">四個目</a></li>
<li><a href="#five">五個目</a></li>
</ul>
<div id="one">一個目</div>
<div id="two">二個目</div>
<div id="three">三個目</div>
<div id="four">四個目</div>
<div id="five">五個目</div>
<p id="to-top"><a href="#top">トップに戻る</a></p><!--bodyにつけたid名を入れることでリンクできる-->
</body>
</html>
★応用編
・TOPに戻るボタンをスクロールにする
・TOPに戻るボタンを、300pxスクロールしたら表示、300未満だと非表示にする
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
//TOPに戻るボタンの動き
$(function(){
$('#to-top a').on('click',function(){
$('#top').animate({ scrollTop: 0 }, 'swing');
return false;//アンカーのイベントに必須
});
});
//TOPに戻るボタンを、300pxスクロールしたら表示させる
$(function(){
$('#to-top').hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$('#to-top').fadeIn();
} else {
$('#to-top').fadeOut();
}
});
});
</script>
【授業メモ】jQuery traversingとタブパネル
traversingを使ったタブパネル
Traversingのメリット
トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」から見てどういう関係性にある「要素」、という形で指定する事ができます。jQueryを使う上で非常に大事な考え方なので、しっかりと理解しましょう。
this（自分）が何で、自分から見て命令したい相手がどういう関係なのか理解する。
自分から見た相手に届くまで、命令をしていくだけ。
childrenメソッド
childrenメソッドを利用すれば「セレクタ：>（子要素）」と同じようなことが可能です。
★記述例：buttonから見たいとこのp（buttonの兄弟の子供）に命令を効かせたい
<script>
$(function(){
$('button').on('click',function(){
$(this).siblings('div').children('p').css('background','orange');
});
});
</script>
parentメソッド
指定した要素の「親」要素を選択します。親要素とは階層構造（入れ子構造）において直上にある要素のことです。
名前が似ているparentsメソッドはparentメソッドと異なり「先祖」要素も選択します。
siblingsメソッド
指定した要素の兄弟要素（同じ階層の要素）を選択します。引数を設定しない場合はすべての兄弟要素を選択します。
★記述例：クリックしたボタンのpだけの色を変えたい buttonとpが兄弟の場合
<script>
$(function(){
$('button').on('click',function(){
$(this).siblings('p').css('background','orange');
});
});
</script>
★応用記述例 疑似クラスを付ける
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('button').on('click',function(){
$(this).parent('div').siblings('div').children('p:nth-child(1)').css('background','orange');
});
});
</script>
</head>
<body>
<div class="box">
<div>
<button>button1</button>
</div>
<div>
<p></p>
<p></p>
</div>
</div>
タブパネルを作る
★記述例
point
クリックするのはliのaで、画像の表示を切り替えたいのはdiv class="boxで、それぞれ違う家族。
同じ家族なら命令は簡単だけど、違う家族なので、命令の紐づけが必要になる。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タブメニューを作る</title>
<style>
html,body,ul,li,p.h1 {
margin: 0;
padding: 0;
line-height: 1.0;
}
img {
vertical-align: bottom;
border: none;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
#container {
width: 640px;
padding: 10px;
background:#CECEFF;
margin: 30px auto 0;
box-sizing: border-box;
}
.box {
width:620px;
padding:10px;
box-sizing:border-box;
background:#FFFFFF;
display: none;/*クリックされたものだけ表示させたいからまずは隠す*/
}
.box.current {
display: block;/*一枚も出てないとわからないから、最初のやつだけクラス名を付けて表示させる*/
}
h1 {
color:#FFF;
font-size:22px;
font-weight:bold;
padding:10px;
}
ul {
overflow: hidden;
margin: 0 auto;
width: 620px;
}
li {
width: 25%;
float: left;
height: 50px;
background:#6666CC;
border-left:1px solid white;
box-sizing:border-box;
}
li:nth-child(1) {
border-left: none;
}
li a {
color: white;
display:block;
width:100%;
text-align:center;
line-height:50px;
color:#fff;
font-size:14px;
}
li.current a {
background: white;
color:#000066;
}
</style>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('#tab li a').on('click',function(){
var tabTarget = $(this).attr('href');//クリックしたaのhrefの値（#季節名）をvarに代入する。このvarは#季節名がついたdivを示す ここでクリックされたaと、同じ名前のdivが紐づく。画像表示切替をしたい要素divは、クリックされた要素と家族関係にないため、紐づけ作業が必要になる。
$(tabTarget).addClass('current').siblings('.current').removeClass('current');//クリックしたaと同じ名前のdivにcurrentをつける→currentがついたdiv以外にclass=currentが付いているものがあったら→currentを削除する
$(this).parent('li').addClass('current').siblings('.current').removeClass('current');//クリックされたaの親要素liにcurrentをつけ、もしそれ以外についていたら外す
return false;//aをクリックするときは必ず入れる クリックイベントの中の一番下に書く
});
});
</script>
</head>
<body>
<div id="container">
<h1>日本の四季</h1>
<ul id="tab">
<li><a href="#spring">春の写真</a></li><!--divとliを紐づけたいからdivと同じ名前を付ける-->
<li class="current"><a href="#summer">夏の写真</a></li>
<li><a href="#autom">秋の写真</a></li>
<li><a href="#winter">冬の写真</a></li>
</ul>
<div class="box current" id="spring">
<p><img src="img/spring.jpg" alt=""></p>
</div>
<div class="box" id="summer">
<p><img src="img/summer.jpg" alt=""></p>
</div>
<div class="box" id="autom">
<p><img src="img/autom.jpg" alt=""></p>
</div>
<div class="box" id="winter">
<p><img src="img/winter.jpg" alt=""></p>
</div>
</div><!--container-->
</body>
</html>
★応用 プラスマイナスメニュー＋traversing
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>traversing応用</title>
<style>
html,ul,li,p,body {
margin: 0;
padding: 0;
line-height: 1.0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
#container {
width: 440px;
margin: 30px auto;
}
.box {
float: left;
width: 220px;
padding: 10px;
box-sizing:border-box;
}
ul {
width: 200px;
}
li {
width: 200px;
height: 50px;
margin-bottom: 10px;
background: #CECEFF;
text-align: center;
line-height: 50px;
}
p {
height: 50px;
width: 200px;
position: relative;/*spanをpの中で真ん中にするための基準点*/
}
p a {
width: 200px;
height: 50px;
background: #00FFFF;
display: block;
}
li:nth-child(n+4){/*liの4と5を指定*/
display: none;/*表示を消してしまう*/
}
/*spanタグの+-*/
span{
dispay:block;
width:40px;
height:4px;
border-radius:3px;
background:#6699FF;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
span:before{/*擬似要素縦の線*/
display:block;
content:"";
width:4px;/*spanと真逆の値を書く*/
height:40px;
background:#6699FF;
border-radius:3px;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
transition:0.4s;
}
.close span {
background: transparent;
}
.close span:before {
transform:rotate(90deg);
}
</style>
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('p > a').on('click',function(){
//$('li:nth-child(n+4):not(:animated)').slideToggle(500);//消した4と5をスライドで表示させる
$(this).parent().siblings().children('li:nth-child(n+4):not(:animated)').slideToggle(500);//上と同じことをsiblingsで表示 :not(:animated)はスライドの際必須！
$(this).toggleClass('close');
return false;//aに動きを付けるなら必ず一番下につける
});
});
</script>
</head>
<body>
<div id="container">
<div class="box">
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>
<p><a href="#"><span></span></a></p>
</div>
<div class="box">
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>
<p><a href="#"><span></span></a></p>
</div>
</div>
</body>
</html>
【授業メモ】CSS3 サイト制作にも使えそうな小技集
サイト制作に使えるCSS3
Googleの検索で上位にしたいなら、テキストが大事。Googleが読んでくれるのはテキストだから、ヘッダー画像に文字も画像で入れてしまうと、いくらおしゃれにしてもGoogleにとっては意味がない。そこでcss3でテキストを装飾して画像に載せる技を使う！
いろいろできるらしい！！！
テキストの装飾ができるtext-shadow
★text-shadowの記述の仕方
text-shadow: X方向の距離 Y方向の距離 ぼかし幅 影の色;
記述の仕方によって、影をつける以外に、へこんでいる感じや浮き出ている感じなど、色々できる！
★影を付ける
li.ts01 {
text-shadow: 2px 2px 3px #999;/*x方向の距離 y方向の距離 ぼかし幅 色の順で影を指定*/
}
★光彩を付ける
li.ts02 {
color: #FFF;
text-shadow: 0 0 5px #999;/*光彩をつける*/
}
★押し出し感じを出す
li.ts03 {
color:#CCC;
text-shadow: -1px -1px 0 #FFF, 1px 1px 0 #aaa;/*押し出し感を出す*/
}
★へこんでいる感を出す
li.ts04 {
color:#CCC;
text-shadow: -1px -1px 0 #aaa, 1px 1px 0 #FFF;/*へこんでいる感を出す*/
}
★ふちどりする
li.ts05 {
color: #FFF;
text-shadow: 1px 1px 0 #999,-1px 1px 0 #999,1px -1px 0 #999,-1px -1px 0 #999;/*ふちどり 画像の上に文字を載せる場合に使う*/
}
★ネオン
li.ts06 {
text-shadow: 0 0 5px #FFF,0 0 13px #F03,0 0 13px #F03,0 0 13px #F03;/*ネオン あまり使わない*/
animation: text-color 1s infinite;
}
まとめ
<title>cssでのテキストの装飾</title>
<style>
html,body,ul,li,p {
margin: 0;
padding: 0;
line-height: 1.0;
}
ul {
list-style: none;
}
ul {
width: 800px;
margin: 50px auto 0;
background:#D1FAEC;
}
li {
padding: 20px 0;
text-align: center;
font-size: 24px;
color: #222;
}
li.ts01 {
text-shadow: 2px 2px 3px #999;/*x方向の距離 y方向の距離 ぼかし幅 色の順で影を指定 影をつける*/
}
li.ts02 {
color: #FFF;
text-shadow: 0 0 5px #999;/*光彩をつける*/
}
li.ts03 {
color:#CCC;
text-shadow: -1px -1px 0 #FFF, 1px 1px 0 #aaa;/*押し出し感を出す*/
}
li.ts04 {
color:#CCC;
text-shadow: -1px -1px 0 #aaa, 1px 1px 0 #FFF;/*へこんでいる感を出す*/
}
li.ts05 {
color: #FFF;
text-shadow: 1px 1px 0 #999,-1px 1px 0 #999,1px -1px 0 #999,-1px -1px 0 #999;/*ふちどり 画像の上に文字を載せる場合に使う*/
}
li.ts06 {
text-shadow: 0 0 5px #FFF,0 0 13px #F03,0 0 13px #F03,0 0 13px #F03;/*ネオン あまり使わない*/
}
</style>
</head>
<body>
<ul class="sample ts">
<li class="ts01">Drop Shadow</li>
<li class="ts02">Grow</li>
<li class="ts03">Bevel</li>
<li class="ts04">Embos</li>
<li class="ts05">Stroke</li>
<li class="ts06">Neon</li>
</ul>
</body>
</html>
★ネオンにさらにアニメーションをつけてみることもできる
li.ts06 {
text-shadow: 0 0 5px #FFF,0 0 13px #F03,0 0 13px #F03,0 0 13px #F03;/*ネオン あまり使わない*/
animation: text-color 1s infinite;
}
@keyframes text-color {
0% {text-shadow: 0 0 5px #FFF,0 0 13px #F03,0 0 13px #F03,0 0 13px #F03;}
50%{text-shadow: 0 0 5px #FFF,0 0 40px #F03,0 0 40px #F03,0 0 40px #F03;}
100% {text-shadow: 0 0 5px #FFF,0 0 13px #F03,0 0 13px #F03,0 0 13px #F03;}
}
背景画像を重ねる
★複数の画像を背景画像に指定して重ねることができる
重ね順に記述すること！ 上に表示させたい方を先に書く！！
もちろんPhotoshopでも同じことはできるが、他とのバランスを見ながら配置を決めたい場合などはこっちでやればいいよね
#box {
width: 960px;
height: 400px;
background: url(img/bg1.png) no-repeat, url(img/bg2.jpg) no-repeat;
}/*上に表示させる画像を先に書く*/
グラデーション
★線のグラデーション
#box2 {
width: 960px;
height: 300px;
margin: 50px auto 0;
background-color: #F36;/*グラデーションが効かないブラウザの場合の保険の色*/
background: -webkit-linear-gradient(top,#F36,#FFF);/*上から下へのグラデーション 古い書き方 webkitはchromeとサファリとオペラのためのベンダープレフィックスの書き方*/
background: linear-gradient(to bottom,#F36,#FFF);/*上から下へのグラデーション 今の書き方 上の記述は実はいらない*/
}
将来的に仕様が変更されるリスクに備えて、独自拡張や先行実装のプロパティ名や値の先頭に付けることが推奨されています。 ベンダープレフィックスでは、前後に「-」を付けたベンダー識別子（vendor identifier）でブラウザの種類を特定します。
主要ブラウザのベンダープレフィックス
-moz- …… Firefox
-webkit- …… Google Chrome、Safari 、 Opera
-ms- …… Internet Explorer
★便利なグラデーションジェネレーター
必要な色、形にしてcssをコピーして貼るだけ！
その際、mozとfilterはいらないので消してよい。
#box3{
width: 960px;
height: 300px;
margin: 50px auto 0;
background: rgb(255,255,255); /* Old browsers */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
【授業メモ】JavaScriptの型変換
JavaScriptの型変換
Number()
数字以外を含む文字列を引数に指定するとNaNを返すので注意が必要。
parseInt()
文字列を整数に変換し、実数の場合は小数点以下を切り捨てる。
var num = prompt( '半角数字を入力してください' );
num = parseInt( num );
promptで入れたものは数字を入れてくださいと書いても、
コンピューターはpromptで入れられたものは文字列として認識している
→そのため、入れられた文字列を数字に変換する指示が必要→ num = parseInt( num );
parseFloat()
文字列を実数に変換する。引数に数字以外の文字が含まれている場合は無視される。
CSS3のアニメーション
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>アニメーション</title>
<style>
html,body{
margin:0;
padding: 0;
}
body {
}
#box {
width: 300px;
height: 250px;
margin: 100px auto 0;
background: orange;
animation-name: bg-color;/*必ずアニメーションの名前を付ける*/
animation-duration: 10s;/*アニメーションの長さを指定*/
animation-iteration-count: infinite;/*アニメーションのループ設定*/
}
@keyframes bg-color {/*アニメーションの名前をキーフレームに入れる*/
0% {background: yellow;}
25% {background: red;}
50% {background: green;}
75% {background: blue;}
100% {background: pink;}
}
#wrapper {
width: 300px;
height: 250px;
margin: 100px auto 0;
animation: move 1s;
animation-iteration-count: infinite;
}
@keyframes move {
0% {transform: scale(0,0);}
100% {transform: scale(300px,100px);}
}
</style>
</head>
<body>
<div id="wrapper"><div id="box"><img src="bg.png" alt=""></div></div>
</body>
</html>
【授業メモ】JavaScriptの型変換
JavaScriptの型変換
Number()
数字以外を含む文字列を引数に指定するとNaNを返すので注意が必要。
parseInt()
文字列を整数に変換し、実数の場合は小数点以下を切り捨てる。
var num = prompt( '半角数字を入力してください' );
num = parseInt( num );
promptで入れたものは数字を入れてくださいと書いても、
コンピューターはpromptで入れられたものは文字列として認識している
→そのため、入れられた文字列を数字に変換する指示が必要→ num = parseInt( num );
parseFloat()
文字列を実数に変換する。引数に数字以外の文字が含まれている場合は無視される。
CSS3のアニメーション
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>アニメーション</title>
<style>
html,body{
margin:0;
padding: 0;
}
body {
}
#box {
width: 300px;
height: 250px;
margin: 100px auto 0;
background: orange;
animation-name: bg-color;/*必ずアニメーションの名前を付ける*/
animation-duration: 10s;/*アニメーションの長さを指定*/
animation-iteration-count: infinite;/*アニメーションのループ設定*/
}
@keyframes bg-color {/*アニメーションの名前をキーフレームに入れる*/
0% {background: yellow;}
25% {background: red;}
50% {background: green;}
75% {background: blue;}
100% {background: pink;}
}
#wrapper {
width: 300px;
height: 250px;
margin: 100px auto 0;
animation: move 1s;
animation-iteration-count: infinite;
}
@keyframes move {
0% {transform: scale(0,0);}
100% {transform: scale(300px,100px);}
}
</style>
</head>
<body>
<div id="wrapper"><div id="box"><img src="bg.png" alt=""></div></div>
</body>
</html>
【授業メモ】jQuery基礎
jQuery基礎
jQueryとは
JavaScriptをより容易に記述するために設計された軽量なJavaScriptライブラリ。
jQueryの記述の仕方
<head>内の一番下にまずライブラリをリンクさせ、そのあと必要なものを記述する
stylesheetのリンクがある場合は、stylesheetが必ず先！！！
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの使い方</title>
<link rel="stylesheet" href="style.css">
<script src="js/jquery.min.js"></script>
<script>
ここにjQueryを記述
</script>
</head>
★要素セレクターで、要素に直接命令をする書き方
<link rel="stylesheet" href="style.css">
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('li').css('color','red');
});
</script>
★IDセレクターで、IDに命令をする書き方
★子孫セレクターで、親要素の中の子要素に命令する書き方
半角スペースで区切る
★子セレクターで、特定の要素の直下に配置された要素に命令する書き方
子セレクターは、親要素と子要素を＞（親＞子）で結ぶ。
<script>
$(function(){
$('#one>p').css('color','red');
});
</script>
</head>
<body>
<div id="one">
<p>あいうえお</p>
<div id="two"><p>かきくけこ</p></div>
</div>
</body>
★否定疑似クラスで、指定したもの以外の要素に命令する書き方
<script>
$(function(){
$('li:not(:first-child)').css('color','red');
});
</script>
</head>
<body>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
</body>
★nth-childとnth-of-typeの違い
nth-childは<ul><li></li></ul>のliのように、li以外の要素は入らない場合に使えるが、dtはddも入ってきてしまうので、nth-childでは指定できない。
その場合、nth-of-typeを使う。
<script>
$(function(){
$('dt:nth-of-type(2)').css('color','red');
});
</script>
</head>
<body>
<dl>
<dt>あああ</dt><dd>aaa</dd>
<dt>いいい</dt><dd>iii</dd>
<dt>ううう</dt><dd>uuu</dd>
<dt>えええ</dt><dd>eee</dd>
</dl>
</body>
jQueryのライブラリは重たいので、簡単なことのためには使わないこと
