jQueryを学ぶ上で一番最初に覚えるべき関数$()
$()は、jQueryオブジェクトを生成する関数です。
(私個人の理解で説明なので、厳密性に欠ける部分は目をつぶってください。また、htmlならびにcssの知識があることが前提になります。できれば、javascriptならびにXMLのDOMなんか知ってるとなお良いです。DOM知ってる人なら今回のjQuery関数は理解しやすいでしょう。)
$()関数は、HTMLで記載されているWEBページの一部分を抽出する関数です。少し言葉を変えて言い直すと、<html>….</html>タグの一部を抽出する関数です。
たとえば、下記の一行目に記載のjQuery文は、文字の色を黄色にするCSS属性を付加する命令です。$(‘#IroY’)の部分が今回注目する部分になります。$(‘#IroY’)は、id=”IroY”属性が付与されているタグが抽出されます。
$(‘.Iro’)なら、class=”Iro”属性が付与されているタグが抽出されます。
cssの決まりで、Id属性で指定されたタグは1個しかありませんが、class属性なら複数のタグが抽出されます。
jQuery例
$('#IroY).css('color', 'yellow');
$('.Iro').css('color', 'white');
今回の説明で実際に利用したファイルです。特に、sample.htmlとmain.jsファイルの色の付いている部分を良くみてください。$()で抽出されるところに色をつけてみました。
今回利用したサンプルのファイル構成
ルートフォルダ
│ sample.html
│ (↑ 作成してください)
├─cssファオルダ
│ normalize.css
│(↑ http://necolas.github.io/normalize.css/ よりダウンロード おまじない)
│ sample.css
│(↑ 作成してください)
└─jsフォルダ
│ main.js
│(↑ 作成してください)
└─vendorフォルダ
(↑ jQueryライブラリ)
jquery-1.10.2.min.js
(↑ http://jquery.com/サイトからダウンロード)
jquery-ui-1.10.3.custom.min.js
(↑ http://jquery.com/サイトからダウンロード)
sample.html
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQuery</title>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/sample.css">
<script src="./js/vendor/jquery-1.10.2.min.js"></script>
<script src="./js/vendor/jquery-ui-1.10.3.custom.min.js"></script>
<script src="./js/main.js"></script>
</head>
<body>
<p class="Iro">jQuery Sample</p>
<p class="Iro">jQuery Sample</p>
<p id="IroY">jQuery Sample</p>
<p class="Iro">jQuery Sample</p>
</body>
</html>
main.js
$( function() {
$('.Iro').css('color', 'white');
});
$( function() {
$('#IroY').css('color', 'yellow');
});
sample.css
body {
background-color: yellowgreen;
}
p {
margin:10px;
padding: 0px;
text-align: center;
font-size: 40pt;
border-color: black;
border-width: 3px;
border-style: solid;
}
https://ktamago.wp.xdomain.jp/2017/11/14/$()関数 その2/