jQuery의 HTML()과 Load()의 차이점

jQuery의 HTML()은 Load()와 매우 유사합니다. 둘 다 HTML의 내용을 변경할 수 있습니다. 물론 몇 가지 분명한 차이점이 있습니다.

jQuery HTML 작업 세부 정보:

jQuery에는 HTML을 변경하고 조작하기 위한 많은 강력한 기능이 포함되어 있습니다.

HTML() 메서드는 HTML 내용을 변경합니다.

Syntax

$(selector).html(content)

html() 함수와 유사하게 일치하는 HTML 요소(innerHTML)의 내용을 변경합니다.

Example

$("p").html("html content");

jQuery Load 작업 세부 정보:

정의 및 사용법

load() 메소드를 통해 원격으로 로드 HTML 파일 코드가 DOM에 삽입됩니다.

Jquery의 Load() 메서드와 html()의 차이점은 원격 HTML 파일을 로드한 후 그 안에 있는 Javascrpt 스크립트도 실행할 수 있다는 것입니다.

기본적으로 GET 메서드가 사용되며, 추가 매개변수를 전달하면 자동으로 POST 메서드로 변환됩니다.

jQuery 1.2에서는 로드된 HTML 문서를 필터링하는 선택기를 지정할 수 있으며, 필터링된 HTML 코드만 DOM에 삽입됩니다. 구문은 "url #some"과 같습니다. > selector".

아래 예를 참조하세요.

Syntax

load(url,[data],[callback])

는 위와 동일하지만 추가 매개변수를 POST로 보내고 성공 시 메시지를 표시합니다.

$("#feeds").load("feeds.php", {limit: 25}, function(){
  alert("The last 25 entries in the feed have been loaded");
});

예제 2

Parameters	Description
url	로드할 HTML 페이지의 URL.
data	서버의 키/값 데이터로 보내기 string도 허용됩니다.
callback	로드가 성공하면 콜백 함수가 실행됩니다.

기사 사이드바

Navigation

섹션을 순서가 지정되지 않은 목록으로 로드합니다.

HTML 코드 :

<b>jQuery Links:</b>
<ul id="links"></ul>

j쿼리 코드 :

$("#links").load("/Main_Page #p-Getting-Started li");

예제 3

<p><span style="color: #000000;">1）主页面<br><br><br><br></span><span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="js/jquery-1.4.4.min.js"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/<a href="http://www.php.cn/wiki/48.html" target="_blank">javascript</a>"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #000000;"><br><br>    $(<a href="http://www.php.cn/code/658.html" target="_blank">document</a>).ready(</span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;">() {<br><br>        $(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">#target</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">).load(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">target.html</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">, </span><span style="background-color: #f5f5f5; color: #0000ff;">function</span><span style="background-color: #f5f5f5; color: #000000;">() {<br><br><br>        });<br><br>    });<br><br></span><span style="color: #0000ff;"></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="target"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br>2） 子页面<br><br><br><br></span><span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="js/jquery-1.4.4.min.js"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br></span><span style="color: #0000ff;"><</span><span style="color: #800000;">script </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #000000;"><br><br>    alert(</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">hello world!I am target</span><span style="background-color: #f5f5f5; color: #000000;">"</span><span style="background-color: #f5f5f5; color: #000000;">);<br><br></span><span style="color: #0000ff;"></</span><span style="color: #800000;">script</span><span style="color: #0000ff;">></span><span style="color: #000000;"><br><br>above is script</span></p>

위 내용은 jQuery의 HTML()과 Load()의 차이점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!