728x90
리스트 위치
<!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 () {
console.log($("li:first").text()) //A
console.log($("li:last").text()) //b4
console.log($(":last").text()) //hello-endenenenenenenen
console.log($("ul:last").text()) //b~b4
console.log("=============================")
// console.log($(":first-child").text()) //자바스크립트, 타이틀, 바디 코드
console.log($("ul:first-child").text()) //A~A4
console.log($("li:last-child").text()) //A4, b4
console.log($("ul>:first-child").text()) //A, b
console.log("=============================")
$("li").each(function () {
console.log($(this).text())
})
console.log("=============================")
$("li").each(function () {
console.log($(this).text())
})
console.log("=============================")
for(var i = 0; i < $("li").length; i++){
console.log($("li")[i].innerText)
}
console.log("=============================")
// for(var i in $("li")){ //in: index번호
// console.log($("li")[i].innerText)
// }
// console.log("=============================")
for(let i of $("li")){ //태그
console.log(i.innerText)
console.log($(i).text())
}
console.log("=============================")
for(let i of $("li:odd")){
console.log(i.innerText)
}
// $("li:odd").css("font-size", "40px");
console.log("=============================")
for(let i of $("li:nth-child(3)")){
console.log(i.innerText)
}
// $("li:nth-child(3)").css("color", "red");
// $("li:lt(5)").css("color", "blue"); //li:0~4
}
)
</script>
</head>
<body>
<!--
animated
eq(NUM)
even 짝수(0, 1, 2...순)
odd 홀수
first
last
gt(NUM) NUM보다 큰 index // 음수면 마지막 요소부터
lt(NUM) NUM보다 작은 index // 음수면 마지막 요소부터
header
not(seleector) selector와 다른 모든 요소
focus
root html 최상위
first-child
last-child
only-child
nth-child(숫자n) 몇 번째 자식([0]을 1번으로 간주)(ul마다 따로 적용)
-->
<ul>
<li>A</li>
<li>A2</li>
<li>A3</li>
<li>A4</li>
</ul>
<ul>
<li>b</li>
<li>b2</li>
<li>b3</li>
<li>b4</li>
</ul>
<div>
<p>Hello</p>
<p>hello-end</p>
</div>
<div>hello-endenenenenenenen</div>
</body>
</html>
Element
<!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 () {
// checkbox
var x = $("input:checkbox");
console.log("input:checkbox", $("input:checkbox")) //input 중 checkbox가 있는 것만 배열로 모음
// checked
var x = $("input:checked")
console.log("input:checked", $("input:checked")); //input 중 checked가 있는 것만 배열로 모음
console.log("input:checked", $("input:checked").val()); //체크 여부 확인
console.log("input:checked", $("input[checked]").val()); //위와 동일
// not checked
var x = $("input:not(:checked)")
console.log("input:not(checked)", $("input:not(:checked)")); //input타입 중 checeked가 없는 것 개수(checkbox외 포함)
// hidden
var x = $("input:hidden")
console.log("input:hidden", $("input:hidden")); //input 중 hiddent이 있는 것만 배열로 모음
console.log("input:hidden", $("input:hidden").val()); //hidden 여부 확인
// enabled
var x = $("input:enabled");
console.log("input:enabled") //input 중 enable이 있는 것만 배열로 모음
// disenabled
var x = $("input:disabled");
console.log("input:disabled") //input 중 disabled이 있는 것만 배열로 모음
});
</script>
</head>
<body>
<form>
x:<input type="text" name="x" enabled=enabled><br>
xx:<input type="text" name="xx" disabled="disabled"><br>
x2:<input type="password" name="x2"><br>
x3:<input type="hidden" name="x3"><br>
x4:<input type="checkbox" name="x4" checked="checked" value="x4는 checked"><br>
x5:<input type="checkbox" name="x5"><br>
<select>
<option>10</option>
<option selected="selected">20</option>
<option>30</option>
</select>
</form>
</body>
</html>
특정 문자열 찾기
<!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 () {
//특정문자열 찾기(대소문자, 자식 포함)
$("div:contains('Hello')").css("color","red");
//선택자 찾기
$("div:has(p)").css("color", "blue");
});
</script>
</head>
<body>
<div>Hello !!!!</div>
<div>Hi! hello</div>
<div>MyHello , good</div>
<div>
<p>Hello</p>
</div>
</body>
</html>
태그 특정
<!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 () {
$("td:empty").css("background-color", "blue");
$("td:parent").css("color", "red");
});
</script>
</head>
<body>
<table border="1">
<tr>
<td>TD #0</td>
<td></td>
</tr>
<tr>
<td>TD #2</td>
<td></td>
</tr>
<tr>
<td></td>
<td>TD#5</td>
</tr>
</table>
</body>
</html>
속성 중첩
<!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 () {
$("li")
// .not(".my").css("color", "red") //my클래스가 아닐 경우
// .end()
// .not(":even").css("font-size", "40px") //짝수가 아닐 경우
.not(function(i,e){
return this.innerText=="A4" //A4가 아닐 경우
})
.css("color", "red")
.end()
.not(function(i,e){ //0, 3의 배수가 아닐 경우
return i%3==0;
})
.css("font-size", "40px")
});
</script>
</head>
<body>
<p>Hello</p>
<ul>
<li>A1</li>
<li>A2</li>
<li class="my">A3</li>
<li>A4</li>
<li>A5</li>
<li id="a">A6</li>
<li>A7</li>
<li>A8</li>
</ul>
</body>
</html>'단순 코드 기록 > jQuery' 카테고리의 다른 글
| jQuery_Closest&Parent&Next/Prev (0) | 2024.02.14 |
|---|---|
| jQuery_has&Slice&Content&children (0) | 2024.02.14 |
| jQuery_Tag&Label&Href&Constraint (0) | 2024.02.14 |
| jQuery_Arr (0) | 2024.02.14 |
| jQuery_CDN+Arr+List (0) | 2024.02.14 |