: 공백, 스페이스바 한번
« : <
» : >
overflow:hidden; : 어떠한 영역에서 다른 영역을 침범한다면
해당 부분을 숨기는 설정.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ex01_object.html</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function(){
var car=new Object(); //객체 생성
car.make="samsung"; //객체 내 변수 정의
car.model="k7";
car.year=2020;
car.buydate=new Date(2021,3,10);
var owner= new Object();
owner.name="윤아";
owner.age=30;
car.on = owner; //객체안에 또다른 객체를 넣을 수 있다.
console.log(car.make);
console.log(car.model);
console.log(car.year);
console.log(car.buydate);
console.log(car.on);
console.log(car);
var woman = {
name : '아이유',
age :50,
birthdate : new Date(2020,5,20),
jumsu : {
kor : 50,
eng : 30,
math : 100
}
}
});
</script>
</head>
<body>
</body>
</html>
load() : 어떠한 데이터를 지정한 위치에 로드 하는 메소드
$('#menu1').click(function(){
$('#message1').load('menu.html');
})
$('#menu2').click(function(){
$('#message2').load('menu.html li'); //li태그가 붙은 요소만 가져온다.
})
Ajax
형식 : $.ajax({name:value,name:value,name:value ...})
$('#menu1').click(function(){
$.ajax({
url : 'menu.html', //요청 url
dataType : 'html', //응답타입(리턴타입)
success : function(data){ //리턴 성공시
$('#message1').html(data);
},
error : function(){ //리턴이 없을때(굳이 안써도 된다.)
alert('실패');
}
});
});
Ajax의 장점 : 지정한 위치만 화면을 변경을 시킬 수 있기 때문에
새로고침을 할 필요가 없고 로드시간이 빨라진다.
예) 회원가입시 아이디 중복 체크 할때 옆에 사용가능 이나 중복을 띄울때 사용할 수 있다.
json : 확장자의 일종이며 오브젝트 배열 형식으로 작성해 저장 할 수 있다.
[
{
name:value
name:value
name:value
name:value
},
{
name:value
name:value
name:value
name:value
},
{
name:value
name:value
name:value
name:value
}
]
xml : extensible mark up languege
확장자의 일종으로 html 태그 타입을 만들어서 사용할 수 있다.
<family>
<father>
<name></name>
<age></age>
</father>
<mother age = "44">
<age></age>
</father>
</family>
json 사용법
$.getJSON(요청url,function(데이터){
명령어
$.each(데이터,function(){ // or $(데이터).each(function
this.sum
})
})
물론 ajax로도 요청해서 작성할 수 있다.
$.ajax({
url : 'item.json',
dataType : 'json',
success : function(data){
$('#fruit').append('<tr><td>id</td><td>name</td>'+
'<td>price</td><td>description</td></tr>');
$.each(data,function(){
$('#fruit').append('<tr>'
+'<td>'+this.id+'</td>'
+'<td>'+this.name+'</td>'
+'<td>'+this.price+'</td>'
+'<td>'+this.description+'</td>'
+'</tr>');
});//each
}//success
});//ajax
xml 사용법
$.get('item.xml',function(data){
$('#fruit').append('<tr><td>id</td><td>name</td>'+
'<td>price</td><td>description</td></tr>');
$(data).find('item').each(function(){
$('#fruit').append('<tr>'
+'<td>'+$(this).attr('id') +'</td>' //속성
+'<td>'+$(this).attr('name') +'</td>'
+'<td>'+$(this).children('price').text() +'</td>' //자손(자식) 태그
+'<td>'+$(this).find('description').text() +'</td>'
+'</tr>');
}); // each
});//get'Develop > JavaScript JQuery JSP' 카테고리의 다른 글
| 0711 JSP 2일차 (0) | 2022.07.15 |
|---|---|
| 0708 JQuery 마무리와 JSP Start! (0) | 2022.07.08 |
| 0706 JQuery (0) | 2022.07.06 |
| 0705 JavaScript & JQuery Start (0) | 2022.07.06 |
| 0704 <form> 태그의 특성 (0) | 2022.07.04 |