検索
ホームページウェブフロントエンドjsチュートリアルjQuery はクラス属性と CSS スタイルを変更します。

クラス属性の変更

class 属性はクラス名を指定するクラス属性です。 クラスセレクターを使用してスタイルを指定する場合は、要素のクラス名、つまり
のクラス属性の値を指定する必要があります。 各 HTML 要素にはクラス属性が 1 つしかないことに注意してください。ただし、クラス属性の値には複数の名前を指定できます。つまり、スペースで区切られた単語のリストが含まれる場合があります。 具体的な使用方法については、http://www.w3school.com.cn/css/css_selector_class.asp
を参照してください。
jQuery でクラス名を変更するには、attr() メソッドを使用して「class」属性を変更するか、addClass()、removeClass()、toggleClass() などのメソッドを使用します。


addClass()

API: http://api.jquery.com/addClass/

addClass() メソッドは、指定されたクラス名 (1 つ以上) を一致した要素に追加します。 要素の場合、クラス属性は複数の値を持つことができることに注意してください。このメソッドは既存の値を削除しませんが、1 つ以上のクラス属性を元の値に追加します。 attr() メソッドを使用してクラス属性を設定するのは上書きプロセスですが、addClass() は追加プロセスです。 クラスは最終的にはスペースで区切られます。 複数のクラスを追加する必要がある場合は、クラス名をスペースで区切ります。 1.4 以降、このメソッドのパラメータを関数に渡すこともできます。

removeClass()


API:
http://api.jquery.com/removeClass/

RemoveClass() メソッドは、選択した要素から 1 つ以上のクラスを削除する必要がある場合は、クラス名をスペースで区切ります。 パラメーターが渡されない場合、このメソッドは選択した要素のすべてのクラスを削除します。

toggleClass()
API:
http://api.jquery.com/toggleClass/

toggleClass() メソッドは、選択した要素の 1 つ以上のクラスを切り替えます (設定または削除します)。

このメソッドは、各要素で指定されたクラスを確認し、存在する場合は削除し、存在しない場合は追加します。 パラメータを追加することで、削除のみ、または追加のみの操作を設定できます。 形式:$(セレクター).toggleClass(クラス,スイッチ) スイッチ値が true の場合は追加のみが行われ、false の場合は削除のみが行われます。

hasClass()
API:
http://api.jquery.com/hasClass/

hasClass() メソッドは、選択された要素に指定されたクラスが含まれているかどうかを確認します。
is() メソッドを使用して同じ機能を実現することもできます。メソッドのパラメーターは、「.className」.
などのセレクター文字列で渡されます。

CSS スタイルの変更

jQuery には、要素の CSS プロパティを直接返すか、設定するメソッドもいくつかあります。

css()

API: http://api.jquery.com/css/

読み取り操作: 一致する要素セットの最初の要素の指定されたスタイル値 (1 つ以上) を取得します。 注: 複数のスタイル値を読み取る操作は、jQuery v1.9 でのみ追加されました。
書き込み操作: 一致する要素セット内の各要素に 1 つ以上の CSS プロパティの値を設定します。

渡されるパラメータは、単一のキーと値のペア、PlainObject で指定された複数の値、または関数です。

jQuery は、ブラウザごとに異なるいくつかの特定の状況を処理します。たとえば、W3C の cssFloat は、IE では、float を使用できます。jQuery は、それを各ブラウザの正しい名前に変換するのに役立ちます。 . また、jQuery は、処理可能な .css ("background-color") や .css ("backgroundColor") などの CSS および DOM 形式の複数の単語の属性を合理的に解釈します。

高さ() と幅()
API:
http://api.jquery.com/height/
および
http://api.jquery.com/width/


ボックス サイズ属性が使用されない限り、この幅と高さの値にはパディング、境界線、マージンは含まれません。 書き込み時に設定されるのは、ボックスサイズの部分を除いたコンテンツの幅と高さであることに注意してください。
読み取り操作では、コレクションの最初の要素の属性値が返されます。

.css("width") と .width() の違いは、前者は 400px などの単位付きの値を返し、後者は単位なしのピクセル値、つまり 400 を返します。

したがって、値を計算に使用する必要がある場合は、.height() と .width() を使用することをお勧めします。 読み取られる値は必ずしも整数であるとは限りません。ユーザーがページをズームすると、ブラウザーがこの状況に対する API を公開しないため、値が正しくない可能性があります。 この要素の親要素が非表示になっている場合、要素のサイズが正確に読み取れない可能性があります。 書き込み操作でサポートされる値のタイプは文字列または数値です。

数値の場合、jQuery のデフォルトの単位は px です。 文字列の場合は、数値や単位に加えて、100%、50%、自動などの適切な CSS 測定値を使用できます。

位置()

API: http://api.jquery.com/position/
親要素 (オフセット親) を基準とした最初に一致した要素の位置を返します。
読み取り操作のみ。

オフセット()

API: http://api.jquery.com/offset/
最初に一致した要素の座標を返すか、一致する各要素の座標を設定します。この座標はドキュメントに対する相対値です。

offsetParent()

API: http://api.jquery.com/offsetParent/

読み取り操作のみを行い、親クラスに戻ります。

scrollLeft() およびscrollTop()

API:

http://api.jquery.com/scrollLeft/ および http://api.jquery.com/scrollTop/

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScriptエンジンの理解:実装の詳細JavaScriptエンジンの理解:実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript:学習曲線と使いやすさPython vs. JavaScript:学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript:コミュニティ、ライブラリ、リソースPython vs. JavaScript:コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ:すべてがどのように機能するかC/CからJavaScriptへ:すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン:実装の比較JavaScriptエンジン:実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて:現実世界のJavaScriptブラウザを超えて:現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する(バックエンド統合)Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合)Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター