【授業メモ】jQuery基礎 - web制作勉強中です。

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(){ 
 $('li#one').css('color','red'); 
}); 
</script>

★子孫セレクターで、親要素の中の子要素に命令する書き方

半角スペースで区切る

<script> 
$(function(){ 
 $('ul li#one').css('color','red'); 
}); 
</script>

★子セレクターで、特定の要素の直下に配置された要素に命令する書き方

子セレクターは、親要素と子要素を＞（親＞子）で結ぶ。

<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>
 

→でも、cssで出来ることはjQueryではやらない！

　jQueryのライブラリは重たいので、簡単なことのためには使わないこと