初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips

こんにちは、鴨田です。

今更感はすごくあるとは思いますが、
コーダー初心者でも簡単なJavaScript/jQueryのコードで、
ちょっとした運用を楽に出来るTipsを紹介したいと思います。

---

１．現在見ているページのナビゲーションをアクティブにする

JS

1. if (document.URL.indexOf("001.html") != -1) {
2.   $("nav a.top").toggleClass("on");
3. } else if (document.URL.indexOf("002.html") != -1){
4.   $("nav a.list").toggleClass("on");
5. }

HTML

1. <nav>
2.   <ul>
3.     <li><a class="top">TOPページ</a></li>
4.     <li><a class="list">一覧ページ</a></li>
5.   </ul>
6. </nav>

デモページ(001.html)

PHPとかでやる場合の方が多いかも知れませんが、
ナビゲーションの現在位置表示で使えると思います。

---

２．liの中身がない場合、その上位要素のulごと表示をしない

JS

1. if($("ul.class1 li").size()=="0") {
2.   $("ul.class1").hide().parent().append("ここに<ul>がありました");;
3. }
4. if($("ul.class2 li").size()=="0") {
5.   $("ul.class2").hide().parent().append("ここに<ul>がありました");
6. }

HTML

1. <nav>
2.   <ul class="class1">
3.     <li><a class="top">TOPページ</a></li>
4.     <li><a class="list">一覧ページ</a></li>
5.   </ul>
6. </nav>
7. <nav>
8.   <ul class="class2">
9.   </ul>
10. </nav>

デモページ(002.html)

上側には、li要素が存在するので、ulのボーダーが見えます。
下側には、li要素が存在しないので、ul要素丸ごと非表示となり、ボーダーすら見えなくなりますが、
代わりにspan要素を入れ込んでいます。

また、先ほどは001.htmlだったので、TOPページがアクティブでしたが、
002.htmlにしておりますので、一覧ページがアクティブになっていることが分かるかと思います。

同じような表現として、下記のような表現でも同じ事が出来ます。

1. $("ul").not(":has(li)").hide();

---

３．ある文字列を含む要素を強制非表示/内容を変更する

JS

1. $("a:contains('ニセモノ')").hide();
2. $("a:contains('バケモノ')").text("オバケモノ").css('background', '#000').css('color', '#FFF');

HTML

1. <nav class="class1">
2.   <ul class="class2">
3.     <li><a href="#">ホンモノ</a></li>
4.     <li><a href="#">ニセモノ</a></li>
5.     <li><a href="#">バケモノ</a></li>
6.   </ul>
7. </nav>

デモページ

何かしら禁止ワードなどがあれば、
強制的にその言葉が含まれる要素を非表示にしたり、内容を変更出来ます。

---

４．ユーザーエージェントによって表現を変える

JS

1. if(navigator.userAgent.indexOf("Chrome") != -1) {
2.   $("a:contains('Chrome')").toggleClass("on");
3. } else if(navigator.userAgent.indexOf("Firefox") != -1) {
4.   $("a:contains('Firefox')").toggleClass("on");
5. } else if(navigator.userAgent.indexOf("Safari") != -1) {
6.   $("a:contains('Safari')").toggleClass("on");
7. } else {
8.   $("a:contains('Other')").toggleClass("on");
9. }

HTML

1. <nav>
2.   <ul>
3.     <li><a href="#">Chrome</a></li>
4.     <li><a href="#">Firefox</a></li>
5.     <li><a href="#">Safari</a></li>
6.     <li><a href="#">Other</a></li>
7.   </ul>
8. </nav>

デモページ

ブラウザによって、コンテンツ振り分けやリダイレクトを行いたいときに便利です。
ここでは、ブラウザによって、アクティブ要素を切り替えています。
いろいろなブラウザで見てみてください。

---

以上です。

HTML/CSSコーダーあるいはWEBデザイナーがステップアップして、
フロントエンドエンジニアになるために、
JavaScript/jQueryは欠かせない技術になりますので、
実践していくきっかけになればと思います。