Asial Blog

Recruit! Asialで一緒に働きませんか?

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

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
JavaScript
jQuery
こんにちは、鴨田です。

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



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



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



2.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();



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



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>


デモページ

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



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



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は欠かせない技術になりますので、
実践していくきっかけになればと思います。