Jquery に関する 26 の実践的なヒント (jQuery のヒント、トリック、ソリューション)

たとえば、右クリックの無効化、検索テキストボックスのテキストの非表示、新しいウィンドウでリンクを開く、ブラウザの検出、画像のプリロード、ページスタイルの切り替え、すべての列の高さを等しくする、ページフォントサイズを動的に制御する、ページフォントサイズを取得するなどの機能があります。マウスポインタの X 値と Y 値、要素が空かどうかの確認、要素の置換、遅延ロード、要素が Jquery コレクションに存在するかどうかの確認、DIV をクリック可能にする、オブジェクトのクローン作成、要素の中央揃え、カウント要素の数を増やす、Google ホストで Jquery クラスライブラリを使用する、Jquery を無効にするこれにより、Jquery クラスライブラリと他の Javascript クラスライブラリ間の競合の問題が解決されます。

詳細は次のとおりです。

1. 右クリックは禁止されています

コードをコピーしますコードは次のとおりです。

 
$(document).ready(function(){ 
$(document).bind("contextmenu",function(e){ 
return false; 
}); 
}); 

2. コードをコピーします。 >

コードは次のとおりです: $(document).ready(function() { $("input.text1").val("Enter yourここにテキストを検索します"); textFill($ ('input.text1')); });

function textFill(input){ //入力フォーカステキスト関数

varoriginalvalue = input. val(); 
input.focus( function (){ 
if( $.trim(input.val()) == 元の値 ){ input.val(''); } 
}); 
input.blur( function(){ 
if( $.trim(input.val()) == '' ){ input.val(originalvalue); } 
}); 

 
3 in new ウィンドウでリンクを開きます 




 コードをコピーします 

コードは次のとおりです:

$(document).ready(function () { //例 1: すべてのリンクが新しいウィンドウで開きます $('a[href^="http ://"]').attr("target", "_blank") ; //例 2: rel="external" 属性を持つリンクは新しいウィンドウでのみ開きます $('a [@rel$='external']').click(function(){

this.target = "_blank";

});
}); の使用方法🎜>リンクを開く

4 ブラウザを検出します
注: バージョン jQuery 1.4 では、 $.support は $.browse 変数を置き換えました。

コードをコピー

コードは次のとおりです。

$(document).ready(function( ) { // Firefox 2 以降を対象とします if ($.browser.mozilla && $.browser.version >= "1.8" ){ // 何かを行います } // ターゲット Safari if( $.browser.safari ){

// 何かを実行します

} 
// ターゲット Chrome 
if( $.browser.chrome){ 
/ / 何かをする 
} 
// ターゲット Camino 
if( $.browser.camino){ 
// 何かをする 
} 
// ターゲット Opera 
if( $ .browser. opera){ 
// 何かを実行します 
} 
// IE6 以下を対象とします 
if ($.browser.msie && $.browser.version <= 6 ){ 
// 何かをします 
} 
// IE6 以上を対象とします 
if ($.browser.msie && $.browser.version > 6){ 
// 何かをします 
} 
 }); 

 
5 プリロード画像




コードをコピー

コードは次のとおりです。

$(document).ready(function() { jQuery.preloadImages = function() { for(var i = 0; i").attr( "src", 引数 [i]); } }// $.preloadImages("image1.jpg")

の使用方法

 
6 ページスタイルの切り替え

コードをコピー

 コードは次のとおりです。

$(document).ready( function() {
$("a.Styleswitcher").click(function() {

//LINK REL 属性を A REL 属性の値と入れ替えます $('link[rel=stylesheet ]').attr('href' , $(this).attr('rel')) // の使用方法これをヘッダーに配置します // リンクデフォルトのテーマ

赤のテーマ

青のテーマ
});
7 つの列は同じ高さです
2 つの CSS 列が使用されている場合、この方法を使用して 2 つの列の高さを同じにすることができます。

コードをコピーコードは次のとおりです。

 
$(document).ready(function( ) { 
functionqualHeight(group) { 
tallest = 0; 
group.each(function() { 
thisHeight = $(this).height(); 
if(thisHeight > ; 最も高い) { 
最も高い = thisHeight; 
} 
}); 
$(document) の使用方法.ready( function() { 
equalHeight($(".left")); 
equalHeight($(".right")); 
}); 
 
8 ページのフォント サイズを動的に制御します
ユーザーはページのフォント サイズを変更できます

コードをコピーします

コードは次のとおりです。 $(document).ready(function() { // フォントサイズをリセットします (デフォルトに戻ります) varoriginalFontSize = $('html ').css('font-size ');

$(".resetFont").click(function(){

$('html').css('font-size', originalFontSize); 
}); 
 // フォントサイズを大きくします(bigger font0 
$(".increaseFont").click(function(){ 
var currentFontSize = $('html').css( 'フォントサイズ'); 
var currentFontSizeNum = parseFloat(currentFontSize, 10); 
$('html').css('フォントサイズ', newFontSize) ; 
return false; 
}); 
// フォントサイズを小さくします (フォントを小さくします) 
$(".decreaseFont").click(function(){ 
var currentFontSize = $ ('html').css(' フォントサイズ'); 
var currentFontSizeNum = parseFloat(currentFontSize, 10); 
var newFontSize = currentFontSizeNum*0.8; 'font-size', newFontSize); 
return 
}) 
9 ページの先頭に戻る関数




コードをコピー


 コードは次のとおりです: 

$(document).ready(function() {

$('a[href*=#]').click(function () { if (location.pathname.replace(/^//,'') == this.pathname.replace(/^// ,'') && location.hostname == this.hostname ) { var $target = $(this.hash); $target = $target.length && $target || $('[name=' this.hash.slice(1) ' ]'); if ($target.length) {

var targetOffset = $target.offset().top; ('html,body')

.animate({scrollTop: targetOffset}, 900);
return
}
}
});
// これをスクロールしたい場所に配置します

// リンク
トップへ
});

10 マウスポインタＸＹ値を取得

コードをコピー

コードは次のとおりです。

$ (document).ready(function() {
$().mousemove(function(e){
// を表示しますID XY の div 内の x 軸と y 軸の値

$('# XY').html("X 軸 : " e.pageX " | Y 軸 " }); ; //

}); 要素が空かどうかを確認します。 🎜>

コードをコピーします

 コードは次のとおりです: 

 
$(document).ready(function() { 
if ($('#id').html()) { 
// 何かをします 
} 
}); 

12 置換要素

コードをコピー

コードは次のとおりです:

$(document).ready(function() {
$('#id').replaceWith('

')
});

13 jQuery が遅延しました読み込み関数

コードをコピー

コードは次のとおりです:

 
$(document).ready( function() { 
window.setTimeout(function() { 
// 何かを実行します 
}, 
}); 

14 単語関数を削除します

コードをコピーします

コードは次のとおりです:

$(document).ready(function() {
var el = $('#id');
el.html(el.html().replace(/word /ig, ""));

15 要素がＪクエリオブジェクトコレクションに存在するかどうかを確認します

コードをコピーコードは次のとおりです:

 
$(document).ready(function() { 
if ($('#id').length) { 
// 何かを実行します 
} 
}); 🎜>
 

16 DIV 全体をクリック可能にします

コードをコピーしますコードは次のとおりです:

$( document).ready(function() { 
$("div").click(function(){ 
//href 属性から URL を取得し、URL を起動します 
window.location=$(this ).find("a").attr("href"); return false; 
// 
の使い方A href="index.html" >home



17 ID とクラスの切り替え ウィンドウサイズを変更する場合、ID を切り替えます。および Class

コードをコピーコードは次のとおりです。 $(document).ready( function() {

function checkWindowSize() {

if ( $(window).width() > 1200 ) { 
$('body').addClass('large'); 
else { 
$('body').removeClass('large'); 
} 
} 
$(window).resize(checkWindowSize) 
}); 

 
18 クローンオブジェクト

コードをコピー

コードは次のとおりです: $(document).ready(function () { var cloned = $('#id').clone();

 の使用方法
}); 


19 要素を画面の中央に配置します

コードは次のとおりです。 $(document).ready(function() { jQuery.fn.center = function () { this .css("位置","絶対"); this.css ("トップ", ( $(window).height() - this.height() ) / 2 $(window).scrollTop() " px");

this.css("left", ( $( window).width() - this.width() ) / 2 $(window).scrollLeft() "px");

return this; 
} 
$("#id").center () 
}); 

20 独自のセレクターを作成します

コードをコピー

コードは次のとおりです: $(document).ready(function() { $.extend( $.expr[':'], { moreThen1000px: function(a) { return $(a).width() > 1000;

}); ('.box:moreThen1000px').click(function() {

// 単純な JS アラート ボックスを作成します 
alert('クリックした要素の幅は 1000 ピクセルを超えています'); 
} ); 
}); 

21 個の統計要素 数値

 コードをコピーします

次のように:

$(document).ready(function() { $("p").size(); }); 🎜>22 独自の箇条書きを使用します

 コードをコピーします 

 コードは次のとおりです:

$ (document).ready(function() {
$("ul").addClass("Replaced") ;

$("ul > li").prepend("‒ "); // 使い方 ul.Replaced { list-style : none } }); 23 Google ホストでの JQuery クラスライブラリの参照 Google に jQuery スクリプトをホストさせます。これは 2 つの方法で行うことができます。

 コードをコピーします。

 コードは次のとおりです。 >//例 1

// 例 2:(最良および最速の方法) 🎜>
24. Jquery (アニメーション) 効果を無効にする

コードをコピーしますコードは次のとおりです:

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

25. 他の Javascript ライブラリとの競合の解決策

コードをコピーコードは次のとおりです。

 
$(document).ready(function() { 
var $ jq = jQuery.noConflict(); 
$jq('#id').show(); 

26. ) 関数 (ページ読み込み プロンプトを入力): 

> まず CSS を記述し、ページの右上隅に絶対配置します。

コードをコピーコードは次のとおりです:

#loading {

 Position:absolute ; z-index:900;text-align:center; 
 背景色:#eef2fa;border:1px ソリッド 
 カラー:#000;フォントサイズ:12px;パディング:3px; 80px; 
 right:0;top:0; 
} 

 
> 次に、すべての画像が読み込まれた後、jQuery を使用して Loading DIV を非表示にします。 

> 先ほどコードをテストしていたら、間違ったアドレスを書いてしまい、危うく発狂しそうになりました。

コードをコピーしますコードは次のとおりです。

著者別の最新記事