[jQuery]공부했던 기본 셀렉터 예제 모음

2017. 2. 14. 11:11

Scenario: 학원에서 공부한 jQuery 기본 셀렉터 예제 정리

Solutions: 아래

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 객체 조작 및 생성 </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> //CDN을 쓰면 궂이 JS파일 없이사용가능
<style type="text/css">
<script>
//************* 기본 예제문제 시작
$(function(){
//(1) h1 태그의 align 속성값을 left적용하기
$('h1').css("text-align","left");
//(2): li태그중 첫번째 요소에 텍스트를 새 텍스틀 바꾸기
$('li:eq(0)').text("첫번째리스트");
//(3)h2태그에 자식 요소인 strong태그의 글자를 빨간색으로 적용
$("h2:nth-child(2)").css("color","red");
//(4)id=two인 요소의 이전 요소에 글자를 파란색으로 적용
$("#two").css("color","blue");
//(5)id=two인 요소의 다음에요소에 글자를 보라색으로 적용
$("#two").next().css("color","purple");
//(6)id=two인 요소의 부모 요소에 파선을 생성
$("#two").parent().css("border","dashed");
//(7)class=myList인 요소내의 가장 앞의 위치에 새요소를 추가
$(".myList").prepend("<li>Front</li>");
//(8)class=myList인 요소내의 마지막 위치에 새요소를 추가
$(".myList").append("<li>back</li>");
//(9)class=three인 요소의 이전 위치에 새요소를 생성
$(".three").before("<li>앞에삽입</li>");
//(10)class=three인 요소의 다음 위치에 새 요소를 생성
$(".three").after("<li>뒤에삽입</li>");
//(11)h2태그중에 2번째 요소를 <div>태그로 감싸기
$("h2:nth-of-type(2)").wrap('<div/>');
//(12)h2태그중에 하위 요소를 strong태그를 포함하는 <h2>에 class="tit"속성 추가
$("h2").children("strong").parent().addClass('tit'); //** 가장애먹은부분("h2").children("strong") 에 tit를 추가하면 스트롱태그에만 tit추가하는거임.
//(13)h2태그중에 마지막 요소에 class="tit"속성을 제거
$("h2:last").removeClass('tit');
});
//**************특정 배수 객체에 css적용시 셀렉터 사용법
$(function() {
$('h3:nth-child(3n+1)').css({'background-color':"black",'color':"white"}); //이렇게 +1을 해줘야지 0번째부터 시작됨
$('h3:nth-child(3n+1)').css({'background-color':"black",'color':"white"}); //중괄호 사용시 따옴표를 쓰지 않고
//backgroundColor:'balck' 이렇게 카멜표기법으로 표현가능
})
//**********마이너스 선택자를 쓸경우 ; -1은 집합내 맨끝요소를 가르킴
$(function() {
$('h1').css({'background-color':'orange','color':'white'}); //한줄에 이런식으로 css 여러속성 주기가능
$('h1').eq(-2).css('color',"red"); //'h1:eq(0)'처럼 쓰면 li태그 내에서만 셀렉 가능, 그러나 이런식으로하면 다 쓸수 있고
//인덱스가 0부터 시작.(n일경우)
});
//**********게시판 만들때 글 순서에따라 명암도 규칙있게 주기
$(function() {
$('tr:nth-child(3n)').css({'background-color':"gray"}).prev().css({'background-color':"lightgray"});
})
</script>
<style>
div{background-color:yellow;}
.tit{background-color:orange;}
</style>
</head>
<body>
// 생략된 객체들이 있음
<h1 align="center"><strong>내용1</strong></h1>
<h2><strong>내용2</strong></h2>
<h2>내용3</h2>
<h2 class="tit">내용4</h2>
<ul class="myList">
<li>리스트1</li>
<li id="two">리스트2</li>
<li class="three">리스트3</li>
<li>리스트4</li>
</ul>
//********** 게시판 예제에 필요한 객체
<table>
<tr><td>신형 넥수스 10 미개봉 팝니다.</td><td>62만원</td></tr>
<tr><td>갤록시S5 전투용 싸게 처분합니다.</td><td>45만원</td></tr>
<tr><td>안드로이드 프로그래밍 정복 새 책</td><td>8만원</td></tr>
<tr><td>ASUS 젬북 UX21A full hd, i7 CPU, RAM 4G, 256 SSD</td><td>99만</td></tr>
<tr><td>2.5인치 샘송 외장하드 1테라. 좋은 자료 겁나 많음</td><td>12만원</td></tr>
<tr><td>거의 신품급 DSLR. 캐농 750d 듀얼 랜즈</td><td>75만원</td></tr>
<tr><td>애뿔 아이뽕6 가개통급. 한개 60만원, 두개 130만원</td><td>60만원</td></tr>
<tr><td>경희대 앞 넓고 깔끔한 원룸. 초역세권에 신축 풀옵션</td><td>500/50</td></tr>
<tr><td>스타 2. 자유의 날개 + 군단의 심장 합쳐서 떨이합니다.</td><td>30000</td></tr>
</table>
</body>
</html>

'To be Developer > WEB' 카테고리의 다른 글

[Ajax] 특정 Html 파일 삽입하기 및 Html파일내 특정 태그요소만 불러오기 (0)	2017.02.16
[jQuery] 체크박스 선택한뒤 선택된 요소 결과로 띄우기 (0)	2017.02.14
[JavaScript]DOM객체 및 mouseover mouseout 을 활용하여 동적 버튼 만들기 (0)	2017.02.09
[JavaScript][펌]유용한 Array 메소드들 (0)	2017.02.07
[JavaScript]자바스크립트로 간단한 계산기 만들기. (0)	2017.02.07

안 평범한 개발자의 하루

[jQuery]공부했던 기본 셀렉터 예제 모음

'To be Developer > WEB' 카테고리의 다른 글

+ Recent posts

티스토리툴바