※ jQuery HTML
1. css() Method
- 지정하거나 반환하거나 getter setter 역할을 동시에 함
1-1) return css property
- css("propertyname"); / 문자열이 하나면 getter역할을 함
1-2) set css property
- css("propertyname","value"); / 문자열 2개를 쓰면 setter 역할을 함
1-3) set Multiple css property
- css({"propertyname":"value","propertyname":"value",...}); , 문자열에 값을 주면 된다
사용예제)
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(function(){
let paddings = [10, 20, 30, 40];
$("button").click(function(){
$("p")
.css("textDecoration", "underline")
.css({berder:"1px solid red", background:"orange"})
.css("padding", function(i){
// px 생략은 가능하나 가독성을 위해 붙여주는게 좋다.
return paddings[i] + "px";
});
});
})
//
</script>
</head>
<body>
<p>문단1</p>
<p>문단2</p>
<p>문단3</p>
<p>문단4</p>
<button>클릭</button>
</body>
</html>
※ Traversing
- 찾는데 사용됨???
1. Ancestors
- 요소의 조상을 찾을 수 있음.
- 조상은 부모, 조부모, 증조부모
1-1) dom tree 탐색
- parent(), parents(), parentsUntil()
1-2) parent()
-
1-3) parants()
- 조상의 전부 호출, 파라미터에 직접 조상을 지정해서 검색할 수 잇음
1-4) parentsUntil()
- ~부터 ~까지 호출
$(document).ready(function(){
$("span").parentsUntil("div");
});span 태그의 조상 div까지 호출
2. Descendants
- children(), find()
2-1) children() , (find가 강력해서 주로 사용하지않음)
- 단일레벨의 자식만 탐색
2-3) find() , (정말 많이 사용)
- 자식 자손 전부 호출
사용예) div의 자손인 span태그 전부 호출
$(document).ready(function(){
$("div").find("span");
});
사용예2) 모든 자손 반환
$(document).ready(function(){
$("div").find("*");
});
3) siblings
- siblings(), next(), nextAll(), nextUntil(), prev(), prevAll(), prevUntil
- 주로 next(), prev() 사용
* 혼합예제)
$("div:nth-child(4) p").parent().next().find("p").css("font-size", "2em")
.parent().prev() // 4 divs
.prevAll() // 123 div
.find("p").css("color", "red");3-1) siblings()
- 나 빼고 모든 형제요소 반환
※ Filtering
-
-first, last, eq가 제일 많이 사용됨
1-1) first()
- 첫번째 요소를 찾음
1-2) last()
- 마지막 요소를 찾음
1-3) eq()
- 0번째부터 찾음
- 음수값을 넣을시 뒤에서부터 찾음 (맨 뒤는 -1번)
1-4) filter
- 기준을 지정할 수 있고, 기준과 일치하지 않는 요소는 선택항목에서 제거되고 일치하는요소만 반환
사용예) <p>요소의 클래스이름이 "intro"인 요소 반환
$(document).ready(function(){
$("p").filter(".intro");
});
1-5) not()
- 일치하지 않는 모든요소 반환
- filter의 반대
사용예) <p>태그의 클래스이름이 "intro:가 아닌 요소 반환
$(document).ready(function(){
$("p").not(".intro");
});
※ jQuery Selector
https://www.w3schools.com/jquery/jquery_ref_selectors.asp
위 링크 참고
selector 예제)
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(function(){
$("ul li")
.filter(":gt(1)").css("color", "red")
.end().css("font-style", "italic")
.eq(-3).css("color", "blue");
$("ul")
.find("li:gt(1)").css("textDecoration", "underline")
.end()
.last().css("font-size", "1.5em")
.find("li:eq(1)").css("color", "green")
.end().attr("title", "지정된 제목");
})
</script>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
<div>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
</div>
</body>
</html>
* 동기, 비동기 통신
※ AJAX
- 전체페이지를 다시 로드하지않고 서버와 데이터를 교환하고 웹페이지의 일부를 업데이트하는 기술
1, XML
- 닫는태그를 꼭 사용할것
- input, hr 등 열기만하고 닫는태그가 생략된 태그는 한번에 열고 닫을수있는 <input />을 활용하자 (저게 정식문법임)
<?xml version="1.0" encoding="UTF-8" ?>
<students>
<student>
<no>1</no>
<name>홍길동</name>
<score>80</score>
</student>
<leader />
<student>
<no>2</no>
<name>김길동</name>
<score>70</score>
</student>
<student>
<no>3</no>
<name>고길동</name>
<score>90</score>
</student>
</students>live server로 실행 (Alt + L + O)하면 서버에 띄운것이고 사용할 준비가 된것이다
라이브서버 실행 후 xml파일로 잘 찾아서 들어가야함
- 제이쿼리 ajax메서드를 사용하면 http get 및 post를 모두 사용하여 원격 서버에서 텍스트, html, xml또는 json을 요청할 수 있다 또한 외부데이터를 웹페이지의 선택한 hmtl요소로 직접 로드할 수 있다.
※ jQuery AJAX Method
1. $.ajax()
-
사용예) students.xml의 데이터 가져오기
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$.ajax("students.xml",
{success:function(data){
console.log(data);
// data >> typeof object(XML Object)
// 특정 문자열 제장
let str = "<table border='1'>";
$(data).find("student").each(function(){
str +="<tr>"
str +="<td>" + $(this).find("no").text() + "<td>"
str +="<td>" + $(this).find("name").text() + "<td>"
// str +="<td>" + $(this).find("score").text() + "<td>"
// 점수 랜덤
str += "<td>" + (parseInt(Math.random() * 41) + 60 ) + "</td>"
str +="</tr>"
});
str += "</table>";
// body append
$("body").append(str);
}
});
});
})
</script>
</head>
<body>
<button>학생데이터 가져오기</button>
</body>
</html>서버프로그램은 쿼리를 만들고 만든 결과집합을 바탕으로 xml 혹은 json을 만들어줌
클라이언트 프로그램은
* xml단점 : 최고 조상태그가 하나는 무조건 존재해야함
2. JSON
- 조상태그가 없어도 됨
*플러그인 설치
크롬 설정 - > 확장프로그램 -> 웹스토어 열기
설치
예제)
1. member.json
[
{
"id" : "useruser1",
"pw" : "1234",
"name" : "홍길동"
},
{
"id" : "useruser2",
"pw" : "5678",
"name" : "고길동"
},
{
"id" : "javaman1",
"pw" : "1234",
"name" : "자바맨"
}
]2. join.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
form {width: 500px; margin: 0 auto;}
form input {padding: 1em; width: 90%;}
form div:nth-of-type(4) {text-align: center;}
form button {padding: 1em; width: 80%;}
p:last-child {font-size: 11px; color: red;}
.invalid {border: 1px solid red; box-shadow: 0 0 10px #f005;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(function(){
$("form").submit(function(){
event.preventDefault();
// 초기화작업
$("input").removeClass("invalid").parent().next().text("");
// 모든 유효성검증은 비동기처리 이후에 해야됨
$.ajax("member.json").done(function(data){ // done은 비동기처리 됐을 때 할 일
let id = $("input").eq(0).val();
if(id.length < 8 || id.length > 15) {
// 문제상황
$("input:eq(0)").addClass("invalid")
.parent().next().text("ID는 8자 이상 15자 이하로 작성하세요");
return false;
}
else { // id에 왔을 때 비동기 처리
for(let i in data) { // 배열탐색과 같음
if(id == data[i].id) {
$("input:eq(0)").addClass("invalid")
.parent().next().text("이미 존재하는 ID입니다");
return false;
}
}
}
let pw = $("input").eq(1).val();
if(pw.length < 4) {
// 문제상황
$("input:eq(1)").addClass("invalid")
.parent().next().text("PW는 4글자 이상으로 작성하세요");
return false;
}
let name = $("input").eq(2).val();
if(!name.trim()) {
// 문제상황
$("input:eq(2)").addClass("invalid")
.parent().next().text("이름을 작성하세요");
return false;
}
$(this).submit();
})
})
});
</script>
</head>
<body>
<form>
<fieldset>
<legend>회원가입</legend>
<div>
<p><label for="id">ID</label></p>
<p><input type="text" id="id" name="id" placeholder="ID를 입력하세요"></p>
<p></p>
</div>
<div>
<p><label for="pw">PW</label></p>
<p><input type="password" id="pw" name="pw" placeholder="비밀번호를 입력하세요"></p>
<p></p>
</div>
<div>
<p><label for="name">이름</label></p>
<p><input type="text" id="name" name="name" placeholder="이름 입력하세요"></p>
<p></p>
</div>
<div>
<button>회원가입</button>
</div>
</fieldset>
</form>
</body>
</html>
'Servlet, JSP > jQuery' 카테고리의 다른 글
| 23-02-28 jQuery (0) | 2023.02.28 |
|---|