Jquery に関する 26 の実践的なヒント (jQuery のヒント、トリック、ソリューション)_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 を非表示にします。

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

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