jQuery 속성 및 스타일(2)

요소의 HTML 구조 또는 요소의 텍스트 내용을 읽고 수정하는 것은 일반적인 DOM 작업입니다. jQuery는 이러한 처리를 위한 두 가지 편리한 방법을 제공합니다. 컬렉션에서 첫 번째 일치 요소의 HTML 콘텐츠를 설정하거나 일치하는 각 요소의 HTML 콘텐츠를 설정합니다. 이를 사용하는 세 가지 방법이 있습니다:

.html()은 값을 전달하지 않고 첫 번째 HTML만 가져옵니다. 컬렉션의 일치 요소입니다. .html( htmlString ) 일치하는 각 요소의 html 콘텐츠를 설정합니다.

.html( function(index, oldhtml) )은 HTML 콘텐츠를 설정하는 함수를 반환하는 데 사용됩니다.

참고: .html() 메소드는 내부적으로 사용되며 DOM의 innerHTML 속성으로 처리되기 때문에 설정 및 획득 시 주의해야 할 가장 중요한 문제는 이 작업이 전체 HTML 콘텐츠(텍스트 콘텐츠뿐만 아니라)에 대한 것이라는 점입니다

Let's 다음 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 태그의 내용 변경

2.

다음 코드를 참조하세요.

<!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

메서드 뒤와 앞

after: 일치하는 모든 요소 뒤에 HTML 콘텐츠 삽입

before: 일치하는 모든 요소 앞에 HTML 콘텐츠 삽입

예를 들어 위의 예는 , 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 () 메서드

하위 항목을 포함하여 일치하는 요소 집합에 있는 각 요소의 결합된 텍스트 콘텐츠를 가져오거나 텍스트를 설정합니다. 지정된 텍스트 콘텐츠로 설정된 일치 요소의 각 요소 콘텐츠입니다. , 세 가지 구체적인 용도가 있습니다.

.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>

제출하다 코드 재설정

자동운전