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; }
“$()関数” への1件の返信