$()関数

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

http://ktamago.wp.xdomain.jp/2017/11/14/$()関数 その2/

One Reply to “$()関数”

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください