[JQuery] DOM

김장환·2022년 8월 1일

JQuery

목록 보기

3/5

JQuery 3일차

기존의 정적디자인을 동적으로

만약 스타일의 css가 다음과 같이 설정되있고 이를 body안에 태그에 적용시킬려면

<style>
	.high_light_0 {background:yellow;font-size:30pt;color:red}
	.high_light_1 {background:orange}
	.high_light_2 {background:blue}
	.high_light_3 {background:green}
	.high_light_4 {background:red}
</style>
------------------------
<body>
	<h1 class="high_light_0">Item-0</h1> <!-- 정적 디자인 -->
	<h1>Item-0</h1>
	<h1>Item-1</h1>
	<h1>Item-2</h1>
	<h1>Item-3</h1>
	<h1>Item-4</h1>
</body>
이런식으로 정적디자인으로 하나하나 설정해야된다.

하지만 JQuery를 이용하면 동적으로 간단하고 쉽게 사용할수있다.

attr을 사용하여 클래스를 속성부여를 하여 동적으로 디자인적용.

<script>
	$('h1:eq(0)').attr('class','hight_light_0')
    //=> $('h1:eq(0)') 대신 $(h1:first)로 해도 같다.
</script>

하지만 addClass를 사용하면 이것보다 더 간단하게 할수있다.

addClass

한꺼번에 여러개의 스타일을 동시에 설정하고싶을때 사용한다.

형식)addClass(적용시킬 클래스명)
*위에 $('h1:eq(0)').attr('class','hight_light_0')을 addClass로 사용하면

<script>
	$('h1:eq(0)').addClass('high_light_0'); //위에 길게쓴걸 이렇게 
</script>간단히 사용가능

여기서 each 함수를 사용하지 않고 콜백함수를 사용하여 전체 적용을하려한다.
콜백함수: 함수를 호출할때 매개변수를 전달하며 주로 매개변수가 익명함수일때 사용한다.

<script>
$('h1').addClass(function(index){//자바스크립트의 매개변수에서 또 다른 함수(=콜백함수)
								//매개변수가있는 익명함수
								//호출하여 결과를 리턴(addClass)
			alert(index);
			return 'high_light_'+index;
		});
             
 </script>

removeClass

addClass <-> removeClass
-addclass의 반대로 해제시킬때 사용한다.
형식)removeClass(해제시킬 클래스명)

toggleClass

addClass와 removeClass번갈아가면서 적용

addCLass,removeClass,toggleClass 이 세개는 세트로 한꺼번에 외우기
형식)removeClass(해제시킬 클래스명)

filter

**형식)$('선택자').filter('찾는 조건에 해당하는 선택자(태그 or 속성선택자 or 콜백함수)')

<script>
	(1)$('h1:even').css({backgroundColor:'Black',color:'White'})// css여러개 적용할때 key value형식으로 ({})안에 써도됨
</script>

<script>
(2)$('h1').filter(':even').css({backgroundColor:'Black',color:'White'})// 이렇게 filter로 사용해도 같음
</script>

//위에 (1),(2)처럼 해도되지만 콜백함수를 사용해도 가능

<script>
$('h1').filter(function(index){//위에 (1),(2)처럼 해도되지만 콜백함수를 사용해도 가능
			return index%2==1
		}).css({backgroundColor:'Black',color:'White'})
		//제어문 -> if문형식과 비슷 => $('선택자').is('찾을조건')->true or false
		$('h1').each(function(){// h1태그를 each함수(반복문) 내부에서 구분을 못하기때문에 this를 써야한다
			if($(this).is('.select')){ //클래스선택자가 select일 경우 =>true  / $(this)=>현재 읽어들이는 대상자 h1태그
				$(this).css('background','yellow').css('font-size','16pt').css('color','red')
			}else{//클래스선택자(select)가 아닌경우
				$(this).css('background','green');
			}
		})
</script>

<body>
	<h1>Item-0</h1>
	<h1 class="select">Item-1</h1>
	<h1 id="select">Item-2</h1>
	<h1>Item-3</h1>
	<h1>Item-4</h1>
</body>

appendTo

형식) $(A).appendTo(B)-> A를 B의 기존자식의 뒤에 추가할때 사용 (B가 부모)

밑에 <h1>jQueryTest111</h1> 처럼 정적 디자인으로 추가하지만 appendTo를 사용하면 
간단히 동적디자인으로 추가할수있다.

<body>
	<div>
		<h1>안녕하세요?</h1>
		<!-- <h1>jQueryTest111</h1> (1) 정적 디자인 -->
	</div>
	<h1>반가워요!</h1>
	<img src="../picCats/Persian.jpg">
</body>

-----------------
<script>
	$('<h1>jQueryTest111</h1>').appendTo('div');//div태그의 기존자식뒤에 추가 / 동적디자인
</script>

prependTo

형식) $(A).prependTo(B)-> A를 B의 기존자식의 앞에 추가할때 사용 (B가 부모)

<body>
	<div>
    <!-- <h1>jQueryTest222</h1> (2) -->
		<h1>안녕하세요?</h1>
	</div>
	<h1>반가워요!</h1>
	<img src="../picCats/Persian.jpg">
</body>

-----------------
<script>
	$('<h1>jQueryTest222</h1>').prependTo('div');//div태그의 기존자식앞에 추가 / 동적디자인
</script>

insertAfter

형식) $(A).insertAfter(B)-> A를 B뒤에 추가할때 사용


<body>
	<div>
		<h1>안녕하세요?</h1>
	</div>
    <!-- <h1>DOMTest333</h1> (3) -->
	<h1>반가워요!</h1>
	<img src="../picCats/Persian.jpg">
</body>

-----------------
<script>
	$('<h1>jQueryTest333</h1>').prependTo('div');//div태그의 기존자식앞에 추가 / 동적디자인
</script>

insertBefore

형식) $(A).insertBefore(B)-> A를 B앞에 추가할때 사용


<body>
	<!-- <h1>DOMTest444</h1> (4) --
	<div>
		<h1>안녕하세요?</h1>
	</div>
	<h1>반가워요!</h1>
	<img src="../picCats/Persian.jpg">
</body>

-----------------
<script>
	$('<h1>DOMTest444</h1>').css('color','red').insertBefore('div');//css적용할거면 이렇게 체이닝기법을 이용
</script>
----------------------
	div앞에 이미지배치 => 이미지 넓이 300을 부여
<script>
	$('img').attr('width',300).insertBefore('div');
</script>

append

형식) $(A).append(B)-> B를 A의 기존자식의 뒤에 추가할때 사용 (A가 부모)
*appendTo 의 반대


<script>
	(1) $('div').append('<h1>jQueryTest111</h1>');//div태그의 기존자식뒤에 추가 / 동적디자인
</script>

-----------------

(위의 결과와 같음)
<body>
		<!-- <h1>DOMTest444</h1> (4) -->
		<!-- <img> (5)-->
	<div>
		<!-- <h1>jQueryTest222</h1> (2) -->
		<h1>안녕하세요?</h1>
		<!-- <h1>jQueryTest111</h1> (1) 정적 디자인 -->
	</div>
		<!-- <h1>DOMTest333</h1> (3) -->
	<h1>반가워요!</h1>
	<img src="../picCats/Persian.jpg">
</body>

prepend

형식)$(A).prepend(B)-> B를 A의 기존자식의 앞에 추가할때 사용 (A가 부모)
*prependTo 의 반대


<script>
	(2) $('div').prepend('<h1>jQueryTest222</h1>');//div태그의 기존자식앞에 추가 / 동적디자인
</script>

-----------------

(위의 결과와 같음)
<body>
		<!-- <h1>DOMTest444</h1> (4) -->
		<!-- <img> (5)-->
	<div>
		<!-- <h1>jQueryTest222</h1> (2) -->
		<h1>안녕하세요?</h1>
		<!-- <h1>jQueryTest111</h1> (1) 정적 디자인 -->
	</div>
		<!-- <h1>DOMTest333</h1> (3) -->
	<h1>반가워요!</h1>
	<img src="../picCats/Persian.jpg">
</body>

after

형식) $(A).after(B)-> B를 A뒤에 추가할때 사용 (자식에 추가X)
*insertAfter 의 반대


<script>
	(3)$('div').after('<h1>DOMTest333</h1>');//h1태그를 div태그 뒤에 추가 (자식기준이 아님)
</script>

-----------------

(위의 결과와 같음)
<body>
		<!-- <h1>DOMTest444</h1> (4) -->
		<!-- <img> (5)-->
	<div>
		<!-- <h1>jQueryTest222</h1> (2) -->
		<h1>안녕하세요?</h1>
		<!-- <h1>jQueryTest111</h1> (1) 정적 디자인 -->
	</div>
		<!-- <h1>DOMTest333</h1> (3) -->
	<h1>반가워요!</h1>
	<img src="../picCats/Persian.jpg">
</body>

before

형식) $(A).before(B)-> B를 A앞에 추가할때 사용 (자식에 추가X)
*insertBefore 의 반대


<script>
	(4)	$('div > h1').css('color','red').before('<h1>DOMTest444</h1>');//css적용할거면 이렇게
</script>

-----------------

(위의 결과와 같음)
<body>
		<!-- <h1>DOMTest444</h1> (4) -->
		<!-- <img> (5)-->
	<div>
		<!-- <h1>jQueryTest222</h1> (2) -->
		<h1>안녕하세요?</h1>
		<!-- <h1>jQueryTest111</h1> (1) 정적 디자인 -->
	</div>
		<!-- <h1>DOMTest333</h1> (3) -->
	<h1>반가워요!</h1>
	<img src="../picCats/Persian.jpg">
</body>

형식)
1. $(부모태그 > 자식태그)->부모태그 바로밑의 자식태그 찾을때(자손X)
2. $(부모태그 자식태그)->부모태그 바로밑의 자식태그 찾을때(자손 O)
3. $(부모태그 + 자식태그)->부모태그 바로옆에 인접한 형제태그 찾을때(짝궁찾기)
4. $(부모태그 ~ 자식태그)->부모태그 바로옆에 짝궁+다른 인접한 태그까지 찾기

append('<태그>jQueryTest</태그>') => 새로 만들어서 추가
append('기존에 존재하는 태그') => 이 태그를 잘라서 이동
=>기존에 없는것은 새로 만들어서 넣지만 기존에 있는건 이동시킨다.

ex)em태그 바로 옆의 인접한 형제태그를 찾아서 스타일(쓰기 귀찮 그냥 보셈)을 적용하고 적용시킨것들을 result1 클래스 뒤에 이동

<script>
	$('*').addClass('textstyle');
	$('em+a').css('background-color','yellow').each(function(){
    	//em태그 바로 옆의 인접한 형제태그를 찾아서 적용
		$('.result1').append($(this))
        //each내부에서는 같은 태그는 $(this) 위에서 찾아 적용시킨것들을 result1 클래스 뒤에 이동
		}) 		
</script>
------------------

<body>
	<em>one</em>
	<a>two</a>
	<a>three</a>
	<b>four</b>
	<a>five</a>
	<em>six</em>
	<hr>
	<div>
		<span>prev+next로 검색된 엘리먼트 확인예제</span>
		<span class="result1"></span>
	</div>
</body>

extend

extend는 기존의 객체에 오브젝트를 합칠 때 사용하는 함수로 객체베열 관리에 유용하다.
형식) $.extend(기존의 객체,내용을 추가(객체))

예시를 들자면 object라는 객체에 name='테스트'라는 값이 있는데 여기에 내용을 추가하고싶으면

<script>
	var object2={name:'테스트'} //여기에 내용을 추가할려면
    $.extend(object,{ // 추가하고싶은 객체 추가
    	region:'서울시 강북구',
        age:34,
        sung:'남'
    })
</script>

$.each

위의 추가한것까지 꺼내와서 출력하기위해서 확장for문을 사용하지만 jquery에서는 $.each를 사용한다.$ .each => 객체의 값을 꺼내올때 사용
형식) $.each(1.출력할 객체명 2.매개변수로 index,value값을 갖는 함수)

<script>
$.each(object,function(key,value){ //매개변수이름은 자유롭게 설정가능
			output+=key+':'+value+'\n';
		})
		alert(output); //꺼낸값을 alert으로 출력
 </script>

$.each()을 단독으로 사용가능 => 배열관리,객체관리에 사용한다.

예를 들자면
<body>
<a href="http://www.naver.com"><h1>naver</h1></a> <!-- 정적 -->
</body>
이런식으로 a링크로 4개의 다른 링크를 정적으로 적용할수있다.
하지만 이것을 제이쿼리로 동적으로 하면 

<script>
	$(function(){
		var array=[{name:'naver',link:'http://www.naver.com'},
        			//name이라는 키값에 'naver'값 부여,link키값에 '주소'값부여
						  {name:'daum',link:'http://www.daum.net'},
						  {name:'nate',link:'http://www.empas.com'},
						  {name:'google',link:'http://www.google.com'}];
		여기서 each()를 사용하여 배열관리	
		$.each(array,function(index,item){//index->배열의 인덱스번호
										 //item->배열의 인덱스를 통한 접근가능한 객체
				var output=''; //출력값저장
				 output+='<a href="'+item.link+'">';  
				 output+='<h1>'+item.name+'</h1>';
				 output+='</a>';
				//인덱스번호에 해당하는 항목을 가져와서 body에 결합
				document.body.innerHTML+=output;
		})
	})
</script>

2022-08-01

김장환

이전 포스트

[JQuery] selector

다음 포스트