1 概要 1. JQueryとは何ですか? JQuery は、JS の操作を簡素化し、JS の機能を拡張する JavaScript ライブラリです。 2. 分離の原則 JQuery は、インポートと使用の分離の原則に従っています。つまり、 を使用してインポートし、使用する別の <script> タグを作成します。 </span></p> <h2><span style="font-size: 18px"> 3. 基本構文 </span></h2> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre>$(selector).action();</pre><div class="contentsignin">ログイン後にコピー</div></div></div> <p><span style="font-size: 18px"> HTML 要素を取得し、その要素に対して指定された操作を実行します。 </span></p> <h1><span style="font-size: 14pt"> 2 つのセレクター </span></h1> <h2><span style="font-size: 18px"> 1. 基本セレクター </span></h2> <p><span style="font-size: 18px"> CSS セレクターと同様に、JQuery 基本セレクターは、タグ、カテゴリ、ID に基づいて HTML 要素を選択します。 </span></p> <h2><span style="font-size: 18px"> 2. 結合セレクター </span></h2> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">$(selector01,selector02,selectorN): 任意の条件を満たす要素のコレクションを取得します。 </span></p></li> <li><p><span style="font-size: 18px">$(selector01selector02): 複数の条件を同時に満たす要素を取得します。 </span></p></li> <li><p><span style="font-size: 18px">$(selector01 selector02): 第一の条件を満たす要素の子要素のうち、第二の条件を満たす要素を取得します。 </span></p></li> </ul> <h2><span style="font-size: 18px"> 3. 属性セレクター </span></h2> <p><span style="font-size: 18px"> 属性に基づいて要素を選択します。 </span></p> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px"> $("[attr]"): attr 属性を持つすべての要素を取得します。 </span></p></li> <li><p><span style="font-size: 18px"> $("[attr='value']"): 指定された属性値を持つすべての要素を取得します。 </span></p></li> <li><p><span style="font-size: 18px"> $("[attr!='value']"): 指定された属性を持ち、その値が指定された値と等しくないすべての要素を取得します。 </span></p></li> <li><p><span style="font-size: 18px"> $("[attr$='value']"): 指定された属性を持ち、値が指定された値で終わるすべての要素を取得します。 </span></p></li> <li><p><span style="font-size: 18px"> $("[attr^='value']"): 指定された属性を持ち、値が指定された値で始まるすべての要素を取得します。 </span></p></li> </ul> <h2><span style="font-size: 18px"> 4.$(this) </span></h2> <p><span style="font-size: 18px"> は通常、現在のオブジェクト、つまりメソッドの呼び出し元を取得するためにメソッド内で使用されます。 </span></p> <h1><span style="font-size: 14pt">3つの要素の操作</span></h1> <h2><span style="font-size: 18px"> 1. 要素の作成</span></h2> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre>$("<tag>")</pre><div class="contentsignin">ログイン後にコピー</div></div></div> <p><span style="font-size: 18px"> オブジェクトの作成時にJQueryで使用されるHTMLタグは、タグ<tag>の先頭のみにすることも、タグに含めることもできます。先頭と末尾の両方< ;tag></tag>、</span><span style="font-size: 18px">などの詳細を含めることもできます</span></p> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre><tag style="xxxxx">content</tag></pre><div class="contentsignin">ログイン後にコピー</div></div></div> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px"> 不能够直接使用标签名创建对象，即$("tagName")不能创建对象，这一点不同于JavaScript。</span></p></li> <li><p><span style="font-size: 18px"> 不能够单独使用标签结束标识创建对象，即$("</tag>")不能创建对象。</span></p></li> </ul> <h2><span style="font-size: 18px"> 2.获取内容 </span></h2> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">text()：设置或者返回所选元素的文本内容。</span></p></li> <li><p><span style="font-size: 18px">html()：设置或者返回所选元素的内容（包含HTML标签）。</span></p></li> <li><p><span style="font-size: 18px">val()：设置或者返回所选字段的值。</span></p></li> </ul> <h2><span style="font-size: 18px"> 3.内部插入 </span></h2> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px"> append()：在结尾（后端）添加子元素。</span></p></li> <li><p><span style="font-size: 18px"> prepend()：在开头（前端）添加子元素。</span></p></li> <li><p><span style="font-size: 18px"> appendTo()：将操作对象作为子对象添加到参数对象结尾。</span></p></li> </ul> <h2><span style="font-size: 18px"> 4.外部插入 </span></h2> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px"> before()：在前面添加兄弟元素。</span></p></li> <li><p><span style="font-size: 18px"> after()：在后面添加兄弟素。</span></p></li> <li><p><span style="font-size: 18px"> insertBefore()：在前面插入兄弟元素。</span></p></li> <li><p><span style="font-size: 18px"> insertAfter()：在后面插入兄弟元素。</span></p></li> </ul> <h2><span style="font-size: 18px"> 5.删除元素 </span></h2> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">remove()：删除自身及子元素。</span></p></li> <li><p><span style="font-size: 18px">empty()：删除子元素。</span></p></li> <li><p><span style="font-size: 18px">remove("根据基本选择器选择指定元素")：删除基本选择器中指定元素。</span></p></li> </ul> <h2><span style="font-size: 18px"> 6.获取子元素 </span></h2> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">children()：获取全部子元素。</span></p></li> <li><p><span style="font-size: 18px">children("基本组合选择器")：获取具有自定标签与指定属性的子元素。</span></p></li> </ul> <h2><span style="font-size: 18px"> 7.筛选 </span></h2> <p><span style="font-size: 18px"> 如果一个选择器返回的结果不是一个对象，而是多个对象构成的集合，可以使用以下方法获取集合中的指定对象：</span></p> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px"> eq(index)：获取集合中指定索引位置的对象，索引从0开始。</span></p></li> <li><p><span style="font-size: 18px"> filter(":even")：获取集合中所有索引为奇数的对象。</span></p></li> <li><p><span style="font-size: 18px"> filter(":odd")：获取集合中所有索引为偶数的对象。</span></p></li> <li><p><span style="font-size: 18px"> slice(index)：获取索引大于指定值的对象。</span></p></li> <li><p><span style="font-size: 18px"> slice(0,index)：获取索引小于指定值的对象。</span></p></li> <li><p><span style="font-size: 18px"> not(selector)：选择指定对象以外的全部对象。</span></p></li> </ul> <h1><span style="font-size: 14pt">四 属性操作</span></h1> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">attr("attrName")：获取属性值。</span></p></li> <li><p><span style="font-size: 18px">attr("attrName","attrValue")：修改属性值。</span></p></li> <li><p><span style="font-size: 18px">removeAttr("atrrName")：删除属性。</span></p></li> </ul> <h1><span style="font-size: 14pt">五 常用操作</span></h1> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">遍历对象：$.each(obj,function(i,n))，i是索引，n是当前遍历子对象。</span></p></li> <li><p><span style="font-size: 18px">获取单选按钮与复选框的选择状态：$(this).is(":checked")。</span></p></li> </ul> <h1><span style="font-size: 14pt">六 常用标签及其操作</span></h1> <h2><span style="font-size: 18px"> 1.select </span></h2> <h3><span style="font-size: 18px">⑴增加选项 </span></h3> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre>$(selector).options[index]=new Option(name,value);//按照索引增加$(selector).add(option,before);//按照指定位置增加</pre><div class="contentsignin">ログイン後にコピー</div></div></div> <h3><span style="font-size: 18px">⑵删除选项</span></h3> <div class="cnblogs_code"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre>$(selector).length=0;//全部删除$(selector).remove(index);//按索引删除</pre><div class="contentsignin">ログイン後にコピー</div></div></div> <h3><span style="font-size: 18px">⑶option</span></h3> <ul class=" list-paddingleft-2"> <li><p><span style="font-size: 18px">option.index: インデックス属性値を設定して返します。 </span></p></li> <li><p><span style="font-size: 18px">option.text: テキストを設定して返します。 </span></p></li> <li><p><span style="font-size: 18px">option.value: 値を設定して返します。 </span></p></li> <li><p><span style="font-size: 18px">option.selected: 選択ステータス (true/false) を設定して返します。 </span></p></li> </ul> <p></p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
