jQueryメソッドの複数プルパティ指定方法

jQueryメソッドの複数プロパティ指定方法

今回は、複数のプロパティの指定方法および、パラメータにつきまして詳しく記載していきます。

jQueryプロパティの指定方法について、基本的な指定方法はご理解いただけたことと思いますが、「複数のプロパティがある場合はどう記述(作成)したらイイの?」や「パラメータってなに?」などの疑問を抱える初心者に向けて、解説していこうと思います。

jQuery、css系メソッドの場合、プロパティが1つの場合という事はまれで、作成時、複数指定することが多くなることと思います。複数指定をおこなう際、多少注意点などがありますので、忘れないように気を付けて作成したい所です。

という事で、それでは今回はッ、

  • ・jQueryメソッド複数のプロパティ指定方法
  • ・パラメータを記述しない書き方
  • ・CSSとjQueryの優先順位
  • ・プロパティ複数指定の注意点

上記について記載していこうと思います…。

jQueryメソッド複数のプロパティ指定方法

前回までは、CSSのプロパティが1つの場合を記載いたしました。
しかし、css()メソッドでは、複数のプロパティを指定することも、もちろん可能になります。

サンプルHTML<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#third”).css({
“color”:”red”,
“background-image”:”url(image/star.png)”,
“background-repeat”:”no-repeat”,
“background-position”:”15px 50%”,
“padding-left”:”35px”

});
});
</script>
</head>
<body>
・・省略・・
<ul>
<li>HTML</li>
<li>CSS</li>
<li id=”third”>jQuery</li>
</ul>
・・省略・・
</body>
  • HTML
  • CSS
  • ★ jQuery

背景画像と、文字色、パディングなどを同時に指定してみました。この複数のプロパティの記述方法にも下記のよう、いくつか書き方があります。

1.$(“#elm”).css({ “background-color”: “#4c5482”, “color”: “red” });
2.$(“#elm”).css({ “backgroundColor”: “#4c5482”, “color”: “red” });
3.$(“#elm”).css({ backgroundColor: “#4c5482”, color: “red” });

1番目のプロパティ、値ともダブルクォーテーション(またはシングルクォーテーション)と「:」コロンを使って記述します。複数のプロパティは、「,」カンマで区切って記述していきます。

css({“プロパティ”:”値”,”プロパティ”:”値”});

全体を{}(ブレース)で囲み、「”」ダブルクォーテションと「:」コロンで記述して、プロパティは「,」カンマで区切るよう指定します。

2番目の記述方法は、プロパティをキャメルスタイルで記述する方法になります。さらに3番目は、ダブルクォーテーションなしでキャメルスタイルで記述しています。これらどの方法で記述しても、ブラウザでの表示結果は同じになりますが、今回のサンプルでは、1番目の記述方法で記載していきます。

パラメータを記述しない書き方

今まで紹介したサンプルコードは、基本的にメソッドに何らかのパラメータを記述してきました。しかし、コードによってはパラメータを指定しない場合も出てきます。パラメータを指定しない場合は、「操作」が目的ではなく「取得」が主な目的になります。

サンプルHTML2<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script>
$(function(){
alert($(“.left”).height());
});
</script>
</head>
<body>
・・省略・・
<p class=”left”>メソッドにパラメータを記述すれば、具体的に要素を操作することができます。例えばheight()メソッドのパラメータに数値を記述すれば、要素の高さを変更することができます。</p>
<p class=”right”>逆にパラメータを記述しない場合、「取得」するだけになります。</p>
・・省略・・
</body>

jQueryメソッドの複数プルパティ指定方法1

サンプルHTML2では、高さを操作するheight()メソッドを使っていますが、パラメータは何も指定していません。つまり「取得」をしているだけです。そしてJavaScriptのalert()メソッドを使って、取得した高さをダイアログボックスで表示しています。

jQueryメソッドの複数プルパティ指定方法2

2つのボックスが並んでいますが、文章の長さがちがうため、当然ボックスの高さも違います。次のサンプルで、取得した「高さ」を使用して2つのボックスの高さを揃えてみます。

サンプルHTML3<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script>
$(function(){
$(“.right”).height( $(“.left”).height() );
});
</script>
</head>
<body>
・・省略・・
<p class=”left”>メソッドにパラメータを記述すれば、具体的に要素を操作することができます。例えばheight()メソッドのパラメータに数値を記述すれば、要素の高さを変更することができます。</p>
<p class=”right”>逆にパラメータを記述しない場合、「取得」するだけになります。</p>
・・省略・・
</body>

jQueryメソッドの複数プルパティ指定方法3

コードが入れ子になっているので整理してみます。
まず、$(“.right”).height(パラメータ)という大枠があります。

これはクラス「right」(右側のボックス)に数値を入れて、高さを操作する記述になります。そしてheight()メソッドの中には、パラメータとしてサンプルHTML2で見た$(“.left”).height()という記述が入っています。$(“.left”).height()では、左側のボックスの高さを取得しているので、そのままパラメータとして利用しています。

パラメータには、文字列や数値だけではなく、このようにjQueryやJavaScriptの構文も記述することができるので、覚えておくと便利です。このように取得した値を利用して、何らかの操作をする場合もあります。メソッドのパラメータを「空」にした場合は、「操作」ではなく「取得」になるので覚えておく必要があります。

CSSとjQueryの優先順位

jQueryを使えば、インタラクティブに要素のスタイルを変更することができるのですが、CSSとの関係はどうなっているのか?基本的にjQueryで要素のスタイルを操作すると、HTMLにstyle属性でスタイルが指定されます。

jQueryメソッドの複数プルパティ指定方法4

style属性で記述されたスタイルは、基本的には最優先されるので、外部スタイルシートや<style>タグなどで記述されたスタイルよりも、jQueryによって書き出されたスタイルが優先されます。

ただ注意しなくてはならないのが、!importantです。!importantは、style属性よりも優先されてしまうため、jQueryでの操作ができません。エラーが無いのにjQueryでのスタイルの操作ができない場合は、対象要素に!importantが使われていないか注意が必要になります。

プロパティ複数指定の注意点

css()メソッドの所で、複数のパラメータを記述するのに下記のように記述しました。

サンプルscript.css({
“color”:”red”,
“background-image”:”url(image/star.png)”,
“background-repeat”:”no-repeat”,
“background-position”:”15px 50%”,
“padding-left”:”35px”
})

このような形で、複数のパラメータを記述するのは、css()メソッドに限りません。色々なメソッドで登場します。そのときに注意したいのが「最後のカンマ」の記述です。一番最後の末尾に付けたカンマの事で、上記の場合”35px”の所になります。

複数のパラメータを指定する場合は、各パラメータを(,)カンマで区切ります。その際一番最後のパラメータの末尾に、カンマを付けないように気を付けましょう。IE以外のブラウザでは、このカンマがあってもエラーにはならないのですが、IEではエラーになってしまいます。

コード自体にエラーはないのに、なぜかIEだけエラーが出てしまう?というときは、この最後のカンマが悪さをしている場合も少なくありません!習慣として、最後のカンマは記述しないよう注意が必要になります。

という事で今回は、jQueryメソッドの複数プロパティ指定方法および、注意点をサンプルコードと共に記載いたしました。

複数のプロパティの指定になると、パッと見た感じでは複雑なように見て取ることができます。しかしながら、ひとつひとつを分解して細かく見ていくことが、コツになります。また、ひとつひとつを見てみると、単純で簡単なことが理解できるかと思いますので、あせらず、じっくり、ゆっくりとコードを確認しながら記述することをオススメいまします。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。