jQueryが嫌いな人はいますか？ この高速でシンプルなjavascriptライブラリは、2008年に非常に人気を博しました。 この記事では、非常に便利な8つのjQueryテクニック、ヒント、およびトリックのリストをまとめました。
リンク先=空白
リンクにtarget = blank属性を使用していますか？ その場合、XHTML 1.0 Strictではこれが許可されないことに注意してください。 この問題の良い解決策は、jQueryを使用して、新しいウィンドウを開くリンクを作成することです。
$( 'a[rel$=" external "]' ).click( function (){
this .target = "_blank" ;
});
/*
:
<a href="http://www.lepinskidesign.com.br/" rel="external">lepinskidesign.com.br</a>
*/
* This source code was highlighted with Source Code Highlighter .
翻訳者のメモ：元の著者では、「@ rel」を使用していますが、これは現在非推奨ですが、jQueryの以前のバージョンでも十分に機能する可能性があります。 さらに、コメントには、window.openによる標準ソリューションの説明があります。
アイテムの総数を数える
これは私が非常にシンプルと呼んでいるものですが、非常に有用なアドバイスです。このコードは選択された要素の数を返します。
$( 'element' ).size();
* This source code was highlighted with Source Code Highlighter .
翻訳者注：さらに、サイズ（）の代わりに長さを使用できます。
画像のプリロード
JavaScriptで画像を使用する場合は、画像を使用する前にアップロードすることをお勧めします。 このコードはすべての作業を実行します。
jQuery.preloadImages = function ()
{
for ( var i = 0; i<arguments.length; i++)
{
jQuery( "<img>" ).attr( "src" , arguments[i]);
}
};
//
$.preloadImages( "image1.gif" , "/path/to/image2.png" , "some/image3.jpg" );
* This source code was highlighted with Source Code Highlighter .
ブラウザー定義
CSSを接続するための条件付きコメントを使用してブラウザーを決定する方が良いという事実にもかかわらず、jQueryを介して同じことを行うのは非常に簡単であり、便利です。
//A. Safari
if ( $.browser.safari ) $( "#menu li a" ).css( "padding" , "1em 1.2em" );
//B. IE6
if ($.browser.msie && $.browser.version > 6 ) $( "#menu li a" ).css( "padding" , "1em 1.8em" );
//C. IE6
if ($.browser.msie && $.browser.version <= 6 ) $( "#menu li a" ).css( "padding" , "1em 1.8em" );
//D. Firefox 2
if ($.browser.mozilla && $.browser.version >= "1.8" ) $( "#menu li a" ).css( "padding" , "1em 1.8em" );
* This source code was highlighted with Source Code Highlighter .
翻訳者注：jQuery 1.3以降では、$ .browserは非推奨であり、使用を推奨されていません。代わりに、$ .supportを使用することをお勧めします。
テキスト内の単語を削除する
テキスト内の単語を削除できるようにしたいことがありますか？ 単語を別の単語に置き換えるために簡単に変更できる次のコードに注意してください。
var el = $( '#id' );
el.html(el.html().replace(/word/ig, "" ));
* This source code was highlighted with Source Code Highlighter .
同じ高さの列
このテクニックは非常に人気があります。2つのcssカラムを使用して、それらを同じ高さにする方法ですか？ 幸いなことに、cssnewbieのRobは解決策を知っています。
function equalHeight(group) {
tallest = 0;
group.each( function () {
thisHeight = $( this ).height();
if (thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
/*
:
$(document).ready(function() {
equalHeight($(".recent-article"));
equalHeight($(".footer-col"));
});
*/
* This source code was highlighted with Source Code Highlighter .
ソース： jQueryを使用した高さの等しい列
フォントサイズを変更する
フォントサイズの変更は、多くの最新のWebサイトで広く使用されている機能です。 jQueryで実装する方法をご覧ください。
$( document ).ready( function (){
//
var originalFontSize = $( 'html' ).css( 'font-size' );
$( ".resetFont" ).click( function (){
$( 'html' ).css( 'font-size' , originalFontSize);
});
//
$( ".increaseFont" ).click( function (){
var currentFontSize = $( 'html' ).css( 'font-size' );
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$( 'html' ).css( 'font-size' , newFontSize);
return false ;
});
//
$( ".decreaseFont" ).click( function (){
var currentFontSize = $( 'html' ).css( 'font-size' );
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$( 'html' ).css( 'font-size' , newFontSize);
return false ;
});
});
* This source code was highlighted with Source Code Highlighter .
ソース： jQueryを使用したテキストサイズ変更
マウスでコンテキストメニューを呼び出すことの禁止
JavaScriptを介してマウスでコンテキストメニューを呼び出すことを禁止する多くのオプションがありますが、jQueryはこれをはるかに簡単にします。
$( document ).ready( function (){
$( document ).bind( "contextmenu" , function (e){
return false ;
});
});
* This source code was highlighted with Source Code Highlighter .
ソース： ファーストヒント：jQueryの右クリックコンテキストメニューをキャンセルする方法