これは良い話です")" などの DOM 要素を作成します。 5. メソッドをカスタマイズします。 jQuery を拡張する; 6. jQuery およびその他のライブラリを使用する; 7. ドキュメント準備ハンドラーをセットアップする。"> jQueryの$は何をするのでしょうか?-フロントエンドQ&A-php.cn

jQueryの$は何をするのでしょうか?

青灯夜游
リリース: 2023-01-28 15:06:35
オリジナル
2110 人が閲覧しました

関数は次のとおりです: 1. jQuery ラッパーとして、セレクターを使用して DOM 要素を選択します (構文 "$("selector")"; 2. 関数プレフィックス、一般的なユーティリティ関数の名前空間として使用します。 example "$.trim(sString);"; 3. window.onload 関数の競合を解決します; 4. DOM 要素を作成します (例: "$("

これは良い話です") " ; 5. jQuery を拡張するメソッドをカスタマイズする; 6. jQuery およびその他のライブラリを使用する; 7. ドキュメント準備ハンドラーをセットアップする。

jQueryの$は何をするのでしょうか?

このチュートリアルの動作環境: Windows7 システム、jquery3.6 バージョン、Dell G3 コンピューター。

1. jQuery ラッパーとして、セレクターを使用して DOM 要素を選択します

CSS のセレクターの機能は、特定の要素を選択することです。ページ上の要素タイプ (カテゴリー セレクター) 要素または特定の要素 (ID セレクター)

、およびセレクターとしての jQuery の「$」も、jQuery が提供するものを除き、特定のタイプまたは要素のタイプを選択します。

ますます包括的な選択方法。また、ユーザーのブラウザ互換性の問題も処理します

(1) CSS は、次のコードを通じて

タグの下に含まれるすべてのサブタグを選択し、対応するスタイルを追加できます

jquery では、次のコードを使用して、

タグの下に含まれるすべてのサブタグを、javascript で使用するオブジェクト配列として選択できます

$("h2 a")
ログイン後にコピー

(2) 一般jquery のセレクターの構文は次のとおりです。

$(selector)
ログイン後にコピー

または

jQuery(selector)
ログイン後にコピー

セレクターは CSS3 標準に準拠します

(3) ID セレクター。JavaScript の document.getElementById に相当します ( "#showp"")

jQuery の表現方法がはるかに単純であることがわかります

$("#showp“)
ログイン後にコピー

(3) カテゴリ セレクター、JavaScript で "SomeClass" のすべてのノード要素として CSS カテゴリを選択します同じ選択を実現するには、

は for ループを使用して DOM 全体を走査する必要があります

$(".SomeClass")
ログイン後にコピー

(4) 奇数行にあるすべての

タグ (ほぼすべてのタグ) を選択します。 ":odd" または ":even" を使用して、奇数と偶数の選択を実現します。

$("p : odd")
ログイン後にコピー

(5) すべてのテーブル行の最初のセルが最初の列になります。これは、テーブルのプロパティを変更するときに非常に便利です。テーブルの列 便利です。テーブルを行ごとに移動する必要はもうありません

$("td:nth-child(1)")
ログイン後にコピー

(6) 子セレクター、孫タグを除く、
  • タグのすべての子要素を返します
  • $("li > a")
    ログイン後にコピー

    (7) すべてのハイパーリンクを選択すると、これらのハイパーリンクの href 属性は "pdf" で終わります。属性セレクターを使用すると、ページ内のさまざまな特徴的な要素を選択できます

    ("a [href=pdf]")

    Note:

    jQuery のドル記号「$」は、実際には「jQuery」と同等です。 jQuery のソースコードから見る

    コードの記述の便宜上、通常は「jQuery」の代わりに「$」が使用されます

    2。

    JavaScript では、開発者はさまざまな操作の詳細を処理するために、いくつかの小さな関数を実行する必要があることがよくあります。たとえば、ユーザーがフォームを送信するとき、

    のフロントエンドを変更する必要があります。テキスト ボックスと末尾のスペースはクリアされます。JavaScript には、trim() に似た関数がありません。

    jQuery を導入すると、trim() 関数を直接使用できます。たとえば、

    $.trim(sString);
    ログイン後にコピー

    上記のコードは次と同等です。

    jQuery.trim(sString);
    ログイン後にコピー

    trim() 関数は jQuery オブジェクトのメソッドです。

    3. window.onload 関数の競合を解決する

    ページの HMTL フレームワークを完全にロードする必要があるため、その前に使用できるため、DOM 内で window.onload 関数

    はプログラミング時によく使用されます。この関数をページ上の複数の場所で使用する必要がある場合、または他の .js ファイルにも window.onload 関数が含まれている場合、

    競合の問題は非常に困難です

    ready() メソッドjQuery は非常に優れており、上記の問題を解決します。ページが読み込まれた後に関数を自動的に実行できます。

    また、複数の read() メソッドを同じページ内で競合することなく使用できます。たとえば、

    $(document).ready(function(){ $("table.datalist tr:nth-child(odd)").addClass("altrow"); });
    ログイン後にコピー

    jQuery は上記のコードの省略形も提供します。「(document).ready」部分を省略できます。コードは次のとおりです。

    $(function(){ $("table.datalist tr:nth-child(odd)").addClass("altrow"); });
    ログイン後にコピー

    4. DOM 要素の作成

    DOM メソッドを使用して要素ノードを作成します。通常は document.createElement()、document.create TextNode()、

    appendChild を使用する必要があります。 () を組み合わせるのは非常に面倒ですが、「$」記号を使用すると、jQuery で DOM 要素を直接作成できます。たとえば、

    var oNewP = $("

    これは良い話です")

    上記のコードは、JavaScript の次のコードと同等です:

    var oNewP = document.createElement("p");// 新建节点 var oText = document.createTextNode("这是一个好故事"); oNewP.appendChild(oText);
    ログイン後にコピー

    さらに、jQuery には DOM 要素の insertAfter() メソッドも用意されています。疑似コードは次のとおりです:

    $(function(){ // ready函数 var oNewP = $("

    这是一个好故事");// 创建DOM元素 oNewP.insertAfter("#myTarget");// insertAfter()方法 });

    插入到这行文字之后

    也就是插入到这行文字之前,但这行没有id,也可能不存在

    ログイン後にコピー

    5. jQuery の拡張 -- "$" を追加するカスタマイズ

    jQuery はすべてのユーザーのすべてのニーズを満たすことはできず、一部の特別なニーズは非常にニッチであり、jQuery フレームワーク全体に含めるには適していません。

    用户可以自定义该方法。代码如下:

    $.fn.disable = function(){ return this.each(function(){ if(typeof this.disabled != "undefined") this.disabled = true; }); }
    ログイン後にコピー

    以上代码首先设置".fn.disable",表明为""添加一个方法“disable()”,其中“$.fn”是扩展jQuery时所必须的

    然后利用匿名函数定义这个方法,即用each()将调用这个方法的每个元素的disabled属性均设置为true(如果该属性存在)

    6、使用jQuery和其他库

    例如:Prototype库也是使用$符号,jQuery提供noConflict函数避免冲突,jQuery.noConflict();把$符号还原到非jQuery库定义的含义。

    7、文档就绪处理程序,相当于$(document).ready(...)

    例如:

    $(function(){...}); //里面的函数会在DOM树加载完之后执行
    ログイン後にコピー

    扩展知识:解决"$"的冲突

    如果其他框架也是用了“",会引起冲突,jQuery同样提供了noConflict()方法来解决""冲突问题

    jQuery.noConflict();
    ログイン後にコピー

    以上代码可以使""按照其他javascript框架的方式运算,这时再jQuery中便不能在使用“”,而必须使用jQuery,

    例如$("p p") 必须写成jQuery("p p").

    【推荐学习:jQuery视频教程web前端视频

    以上がjQueryの$は何をするのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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