JavaScript と JQuery の実践的なコード スニペット (1)_jquery

(1) JQueryを使用して画像を更新するにはどうすればよいですか?
注: リソース (Web ページ、画像など) をリクエストするときに、そのリソースがブラウザーにキャッシュされている場合、リクエストでは、必要なリソースではなく、キャッシュされたコピーが返されることは誰もが知っています。 (リソースの内容は更新されています)。現時点で最も一般的な方法は、リクエストされたページまたは画像のソースの後にクエリ文字列「ran= Math.random()」を追加して、最新のリソースが取得されるようにすることです。バージョンリソースが要求されます。
コード:

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

$(imageObj) .attr( 'src',$(imageObj).attr('src') '?' Math.random());

(2) JQuery を使用して画像が存在するかどうかを確認する方法フルロードされましたか？
注: ページが完全に読み込まれていないときに JavaScript オペレーションを呼び出すと、この時点では DOM が解析されていないため、多くの場合失敗します。実行する JavaScript/JQuery メソッドは、windiw.onload メソッド内で実行するか (この時点で画像をロードする必要があり、その高さおよびその他の属性を取得できます)、または $(function(){ }) (この時点で DOM は解析されますが、要求されたリソースがすべてロードされるわけではありません)。
使用する前に画像がロードされているかどうかを確認したい場合は、次のコードを使用できます:
コード:

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

var imgsrc = "img/img.png";
$(imageObj).load(function()
{
alert(' 画像読み込み完了');
}).error(function()
{
alert('画像読み込みエラー');
}).attr('src',imgsrc );

(3) JQuery を使用して複数の画像が完全にロードされているかどうかを確認するにはどうすればよいですか?
手順: 手順は上記のとおりです。この時点で、ページにロードされる画像の数を変数に設定できます。変数が画像の総数に等しい場合は、その数を記録します。 , 読み込みが完了しました！

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

var totalImages = 10; addedImages = 0 ;
$('img').load(function()
{
addedImages; // ここで終了
if(loadedImages == totalImages)
{
アラート('すべての画像がロードされました!');
}
});

(4) JQuery を使用して順序なしリスト (ul) をソートする方法は?
注: 場合によっては、順序なしリスト (ul) をソートする必要があることがあります (もちろん、順序付きリスト ol を使用することもできます) が、ul はより多くのカスタマイズ機能を提供し、ソーターをカスタマイズできます。
コード: (1) ソートするリストは次のとおりです:

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

• 雲


• 雨
  
• snow



(2) JQuery コードは次のとおりです。 >
コードをコピーします

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

var items = $('.to_order li').get(); //すべて取得ソートされる li items.sort (function(a,b) //JavaScript 組み込み関数 sort を呼び出します。パラメータはクロージャー関数、つまりソーターです。 { var keyA = $(a).val(); var keyB = $(b).val();

if(keyA < keyB) return 1; ;

return 0;
});
var = $('.to_order');
$.each(items,function(i,li));キューに入れられたコレクション
{
ul.append( li);
});


(5) マウスの右ボタン (コンテキストメニュー) を無効にする方法は?
注: コピーや名前を付けて保存などを避けるために、ユーザーがマウスの右ボタンを使用できないようにしたい場合があります。




コードをコピー

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

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

(6) フェードアウトする方法画像 (フェードアウト後) の場合、別の画像がフェードイン (フェードイン) する効果は何ですか?
注: フェードイン効果とフェードアウト効果は、JQuery のフェードイン効果とフェードアウト効果を使用して実現できます。




コードをコピー

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

$('img').fadeOut(function(){
$(this).load(function(){
$(this).fadeIn();
}) .attr('src',AnotherSource);

(7) DOM オブジェクトが存在するかどうかを検出します。
注: DOM オブジェクトを操作する前に、まずそれが存在するかどうかを確認してください。

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

//メソッド 1
if( $(' #elementId').length)
{
//存在します
}
//メソッド 2
if($('#elementId').size() > 0 )
{
//存在します
}
//メソッド 3
if($('#elementId')[0])
{
//存在します
}
//方法 4~方法 N
追加を楽しみにしています、笑!