1. Description
기본적으로 속성값의 전체 문자열이 같은 요소들을 선택하지만, [시작문자열]다음에 '-'(하이픈)기호가 들어 있는 요소도 선택한다.
2. Example
#1버튼을 클릭하면 name속성이 UTF-8로 되어 있는 Element를 찾아서 배경색을 변경하고, #2버튼을 클릭하면 name속성이 UTF이거나, UTF로 시작하면서 '-'(하이픈)으로 연결되는 Element를 찾아서 배경색을 변경한다.
Encoding Set
| 전체 문자열 매칭 | |
| [시작 문자열 + '-'(하이픈) 매칭] | |
3. Code
더보기
<!-- ---------------------------------------------------------
--
-- Author: 1q74.tistory.com
--
--------------------------------------------------------- -->
<!doctype html>
<html lang="ko">
<head>
<title>[1q74.tistory.com] javascript/jquery/selector/attribute-contains-prefix</title>
<meta charset="utf-8">
<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-1">
<h4>Encoding Set</h4>
<li name="UTF">UTF</li>
<li name="UTF-8">UTF-8</li>
<li name="UTF-16">UTF-16</li>
<li name="UTF-32">UTF-32</li>
<li name="EUC-KR">EUC-KR</li>
</div>
<br/>
<div name="_1q74-example-bottom">
<table border="1">
<tr>
<td>전체 문자열 매칭</td>
<td>
<button name="btn-find">#1. $([name|='UTF-8'])</button>
</td>
</tr>
<tr>
<td>[시작 문자열 + '-'(하이픈) 매칭]</td>
<td>
<button name="btn-find">#2. $([name|='UTF'])</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk-view-source"/>
<label for="chk-view-source">View Source</label>
</td>
<td>
<button name="btn-initialize">Initialize</button>
</td>
</tr>
</table>
</div>
</div>
<script>
//
// _1q74 is a Namespace for preventing confliction of variable.
// It has not mean specially.
//
var _1q74 = {};
_1q74.example = {
/////////////////////////////////////////////////////////////////
//
// Example container
//
/////////////////////////////////////////////////////////////////
container: $("[name='_1q74-example-1']"),
/////////////////////////////////////////////////////////////////
//
// Execute example
//
/////////////////////////////////////////////////////////////////
execute: function() {
const _this = this;
const btnFind = $("[name='btn-find']");
const dataset = [{
selector: "[name|='UTF-8']",
color: "lightgreen",
}, {
selector: "[name|='UTF']",
color: "green",
}];
btnFind.each(function(i, btn) {
const button = $(btn);
const data = dataset[i];
const elements = _this.container.find(data.selector);
button.click("click", function() {
elements.each(function(i, el) {
const element = $(el);
element.css("background", data.color);
});
_this.refreshSourceView();
});
});
},
/////////////////////////////////////////////////////////////////
//
// Control example
//
/////////////////////////////////////////////////////////////////
chkViewSource: $("#chk-view-source"),
refreshSourceView: function() {
const _this = this;
let isChecked = _this.chkViewSource.is(":checked");
if(isChecked) {
for(let i = 1; i <= 2; i++) {
_this.chkViewSource.prop("checked", (isChecked = !isChecked));
_this.toggleHtmlToSource();
}
}
},
toggleHtmlToSource: function() {
const _this = this;
const isChecked = this.chkViewSource.is(":checked");
if(isChecked) {
this.originalElements.each(function(i, el) {
const element = $(el);
const html = $("<div>").append(element.clone()).html();
const specialCharHtml = $("<div>").text(html).html();
element.html(specialCharHtml);
});
} else {
this.originalElements.each(function(i, el) {
const element = $(el);
const html = $(_this.clonedElements[i]).html();
element.html(html);
});
}
},
control: function() {
const _this = this;
this.originalElements = this.container.find("*");
this.clonedElements = this.originalElements.clone();
_this.chkViewSource.click(function() {
_this.toggleHtmlToSource();
});
const btnInitialize = $("[name='_1q74-example-bottom'] [name='btn-initialize']");
btnInitialize.click(function() {
_this.originalElements.removeAttr("style");
_this.refreshSourceView();
});
}
}
_1q74.example.execute();
_1q74.example.control();
</script>
<style>
[name="_1q74-example-bottom"] button {
background: lightgray;
border: 5px outset;
min-height: 35px;
width: 100%;
}
[name="_1q74-example-bottom"] button:active {
border: 5px inset;
min-height: 35px;
width: 100%;
}
</style>
</body>
</html>4. File
[javascript][jquery][selector]attribute-contains-prefix.html
0.00MB
5. Reference
https://api.jquery.com/attribute-contains-prefix-selector/
6. See also
【JavaScript/Native #2】Attribute Contains Prefix Selector [name|=”value”]
【jQuery/Selector #3】Attribute Contains Prefix Selector [name|=”value”]의 Native버전이다. 1. Example Encoding Set Unicode UTF-8 UTF-16 UTF-32 EUC-KR [전체 문자열 매칭] [name|='UTF-8'] Encoding Set Unicode UTF-8 UTF-16 UTF-32 EUC-KR [시
1q74.tistory.com
'JavaScript > jQuery' 카테고리의 다른 글
| 【jQuery/Selector #6】Attribute Ends With Selector [name$=”value”] (0) | 2023.02.21 |
|---|---|
| 【jQuery/Selector #5】Attribute Contains Word Selector [name~=”value”] (0) | 2023.02.21 |
| 【jQuery/Selector #4】Attribute Contains Selector [name*=”value”] (0) | 2023.02.21 |
| 【jQuery/Selector #2】:animated Selector (0) | 2023.02.20 |
| 【jQuery/Selector #1】All Selector (“*”) (0) | 2023.02.19 |