$('A,B') = 합집합
$('A','B') = B안에 A를 포함하는 것
<each메서드>
*each_exam
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var array = [
{name : 'Naver', link : 'http://www.naver.com'},
{name : 'Daum', link : 'http://www.daum.net'},
{name : 'Google', link : 'http://www.google.co.kr'}
];
$.each(array, function(index, item){
var output = '';
output += '<a href="' + item.link+ '">';
output += '<h1>' + item.name + '</h1>';
output += '</a>';
document.body.innerHTML += output;
});//jQuery전역함수 만들기
});
--each_exam2
<style type="text/css">
.high-light-0{background: yellow;}
.high-light-1{background: orange;}
.high-light-2{background: blue;}
.high-light-3{background: green;}
.high-light-4{background: red;}
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type = "text/javascript">
$(function(){
$('h1').each(function(index,item){
$(this).addClass('high-light-'+index); //this = 자바스크립트 객체, $(this)=jQuery객체
});
/* $('h1:contains(0)').addClass('high-light-0');
$('h1:contains(1)').addClass('high-light-1');
$('h1:contains(2)').addClass('high-light-2');
$('h1:contains(3)').addClass('high-light-3');
$('h1:contains(4)').addClass('high-light-4'); */
});
</script>
</head>
<body>
<h1>item - 0</h1>
<h1>item - 1</h1>
<h1>item - 2</h1>
<h1>item - 3</h1>
<h1>item - 4</h1>
</body>
obj : 배열(jQuery객체 x)
**이벤트
$('').이벤트함수.스타일/Dom조작/Ajax
--Chapter3
//step1
$(function(){
$('#switcher-large').on('click',function(){ //selector, event handler함수
$('body').addClass('large');
});
});
//step2->removeClass('이름')
$(function(){
$('#switcher-large').on('click',function(){
$('body').removeClass('narrow').addClass('large');
});
$('#switcher-narrow').on('click',function(){
$('body').removeClass('large').addClass('narrow');
});
$('#switcher-default').on('click',function(){
$('body').removeClass('narrow').removeClass('large');
});
});
//step3->클릭한 버튼만 selected 스타일 적용
$(function(){
$('#switcher-large').on('click',function(){
$('body').removeClass('narrow').addClass('large');
$('.button').removeClass('selected');
$(this).addClass('selected'); //this ->자바스크립트 객체
});
$('#switcher-narrow').on('click',function(){
$('body').removeClass('large').addClass('narrow');
$('.button').removeClass('selected');
$(this).addClass('selected');
});
$('#switcher-default').on('click',function(){
$('body').removeClass('narrow').removeClass('large');
$('.button').removeClass('selected');
$(this).addClass('selected');
});
});
//step4->중복되는것 따로 빼서 모아주기
$(function(){
$('#switcher-large').on('click',function(){
$('body').removeClass('narrow').addClass('large');
});
$('#switcher-narrow').on('click',function(){
$('body').removeClass('large').addClass('narrow');
});
$('#switcher-default').on('click',function(){
$('body').removeClass('narrow').removeClass('large');
});
$('#switcher .button').on('click',function(){ //띄어쓰기해야함!!자손들
$('.button').removeClass('selected');
$(this).addClass('selected');
});
});
//step5
$(function(){
$('#switcher .button').on('click',function(){ //띄어쓰기해야함!!자손들
$('.button').removeClass('selected');
$(this).addClass('selected');
$('body').removeClass();
});
$('#switcher-large').on('click',function(){
$('body').addClass('large');
});
$('#switcher-narrow').on('click',function(){
$('body').addClass('narrow');
});
});
//step6
$(function(){
$('#switcher .button').on('click',function(){ //띄어쓰기해야함!!자손들
$('.button').removeClass('selected');
$(this).addClass('selected');
$('body').removeClass();
if(this.id == "switcher-large"){ //this : 클릭한 버튼, 자바스크립트에서의 ID
$('body').addClass('large'); //jQuery사용
}else if(this.id == "switcher-narrow"){
$('body').addClass('narrow');
}
});
});
//step7 => 이벤트 통합 함수 => 개별함수 변경
$(function(){
$('#switcher .button').click(function(){ //띄어쓰기해야함!!자손들
$('.button').removeClass('selected');
$(this).addClass('selected');
$('body').removeClass();
if(this.id == "switcher-large"){ //자바스크립트에서의 ID
$('body').addClass('large'); //jQuery사용
}else if(this.id == "switcher-narrow"){
$('body').addClass('narrow');
}
});
});
//step8 - hover(moseover함수, mouseout함수) - (addClass, removeClass)
$(function(){
$('#switcher .button').hover(function(){
$(this).addClass('hover'); //mouseover
}, function(){
$(this).removeClass('hover'); //mouseout
})
});
//step9 => 스타일변환기를 클릭 => 버튼 3개가 화면에서 사라지게 하자.
toggleClass = add + remove
$(function(){
$('#switcher>h3').click(function(){
$(this).parent().find('.button').toggleClass('hidden');
});
$('#switcher .button').click(function(){ //띄어쓰기해야함!!자손들
$('.button').removeClass('selected');
$(this).addClass('selected');
$('body').removeClass();
if(this.id == "switcher-large"){ //자바스크립트에서의 ID
$('body').addClass('large'); //jQuery사용
}else if(this.id == "switcher-narrow"){
$('body').addClass('narrow');
}
});
});
//step10 - 이벤트 버블링 처리
$(function(){
$('#switcher').click(function(){
$(this).parent().find('.button').toggleClass('hidden');
})
$('#switcher .button').click(function(e){ //띄어쓰기해야함!!자손들
$('.button').removeClass('selected');
$(this).addClass('selected');
$('body').removeClass();
if(this.id == "switcher-large"){ //자바스크립트에서의 ID
$('body').addClass('large'); //jQuery사용
}else if(this.id == "switcher-narrow"){
$('body').addClass('narrow');
}
e.stopPropagation(); //자식에게 버블링처리
});
});
//step11
//on() : 이벤트 발생, off() : 이벤트 해제
//large, narrow : 버튼 클릭후 버튼이 사라지는 이벤트를 해제
$(function(){
$('#switcher').on('click.kosta1',function(){
$(this).parent().find('.button').toggleClass('hidden');
});
/*$('#switcher').on('click.kosta2',function(){
alert('다른 이벤트');
});*/
$('#switcher .button').click(function(e){ //띄어쓰기해야함!!자손들
$('.button').removeClass('selected');
$(this).addClass('selected');
$('body').removeClass();
if(this.id == "switcher-large"){ //자바스크립트에서의 ID
$('body').addClass('large'); //jQuery사용
}else if(this.id == "switcher-narrow"){
$('body').addClass('narrow');
}
e.stopPropagation(); //자식에게 버블링처리
});
$('#switcher-large, #switcher-narrow').click(function(){
$('#switcher').off('click.kosta1');
});
$('#switcher').trigger('click.kosta1');
});
**on함수의 프로토타입이용
$(".btn1").on({
"mouseover" : function() {
console.log("welcome");
},
"focus" : function(){
console.log("welcome");
}
});
--live(동적태그 -> 처음 파싱할때는 없었던 태그)
$(function() {
$('button').click(function () {
$('body').append('<div>Hello jQuery!!!'+$('div').size() + 'th</div>');
});
/* $('div').click(function() { //동적인 태그
alert($(this).html());
}); */
$('body').on('click','div',function(){ //div의 부모를 써줌
alert($(this).html());
});
});
</script>
</head>
<body>
<button>Add Button</button>
<div>Hello jQuery!!!</div>
--style
-chapter4
**animation
-animate(properties, duration, easing, callback)
$(function(){
var $speech = $('div.speech');
var defaultSize = $speech.css('fontSize');//12px, 값을 가져옴
$('#switcher button').click(function(){
var num = parseInt($speech.css('fontSize'));
switch(this.id){
case "switcher-large":
num *= 1.2;
break;
case "switcher-small":
num /= 1.2;
break;
default :
num = parseInt(defaultSize);
break;
}
$speech.animate({fontSize : num+'px'},'slow');
});
});
$(function(){
$('div.label').click(function(){
var pWidth = $('div.speech p').outerWidth(); //여백까지 포함됨
var divWidth = $('#switcher').outerWidth();
var num = parseInt(pWidth)-parseInt(divWidth);
$('#switcher').fadeTo('fast',0.5)
.animate({marginLeft: num}, 'slow')
.fadeTo('fast',1.0)
.slideUp('slow',function(){
$(this).css('background','red');
}).slideDown('slow');
});
});
$(function(){
$('div.speech p').eq(1).hide('slow');
$('a.more').click(function(){
$('p:eq(1)').slideToggle('slow');
var $link = $(this);
if($link.text()=='read more'){
$link.text('read less');
}else{
$link.text('read more');
}
});
});
'FULLSTACK > WEB' 카테고리의 다른 글
| JQUERY 4차시 - AJAX, plug-in (0) | 2020.11.13 |
|---|---|
| JQUERY 3차시 - DOM조작, AJAX (0) | 2020.11.13 |
| JAVA SCRIPT 5차시, JQEURY 1차시 - Ajax (0) | 2020.11.13 |
| JAVA SCRIPT 4차시 - event, this, DOM (0) | 2020.11.13 |
| JAVA SCRIPT 3차시 - 객체 (0) | 2020.11.13 |