jQuery_jquery의 prepend() 메소드에 대한 자세한 설명-JS 튜토리얼-php.cn

jQuery_jquery의 prepend() 메소드에 대한 자세한 설명

WBOY

풀어 주다： 2016-05-16 15:45:52

원래의

1698명이 탐색했습니다.

prepend() 메서드는 지정된 요소를 일치하는 요소의 시작 부분에 삽입합니다. 해당 기능은 기본적으로 prependTo() 메서드와 동일하지만 구문 형식은 기본적으로 동일합니다.

다음은 문법 구조에 대한 소개입니다.

코드 복사 코드는 다음과 같습니다.

$(선택기).prepend(content)

매개변수 목록:

데모:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
div{
 height:200px;
 width:200px;
 border:1px solid green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("button").click(function(){
 $("div").prepend("被加添的内容");
 })
})
</script>
</head>
<body>
<div>前面要添加内容:</div>
<button>点击查看效果</button>
</body>
</html>

로그인 후 복사

prepend() 2에 대한 자세한 설명:

prepend() 함수 는 지정된 내용을 일치하는 각 요소 내부의 시작 위치에 추가하는 데 사용됩니다.

지정된 콘텐츠는 html 문자열, DOM 요소(또는 배열), jQuery 객체, 함수(반환 값)일 수 있습니다.

이 함수의 반대는 Append() 함수로, 지정된 내용을 일치하는 각 요소 내부의 끝 위치에 추가하는 데 사용됩니다.

이 함수는 jQuery 객체(인스턴스)에 속합니다.

문법

코드 복사 코드는 다음과 같습니다.

jQueryObject.prepend( content1 [, content2 [, contentN ]] )

매개변수

jQuery 1.4 새로운 지원: 매개변수 content1은 함수일 수 있습니다. prepend()는 일치하는 모든 요소를 기반으로 이 함수를 탐색하고 실행하며, 함수의 this는 해당 DOM 요소를 가리킵니다.

prepend()는 함수 에 두 개의 매개변수도 전달합니다. 첫 번째 매개변수는 일치하는 요소에 있는 현재 요소의 인덱스이고, 두 번째 매개변수는 요소의 현재 내부 HTML 콘텐츠입니다. (innerHTML). 함수의 반환 값은 요소(html 문자열, DOM 요소 또는 jQuery 객체일 수 있음)에 추가되어야 하는 콘텐츠입니다.

참고: 첫 번째 매개변수만 순회 실행을 위한 사용자 정의 함수가 될 수 있습니다. 후속 매개변수도 함수인 경우 해당 toString() 메서드가 호출되어 문자열로 변환되고 html 콘텐츠로 처리됩니다.
반환값

prepend() 함수의 반환 값은 jQuery 유형으로, 현재 jQuery 개체 자체를 반환합니다(체인 스타일 프로그래밍을 용이하게 하기 위해).

참고참고: 추가된 콘텐츠가 현재 페이지의 일부 요소인 경우 해당 요소는 원래 위치에서 사라집니다. 간단히 말해서 이것은 복사 작업이 아닌 이동 작업입니다.

예 및 지침

prepend() 함수는 일치하는 각 요소 내부의 시작 위치에 콘텐츠를 추가하는 데 사용됩니다.

<p><!--插入到p元素内部的起始位置-->段落文本1<span></span></p>
<p><!--插入到p元素内部的起始位置-->段落文本2<span></span></p>

<script type="text/javascript">
$("p").prepend( '<!--插入到p元素内部的起始位置-->' ); 
</script>

로그인 후 복사

prepend() 함수와 prependTo() 함수의 차이점에 유의하세요.

var $A = $("s1");
var $B = $("s2");

// 将$B追加到$A中
$A.prepend( $B ); // 返回$A
// 将$A追加到$B中
$A.prependTo( $B ); // 返回表示追加内容的jQuery对象( 匹配所有$B内部开头追加的$A元素 )

로그인 후 복사

다음 HTML 코드를 예로 들어 보겠습니다.

<p id="n1">
 <span id="n2">CodePlayer</span> 
</p>
<p id="n3">
 <label class="move">Hello World</label>
</p>
<p id="n4">
 <i>测试内容</i>
</p>

로그인 후 복사

다음 jQuery 샘플 코드는 prepend() 함수의 구체적인 사용법을 보여주기 위해 사용됩니다.

var $n1 = $("#n1");
//将一个strong标记追加到n1内部的起始位置
$n1.prepend( '<strong>追加内容</strong>' );


//将所有的label元素和i元素追加到n1内部的起始位置
//原来位置的label元素和i元素会消失(相当于是移动到n1内部的起始位置)
$n1.prepend( document.getElementsByTagName("label"), $("i") );

//为每个p元素内部的起始位置追加一个span元素，html内容根据索引而有所不同
var $p = $("p");
$p.prepend( function(index, html){
 return '<span>追加元素' + (index + 1) + '</span>'; 
} );

로그인 후 복사

코드 실행

prepend()는 추가 공백 문자를 추가하지 않고 지정된 컨테이너 요소의 시작 태그에 콘텐츠를 추가합니다. 위 코드가 실행된 후의 전체 HTML 코드는 다음과 같습니다(형식 조정 없음).

<p id="n1"><span>追加元素1</span><label class="move">Hello World</label><i>测试内容</i><strong>追加内容</strong>
 <span id="n2">CodePlayer</span> 
</p>
<p id="n3"><span>追加元素2</span>
 
</p>
<p id="n4"><span>追加元素3</span>
 
</p>

로그인 후 복사