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 を非表示にします。

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

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション

3週間前 By DDD

Windows11 KB5054979の新しいものと更新の問題を修正する方法

2週間前 By DDD

アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法

1 か月前 By DDD

Atomfallのクレーンコントロールキーカードを見つける場所

3週間前 By DDD

<🎜>：Dead Rails-すべての課題を完了する方法

3週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7644

15

CakePHP チュートリアル

1392

52

Steamのアカウント名の形式は何ですか

91

11

Win11 Activation Key Permanent

73

19

NYTの接続はヒントと回答です

34

151

もっと見る

Related knowledge

jQueryのリファレンスメソッドを詳しく解説：クイックスタートガイド Feb 27, 2024 pm 06:45 PM

jQuery 参照方法の詳細説明: クイック スタート ガイド jQuery は、Web サイト開発で広く使用されている人気のある JavaScript ライブラリであり、JavaScript プログラミングを簡素化し、開発者に豊富な機能を提供します。この記事では、jQuery の参照方法を詳しく紹介し、読者がすぐに使い始めるのに役立つ具体的なコード例を示します。 jQuery の導入 まず、HTML ファイルに jQuery ライブラリを導入する必要があります。 CDN リンクを通じて導入することも、ダウンロードすることもできます

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常​​、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエスト メソッドを使用した具体的なコード例です。まず、jQuery ライブラリ ファイルが含まれていることを確認してから、$.ajax({u

jQueryで要素の高さ属性を削除するにはどうすればよいですか? Feb 28, 2024 am 08:39 AM

jQueryで要素の高さ属性を削除するにはどうすればよいですか?フロントエンド開発では、要素の高さ属性を操作する必要が生じることがよくあります。要素の高さを動的に変更する必要がある場合や、要素の高さ属性を削除する必要がある場合があります。この記事では、jQuery を使用して要素の高さ属性を削除する方法と、具体的なコード例を紹介します。 jQuery を使用して高さ属性を操作する前に、まず CSS の高さ属性を理解する必要があります。 height 属性は要素の高さを設定するために使用されます

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキスト コンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリ ファイルを導入し、次のコードがページに導入されていることを確認する必要があります: &lt

jQuery を使用してすべての a タグのテキスト コンテンツを変更する Feb 28, 2024 pm 05:42 PM

タイトル: jQuery を使用して、すべての a タグのテキスト コンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンク タグ (タグ) のテキスト コンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。

jQuery における eq の役割と応用シナリオを理解する Feb 28, 2024 pm 01:15 PM

jQuery は、Web ページでの DOM 操作やイベント処理を処理するために広く使用されている人気のある JavaScript ライブラリです。 jQueryではeq()メソッドを利用して指定したインデックス位置の要素を選択しますが、具体的な使い方と応用シーンは以下の通りです。 jQuery では、 eq() メソッドは、指定されたインデックス位置にある要素を選択します。インデックス位置は 0 からカウントされます。つまり、最初の要素のインデックスは 0、2 番目の要素のインデックスは 1 などとなります。 eq() メソッドの構文は次のとおりです。 $("s

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? Feb 29, 2024 am 09:03 AM

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery を使用して DOM 要素を操作する場合、要素に特定の属性があるかどうかを判断する必要がある状況がよく発生します。この場合、jQuery が提供するメソッドを使用してこの関数を簡単に実装できます。以下では、jQuery 要素が特定の属性を持つかどうかを判断するために一般的に使用される 2 つの方法を紹介し、具体的なコード例を添付します。方法 1: attr() メソッドと typeof 演算子 // を使用して、要素に特定の属性があるかどうかを判断します

jQueryを使用してテーブルに新しい行を追加する方法の紹介 Feb 29, 2024 am 08:12 AM

jQuery は、Web 開発で広く使用されている人気の JavaScript ライブラリです。 Web 開発中は、JavaScript を使用してテーブルに新しい行を動的に追加することが必要になることがよくあります。この記事では、jQuery を使用してテーブルに新しい行を追加する方法を紹介し、具体的なコード例を示します。まず、jQuery ライブラリを HTML ページに導入する必要があります。 jQuery ライブラリは、次のコードを通じてタグに導入できます。

See all articles