Development_jquery で使用できる jQuery のヒント

WBOY
リリース: 2016-05-16 16:56:23
オリジナル
940 人が閲覧しました

1) 右クリックを無効にする
Web アプリケーションを開発する場合、右クリック機能を無効にする必要がある場合があります。このコードを使用すると、jQuery 開発者は Web ページでのマウスの右クリックを無効にすることができます。コードは次のとおりです。

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

$(document ).ready(function( ) {
//右クリックのコンテキスト メニューをキャッチします
$(document).bind("contextmenu",function(e) {
//警告プロンプト - オプション
alert("右クリックは禁止です!");

//デフォルトのコンテキスト メニューを削除します
}); 🎜>2) テキストのスケーリング
次のコードを使用すると、ユーザーは必要に応じて Web ページのフォント サイズを拡大またはズームできます。コードは次のとおりです:



。コードをコピーします
コードは次のとおりです: $(document).ready(function() { //現在のフォント サイズを検索します varoriginalFontSize = $('html').css( 'font-size');
//テキストのサイズを大きくします
$(".increaseFont").click(function() {
var currentFontSize = $('html').css ('font-size');
var currentFontSizeNumber = parseFloat(currentFontSize, 10);

var newFontSize = currentFontSizeNumber*1.2; ('html').css('font-size ', newFontSize);
return
});

//テキスト サイズを小さくします
$(".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
});
$(".resetFont").click (function(){
$('html').css('font-size',originalFontSize);
});


3) 新しいウィンドウでリンクを開く
この jQuery コードを使用すると、ユーザーが Web サイト上でクリックしたリンクは新しいウィンドウで開きます。次のように:




コードをコピー

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

4) スタイルシートの切り替え
Web サイトのスキンの付け方を知っていますか?次のコードは、スタイル シート切り替え関数の実装に役立ちます。




コードをコピー

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

$(document).ready(function() {
$("a.cssSwap").click(function() { //リンク rel 属性を値と交換しますrel $('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); }); 🎜> 5) トップに戻る これは、最近の Web サイトで非常に一般的なトップに戻る機能で、特に長いページに適しています。コードは次のように非常に単純です:



コードをコピー


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

$(document).ready (function() {
//id="top" リンクがクリックされたとき
$('#top').click(function() {
//ページの先頭に戻る $(document).scrollTo(0,500); } }); 6) マウスの X、Y 座標を取得します
次のコードはマウスの X、Y 座標を取得できます。コードは次のとおりです:




コードをコピー


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

$().mousemove(function(e){
//P 要素内の x 軸と y 軸の値を表示します
$('p').html ("X 軸 : " e.pageX " | Y 軸 " e.pageY);
コードをコピー


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

$(document).ready(function() {
$().mousemove(function(e){
$('# マウス座標 ').html("X 軸の位置 = " e.pageX " および Y 軸位置 = " e.pageY);
}) ;

8) 画像のプリロード
この画像のプリロード スニペットを使用すると、待たずに画像をすばやくプリロードできます。コードは次のとおりです:
コードをコピーします コードは次のとおりです:

jQuery.preloadImagesInWebPage = function() {
for(var ctr = 0; ctrjQuery("").attr("src", argument[ctr]);
}

メソッドの呼び出し:

コードをコピー コードは次のとおりです:
$.preloadImages ("image1.gif", "image2.gif", "image3.gif");
画像がロードされているかどうかを確認します:
$('#imageObject') .attr('src', 'image1.gif ').load(function() {
alert('画像がロードされました...');
}); 🎜>
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!