* 객체 조작및 생성(value)
<!DOCTYPE html>
<html lang="ko">
<head>
<title></title>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#my_name").val($("#user_name").val());
//("입력요소선택").val()속성값을 가져올때
//$("입력요소선택").val("새값");새값을 입력하거나 변경할때
//아이디가 user_name인 요소의 value 속성값을 가져와
//id가 my_name 인 요소에 value 속성 값으로 입력함
});
</script>
</head>
<body>
<p><input type="text" name="user_name" id="user_name" value="홍길동"></p>
<p><input type="text" name="my_name" id="my_name" ></p>
</body>
</html>
*prop : 기존의 속성을 바꿔줌.
<!DOCTYPE html>
<html lang="ko">
<head>
<title></title>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#st_1").prop("title","단락태그");
//st_1 요소에 title="단락태그"속성을 추가합니다.
$("#txt1").text( $("#st_1").prop("title"));
//st_1요소에 title속성값을 id="txt1"인 요소에 텍스트로 출력
$("#txt2").text( $("#st_1").prop("tagName"));
//st_1인 요소에 태그명을 id=txt2요소에 텍스트로 출력
$("#txt3").text( $("#sel").prop("selectedIndex"));
//sel인 요소에 선택된 옵션의index값을 id=txt3인 요소에 텍스트로
});
</script>
</head>
<body>
<p id="st_1">내용1</p>
<p id="txt1"></p>
<p id="txt2"></p>
<p id="txt3"></p>
<select id="sel">
<option value="naver">네이버</option>
<option value="nate" selected="selected">네이트</option>
<option value="daum">다음</option>
</select>
</body>
</html>
*객체조작및 생성 ( before, after )
<!DOCTYPE html>
<html lang="ko">
<head>
<title>객체 조작 및 생성</title>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#myList").before("<li>새 내용 추가1</li>");
//아이디가 myList인 요소의 이전 위치에 새 요소를 생성함.
$("#myList").after("<li>새내용 추가2</li>");
//아이디가 myList인 요소의 다음위치에 새 요소를 생성함.
});
</script>
</head>
<body>
<ul>
<li id="myList">내용</li>
</ul>
</body>
</html>
*객체조작및생성(append, prependTo);
<!DOCTYPE html>
<html lang="ko">
<head>
<title>객체 조작 및 생성</title>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("#listZone").append("<li>새 내용 추가2</li>");
//아이디가 listZone인 요소 내의 마지막 위치에 새 요소를 추가함.
$("<li>새 내용 추가1</li>").prependTo("#listZone");
//아이디가 listZone인 요소 내의 가장 앞 위치에 새 요소를 추가함.
/*$("<li>새 내용 추가2</li>").appendTo("#listZone");
$("#listZone").prepend("<li>새 내용 추가1</li>");*/
});
</script>
</head>
<body>
<ul id="listZone">
<li>내용</li>
</ul>
</body>
</html>