1. Description
| jQuery(":root") |
| docuemnt의 root(최상위) Element를 찾는다. HTML에서는 <html> Element가 된다. |
2. Example
#1버튼을 클릭하면 <html> Element를 찾아서 태그명과 속성의 키값들을 표시한다. 버튼을 클릭할 때마다 해당 기능이 토글된다.
The below is HTML attributes
[HTML Code]
[//HTML Code]
3. Code
더보기
<!-- ---------------------------------------------------------
--
-- Author: 1q74.tistory.com
--
--------------------------------------------------------- -->
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>[1q74.tistory.com] javascript/jquery/selector/root</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<div name="_1q74-example-root">
<div name="_1q74-example-bottom">
<br/>
<button name="btn-find">#1. Click Me</button><br/>
</div>
<div name="_1q74-example-1">
<h3>The below is HTML attributes</h3>
<h4 name="answer"></h4>
<div name="attributes"></div>
</div>
</div>
<hr/>
<h5>[HTML Code]</h5>
<div name="_1q74-source">
</div>
<h5>[//HTML Code]</h5>
<script>
var btnContainer = $("[name='_1q74-example-bottom']");
var btnFind = btnContainer.find("[name='btn-find']");
var root = $(":root");
var answer = $("[name='_1q74-example-1'] [name='answer']");
var attributes = $("[name='_1q74-example-1'] [name='attributes']");
btnFind.click(function() {
if(answer.html() === "") {
answer.html(root[0].tagName);
let attributeNames = "";
let i = 0;
$.each(root[0], function(key, val) {
if(i > 0) {
attributeNames += "<br/>";
}
attributeNames += key;
++i;
});
attributes.html(attributeNames);
} else {
answer.html("");
attributes.html("");
}
});
// ------------------------------------------------------
// 소스출력
// ------------------------------------------------------
var textSource = $("[name='_1q74-source']");
var exampleHtml = $("[name='_1q74-example-root']").html();
var specialCharLines = textSource.text(exampleHtml).html().split("\n");
textSource.html(specialCharLines.join("<br/>").replaceAll("\t", " "));
</script>
<style>
[name="_1q74-example-root"] {
min-height: 170px;
}
[name="_1q74-example-1"] {
min-height: 140px;
}
[name="_1q74-example-root"] [type="image"]{
width: 100px;
}
[name="_1q74-example-1"] td {
min-width: 100px;
min-height: 30px;
}
[name|="_1q74-example"] button
,[name="_1q74-source"] button {
background: lightgray;
border: 5px outset;
min-height: 30px;
}
[name|="_1q74-example"] button:active
,[name="_1q74-source"] button:active {
border: 2px inset;
min-height: 30px;
}
</style>
</body>
</html>4. File
[javascript][jquery][selector]root.html
0.00MB
5. Reference
https://api.jquery.com/root-selector/
'JavaScript > jQuery' 카테고리의 다른 글
| 【jQuery/Selector #59】:submit Selector (0) | 2023.03.15 |
|---|---|
| 【jQuery/Selector #58】:selected Selector (0) | 2023.03.15 |
| 【jQuery/Selector #56】:reset Selector (0) | 2023.03.15 |
| 【jQuery/Selector #55】:radio Selector (0) | 2023.03.15 |
| 【jQuery/Selector #54】:password Selector (1) | 2023.03.15 |