728x90
외부파일 사용
<script type="text/javascript" src="jquery-3.5.1.min.js"></script>
외부파일 사용(브라우저)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
Arr
<!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">
//.css(속성이름, 속성값)
$(
function(){
$("*").css("color","red");
//=document.getElementsByTagName().style="color:red;"
console.log($("#test").val());
//=console.log(document.getElementById("test")) //혼용 가능
console.log($(".testC"));
console.log($(".testC:eq(0)").val()); //testC의 첫 번째 클래스의 value
console.log($(".testC").eq(0)); //testC의 첫 번째 클래스의 배열
console.log($(".testC").eq(0)[0]); //testC의 첫 번째 클래스의 배열의 첫 번째(태그 출력)
console.log($(".testC").eq(0).val()); //testC의 첫 번째 클래스의 배열의 value
console.log($(".testC").eq(0)[0].value); //testC의 첫 번째 클래스의 배열의 첫 번째(태그 출력)의 value
console.log($(".testC")); //배열
console.log($(".testC")[0]); //태그
console.log($(".testC")[0].value); //태그의 value
console.log($("h2")); //배열
console.log($("h2").text()); //배열의 첫 번째의 innerText
console.log($("div").text()); //배열의 첫 번째의 innerText
console.log($("div").html()); //배열의 첫 번재의 innerHTML
})
</script>
</head>
<body>
<input type="text" id="test" value="value값">
<input type="text" class="testC" value="value값A">
<input type="text" class="testC" value="value값B">
<p><h2>메세지</h2></p>
<p><div><h5>메세지2</h5></div></p>
</body>
</html>
List
<!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 () {
var arr = $("li")
.map(function (i, e) {
console.log(
"this", this, //li의 tag
"tag", e, //li의 tag
"tag.innerText", e.innerText, //li의 innerText
"$(tag).text()", $(this).text()); //li의 innerText
return $(this).text().toLowerCase(); //fn의 배열(각 li의 innerText와 개행 여부)
})
console.log(arr)
});
</script>
</head>
<body>
<p>Hello</p>
<ul>
<li>A1</li>
<li>A2</li>
<li>A3
<ul>
<li>B1</li>
<li>B2</li>
<li>B3</li>
</ul>
</li>
<li>A4</li>
</ul>
</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_Tag&Label&Href&Constraint (0) | 2024.02.14 |
| jQuery_Arr (0) | 2024.02.14 |