<jQuery core7>
html() / text()
내용 속에 html태그가 포함되면 html(), 포함되지 않으면 text()
$("body").html(); // body 태그 안의 모든 태그를 포함한 문장
$("body").text(); // body 태그안의 모든 문자만
$(“p").text(); //여러개인경우 모든 p태그의 문자만 가져옴
$("p").html(); //p가 여러개인경우 첫번째 p태그만 태그를 포함한 문장을 가져옴innerHTML - getter, setter의 역할 모두 가능
textContent - getter, setter의 역할 모두 가능
<body>
<p>1<span>홍길동</span></p>
<p>2<span>개나리</span></p>
<p>3<span>진달래</span></p>
</body>$("p").textContent일 때 :
1홍길동
2개나리
3진달래
$("p").innerHTML일 때:
1<span>홍길동</span> => 하나만 가져옴
중요한 함수들
<jQuery core8(객체조작)>
반복문
$("p").length; -- p엘리먼트의 개수
반복문
$(요소선택).each(function(매개변수1, 매개변수2){…});
$.each(“요소선택, function(매개변수1, 매개변수2){…});
검색된 DOM요소의 개수만큼 지정된 fn함수를 호출한다
1.선택자 엘리먼트 관련 - (E1은 태그명)
셀렉터 설 명
- 모든요소
E1 태그명이 E1인 모든 요소
E1.class E1요소 중 CLASS 속성값이 class와 같은 모든 요소
E1#id E1요소 중 ID 속성값이 id와 같은 요소
E1, E2 모든 E1요소와 모든 E2요소
E1 E2 E1의 자식 요소 중 모든 E2요소 (후손)
E1 > E2 E1의 바로 아래 자식요소 중 모든 E2요소(자식)
E1 + E2 E1의 바로 다음에 오는 형제요소 중 E2요소
E1 ~E2 E1의 다음에 나오는 형제요소 중 모든 E2요소
예제 선택자 – 후손, 자식
예제 선택자 - 형제
2 선택자 - 속성관련
셀렉터 설 명
E1[attr] attr 속성을 갖는 모든 E1요소
** E1[attr=val] attr 속성값이 val인 모든 E1요소
E1[attr^=val] attr 속성값이 val으로 시작하는 모든 E1요소
E1[attr!=val] attr 속성값이 val 값과 같지 않은 모든 E1요소
E1[attr$=val] attr 속성값이 val으로 끝나는 모든 E1요소
E1[attr*=val] attr 속성값이 val을 포함하는 갖는 모든 E1요소 - 글자를 포함
E1[attr |=val] attr 속성값이 val과 같거나 ‘val-’로 시작하는 모든 E1요소
E1[attr ~= val] attr 속성값이 공백으로 구분된 값(단어)을 가질 경우 구분된 값 중에
val값과 같은 값을 갖는 모든 E1요소 - 단어- 입력양식(form)선택자
속성 선택자를 간단히 함
셀렉터 설 명
:input 모든 input, 모든 button, select, textarea 요소들
:text text타입의 input 요소
:password password 타입의 input 요소
:radio radio 타입의 input 요소
:checkbox checkbox 타입의 input 요소
:submit submit 타입의 input과 button 요소
:reset reset 타입의 input과 button 요소
:image image타입의 input 요소
:button 모든 button요소들과 type이 button인 input 요소
:file file타입의 input 요소 필터와 메소드
필터
기본 필터, 자식필터,내용필터, 입력상태필터,기타필터
기본 선택자보다 더 정밀한 선택이 필요한 경우 필터와 선택 메소드를 활용한다
선택자 뒤의 콜론다음에 기술하여 “선택자:필터” 식으로 사용
- 기본필터
선택자 : 필터
선택자로 기준 엘리먼트를 먼저 찾고 필터는 엘리먼트 주변의 다른 엘리먼트나
선택된 집합중의 일부를 더 정밀하게 선택하는 역할을 한다
필터 설 명
:first 선택요소중 첫번째요소
:last 선택요소중 마지막요소
:not(selector) 괄호의 selector가 일치되는 모든요소를 제외
:even 선택요소중 짝수요소
:odd 선택요소중 홀수요소
:eq(index) 선택요소중 주어진 index에 일치하는 index를 갖는 요소
:gt(index) 선택요소중 주어진 index보다 큰 index를 갖는 요소
:lt(index) 선택요소중 주어진 index보다 작은 index를 갖는 요소 짝수 번째 (0부터 시작, 0은 짝수로 평가 )
- 내용 필터
선택자 : 필터
선택자로 기준 엘리먼트를 먼저 찾고 필터는 엘리먼트 주변의 다른 엘리먼트나
선택된 집합중의 일부를 더 정밀하게 선택하는 역할을 한다
필터 설 명
:contains(text) 지정한 테스트를 포함하는 요소
(대소문자 구분)
:empty 대상요소 중 자식요소도 없고 텍스트도 없는 요소
:has(selector) 지정한 selector에 해당하는 요소를 갖는 모든 요소와 일치
:parent 대상요소 중 자식요소를 갖거나 텍스트를 갖고 있는 요소와 일치 내용가져오기
<!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">
//$(document).ready(function(){ })
$(function(){
$('#bhtml').on('click', function(){
str = $('body').html(); //body태그에 있는 내용을 가져옴(get) - parameter없음(get)
//str에는 태그가 포함되어 있다
//$('#result1').html(str); //html 출력시 str의 내용이 그대로 실행된다
$('#result1').text(str); //text로 출력시 태그가 글자로 출력
//str의 내용을 가지고 result1에 변경(set) - parameter있음(set)
})
$('#btext').on('click', function(){
str = $('body').text(); //body태그에 있는 내용을 text로 가져옴(get) - str에는 태그가 포함되지 않는다
//$('#result2').html(str); //html이나 text나 둘 다 내용은 같음
$('#result2').text(str); //str에는 실행할 태그가 없다, text(str)로 실행한 결과와 같다
})
$('#phtml').on('click', function(){
str = $('p').html(); //첫번째 p태그만을 대상으로 하여 span태그 포함하여 내용 가져오기
//$('#result3').html(str); // span태그가 실행되어 출력한다
$('#result3').text(str); // span태그가 실행되지 않고 글자로 출력된다
})
$('#ptext').on('click', function(){
str = $('p').text(); // 전체 p를 대상으로 태그 포함하지 않고 문자만 가져온다
//$('#result4').html(str);
$('#result4').text(str); //둘의 결과는 같음(text로 가져왔기 때문에)
})
$('#html').on('click', function(){
str="";
/* $.each($('p'),function(i){
str += $('p').eq(i).html(); //첫번째 p만 가져오기때문
$('#result5').html(str);
}) */
$('p').each(function(i){
str += $('p').eq(i).html(); //첫번째 p만 가져오기때문
$('#result5').html(str);
})
})
})
</script>
<style type="text/css">
span{
background : yellow;
}
</style>
</head>
<body>
<div class="box">
html 버튼 클릭 - body안의 모든 태그를 포함한 내용을 가져온다
text 버튼 클릭 - body안의 모든 내용만 태그없이 가져온다
<br>
<button type="button" id="bhtml">html</button>
<button type="button" id="btext">text</button>
<div id="result1"></div>
<div id="result2"></div>
</div>
<div class="box">
<p>1<span>홍길동</span></p>
<p>2<span>개나리</span></p>
<p>3<span>진달래</span></p>
<br>
<button type="button" id="phtml">html</button>
<button type="button" id="ptext">text</button>
<button type="button" id="html">html반복</button>
<div id="result3"></div>
<div id="result4"></div>
<div id="result5"></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 type="text/javascript">
function proc1(){
//h3 다음의 모든 형제들 중 p의 배경색을 변경, 길이지정, 가운데정렬
//$('h3 ~ p').css('background','yellow').css('width', '50%').css('text-align', 'center');
$('h3 ~ p').css({'background':'yellow', 'width': '50%', 'text-align': 'center'})
//h3 다음의 첫번째 p의 글자를 굵게, 크게 : font-weight
$('H3 + p').css({'font-size' : '2.0em', 'font-weight' : 'bold'});
}
</script>
</head>
<body>
<div class="box">
h3 다음의 모든 형제의 배경색을 변경, 길이지정, 가운데정렬<br>
h3 다음의 첫번째 형제의 글자를 굵게, 크게 : font-weight <br>
<br>
<button type="button" onclick="proc1()">확인</button>
<div id="result1">
<p>형제 선택자 에 대하여</p>
<h3> 꼬마버스 타요 가족을 소개 합니다</h3>
<p> 타요</p>
<p> 로기</p>
<p> 라니 </p>
<p> 가니 </p>
<span>다음</span>
<div>w3schools</div>
<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 type="text/javascript">
function proc1(){
//title 속성을 가진 p요소의 배경색 변경
$('p[title]').css('background','pink');
//type 속성이 password 인 요소의 테두리 변경
$('input[type=password]').css('border','2px solid red');
$('input[value=확인]').css('background','green');
$('input[class^=in]').css('background','#da2f37') //class가 in으로 시작하는 것
}
</script>
</head>
<body>
<div class="box">
<br>
<br>
<button type="button" onclick="proc1()">확인</button>
<div id="result1">
<p> 일반 문단입니다 </p>
<p title="툴팁으로 보입니다"> 타이틀을 가지고 있는 문단입니다 </p>
회원번호 <input type="text" class="intext"><br>
비밀번호 <input type="password" class="inpass"><br>
<input type="button" value="확인"><br>
</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 type="text/javascript">
$(function(){
$('.box > button').on('click',function(){
$(':input').css('background','#a2d3f1')
//input 요소 테두리 lime , 배경색 핑크
$('input').css('border-color','lime').css('background','pink'); //input으로 시작하는 요소 바꿔라
//input type이 button 인 요소 배경색 노란
//$('input[type=button]').css('background','yellow')
$('input:button').css('background','yellow')
//Button 요소와 input type이 button 인 요소 배경색 하늘색 =>모든 button요소 $(':button')
//$('button, input[type=button]')
$(':button').css('background','cyan');
//Type이 submit 요소의 배경색 녹색
//$('input[type=submit], button[type=submit]')
$(':submit').css('background','green');
//Type이 reset인 요소의 배경색 노랑
$('input[type=reset], button[type=reset]')
$(':reset').css('background','yellow');
//Type이 text, password 인 요소의 테두리 파랑
$(':text, :password').css('border','2px solid blue');
//Type이 file, image인요소의 테두리 빨강
$(':file, :image').css('border','2px solid red');
})
})
</script>
</head>
<body>
<div class="box">
<br>
<br>
<button type="button">확인</button>
<div id="result1">
<form onsubmit="return false;">
Text : <input type="text"/><br>
Password : <input type="password" /><br><br>
Radio :
<input type="radio" name="radioGroup" id="radioA" value="A"/> A
<input type="radio" name="radioGroup" id="radioB" value="B"/> B<br><br>
Checkbox :
<input type="checkbox" name="checkboxes" id="checkbox1" value="1"/> 1
<input type="checkbox" name="checkboxes" id="checkbox2" value="2"/> 2<br><br>
Textarea : <br> <textarea rows="15" cols="50" id="myTextarea" id="myTextarea"></textarea><br><br>
Image : <input type="image" src="../images/image.1.jpg"><br><br>
File : <input type="file"><br><br>
Buttons :
<button type="button" id="normalButton">Normal</button>
<button type="submit" id="submitButton">Submit</button>
<button type="reset" id="resetButton">Reset</button> <br><br>
<input type="button" value="일반버튼">
<input type="submit" value="전송버튼">
<input type="reset" value="초기화버튼"> <br><br>
</form>
</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 type="text/javascript">
$(function(){
$('.box1 button').on('click', function(){
$('li:first, li:last').css('background','yellow');
$('li:eq(5)').css('background','red');
$('li:lt(4)').css({'font-size': '2.0em', 'font-weight': 'bold'});
})
$('.box2 button').on('click', function(){
$('#result2 table tr:even').css('background','lightblue')//deprecated
//$('#result2 tr:even')//deprecated
//$('#result2 tr').filter(':even')//권장사항
//$('table > tr:even') -- 이렇게 쓰면 안됨
$('#result2 tr').filter(':odd').css('background', 'lightgray');
$('#result2 tr').first().css('background','black') //권장사항
.css('color','white')
.css('font-size','1.5em')
.css('font-weight','bold');
/* $('#result2 tr:first').css('background','black') //권장하지 않음
.css('color','white')
.css('font-size','1.5em')
.css('font-weight','bold'); */
})
})
</script>
<style>
table{
border : 2px solid orange;
}
td{
width : 300px;
height: 40px;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<div class="box box1">
기본필터<br>
:first, :last, :eq(idx), :gt(idx), :lt(idx)<br>
:even, :odd, :not(selector)<br>
<br>
$('li:first, li:last').css('background','yellow');<br>
$('li:eq(5)').css('background','red');<br>
$('li:lt(4)').css({'font-size': '2.0em', 'font-weight': 'bold'});<br>
<br>
권장사항 아님 - 필터링 메소드로 변환<br>
$('li').first(), $('li').last(), $('li').eq(5)<br>
$('li').filter(:lt())<br>
<br>
<button type="button">확인</button>
<div id="result1">
<ul>
<li> one </li>
<li> two </li>
<li> three </li>
<li> four </li>
<li> five </li>
<li> six</li>
<li> seven</li>
<li>eight</li>
<li>nine</li>
</ul>
</div>
</div>
<div class="box box2">
기본필터<br>
:even, :odd, :not(selector)<br>
<br>
권장사항 아님 - 필터링 메소드로 변환<br>
$('li').filter(:even), $('li').filter(:odd) <br>
<br>
<button type="button">확인</button>
<div id="result2">
<table border="1">
<tr>
<td>아이템</td>
<td>가격</td>
</tr>
<tr>
<td>ONE</td>
<td>1000</td>
</tr>
<tr>
<td>TWO</td>
<td>1000</td>
</tr>
<tr>
<td>THREE</td>
<td>1000</td>
</tr>
<tr>
<td>FOUR</td>
<td>1000</td>
</tr>
<tr>
<td>FIVE</td>
<td>1000</td>
</tr>
<tr>
<td>SIX</td>
<td>8900</td>
</tr>
<tr>
<td>SEVEN</td>
<td>7700</td>
</tr>
<tr>
<td>EIGHT</td>
<td>26000</td>
</tr>
<tr>
<td>NINE</td>
<td>34000</td>
</tr>
<tr>
<td>TEN</td>
<td>56000</td>
</tr>
</table>
</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 type="text/javascript">
$(function(){
$('.box>button').on('click', function(){
//jQuery가 포함된 span태그 의 테두리 파랑 :
$('span:contains(jQuery)').css('border', '1px solid blue');
//jQuery가 포함되지 않은 span 태그 의 테두리 빨강 :
$('span:not(:contains(jQuery))').css('border', '1px solid red');
//span을 갖는 div요소 태그 의 테두리 그린
$('div:has(span)').css('border', '1px solid green');
//아무것도 없는 빈 div 태그 의 테두리
$('div:empty').css('border', '1px solid orange');
//div 후손 span 태그 의 글자색 빨강, 크기,굵게
$('div span').css('color','red').css('font-weight','bold');
})
})
</script>
</head>
<body>
<div class="box box1">
<br>
<br>
<button type="button">확인</button>
<div id="result1">
<div></div>
<div>헬로우~~
<span>오늘도 즐겁게~열심히!</span>
</div>
<p>Hello jQuery! <span>Thanks, jQuery!</span></p>
<div class="myClass">jQuery!</div>
<span class="notMyClass">쉬운 jQuery~~!</span>
<div></div>
<br><br><hr color="blue"><br>
</div>
</div>
</body>
</html>