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

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

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

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

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

注: .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 中文網(wǎng)</div>


    <script type="text/javascript">
          $('#dv').html("ipnx.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 中文網(wǎng)</div>

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

上記の例に示すように、これはipnx.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 中文網(wǎng)</div>

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

          $("#dv").after("學習編程");
    </script>
</body>
</html>

text () メソッド

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

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

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

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

<!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 中文網(wǎng)</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 中文網(wǎng)</div> <script type="text/javascript"> $('#dv').html("ipnx.cn"); </script> </body> </html>

提出するリセットコード

自動運転