WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

jQuery基礎

$(document).ready(function(){
  jQueryの処理を記述
});
//省略形
$(function(){
  jQueryの処理を記述
});

要素セレクタ

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Jquery要素セレクター</title>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<ul>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
<li>テキストテキストテキストテキストテキスト</li>
</ul>
<script>
$(function(){
  $("li").css("color","red");
});
</script>
</body>
</html>

IDセレクタ

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JqueryIDセレクター</title>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<ul>
<li id="first">テキストテキストテキストテキストテキスト</li>
<li id="second">テキストテキストテキストテキストテキスト</li>
<li id="third">テキストテキストテキストテキストテキスト</li>
<li  id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
<script>
//$(function(){
//  $("#first").css("color","red");
//});
//id属性だけでも要素は特定できるが、要素名をわかりやすくするために
//要素セレクターとIDセレクターをつなげて指定できます。
$(function(){
  $("li#first").css("color","red");
});
</script>
</body>
</html>

クラスセレクタ

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Jqueryクラスセレクター</title>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<ul>
<li class="first">テキストテキストテキストテキストテキスト</li>
<li class="second">テキストテキストテキストテキストテキスト</li>
<li class="third">テキストテキストテキストテキストテキスト</li>
<li  class="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
<script>
$(function(){
  $("li.second").css("color","red");
});
</script>
</body>
</html>

子孫セレクタ

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Jquery子孫セレクター</title>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<ul>
<li class="first"><strong>テキスト</strong>テキストテキストテキストテキスト</li>
<li class="second"><strong>テキスト</strong>テキストテキストテキストテキスト</li>
<li class="third"><strong>テキスト</strong>テキストテキストテキストテキスト</li>
<li  class="fourth"><strong>テキスト</strong>テキストテキストテキストテキスト</li>
</ul>
<script>
$(function(){
  $("li.first strong").css("color","red");
});
</script>
</body>
</html>

ユニバーサルセレクタ

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Jqueryユニバーサルセレクター</title>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<ul>
<li class="first"><strong>テキスト</strong>テキストテキストテキストテキスト</li>
<li class="second"><em>テキスト</em>テキストテキストテキストテキスト</li>
<li class="third"><span>テキスト</span>テキストテキストテキストテキスト</li>
<li  class="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
<script>
$(function(){
  $("li *").css("color","red");
});
//li要素内に含まれるすべての要素、つまり1番目のstrong要素、2番目のem要素、3番目のspan要素が赤色になる。
//*(アスタリスクで記述する。)
</script>
</body>
</html>

グループセレクタ

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Jqueryグループセレクター</title>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<ul>
<li id="first">テキストテキストテキストテキストテキスト</li>
<li id="second">テキストテキストテキストテキストテキスト</li>
<li id="third">テキストテキストテキストテキストテキスト</li>
<li  id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
<script>
$(function(){
  $("#first, #third").css("color","red");
});
</script>
</body>
</html>

セレクタ

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Jquery子セレクター</title>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<ul>
<li id="first"><strong>テキスト</strong>テキストテキストテキストテキスト</li>
<li id="second">テキストテキストテキストテキストテキスト</li>
<li id="third"><div><strong>テキスト</strong>テキストテキストテキストテキスト</div></li>
<li  id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
<script>
$(function(){
  $("li > strong").css("color","red");
});
//3番目のli要素の中にあるstrong要素はdivの直下に配置されている為赤色にならない。
</script>
</body>
</html>

隣接セレクタ

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery隣接セレクター</title>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<ul>
<li id="first">テキストテキストテキストテキストテキスト</li>
<li id="second">テキストテキストテキストテキストテキスト</li>
<li id="third">テキストテキストテキストテキストテキスト</li>
<li  id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
<script>
$(function(){
  $("#second + li").css("color","red");
});
//secondの要素の次に出現するli要素third要素が赤色になる。
</script>
</body>
</html>

first-child擬似クラス

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryfirst-child擬似クラス</title>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<ul>
<li id="first">テキストテキストテキストテキストテキスト</li>
<li id="second">テキストテキストテキストテキストテキスト</li>
<li id="third">テキストテキストテキストテキストテキスト</li>
<li  id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
<ul>
<li id="first">テキストテキストテキストテキストテキスト</li>
<li id="second">テキストテキストテキストテキストテキスト</li>
<li id="third">テキストテキストテキストテキストテキスト</li>
<li  id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
<script>
$(function(){
  $("li:first-child").css("color","red");
});
//特定のセレクターのうち、最初に登場する要素を指定するセレクターとして、
//first-child擬似クラスがある。セレクターの後ろに:first-childmと記述して
//指定します。セレクターが複数ある場合はそれぞれの最初に出現する子要素が選択されます。
</script>
</body>
</html>

間接セレクタ

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery隣接セレクター</title>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<ul>
<li id="first">テキストテキストテキストテキストテキスト</li>
<li id="second">テキストテキストテキストテキストテキスト</li>
<li id="third">テキストテキストテキストテキストテキスト</li>
<li  id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
<script>
$(function(){
  $("#second + li").css("color","red");
});
//secondの要素の次に出現するli要素third要素が赤色になる。
</script>
</body>
</html>