메소드
필터링 메소드
내용 확인 및 변경 메소드 들
메소드 설 명
html() 일치된 요소의 html내용을 가져온다 . innerHTML 기능과 동일하다 .
일치된 요소가 여러 개 라면 그 중 첫번째 요소의 html내용만 가져온다
html(code) 일치된 요소의 본문을 html내용으로 변경한다
일치된 요소가 여러 개 라면 모든 요소에 적용된다
text() 일치된 모드 요소를 내용을 가져온다
내용 중에 Html코드가 있다면 html코드는 제외한다
text(str) 일치된 모든 요소의 내용을 str로 변경한다
val() 해당 입력 요소의 value 속성값을 가져온다
val(data) 해당 입력 요소의 value 속성값을 data로 변경한다 조작관련(Manipulation) 메소드들
선택 요소내부에 추가하는 메소드 들
메소드 설 명
append(content) 일치된 요소 내부의 마지막 위치에 content를
추가한다
appendTo(selector) 선택된 요소를 selector에 일치된 모든 요소들의 내부 마지막 위치에 추가한다.
만일, 일치된 요소가 본문에 존재하면 그 요소를 제거한 후 복사한다. (즉, 이동)
prepend(content) append(content)와 동일,
다만, 내부의 처음위치에 추가한다.
prependTo(selector) appendTo(selector)와 동일,
다만, 내부의 처음위치에 추가한다.
선택 요소 외부에 추가하는 메소드들
메소드 설 명
after(content) 일치된 요소 뒤에 content를 삽입한다.
요소 내부가 아닌 외부에 삽입된다.
insertAfter(selector) 선택된 요소를 selector에 의해 일치된 모든 요소들
뒤쪽에 삽입한다. 요소 내부가 아닌 외부에 삽입된다.
before(content) 일치된 요소 앞에 content를 삽입한다.
요소 내부가 아닌 외부에 삽입된다.
insertBefore(selector) insertAfter(selector)와 유사하나, 요소 앞쪽에 삽입한다. 요소 내부가 아닌 외부에 삽입된다.
A appendTo B - A요소를 B뒤에 붙인다.
A prependTo B - A요소를 B앞에 붙인다.
조작관련 (삭제 복사) 메소드
삭제 메소드
메소드 설 명
empty() 선택된 모든요소의 자식요소를 지운다 - 내용만 지워짐
remove - 선택된 요소를 포함해서 모두 지워짐
remove(selector) 선택된 모든 요소와 그의 자식요소를 지운다
$(‘p’).remove(‘.test’) <p></p> <p class=‘test’></p>복사 메소드
메소드 설 명
clone() 일치된 요소를 복사하고 선택한다
clone(true) 일치된 요소의 이벤트 처리기를 포함하여 복사하고 선택한다 필터링 메소드
메소드 설 명
eq(index) 선택요소중 index번째의 요소
first() 선택요소 중 가장 첫 번째 요소
last() 선택요소 중 가장 마지막 번째 요소
filter(selector) 선택요소 중 Selector와 일치하는 요소를 필터링한다
is(selectorElement) 선택요소가 selectorElement 와 일치하는지 판단
true/ false를 리턴
찾기탐색 메소드
메소드 설 명
add() 선택확장
next() nextAll()
nextUntil(selector) 선택요소의 다음 형제요소들
prev() preveAll()
prevUntil(selector) 선택요소의 이전 형제요소들
** parent() pratents()
parents(selector)
parentsUntil(selector) 선택요소의 부모요소
siblings()
siblings(selector) 선택요소의 앞뒤 모든 요소들
find() 선택요소의 후손요소들찾기메소드(parent-is)
div로 감싸는 p태그와 그렇지 않은 p태그를 이용하여
문자열을 작성한다
P태그를 클릭하면 부모가 div인지 판단하여 맞다면 p태그를 복사하여
글자색 빨강색으로 설정하여 부모에 붙여넣는다
Visibility필터2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function(){
$('#hidden').on('click',function(){
//testform안에 있는 hidden상태의 모든 것을 대상으로 반복
str="";
$('#testForm :hidden').each(function(i){
if(this.tagName =="INPUT"){ //태그명의 input일 때 이름과 값을 가져오고
str += this.tagName + " " +
$(this).attr('name') + " : " +
$(this).val() +"<br>";
}else{
str += this.tagName + " : " + $(this).text() + "<br>"; //태그명이 input이 아닐 때
}
//$(this).attr('name')
//$(this).val()
//$(this).text()
})
$('#result1 div:eq(0)').html(str);
})
$('#visible').on('click', function(){
str = "";
$('#testForm *:visible').each(function(){
if(this.tagName == "INPUT"){//input태그일 경우
vtype = $(this).attr('type');
if(vtype == "radio"){2
//radio 둘 중 하나만 선택, 선택한 값만 가져오기
if($(this).prop('checked')){
str += vtype + " : " + $(this).val() + "<br>"; // 둘 중 선택한 값만 출력됨
}
//str += vtype + " : " + $(':radio').val() + "<br>"; //- 두 번 출력됨(radio가 2개라서)
}else{
str += this.tagName + " " +
$(this).attr('name') + " : " +
$(this).val() + "<br>"
}
}else if(this.tagName!="BR"){
str += this.tagName + " : " + $(this).text() + "<br>";
}
})
$('#result1 div:eq(1)').html(str);
})
})
</script>
</head>
<body>
<div class="box">
input 태그, 선택(selelct), textarea를 제외한 태그(요소)의 내용 얻기<br>
html()<br>
text()<br>
input 태그 입력, 선택(select) textarea의 값 얻기<br>
val()<br>
속성이름을 이용한 속성값 얻기<br>
attr('속성이름') attr('type') attr('name')<br>
속성의 상태를 얻기 - diabled checked selected mutiple readonly<br>
prop('checked') - check되어 있으면 true, 아니면 false를 리턴한다<br>
<br>
<button id="hidden" type="button">hidden</button>
<button id="visible" type="button">visible</button>
<div id="result1">
<form id="testForm">
<input type="hidden" name="userAge" value="33">
<input type="hidden" name="userCity" value="대전">
I D :
<input type="text" name="userID" value="hong">
<span style="display:none">ID가 중복됩니다. </span> <br>
이름 :
<input type="text" name="userName" value="홍길동">
<span style="visibility:hidden">이름을 입력하세요</span><br>
성별 :
<input type="radio" name="sung" value="남">남자
<input type="radio" name="sung" value="여">여자
</form>
<div></div>
<div></div>
</div>
</div>
</body>
</html>formInfo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form info</title>
<link rel ="stylesheet" href="../css/mystyle.css">
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$('#btnview').on('click', function(){
// 입력한 값 가져오기.
str = "이름 : " + $('#user').val() + "<br>";
str += "성별 : " + $('#gend:checked').val() + "<br>";
intro = $('#intro').val();
intro = intro.replace(/\r/g,"").replace(/\n/g, "<br>");
str += "소개 : " + intro + "<br>";
str += "직업 : " + $('#work option:selected').val() + "<br>";
$('#result1').html(str);
})
$('#btnchange').on('click', function(){
//이름 입력
newname = prompt("이름을 입력하시오.");
//user이름 변경
$('#user').val(newname)
})
})
</script>
</head>
<body>
<div class="box">
조사하기 클릭 시 : 입력한 값을 script에서 처리하여 result1 에 출력<br><br>
이름 변경 클릭 시 prompt를 이용해서 입력받아 이름을 변경한다.<br><br>
val() getter<br>
val('fds') setter<br><br>
<form action="test.jsp">
<label for="user">이름</label>
<input type="text" id="user" value="korea"><br>
<label >성별</label>
<input type="radio" id="gend" name="gend" value="남자" checked >남자
<input type="radio" id="gend" name="gend" value="여자" >여자<br>
<label for="intro">소개</label> <br>
<textarea id="intro" cols="40" rows="4"></textarea> <br>
<label for="work">직업</label>
<select id="work">
<option value="programmer">프로그래머</option>
<option value="progammer">프로게이머</option>
<option value="whitehand">백수</option>
</select><br>
<button type="button" id="btnview">조사하기 </button>
<button type="button" id="btnchange">이름변경 </button>
</form>
<div id="result1"></div>
</div>
</body>
</html>추가메서드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$('#result1 p').on('click', function(){
vimg = $(this).attr('title');
appimg = $('<img>', {
'src' : '../images/' + vimg + '.jpg',
'alt' : vimg,
'width' : '100px',
'height' : '100px'
})
appimg.prependTo(this);
//$(this).prepend(appimg); //위와 같은 코드
//만든 것을 어디에 붙일건지 .prependTo(this);
})
$('#result2 p').on('click', function(){
vimg = $(this).attr('title');
appimg = $('<img>', {
'src' : '../images/' + vimg + '.jpg',
'alt' : vimg,
'width' : '100px',
'height' : '100px'
})
//$(this).after(appimg);
//appimg.insertAfter(this); //위와 같은 코드
$(this).before(appimg);
})
})
</script>
<style>
p{
border : 1px solid pink;
padding : 5px;
}
</style>
</head>
<body>
<div class="box">
append / prepend : 대상 selecter의 안쪽으로 추가<br>
뒤로 추가<br>
appendTo(selecter)<br>
append(content)<br>
앞으로 추가 <br>
prependTo(selecter)<br>
prepend(content)<br>
<br>
<div id="result1">
<p title="Tulips">튜울립</p>
<p title="Chrysanthemum">국화</p>
<p title="Koala">코알라</p>
<p title="Hydrangeas">수국 </p>
</div>
</div>
<div class="box">
after/before : 대상 selecter 테두리 바깥쪽으로 추가
뒤로 추가<br>
insertAfter(selecter)<br>
after(content)<br>
앞으로 추가 <br>
insertBefore(selecter)<br>
before(content)<br>
<br>
<div id="result2">
<p title="Tulips">튜울립</p>
<p title="Chrysanthemum">국화</p>
<p title="Koala">코알라</p>
<p title="Hydrangeas">수국 </p>
</div>
</div>
</body>
</html>삭제메서드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$('#emp').on('click', function(){
$('#result1').empty();
})
$('#rem').on('click', function(){
$('#result2').remove();
})
})
</script>
<style>
.box div{
background : yellow;
}
</style>
</head>
<body>
<div class="box">
empty : 대상 selecter의 자식요소와 내용을 지우기
remove : 대상 selecter를 포함한 자식요소와 내용을 지우기
<br>
<button type="button" id="emp">empty</button>
<button type="button" id="rem">remove</button>
<div id="result1">
<p>무궁화 꽃이 피었습니다</p>
</div>
<div id="result2">
<p>무궁화 꽃이 피었습니다</p>
</div>
</div>
</body>
</html>복사메서드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$('.pp').on('click', function() {
$(this).css('font-size','+=3px');
})
$('#clone').on('click',function(){
vp1 = $('#p1').clone();
$('#result1').append(vp1);
})
$('#eclone').on('click',function(){
vp2 = $('#p2').clone(true);
vp2.appendTo($('#result2'));
})
})
</script>
</head>
<body>
<div class="box">
clone : 이벤트처리기는 복사되지 않고 요소만 단순 복사된다<br>
clone(true) : 복사 시 이벤트처리기가 함께 복사된다<br>
<br>
<p class="pp" id="p1">무궁화 꽃이 피었습니다1</p>
<p class="pp" id="p2">무궁화 꽃이 피었습니다2</p>
<button type="button" id="clone">복사</button>
<button type="button" id="eclone">이벤트복사</button>
<div id="result1"></div>
<div id="result2"></div>
</div>
</body>
</html>찾기메서드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$('p').on('click', function(){
if($(this).parent().is('.dd')){//클릭한 p의 부모가 class dd이면
aa= $(this).clone();
aa.css('color', 'red');
aa.appendTo($(this).parent());
}else{
alert("작업 대상이 아닙니다");
}
})
})
</script>
</head>
<body>
<div class="box">
p태그를 클릭시 부모가 .dd인지 비교 - .is(selector)<br>
p태그 클릭 이벤트시 this로 받는다<br>
$(this).parent().is('.dd'); => true or false 반환<br>
<br>
<button type="button" onclick="proc1()">확인</button>
<div class="dd" id="result1">
<p>무궁화 꽃이 피었습니다</p>
</div>
<p>은주는 예쁘다</p>
<div class="dd" id="result2">
<p>울긋불긋 단풍이~~~</p>
</div>
</div>
</body>
</html>
