728x90
태그 선택
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//자식만
$("div>a").css("color", "red");
console.log($("div>a")) //태그 X 배열로 선택
//자손까지
$("div a").css("font-size", "40px")
console.log($("div a"))
//p태그 바로 뒤의 a 태그만
$("p+a").css("color", "red")
console.log($("div a"))
//p태그 바로 뒤 모든 a 태그
$("p~a").css("font-size", "40px")
})
</script>
<body>
<div>
<a href="#">daum</a>
<a href="#">naver</a>
<p>test</p>
<p>
<a href="">Google</a>
</p>
</div>
</body>
</html>Label
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//label태그 바로 뒤의 input 태그만
$("label+input").css("color", "red").val("Labeled!");
console.log($("label+input"))
})
</script>
<body>
<form>
<label>name:</label>
<input name="name" id="name"/>
<input name="none"/>
<fieldset>
<label>name:</label>
<input name="name" id="name"/>
<input name="none"/>
</fieldset>
</form>
</body>
</html>Href
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//1. [href]
// $("a[href]").css("color", "red").css("font-size", "40px");
//2. [href='값']
// $("a[href='https://daum.net']").css("color", "red")
//3. [href!='값']
// $("a[href!='https://daum.net']").css("color", "red")
//4. [href^='https'] 특정값으로 시작
// $("a[href^='https']").css("color", "red")
//5. [href$='https'] 특정값으로 끝
// $("a[href$='com']").css("color", "red")
//6.[href*='https'] 특정값을 포함
// $("a[href*='www']").css("color", "red")
//7.[href~='https'] 특정값을 단어형태로 포함
// $("a[href~='kkk']").css("color", "red")
})
</script>
</head>
<body>
<div>
<span>hello</span><br>
<a href="www kkk xxx">www kkk xxx</a><br>
<a href="https://daum.net">https://daum.net</a><br>
<a href="https://naver.com">http://naver.com</a><br>
<a href="http://www.google.com">http://www.google.com</a><br>
<a href="www.korea.com">www.korea.com</a><br>
</div>
</body>
</html>Constraint
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(
function(){
$("input[name*='man']").val("man 글자 포함"); //해당 글자가 있으면
$("input[name~='man']").css("border", "3px solid red"); //해당 글자가 단어 형태로 있으면
}
)
</script>
</head>
<body>
<input name="man-news">
<input name="milk man">
<input name="letterman2">
<input name="newmilk">
<input name="superman">
</body>
</html>'단순 코드 기록 > jQuery' 카테고리의 다른 글
| jQuery_Closest&Parent&Next/Prev (0) | 2024.02.14 |
|---|---|
| jQuery_has&Slice&Content&children (0) | 2024.02.14 |
| jQuery_리스트 위치&input태그&특정 문자열 찾기&속성 중첩 (0) | 2024.02.14 |
| jQuery_Arr (0) | 2024.02.14 |
| jQuery_CDN+Arr+List (0) | 2024.02.14 |