jqueryはDOM要素を作成します-jsチュートリアル-php.cn

jqueryはDOM要素を作成します

无忌哥哥

リリース： 2018-06-29 14:19:38

オリジナル

5130 人が閲覧しました

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 を使用すると、これらの操作が大幅に簡素化されます

3 つのステップに分けることもできます

最初のステップ: 新しい要素、少なくとも 1 組のタグを作成します。山括弧は使用できません省略

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

ログイン後にコピー

2 番目のステップ : 新しい要素にコンテンツまたは属性を追加します

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;)

ログイン後にコピー

実際、$() 関数を使用して要素を使用するときに、2 番目のパラメーターを渡して属性を直接設定することもできます。以下でこれらのコードをさらに単純化してみましょう

$(&#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 中国語 Web サイトの他の関連記事を参照してください。