これは良い話です>")" などの DOM 要素を作成します。 5. メソッドをカスタマイズします。 jQuery を拡張する; 6. jQuery およびその他のライブラリを使用する; 7. ドキュメント準備ハンドラーをセットアップする。">
関数は次のとおりです: 1. jQuery ラッパーとして、セレクターを使用して DOM 要素を選択します (構文 "$("selector")"; 2. 関数プレフィックス、一般的なユーティリティ関数の名前空間として使用します。 example "$.trim(sString);"; 3. window.onload 関数の競合を解決します; 4. DOM 要素を作成します (例: "$("
これは良い話です") " ; 5. jQuery を拡張するメソッドをカスタマイズする; 6. jQuery およびその他のライブラリを使用する; 7. ドキュメント準備ハンドラーをセットアップする。
このチュートリアルの動作環境: Windows7 システム、jquery3.6 バージョン、Dell G3 コンピューター。
1. jQuery ラッパーとして、セレクターを使用して DOM 要素を選択します
CSS のセレクターの機能は、特定の要素を選択することです。ページ上の要素タイプ (カテゴリー セレクター) 要素または特定の要素 (ID セレクター)
、およびセレクターとしての jQuery の「$」も、jQuery が提供するものを除き、特定のタイプまたは要素のタイプを選択します。
ますます包括的な選択方法。また、ユーザーのブラウザ互換性の問題も処理します
jquery では、次のコードを使用して、
$("h2 a")
$(selector)
または
jQuery(selector)
セレクターは CSS3 標準に準拠します
jQuery の表現方法がはるかに単純であることがわかります
$("#showp“)
は for ループを使用して DOM 全体を走査する必要があります
$(".SomeClass")
タグ (ほぼすべてのタグ) を選択します。 ":odd" または ":even" を使用して、奇数と偶数の選択を実現します。
$("p : odd")
$("td:nth-child(1)")
$("li > a")
("a [href=pdf]")
Note:
jQuery のドル記号「$」は、実際には「jQuery」と同等です。 jQuery のソースコードから見る
コードの記述の便宜上、通常は「jQuery」の代わりに「$」が使用されます
2。
JavaScript では、開発者はさまざまな操作の詳細を処理するために、いくつかの小さな関数を実行する必要があることがよくあります。たとえば、ユーザーがフォームを送信するとき、のフロントエンドを変更する必要があります。テキスト ボックスと末尾のスペースはクリアされます。JavaScript には、trim() に似た関数がありません。jQuery を導入すると、trim() 関数を直接使用できます。たとえば、$.trim(sString);
jQuery.trim(sString);
3. window.onload 関数の競合を解決する
ページの HMTL フレームワークを完全にロードする必要があるため、その前に使用できるため、DOM 内で window.onload 関数はプログラミング時によく使用されます。この関数をページ上の複数の場所で使用する必要がある場合、または他の .js ファイルにも window.onload 関数が含まれている場合、競合の問題は非常に困難ですready() メソッドjQuery は非常に優れており、上記の問題を解決します。ページが読み込まれた後に関数を自動的に実行できます。また、複数の read() メソッドを同じページ内で競合することなく使用できます。たとえば、$(document).ready(function(){ $("table.datalist tr:nth-child(odd)").addClass("altrow"); });
$(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);
$(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の$は何をするのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。