jQuery におけるドル記号 "$" の役割: 1. jQuery ラッパーとして、セレクターを使用して DOM 要素を選択します; 2. いくつかの一般的なユーティリティ関数の名前空間のプレフィックスとして; 3. DOM を作成します要素; 4. jQuery の拡張; 5. 「window.onload」関数の競合を解決します。
このチュートリアルの動作環境: Windows7 システム、jquery1.12.4 バージョン、Dell G3 コンピューター。
推奨チュートリアル: jq チュートリアル
1. セレクター
CSS のセレクター 機能は次のとおりです。ページ上の特定のカテゴリ (カテゴリ セレクター) 要素または特定の要素 (ID セレクター)
を選択します。jQuery の "$" はセレクターとして使用され、特定のカテゴリまたは要素も選択します。要素の一種ですが、jQuery は
より包括的な選択メソッドを提供します。また、ユーザーのブラウザ互換性の問題も処理します
h2 a{
/添加CSS属性/
}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 = $("<p>这是一个好故事</>");// 创建DOM元素
oNewP.insertAfter("#myTarget");// insertAfter()方法
});
<body>
<p id="myTarget">插入到这行文字之后</p>
<p>也就是插入到这行文字之前，但这行没有id,也可能不存在</p>
</body>5. "$" を追加するようにカスタマイズします。
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同样提供了noConflict()方法来解决""冲突问题
jQuery.noConflict();
以上代码可以使""按照其他javascript框架的方式运算，这时再jQuery中便不能在使用“”，而必须使用jQuery，
例如$("p p") 必须写成jQuery("p p").
更多编程相关知识，请访问：编程入门！！
以上がjQuery でドル記号 $ は何をするのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
