jQuery の属性とスタイル (2)

要素の HTML 構造または要素のテキストコンテンツの読み取りと変更は、一般的な DOM 操作です。jQuery は、そのような処理に便利な 2 つのメソッドを提供します。

html() メソッド。コレクション内で最初に一致した要素の HTML コンテンツを取得するか、一致する各要素の HTML コンテンツを設定する 3 つの方法があります: .html() は値を渡さず、最初の HTML を取得するだけです。 Content

.html( htmlString ) 一致する各要素の HTML コンテンツを設定します

.html( function(index, oldhtml) ) は、HTML コンテンツを設定する関数を返すために使用されます

注: .html() メソッドは内部的に使用されます DOM の innerHTML 属性によって処理されます。そのため、設定および取得時に注意すべき最も重要な問題は、この操作が (テキストコンテンツだけでなく) HTML コンテンツ全体に対するものであるということです

次の html() メソッドの一部を見てください。例

HTML 要素のコンテンツを変更する方法コードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div id="dv">php 中文网</div>


    <script type="text/javascript">
          $('#dv').html("www.php.cn");
    </script>
</body>
</html>

div タグのコンテンツを変更します

たとえば、上記の例では、php中国語のWebサイトの後にURLを追加する必要があります。これをどのように実装する必要がありますか

次のコードを参照してください:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div id="dv">php 中文网</div>

    <script type="text/javascript">
          $('#dv').append("www.php.cn");
    </script>
</body>
</html>

上記の例に示すように、これはwww.php.cn div タグへの URL

メソッドの前後、 div タグの前後にコンテンツを追加する方法

次の例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div id="dv">php 中文网</div>

    <script type="text/javascript">
          $('#dv').before("欢迎来到：");

          $("#dv").after("学习编程");
    </script>
</body>
</html>

text () メソッド

一致する要素セット内の各要素 (その子孫を含む) の結合されたテキストコンテンツを取得するか、テキストを設定します一致する要素内の各要素のコンテンツが、指定されたテキストコンテンツに設定されます。、具体的な用途は 3 つあります:

.text() 子孫を含む、一致する要素セット内の各要素のマージされたテキストを取得します

.text( textString ) は、一致する要素コンテンツのテキストを設定するために使用されます

。 text( function (index, text) ) は、設定されたテキストの内容を返すために使用される関数です以下の例を参照してください:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div id="dv">php 中文网</div>

    <script type="text/javascript">
          alert($('#dv').text());
    </script>
</body>
</html>

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <div id="dv">php 中文网</div> <script type="text/javascript"> $('#dv').html("www.php.cn"); </script> </body> </html>

提出するリセットコード

自動運転