12 の実践的な jQuery コード スニペット_jquery を共有する

WBOY
リリース: 2016-05-16 15:11:25
オリジナル
1455 人が閲覧しました

jQuery は、Web 開発者や Web デザイナーの間で非常に有名な優れた JavaScript ライブラリで、Web デザイナーが多くの創造的で美しい WEB ページを開発するのに役立ちます。

この記事では主に 12 の便利な jQuery スキルを紹介します。具体的な内容は次のとおりです

ここでは、Web サイトのレイアウトとアプリケーションの創造性と機能性を向上させるのに役立つヒントをいくつか集めました。

1. リンクを新しいウィンドウで開きます

このコードを使用すると、ハイパーテキスト リンクをクリックすると新しいウィンドウで開き、ユーザーのエクスペリエンスが向上します。

$(document).ready(function() {
 //select all anchor tags that have http in the href
 //and apply the target=_blank
 $("a[href^='http']").attr('target','_blank');
});
 
ログイン後にコピー

2. タイマーを設定します

$(document).ready(function() {
 window.setTimeout(function() {
 // some code
 }, 500);
});
ログイン後にコピー

3. 列の高さを等しく設定します

次のコードを使用して、Web アプリケーションの各列の高さを同じにします:

<div class="equalHeight" style="border:1px solid">
 <p>First Line</p>
 <p>Second Line</p>
 <p>Third Line</p>
</div>
<div class="equalHeight" style="border:1px solid">
 <p>Column Two</p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
 equalHeight('.equalHeight');
});
//global variable, this will store the highest height value
var maxHeight = 0;
function equalHeight(col) {
 //Get all the element with class = col
 col = $(col);
 //Loop all the col
 col.each(function() {
 //Store the highest value
 if ($(this).height() > maxHeight) {
 maxHeight = $(this).height();
 }
 });
 //Set the height
 col.height(maxHeight);
}
</script>
ログイン後にコピー

4. jQuery プリロード画像

このトリックにより、Web ページ上の画像の読み込みを高速化できます:

jQuery.preloadImagesInWebPage = function() {
 for (var ctr = 0; ctr & lt; arguments.length; ctr++) {
 jQuery("").attr("src", arguments[ctr]);
 }
}
// 使用方法:
$.preloadImages("image1.gif", "image2.gif", "image3.gif");
// 检查图片是否被加载
$('#imageObject').attr('src', 'image1.gif').load(function() {
 alert('The image has been loaded…');
});
ログイン後にコピー

5. 要素をページの中央に配置します

<div id="foo" style="width:200px;height: 200px;background: #ccc;"></div>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.fn.center = function() {
 this.css("position", "absolute");
 this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
 this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
 return this;
}
//Use the above function as:
$('#foo').center();
</script>
 

ログイン後にコピー

6. マウスの右ボタンを無効にします

$(document).ready(function() {
 //catch the right-click context menu
 $(document).bind("contextmenu", function(e) {
 //warning prompt - optional
 alert("No right-clicking!");
 //delete the default context menu
 return false;
 });
});
ログイン後にコピー

7. サブ要素の数を計算します

<div id="foo">
 <div id="bar"></div>
 <div id="baz">
 <div id="biz"></div>
 <span><span></span></span>
 </div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
 //jQuery code to count child elements $("#foo > div").size()
alert($("#foo > div").size())
</script>
ログイン後にコピー

8. スタイルリスト変更

このコードは、スタイル リストを変更するのに役立ちます。

 $(document).ready(function() {
 $("a.cssSwap").click(function() { 
 //swap the link rel attribute with the value in the rel 
 $('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); 
 }); 
 });
ログイン後にコピー

9. jQuery を使用して文字サイズを設定します

このコードを追加すると、ユーザーは必要に応じてテキスト サイズをリセット (増加または減少) できます。

 $(document).ready(function() {
 //find the current font size
 var originalFontSize = $('html').css('font-size');

//Increase the text 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 false;
 });

//Decrease the Text Size
 $(".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;
 });

// Reset Font Size
 $(".resetFont").click(function(){
 $('html').css('font-size', originalFontSize);
 });
 });

ログイン後にコピー

10. 現在のマウス座標を検出します

この JS コードを使用すると、どのブラウザでもマウス座標を取得できます。

 $(document).ready(function() {
 $().mousemove(function(e)
 {
 $('# MouseCoordinates ').html("X Axis Position = " + e.pageX + " and Y Axis Position = " + e.pageY);
 });
ログイン後にコピー

11. マウスポインタの X/Y 軸を取得します

 $().mousemove(function(e){
 //display the x and y axis values inside the P element
 $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
 });
ログイン後にコピー

12. トップリンクに戻る

このコードは、比較的長いページの場合に非常に実用的です。ユーザーはスクロール バーを引く必要がなく、「トップに戻る」を直接クリックできます。

 $(document).ready(function() {
 //when the id="top" link is clicked
 $('#top').click(function() {
 //scoll the page back to the top
 $(document).scrollTo(0,500);
 }
 });
ログイン後にコピー

jQuery は JavaScript に最適なライブラリの 1 つで、Ajax および HTML スクリプト クライアントをサポートしており、主にイベント処理とアニメーション制作に使用されます。さらに、jQuery には、開発者が Web ページを最速で作成できるようにするさまざまなプラグインもあります。

この記事が jquery プログラミングを学習するすべての人に役立つことを願っています。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!