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

jQueryにはたくさんのプラグインがあるので、気づけばjsフォルダがものすごいファイル数になっていたりします。今回はプラグインを使わなくても簡単に実装できる機能を「26 cool and useful jQuery tips, tricks & solutions」というエントリーから紹介します。
詳しくは以下
1.右クリックを無効にする方法
右クリックを禁止したい場合などに。コンテキストメニューが非表示になります。
1 | $(document).ready( function (){ |
2 | $(document).bind( "contextmenu" , function (e){ |
2.フォームの初期値を消す方法
検索フィールドなどに。
01 | $(document).ready( function () { |
02 | $( "input.text1" ).val( "Enter your search text here" ); |
03 | textFill($( 'input.text1' )); |
06 | function textFill(input){ |
07 | var originalvalue = input.val(); |
08 | input.focus( function (){ |
09 | if ( $.trim(input.val()) == originalvalue ){ input.val( '' ); } |
11 | input.blur( function (){ |
12 | if ( $.trim(input.val()) == '' ){ input.val(originalvalue); } |
3.リンクを新しいウィンドウで開く
XHTMLでVALIDなページを作る場合「target=”_blank”」は使用できないためjQuery側で_blank属性を追加します。
01 | $(document).ready( function () { |
04 | $( 'a[href^="http://"]' ).attr( "target" , "_blank" ); |
07 | $( "a[rel='external']" ).click( function (){ |
08 | this .target = "_blank" ; |
4.ブラウザを調べる
特定のブラウザの場合にだけ処理を指定したい場合に。
01 | $(document).ready( function () { |
03 | if ($.browser.mozilla && $.browser.version >= "2" ){ |
08 | if ( $.browser.safari ){ |
28 | if ($.browser.msie && $.browser.version <= 6 ){ |
33 | if ($.browser.msie && $.browser.version > 6){ |
5.CSSの切り替え
使用しているCSSを変更します。
01 | $(document).ready( function () { |
02 | $( "a.Styleswitcher" ).click( function () { |
04 | $( 'link[rel=stylesheet]' ).attr( 'href' , $( this ).attr( 'rel' )); |
11 | <link rel= "stylesheet" href= "default.css" type= "text/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 () { |
03 | var originalFontSize = $( 'html' ).css( 'font-size' ); |
04 | $( ".resetFont" ).click( function (){ |
05 | $( 'html' ).css( 'font-size' , originalFontSize); |
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); |
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); |
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(/^\ |
04 | && location.hostname == this .hostname) { |
05 | var $target = $( this .hash); |
06 | $target = $target.length && $target |
07 | || $( '[name=' + this .hash.slice(1) + ']' ); |
09 | var targetOffset = $target.offset().top; |
11 | .animate({scrollTop: targetOffset}, 900); |
20 | <a id= "top" name= "top" ></a> |
22 | <a href= "#top" >go to top</a> |
8.マウス座標を取得する
マウスカーソルの現在地を取得します。
1 | $(document).ready( function () { |
2 | $( "html" ).mousemove( function (e){ |
4 | $( '#XY' ).html( "X Axis : " + e.pageX + " | Y Axis " + e.pageY); |
9.要素が空かチェックする
空の場合の処理を作成する事ができます。
1 | $(document).ready( function () { |
2 | if (!$( '#id' ).html()) { |
10.置換
要素の中身を書き換えます
1 | $(document).ready( function () { |
2 | $( '#my-id' ).replaceWith( '<div>置換後の文字列</div>' ); |
11.タイマーのコールバック関数
時間がたってから何かを動作させたい場合に。
1 | $(document).ready( function () { |
2 | window.setTimeout( function () { |
12.単語を削除
特定の単語を削除します。
1 | $(document).ready( function () { |
3 | el.html(el.html().replace(/削除したい単語/ig, "" )); |
13.要素の存在確認
lengthプロパティで存在確認が取れます。
1 | $(document).ready( function () { |
2 | if ($( '#my-id' ).length) { |
14.DIVをクリック可能にする
クリック要素を大きくしたい場合に。
1 | $(document).ready( function () { |
2 | $( "div" ).click( function (){ |
4 | window.location=$( this ).find( "a" ).attr( "href" ); |
15.画面サイズに合わせてCSSを切り替え
画面の大きさに合わせて適用するスタイルを切り替えたい場合に。
01 | $(document).ready( function () { |
02 | function checkWindowSize() { |
03 | if ( $(window).width() > 1200 ) { |
04 | $( 'body' ).addClass( 'large' ); |
07 | $( 'body' ).removeClass( 'large' ); |
10 | $(window).resize(checkWindowSize); |
16.クローンオブジェクト
オブジェクトのクローンを返します。
1 | $(document).ready( function () { |
2 | var cloned = $( '#id' ).clone(); |
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" ); |
18.独自のセレクタを使用する
独自のセレクタ拡張で柔軟に対応できる場合があります。
サンプルでは1000px以上のboxクラスはクリックするとアラートが出るようになります。
01 | $(document).ready( function () { |
02 | $.extend($.expr[ ':' ], { |
03 | moreThen1000px: function (a) { |
04 | return $(a).width() > 1000; |
08 | $( '.box:moreThen1000px' ).click( function () { |
10 | alert( 'The element that you have clicked is over 1000 pixels wide' ); |
15 | <div style= "background-color: #ff0000; width: 1200px" class= "box" >1200px</div> |
19.要素の数を数える
1 | $(document).ready( function () { |
20.箇条書きの行頭文字を独自文字に
行頭の文字を画像や独自文字へ変更する事ができます。サンプルは「‒ 」を追加しています。
01 | $(document).ready( function () { |
02 | $( "ul" ).addClass( "Replaced" ); |
03 | $( "ul > li" ).prepend( "‒ " ); |
09 | ul.Replaced { list-style : none; } |
21.GoogleでホスティングされているjQueryを使う
ローカルファイルやサーバー内に設置しなくてもjQueryが使えるようになります。設置方法は2通りあります。
3 | google.load( "jquery" , "1.4" ); |
4 | google.setOnLoadCallback( function () { |
22.アニメーションを無効にする
jQueryのアニメーションを全て無効にします。
1 | $(document).ready( function () { |
23.他のライブラリとの共存
他のライブラリと同時に使うには別の変数にjQueryを割り当てる事で動作させる事ができます。
1 | $(document).ready( function () { |
2 | var $jq = jQuery.noConflict(); |
参考になれば幸いです。
この記事が気に入ったら
いいね!しよう
最新情報をお届けします