집 > 기사 > 웹 프론트엔드 > jquery는 DOM 요소를 생성합니다.

jquery는 DOM 요소를 생성합니다.

无忌哥哥원래의: 2018-06-29 14:19:385093검색

jquery는 DOM 요소를 생성합니다

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建DOM元素</title>
</head>
<body>
</body>
</html>

새 요소를 만드는 것은 기본적으로 작동하기가 매우 어렵습니다.

1단계: 새 요소 만들기

var img = document.createElement(&#39;img&#39;)

2단계: 새 요소에 콘텐츠 또는 속성 추가

img.src = &#39;../images/zly.jpg&#39;
img.width = 200
img.style.borderRadius = &#39;10%&#39;
img.style.boxShadow = &#39;3px 3px 3px #888&#39;

3단계: 새 요소 추가 페이지에 요소를 추가하면

document.body.appendChild(img)

jquery를 사용하면 이러한 작업이 크게 단순화됩니다.

세 단계로 나눌 수도 있습니다

첫 번째 단계: 최소한 한 쌍의 태그로 새 요소를 만듭니다. 꺾쇠 괄호는 생략됨

var img = $(&#39;<img>&#39;)
var img = $(&#39;<img src="../images/zly.jpg" width="200">&#39;)
img.appendTo(&#39;body&#39;)

두 번째 단계:새 요소에 콘텐츠 또는 속성 추가

img.attr(&#39;src&#39;, &#39;../images/zly.jpg&#39;)
img.css(&#39;width&#39;,200)
img.css(&#39;border-radius&#39;,&#39;10%&#39;)
img.css(&#39;box-shadow&#39;,&#39;3px 3px 3px #888&#39;)

3단계: 페이지에 추가

img.appendTo(&#39;body&#39;)

위 단계는 단순화될 수 있습니다. jquery의 고유한 체인 작업을 사용하여 완료하고 별표를 변경하세요

$(&#39;<img>&#39;).attr(&#39;src&#39;, &#39;../images/gyy.jpg&#39;).css(&#39;width&#39;,&#39;200px&#39;).css(&#39;border-radius&#39;,&#39;10%&#39;).css(&#39;box-shadow&#39;,&#39;3px 3px 3px #888&#39;).appendTo(&#39;body&#39;)

실제로 $() 함수를 사용하여 요소를 사용할 때 두 번째 매개변수를 전달하고 속성을 직접 설정할 수도 있습니다. 아래에서는 이러한 코드를 더욱 단순화합니다

$(&#39;<img>&#39;,{
src: &#39;../images/gyy.jpg&#39;,
title: &#39;我是高圆圆&#39;,
style: &#39;width:200px;border-radius:10%;box-shadow:3px 3px 3px #888&#39;,
click: function(){alert($(this).attr(&#39;title&#39;))}
}).appendTo(&#39;body&#39;)

위 내용은 jquery는 DOM 요소를 생성합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

jquery dom

성명：

이전 기사：Vue는 여러 방법을 사용하여 고정 테이블 헤더와 첫 번째 열을 구현합니다.다음 기사：Vue는 여러 방법을 사용하여 고정 테이블 헤더와 첫 번째 열을 구현합니다.