jQuery
[jQuery] DOM
maribel
2019. 9. 18. 09:35
1. addClass
<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>
<script>
$(function(){
/*
addClass(적용시킬_클래스명) : 한꺼번에 여러개의 스타일을 동시에 설정하고 싶을때 사용
<->removeClass(해제시킬_클래스명)
*/
$('h1').addClass(function(index){
return 'high_light_'+index;
})
})
</script>
<body>
<h1>Item-0</h1>
<h1>Item-1</h1>
<h1>Item-2</h1>
<h1>Item-3</h1>
<h1>Item-4</h1>
</body>2. filter
<script>
$(function(){
//형식)$('선택자').filter('찾는 조건에 해당하는 선택자(태그 | 속성선택자)')
//매개변수를 전달받아서 처리해주는 함수를 이용
$('h1').filter(function(index){
return index%2==1;
}).css({backgroundColor:'Black',color:'White'})
//제어문->if형식과 비슷->$('선택자').is('찾을 조건')->true,false
$('h1').each(function(){
if($(this).is('.select')){
$(this).css('background','yellow').css('font-size','16pt');
}else{
$(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>3. appendTo, prependTo, insertAfter, insertBefore
<script>
$(function(){
/*
함수 설명
$(A).appendTo(B) A를 B의 기존자식의 뒤에 추가할때 사용
$(A).prependTo(B) A를 B의 기존자식의 앞에 추가할때 사용
$(A).insertAfter(B) A를 B의 뒤에 추가할때 사용
$(A).insertBefore(B) A를 B의 앞에 추가할때 사용
*/
$('<h1>jQueryTest</h1>').appendTo('div');
$('<h1>jQueryTest2</h1>').prependTo('div');
$('<h1>DOMTest</h1>').insertAfter('div');
$('<h1>DOMTest2</h1>').css('color','red').insertBefore('div');
$('img').attr('width',300).insertBefore('div');
})
</script>
<body>
<div>
<h1>안녕하세요?</h1>
</div>
<h1>반가워요!</h1>
<img src="../picCats/Persian.jpg">
</body>4. append, prepend, after, before
<script>
$(function(){
/*
함수 설명
$(A).append(B) B를 A의 기존자식의 뒤에 추가할때 사용
$(A).prepend(B) B를 A의 기존자식의 앞에 추가할때 사용
$(A).after(B) B를 A의 뒤에 추가할때 사용
$(A).before(B) B를 A의 앞에 추가할때 사용
*/
$('div').append('<h1>jQueryTest222</h1>');
$('div').prepend('<h1>jQueryTest444</h1>');
$('div').after('<h1>DOMTest555</h1>');
$('div > h1').css('color','red').before('<h1>DOMTest6666</h1>');
$('img').attr('width',300).before('<h1>DOMTest6666</h1>');
})
</script>
<body>
<div>
<h1>안녕하세요?</h1>
</div>
<h1>반가워요!</h1>
<img src="../picCats/Persian.jpg">
</body>5. append
<style type="text/css">
.textstyle {font-size:16pt;line-height:20pt;margin:10px;}
</style>
<script>
$(function(){
/*
형식) 1.$(부모태그 > 자식태그)->부모태그 바로밑의 자식태그를 찾을때 사용(자손 포함 X)
2.$(부모태그 자식태그)->부모태그 바로밑의 자식태그를 찾을때 사용(자손 포함 X)
3.$(부모태그+자식태그)->부모태그 바로 옆에 인접한 형제태그(짝궁)찾기
4.$(부모태그~자식태그)->부모태그 바로 옆에 짝궁+다른 인접한 태그까지 찾기
*/
$('*').addClass('textstyle');
$('em+a').css('background-color','yellow').each(function(){
$('.result1').append($(this))
})
})
</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>6. $.extend
<script>
$(function(){
var object1={} //비어있는 객체
//동적으로 속성(=멤버변수)을 추가 => 객체명.속성=값
object1.name='임시';
object1.addr='서울시 강남구 대현빌딩 3층';
object1.age=23;
alert(object1.name+'님의 주소는 '+object1.addr+'이고, 나이는 '+object1.age+'입니다.')
//$.extend(기존의 객체명,객체명2,객체명3,,,)=>객체배열 관리=>$.each 처리
var object2={name:'테스트'}
$.extend(object2,{
region:'서울시 강북구',
age:34,
sung:'남자'
})
var output=""; //출력할 값을 저장할 변수
//형식)$.each(1.출력할 객체명,2.매개변수로 index와 value값을 갖는 함수호출)
$.each(object2,function(key,item){
output+=key+':'+item+'\n'
})
alert(output);
})
</script>7. $.each
<script>
$(function(){
//$.each() : 단독으로 사용(배열관리(포털사이트의 주소를 관리),객체관리)
var array=[{name:'naver',link:'http://www.naver.com'},
{name:'daum',link:'http://www.daum.net'},
{name:'nate',link:'http://www.empas.com'},
{name:'google',link:'http://www.google.com'}
] //배열생성
//형식)$.each(컬렉션(배열),처리해줄 함수명(index,value)) {처리구문}
$.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>