要素に対する jQuery の基本操作を 10 分で理解する

この記事では、要素の取得、移動、作成、変更方法など、jquery の共通機能をまとめてご紹介しますので、皆様のお役に立てれば幸いです。

jQuery の概要

jQuery は、JS カプセル化で特定の機能を提供する JS のクラス ライブラリです。 DOM 操作がシンプルで、コードが簡潔で使いやすく、チェーン書き込みをサポートし、互換性が優れています。

jQuery の設計思想と主な使用法は、Web ページ要素を選択し、それに対していくつかの操作を実行することです。

jQuery の特別な点は、jQuery を使用して対応する要素を取得した後、対応する要素を返すのではなく、jQuery オブジェクト (jQuery によって構築されたオブジェクト) を返し、このオブジェクトはこれらの要素を操作できることです。対応する要素。

jQuery で実現できる機能は、間違いなく JS でも実現できますが、その逆は必ずしも当てはまりません。

window.jQuery = window.$ とし、jQuery を $ と省略します。

jQuery で要素を取得する方法

コンストラクター $() に選択式を入れて、選択した要素を取得するだけです。選択式には、CSS セレクターまたは jQuery 固有の式を使用できます。

// CSS选择器
$(document) // 选择整个文档对象
$('#xxxID') // 选择ID为xxx的元素
$('div.xxxClass') // 选择Class为xxx的元素
$('input[name=first]') // 选择类名属性为first的元素

// jQuery特有表达式
$('a:first') // 选择网页中第一个a元素
$('tr:odd') // 选择表格的奇数行
$('#myForm:input') // 选择表单中的input元素
$('div:visible') // 选择可见的div元素
$('div:gt(2)') // 选择所有的div元素，除了前三个
$('div:animated') // 选择当前处于动画状态的div元素

jQuery による要素の作成方法

新しい要素を jQuery コンストラクターに直接渡すだけです。

作成された新しい要素はページに自動的に挿入されません。また、ページ内で挿入される場所を明示的に指定する必要があります。

例:

タグのペアを作成します

$(function(){
let $h1 = $(&#39;<h1></h1>&#39;) // 创建元素h1
$(&#39;body&#39;).append($h1) // 将元素h1放入到body里（用append表示成为body的最后一个子元素）
}

たとえば div を使用します:

$('div').prepend('') // 给div添加一个大儿子（即添加到最前）
$('div').append(选择器/jQuery对象) // 给div添加一个小儿子（即添加到最后）
$(&#39;<h2>xxx</h2>&#39;).appendTo(选择器/jQuery对象) // 在选择器选中的元素的子元素里，将“xxx”添加到最后

要素を移動する方法jQuery

方法 1: 要素を直接移動する

$('div').insertAfter($('p')) // 将元素div移动到元素p后面

方法 2: ターゲット関数が目的の位置に到達するように他の要素を移動

$('p').after($('div')) // 把元素p放到元素div前

これら 2 つの方法違い: 返されるオブジェクトが異なります。メソッド 1 によって返されるオブジェクトは div で、メソッド 2 によって返されるオブジェクトは p です。

要素を移動するさまざまな方法:

.insertAfter()和.after() // 在现存元素的外部，从后面插入元素
.insertBefore()和.before() // 在现存元素的外部，从前面插入元素
.appendTo()和.append() // 在现存元素的内部，从后面插入元素
.prependTo()和.prepend() // 在现存元素的内部，从前面插入元素

jQuery が要素の属性を変更する方法

要素の属性とその内容を変更するには attr() を使用します。attr はアトリビュートの略称はJSのsetAttribute&getAttributeの略称です。 attr が値を受け取るか、値を割り当てるかは、関数のパラメーターによって決まります。

例:

$('img').attr('width','100px') // 为属性'width'赋值'100px'

使用方法:

$(selector).attr(attribute) // 返回被选元素的属性值
$(selector).attr(attribute.value) // 返回被选元素的属性&值
$(selector).attr(attribute,function(index,oldvalue)) // 用函数返回值设置被选元素的属性&值
$(selector).attr({attribute1:value,attribute2:value...}) // 为被选一个及以上的元素设置属性&值，可一次修改多个属性的属性值

補足: 上記 3 番目の使用方法は、関数の戻り値を使用して属性値を属性に割り当てることを意味します。この関数は、セレクターのインデックス値と現在の属性値を受け取り、使用します。例:

$('button').click(function(){
    $('img').attr('width',function(n,v){
     return v-50;  // 点击按钮图片宽度减少50
    })
})

jQuery のチェーン操作

Web ページ要素を選択した後、その要素に対して一連の操作を実行すると、すべての操作を接続して記述することができます。チェーンの形式。これは jQuery のチェーン操作です。

例: $('div').find('h3').eq(2).html('Hello'); このコード行は次のように分割できます

$('div') // 找到div元素
  .find('h3') // 选择其中的h3元素
  .eq(2) // 选择第3个h3元素
  .html('Hello'); // 将它的内容改为Hello

jQuery は、操作結果を 1 ステップ戻すことができる戻る操作 .end() も提供します。

$('div')
　.find('h3')
　.eq(2)
　.html('Hello')
　.end() // 退回到选中所有的h3元素的那一步
　.eq(0) // 选中第一个h3元素
　.html('World') // 将它的内容改为World

おすすめの関連ビデオ チュートリアル: jQuery ビデオ チュートリアル

以上が要素に対する jQuery の基本操作を 10 分で理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。