1. Description
속성값의 문자열로 시작하는 Element들을 찾는다.
2. Example
#1버튼을 클릭하면, value속성이 'story'로 시작하는 요소들을 찾아서 배경색을 gray로 변경한다. #2버튼을 클릭하면, 한번 클릭할 때마다 해당 Element들을 180도씩 회전시킨다.
My Stories
[Change Backgroud Color]
[Rotate]
[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/attribute-starts-with</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-1">
<h4>My Stories</h4>
<li value="tstory">TStory</li>
<li value="story challenge">Story Challenge</li>
<li value="ustory">UStory</li>
<li value="wstory">WStory</li>
<li value="story maker">Story Maker</li>
<li value="love story" style="color:#567452">Love Story</li>
</div>
<div name="_1q74-example-bottom">
<br/>
[Change Backgroud Color]<br/>
<button name="btn-change-background-color">#1. $("[value^='story']")</button>
<br/>
<br/>
[Rotate]<br/>
<button name="btn-rotate">#2. $("[value^='story']")</button>
</div>
</div>
<hr/>
<h5>[HTML Code]</h5>
<div name="_1q74-source">
</div>
<h5>[//HTML Code]</h5>
<script>
const btnChangeColor = $("[name='btn-change-background-color']");
const btnRotate = $("[name='btn-rotate']");
const story = $("[value^='story']");
btnChangeColor.click(function() {
story.css("background-color", "gray");
});
var clickCount = 0;
btnRotate.click(function() {
++clickCount;
story.css({
transform: "rotate(" + (180 * clickCount) + "deg)"
});
if(clickCount === 2) {
clickCount = 0;
}
});
// ------------------------------------------------------
// 소스출력
// ------------------------------------------------------
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"] 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]attribute-starts-with.html
0.00MB
5. Reference
https://api.jquery.com/attribute-starts-with-selector/
'JavaScript > jQuery' 카테고리의 다른 글
| 【jQuery/Selector #11】:checkbox (0) | 2023.02.21 |
|---|---|
| 【jQuery/Selector #10】:button (0) | 2023.02.21 |
| 【jQuery/Selector #8】Attribute Not Equal Selector [name!=”value”] (0) | 2023.02.21 |
| 【jQuery/Selector #7】Attribute Equals Selector [name=”value”] (0) | 2023.02.21 |
| 【jQuery/Selector #6】Attribute Ends With Selector [name$=”value”] (0) | 2023.02.21 |