앞으로 남은 진도
선택자필터
json
ajax 서버랑연동
부트스트랩 이용해서 html디자인하는거
:first 대신 .first()
:last 대신 .last()
:eq() 대신 .eq()
:gt() :lt()도 .slice()로.... 전버전은 권하지않는다.
nth-child(n)이용하기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../../js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("table").css({"width":"300px", "text-align":"center"});
$("th").css("background-color","grey");
$("td:nth-child(3n)").css("background-color","skyblue");
$("td:nth-child(3n+1)").css("background-color","yellow");
$("td:nth-child(3n-1)").css("background-color","red");
});
</script>
</head>
<body>
<table>
<tr>
<th>이름</th>
<th>주소</th>
<th>전화번호</th>
</tr>
<tr>
<td>홍길동</td>
<td>대전</td>
<td>010-222-333</td>
</tr>
<tr>
<td>진달래</td>
<td>서울</td>
<td>010-444-555</td>
</tr>
<tr>
<td>개나리</td>
<td>부산</td>
<td>010-666-111</td>
</tr>
<tr>
<td>무궁화</td>
<td>대구</td>
<td>010-288-999</td>
</tr>
</table>
</body>
</html>
th대신 맨윗줄도 td을 쓴다면
$("tr:nth-child(1)>td").css({"background-color":"grey"});tr의 >를 쓰면 된다
선택자에 대한건
www.w3schools.com/jquery/jquery_ref_selectors.asp
jQuery Selectors
jQuery Selectors jQuery Selectors Use our jQuery Selector Tester to demonstrate the different selectors. Selector Example Selects * $("*") All elements #id $("#lastname") The element with id="lastname" .class $(".intro") All elements with class="intro" .cl
www.w3schools.com
여기 자세히나와있다
table 위에! tr, 그 위에 td라 td에 색 들어가잇으면 tr에 색입혀도 안보이는거임
$("tr td").slice(0,2)로 해도 됨
내용으로 필터하는 방법
contains(text) text를 포함하고 있는걸 찾는것
p:contains(jQuery)
body *:contains()
has(selector) 는 셀렉터를 가지고잇는 요소반환
div:has(p, span) 은 p, span을 가지고잇는 요소
empty : 자식요소도, 텍스트도 없는 모든요소 반환
p:empty 자식도, 텍스트도 안들어있는 p태그 찾는것
parent 자식요소 또는 텍스트를 갖고있는 모든 요소 반환. 부모로서 역할하고잇는 태그찾는거
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
width: 500px;
height: 30px;
border : 3px solid yellowgreen;
}
</style>
<script src="../../js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("span:contains(jQuery)").css("border","2px solid blue");
$("span:not(:contains(jQuery))").css("border","2px solid red");
$("div:has(span)").css("border","5px solid green");
$("div:empty").css("border","2px solid orange");
$("div span").css({"color":"red","font-weight":"bold"});
$("div:parent").css({"font-size":"1.5em","font-weight":"bold"});
});
</script>
</head>
<body>
<div></div><br>
<div>헬로우~~~
<span>오늘도 즐겁게 열심히 ^ㅇ^</span>
</div><br>
<p>HELLO JQUERY
<span>Thanks, jQuery!</span>
</p><br>
<div>jQuery!</div><br>
<span>쉬운 jQuery!~~~~</span><br>
<div></div><br>
<hr color="blue"><br>
</body>
</html>
만약 저 덩어리가 div에 묶여있었다면 (id가 #ex3)
$("#ex3 span:어쩌구 라거나
$("span어쩌구","#ex3")라고 줘도 됨
$("span:not(:contains(jQuery))").css("border","2px solid red");
가시성상태필터 히든과 비지블 두개임
:hidden
숨겨진 요소를 선택 (대상: 숨겨진 요소의 유형
1. display:none
2. input type="hidden"
3. width와 height가 0으로 설정됨
4. 부모요소가 hidden
인것들을 찾아줌
**visiblity:hidden은 찾지못한다.
ex) $("p:hidden").show("5000") 숨겨진 피태그를 5초간 보여줌
:visible
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../../js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});
function showMsgHidden(idx, item){ //index가 필요할때 이렇게 쓰면 됨. item. 은 this. 랑 똑같은거임
var msg;
$(":hidden","form").each(function(){
// msg += $(this).attr("localName"); //안나옴
// msg += $(this).prop("localName"); //이건 나옴
msg += $(this).prop("tagName")+ "/"
+ $(this).attr("name")+ "/"
+ $(this).text()+ "/"
+ $(this).attr("value")+ "\n"; //이건 나옴
// msg += this.localName + "\n";
});
alert(msg);
}
function showMsgVisible(){
var msg;
$("form :visible").each(function(){
msg += $(this).prop("tagName")+ "/"
+ $(this).attr("name")+ "/"
+ $(this).text()+ "/"
+ $(this).attr("value")+ "\n";
});
alert(msg);
}
</script>
</head>
<body>
<form>
ID : <input type="text" name="userID"><br>
<span style="display: none;" name="idDouble">중복된 아이디입니다.</span>
이름 : <input type="text" name="userName"><br>
성별 :<label for="male"> 남자</label><input type="radio" name="userGender" id="male">
<label for="female">여자</label> <input type="radio" name="userGender" id="female"><br>
<input type="hidden" id="userAge" name="userAge">
<input type="hidden" id="userCity" name="userCity">
<button type="button" onclick="showMsgHidden()">hidden요소</button>
<button type="button" onclick="showMsgVisible()">visible요소</button>
</form>
</body>
</html>
form 상태 필터
:enabled 현재 사용가능한 요소와 일치 현재활성화되어있는애들
:disabled 비활되어있는애들
:selected : select option에서 사용되는거고 체크박스나 라디오버튼에서는 사용되지않고
이둘은 :checked를 쓴다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../../js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(":enabled").css("border", "3px solid salmon");
$(":disabled").css("border", "3px solid forestgreen");
});
</script>
</head>
<body>
<form>
<input type="text"><br>
<input type="password"><br>
<select name="disSelect" disabled="disabled">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select><br>
<textarea rows="10" cols="20">text</textarea><br>
<input type="button" value="확인" disabled="disabled"><br>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../../js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var str = "";
$("[name=like]:checked").each(function(){
console.log(str);
str += $(this).next().text()+",";
});
var lastChar = str.slice(-1);
if(lastChar==","){
str = str.slice(0,-1);
}
alert("당신의 취미는 " + str + "입니다.");
$("span").html(str);
});
});
</script>
</head>
<body>
<form>
취 미 : <input type="checkbox" name="like" id="trip"> <label for="trip">여행</label>
<input type="checkbox" name="like" id="jang"> <label for="jang">장기</label>
<input type="checkbox" name="like" id="ba"> <label for="ba">바둑</label>
<input type="checkbox" name="like" id="book"> <label for="book">독서</label>
<input type="checkbox" name="like" id="nak"> <label for="nak">낚시</label>
<input type="checkbox" name="like" id="bord"> <label for="bord">보드</label><br><br>
<button type="button">전송</button><br><br>
선택결과 : <span></span>
</form>
</body>
</html>
여기서 주목할점은
value에 값을 똑같이 주지않아도
str += $(this).next().text()+",";
next() 를 써주면 다음 요소를 선택하게 되므로 가져올수있음
그리고 마지막 콤마 ,을 없애는 방법은
var lastChar = str.slice(-1);
if(lastChar==","){
str = str.slice(0,-1);
}이렇게
아니면 인덱스를 사용하면 되는데
for(var i = 0; i<3; i++){
if(i > 0){//두번째부터 들어감
tmp += ", ";
}
tmp+= arr[i].value; //이런식으로 넣었다치면
}이런식으로
아니면
$("[name=like]:checked").each(function( index ){ 이부분에 index 넣어서 이용할수도있음