jQuery_jquery의 prepend() 메소드에 대한 자세한 설명
- WBOY원래의
- 2016-05-16 15:45:521624검색
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>