ホームページ >ウェブフロントエンド >フロントエンドQ&A >jQueryの$は何をするのでしょうか？
jQueryの$は何をするのでしょうか？
- 青灯夜游オリジナル
- 2023-01-28 15:06:352214ブラウズ
関数は次のとおりです: 1. jQuery ラッパーとして、セレクターを使用して DOM 要素を選択します (構文 "$("selector")"; 2. 関数プレフィックス、一般的なユーティリティ関数の名前空間として使用します。 example "$.trim(sString);"; 3. window.onload 関数の競合を解決します; 4. DOM 要素を作成します (例: "$("e388a4556c0f65e1904146cc1a846beeこれは良い話です5f557f62ae7ac7a14e0b1cb564790dfc") " ; 5. jQuery を拡張するメソッドをカスタマイズする; 6. jQuery およびその他のライブラリを使用する; 7. ドキュメント準備ハンドラーをセットアップする。
このチュートリアルの動作環境: Windows7 システム、jquery3.6 バージョン、Dell G3 コンピューター。
1. jQuery ラッパーとして、セレクターを使用して DOM 要素を選択します
CSS のセレクターの機能は、特定の要素を選択することです。ページ上の要素タイプ (カテゴリー セレクター) 要素または特定の要素 (ID セレクター)
、およびセレクターとしての jQuery の「$」も、jQuery が提供するものを除き、特定のタイプまたは要素のタイプを選択します。
ますます包括的な選択方法。また、ユーザーのブラウザ互換性の問題も処理します
(1) CSS は、次のコードを通じて c1a436a314ed609750bd7c7d319db4da タグの下に含まれるすべてのサブタグ 3499910bf9dac5ae3c52d5ede7383485 を選択し、対応するスタイルを追加できます
h2 a{
/添加CSS属性/
} jquery では、次のコードを使用して、c1a436a314ed609750bd7c7d319db4da タグの下に含まれるすべてのサブタグ 3499910bf9dac5ae3c52d5ede7383485 を、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) 奇数行にあるすべての e388a4556c0f65e1904146cc1a846bee タグ (ほぼすべてのタグ) を選択します。 ":odd" または ":even" を使用して、奇数と偶数の選択を実現します。
$("p : odd")(5) すべてのテーブル行の最初のセルが最初の列になります。これは、テーブルのプロパティを変更するときに非常に便利です。テーブルの列 便利です。テーブルを行ごとに移動する必要はもうありません
$("td:nth-child(1)")(6) 子セレクター、孫タグを除く、25edfb22a4f469ecb59f1190150159c6 タグ3499910bf9dac5ae3c52d5ede7383485 のすべての子要素を返します
$("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 = $("e388a4556c0f65e1904146cc1a846beeこれは良い話です5f557f62ae7ac7a14e0b1cb564790dfc")上記のコードは、JavaScript の次のコードと同等です:
var oNewP = document.createElement("p");// 新建节点
var oText = document.createTextNode("这是一个好故事");
oNewP.appendChild(oText);さらに、jQuery には DOM 要素の insertAfter() メソッドも用意されています。疑似コードは次のとおりです: $(function(){ // ready函数
var oNewP = $("<p>这是一个好故事</>");// 创建DOM元素
oNewP.insertAfter("#myTarget");// insertAfter()方法
});
<body>
<p id="myTarget">插入到这行文字之后</p>
<p>也就是插入到这行文字之前，但这行没有id,也可能不存在</p>
</body>
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 サイトの他の関連記事を参照してください。