jqueryでラベル属性を削除する方法-フロントエンドQ&A-php.cn

jqueryでラベル属性を削除する方法

PHPz

リリース： 2023-05-23 15:29:39

オリジナル

2810 人が閲覧しました

jQuery を使用して HTML タグを操作する場合、多くの場合、タグ属性を追加、変更、削除する必要があります。タグ属性の削除は一般的なニーズですが、jQuery はどのようにしてタグ属性を削除するのでしょうか?この記事ではjQueryでタグ属性を削除する方法と例を紹介します。

1. ラベル属性を削除するには、removeAttr 関数を使用します。

jQuery には、ラベル属性を削除するために使用できる、removeAttr 関数が用意されています。 RemoveAttr は属性名をパラメータとして受け取り、指定されたタグの属性を削除できます。タグ属性を削除する簡単な例を次に示します。

<!DOCTYPE html>
<html>
<head>
    <title>jQuery删除标签属性示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $('img').removeAttr('src');
            });
        });
    </script>
</head>
<body>
    <img src="example.jpg">
    <button>删除src属性</button>
</body>
</html>

ログイン後にコピー

上の例には、画像を含む HTML ページがあり、ボタンがあります。ユーザーがボタンをクリックすると、removeAttr 関数を使用して画像の src 属性を削除します。ボタンをクリックすると、画像のソースアドレスが失われ、表示できなくなります。

2. prop 関数を使用してラベル属性を削除する

removeAttr 関数に加えて、prop 関数を使用してラベル属性を削除することもできます。 prop 関数は、ラベル属性ではなくラベルの DOM 属性を削除するという点で、removeAttr 関数とは異なります。これは、タグのプロパティをタグの DOM プロパティにマップする jQuery の動作方法に関係しています。以下は、prop 関数を使用してタグ属性を削除する例です。

<!DOCTYPE html>
<html>
<head>
    <title>jQuery删除标签DOM属性示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $('input').prop('disabled', true);
            });
        });
    </script>
</head>
<body>
    <input type="text" value="Hello World!">
    <button>禁用input</button>
</body>
</html>

ログイン後にコピー

上記の例には、テキスト入力ボックスとボタンを含む HTML ページがあります。ボタンがクリックされると、prop 関数を使用して入力ボックスを無効にします。 prop 関数の最初のパラメーターは DOM プロパティの名前で、2 番目のパラメーターは新しい値です。この例では、入力ボックスのdisabled属性をtrueに設定して、入力ボックスが無効になり編集できないようにします。

3. 例:removeAttr 関数と prop 関数を使用して複数のタグの属性を削除する

removeAttr 関数と prop 関数を使用して複数のタグの属性を削除することもできます (例:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery删除多个标签属性示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $('img').removeAttr('src');
                $('input').prop('disabled', true);
            });
        });
    </script>
</head>
<body>
    <img src="example-1.jpg">
    <img src="example-2.jpg">
    <input type="text" value="Hello World!">
    <input type="text" value="Hello jQuery!">
    <button>删除属性</button>
</body>
</html>

ログイン後にコピー

#) ##上の例には、2 つの画像と 2 つの入力ボックスがあります。ボタンがクリックされると、removeAttr 関数と prop 関数を使用してボタンの属性を削除しました。最初の関数はすべての画像の src 属性を削除し、2 番目の関数はすべての入力ボックスを無効にします。このようにして、これら 4 つのラベルのプロパティが削除または変更され、ステータスが変更されます。

4. 結論

jQuery は、Web 開発におけるさまざまな DOM 操作を迅速に完了できる、非常に便利な JavaScript ライブラリです。ラベル属性を削除するときは、jQuery のremoveAttr 関数と prop 関数を使用してこれを実現できます。どちらの関数の使用も非常に簡単で、ラベルの属性名をパラメータとして渡すだけです。これらの関数は、タグ属性をすばやく削除し、ニーズを簡単に達成するのに役立ちます。

以上がjqueryでラベル属性を削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。