プラグインを使わずjQueryに23の機能をつける方法


20100301-01
jQueryにはたくさんのプラグインがあるので、気づけばjsフォルダがものすごいファイル数になっていたりします。今回はプラグインを使わなくても簡単に実装できる機能を「26 cool and useful jQuery tips, tricks & solutions」というエントリーから紹介します。

詳しくは以下

IT/WEB業界への転職なら求人サイトGreen

1.右クリックを無効にする方法

右クリックを禁止したい場合などに。コンテキストメニューが非表示になります。

1$(document).ready(function(){
2    $(document).bind("contextmenu",function(e){
3        return false;
4    });
5});

2.フォームの初期値を消す方法

検索フィールドなどに。

01$(document).ready(function() {
02$("input.text1").val("Enter your search text here");
03   textFill($('input.text1'));
04});
05 
06function textFill(input){ //input focus text function
07    var originalvalue = input.val();
08    input.focus( function(){
09        if( $.trim(input.val()) == originalvalue ){ input.val(''); }
10    });
11    input.blur( function(){
12        if( $.trim(input.val()) == '' ){ input.val(originalvalue); }
13    });
14}

3.リンクを新しいウィンドウで開く

XHTMLでVALIDなページを作る場合「target=”_blank”」は使用できないためjQuery側で_blank属性を追加します。

01$(document).ready(function() {
02 
03   //外部リンクは全て別ウインドウにする場合
04   $('a[href^="http://"]').attr("target", "_blank"); 
05 
06   //rel="external" 属性を追加した場合のみ別ウインドウにする場合
07   $("a[rel='external']").click(function(){
08      this.target = "_blank";
09   });
10});
11 
12// 使い方 以下のようなリンクを追加します。
13<a href="https://blog.verygoodtown.com" rel="external">リンク</a>

4.ブラウザを調べる

特定のブラウザの場合にだけ処理を指定したい場合に。

01$(document).ready(function() {
02// Firefox 2以上
03if ($.browser.mozilla && $.browser.version >= "2" ){
04    alert("mozila");
05}
06 
07// Safari
08if( $.browser.safari ){
09    alert("safari");
10}
11 
12// Chrome
13if( $.browser.chrome){
14    alert("chrome");
15}
16 
17// Camino
18if( $.browser.camino){
19    alert("camino");
20}
21 
22// Opera
23if( $.browser.opera){
24    alert("opera");
25}
26 
27// IE6以下
28if ($.browser.msie && $.browser.version <= 6 ){
29    alert("IE6以下");
30}
31 
32// IE7以上
33if ($.browser.msie && $.browser.version > 6){
34    alert("IE7以上");
35}
36});

5.CSSの切り替え

使用しているCSSを変更します。

01$(document).ready(function() {
02    $("a.Styleswitcher").click(function() {
03        //CSSのパスを書き換えます
04        $('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));
05    });
06});
07 
08 
09//使い方
10//ヘッダーでデフォルトのCSSを読み込みます
11<link rel="stylesheet" href="default.css" type="text/css">
12 
13 
14// 以下のようなCSS切り替えのリンクを設置します。
15<a href="#" class="Styleswitcher" rel="default.css">Default Theme</a>
16<a href="#" class="Styleswitcher" rel="red.css">Red Theme</a>
17<a href="#" class="Styleswitcher" rel="blue.css">Blue Theme</a>

6.フォントサイズを変更する

ユーザーがフォントサイズを変更できるようリンクを設定します。

01$(document).ready(function() {
02  // Reset the font size(back to default)
03  var originalFontSize = $('html').css('font-size');
04    $(".resetFont").click(function(){
05    $('html').css('font-size', originalFontSize);
06  });
07  // Increase the font size(bigger font0
08  $(".increaseFont").click(function(){
09    var currentFontSize = $('html').css('font-size');
10    var currentFontSizeNum = parseFloat(currentFontSize, 10);
11    var newFontSize = currentFontSizeNum*1.2;
12    $('html').css('font-size', newFontSize);
13    return false;
14  });
15  // Decrease the font size(smaller font)
16  $(".decreaseFont").click(function(){
17    var currentFontSize = $('html').css('font-size');
18    var currentFontSizeNum = parseFloat(currentFontSize, 10);
19    var newFontSize = currentFontSizeNum*0.8;
20    $('html').css('font-size', newFontSize);
21    return false;
22  });
23});
24 
25// 使い方
26// 以下のようなリンクを追加します。
27<a href="#" class="resetFont">元に戻す</a>
28<a href="#" class="increaseFont">+</a>
29<a href="#" class="decreaseFont">-</a>

7.スムーズリンクを設置する

ページ内リンクをスムーズに移動させます。

01$(document).ready(function() {
02$('a[href*=#]').click(function() {
03 if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
04 && location.hostname == this.hostname) {
05   var $target = $(this.hash);
06   $target = $target.length && $target
07   || $('[name=' + this.hash.slice(1) +']');
08   if ($target.length) {
09  var targetOffset = $target.offset().top;
10  $('html,body')
11  .animate({scrollTop: targetOffset}, 900);
12    return false;
13   }
14  }
15  });
16});
17 
18// 使い方
19// スクロール先を指定します。
20<a id="top" name="top"></a> 
21// リンクを設置します。
22<a href="#top">go to top</a> 

8.マウス座標を取得する

マウスカーソルの現在地を取得します。

1$(document).ready(function() {
2   $("html").mousemove(function(e){
3     //X座標とY座標を#XYに書き出します。
4    $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
5  });
6});
7// 使い方
8<div id="XY"></div>

9.要素が空かチェックする

空の場合の処理を作成する事ができます。

1$(document).ready(function() { 
2  if (!$('#id').html()) { 
3    alert('empty');
4  }
5}); 

10.置換

要素の中身を書き換えます

1$(document).ready(function() {
2   $('#my-id').replaceWith('<div>置換後の文字列</div>');
3});

11.タイマーのコールバック関数

時間がたってから何かを動作させたい場合に。

1$(document).ready(function() {
2   window.setTimeout(function() {
3      alert('1秒経過');
4    }, 1000);
5 });

12.単語を削除

特定の単語を削除します。

1$(document).ready(function() {
2   var el = $('#my-id');
3   el.html(el.html().replace(/削除したい単語/ig, ""));
4 });

13.要素の存在確認

lengthプロパティで存在確認が取れます。

1$(document).ready(function() {
2    if ($('#my-id').length) {
3      alert('存在します。');
4    }
5 });

14.DIVをクリック可能にする

クリック要素を大きくしたい場合に。

1$(document).ready(function() {
2   $("div").click(function(){
3      //aタグから遷移先を自動取得します。
4      window.location=$(this).find("a").attr("href");
5       return false;
6    });
7});

15.画面サイズに合わせてCSSを切り替え

画面の大きさに合わせて適用するスタイルを切り替えたい場合に。

01$(document).ready(function() {
02   function checkWindowSize() {
03    if ( $(window).width() > 1200 ) {
04        $('body').addClass('large');
05    }
06    else {
07        $('body').removeClass('large');
08    }
09   }
10$(window).resize(checkWindowSize);
11});

16.クローンオブジェクト

オブジェクトのクローンを返します。

1$(document).ready(function() {
2   var cloned = $('#id').clone();
3});

17.画面の中心

画面の中心に要素を配置します。

1$(document).ready(function() {
2  jQuery.fn.center = function () {
3      this.css("position","absolute");
4      this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
5      this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
6      return this;
7  }
8  $("#my-id").center();
9});

18.独自のセレクタを使用する

独自のセレクタ拡張で柔軟に対応できる場合があります。
サンプルでは1000px以上のboxクラスはクリックするとアラートが出るようになります。

01$(document).ready(function() {
02   $.extend($.expr[':'], {
03      moreThen1000px: function(a) {
04         return $(a).width() > 1000;
05       }
06    });
07 
08   $('.box:moreThen1000px').click(function() {
09 
10      alert('The element that you have clicked is over 1000 pixels wide');
11    });
12});
13 
14//以下の要素をhtmlに追加してクリックしてみてください。
15<div style="background-color: #ff0000; width: 1200px" class="box">1200px</div>

19.要素の数を数える

1$(document).ready(function() {
2   $("p").size();
3});

20.箇条書きの行頭文字を独自文字に

行頭の文字を画像や独自文字へ変更する事ができます。サンプルは「‒ 」を追加しています。

01$(document).ready(function() {
02   $("ul").addClass("Replaced");
03   $("ul > li").prepend("‒ ");
04});
05 
06//使い方
07//cssでリストスタイルを無効にするだけです。
08<style> 
09ul.Replaced { list-style : none; }
10</style>

21.GoogleでホスティングされているjQueryを使う

ローカルファイルやサーバー内に設置しなくてもjQueryが使えるようになります。設置方法は2通りあります。

1 //Example 1 
2<script src="http://www.google.com/jsapi"></script><script type="text/javascript">
3google.load("jquery""1.4");
4google.setOnLoadCallback(function() {
5    alert('読み込み完了');
6});
7</script>
8// Example 2 
9<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

22.アニメーションを無効にする

jQueryのアニメーションを全て無効にします。

1$(document).ready(function() {
2   jQuery.fx.off = true;
3});

23.他のライブラリとの共存

他のライブラリと同時に使うには別の変数にjQueryを割り当てる事で動作させる事ができます。

1$(document).ready(function() {
2   var $jq = jQuery.noConflict();
3   $jq('#id').show();
4});

参考になれば幸いです。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

follow us in feedly