* 이스케이프 문자 *
- \ : escape 문자 : 본래 문자가 가지고 있던 특수능력을 버리고 일반문자로 표시되게 하는 것
Attribute(member) 변경하기
- $(selector).attr( “지정 속성”, “변경 내용” ); : 해당 요소의 지정된 속성을 변경
- $(selector).val( “변경 내용” ); : 해당 요소의 값(value)을 변경
- $(selector).text(“변경 내용” ); : 해당 요소의 텍스트 값을 변경(내부 html 태그 미포함)
- $(selector).html(“변경 내용” ); : 해당 요소의 텍스트 값을 변경(내부 html 태그 포함)
<body>
<p id="test1">문자열 1</p>
<p id="test2">문자열 2</p>
<input id="test3" type="text" value="홍길동"/>
<input id="test4" type="text" value="비밀번호"/>
<div></div>
<br/>
<button>속성변경</button>
</body>
<script>
//text()는 html을 인정하지 않고 일반 문자열로 인식
$('#test1').text('<b>변경된</b> 문자열');
$('#test2').html('<b>변경된</b> 문자열');
$('button').on('click',function(){
//console.log('click');
$('#test3').attr('type','button');
$('#test4').attr('type','password');
$('#test3').attr('onclick','alert("OK")');
});
//$('div').html('<input type="button" value="test" onclick="test()"/>');
//escape 문자(\) : 본래 문자가 가지고 있던 특수능력을 버리고 일반문자로 표시되게 하는 것
$('div').html('<input type="button" value="test" onclick="test(\'Hello\')"/>');
var param = 'OK';
$('div').html('<input type="button" value="test" onclick="test(\''+param+'\')"/>');
function test(str){
alert(str);
};
</script>
css();
- 특정 스타일을 확인하거나 변경할 경우 사용
- 단순한 스타일 적용에 활용
- $(selector).css( “attribute” ); : 선택한 요소의 스타일 값을 받아옴
- $(selector).css( “attribute”,”value” ); : 선택한 요소의 스타일 값을 변경
<head>
</style>
<script>
$(document).ready(function(){ //html문서가 다 읽혀서 준비가 되면 실행해라
//j-query code
//console.log($('#ex1').css('color'));
//특정 요소의 특정 스타일 속성
/*
$('#color').text($('#ex1').css('color'));
$('#size').text($('#ex1').css('font-size'));
*/
var color = $('#ex1').css('color');
var size = $('#ex1').css('font-size');
$('#color').text(color);
$('#size').text(size);
$('button').on('click',function(){
/*
$('#ex2').css('color',color);
$('#ex2').css('font-size',size);
*/
$('#ex2').css({
'color':color,
'font-size':size
});
});
})
</script>
</head>
<body>
<p id="ex1" style="color: blue; font-size: 32px;">
스타일이 적용된 텍스트
</p>
<p id="ex2">스타일이 적용안된 텍스트</p>
<div>
폰트 사이즈 : <span id="size"></span><br/>
폰트 색상 : <span id="color"></span><br/>
<button>CSS 적용</button>
</div>
</body>
addClass()
- 이미 선언된 클래스를 적용/삭제 할 경우 사용
- 비교적 복잡한 스타일을 사용할 경우 유용함
- $(selector).addClass( “class name” ); : 선택한 요소에 해당 클래스 추가
- $(selector).removeClass( “class name” ); : 선택한 요소에 해당 클래스 삭제
- $(selector).toggleClass( “class name” ); : 선택한 요소에 해당 클래스 추가/삭제
<head>
.ex{
width:200px;
height:200px;
background-color:bisque;
text-align:center;
}
</style>
</head>
<body>
<button id="add">스타일 추가</button>
<button id="remove">스타일 삭제</button>
<button id="toggle">ON</button>
<div>DIV</div>
</body>
<script>
$('#add').click(function(){
/*
$('div').css({
'width':'200px',
'height':'200px',
'background-color':'bisque',
'text-align':'center'
});
*/
$('div').addClass('ex');
});
$('#remove').on('click',function(){
$('div').removeClass('ex');
}); //div에 class가 나타났다가 사라짐
$('#toggle').on('click',function(){
$('div').toggleClass('ex');
var sw = $('div').hasClass('ex');
console.log(sw);
/*
if(sw){ //==을 넣지 않아도 값자체가 true이면 실행
$(this).text('OFF');
}else{$('#toggle').text('ON');}
*/
var yn = sw == true ? 'OFF' : 'ON';
$(this).text(yn);
});
</script>
hide & show
- $(selector).hide(speed, callback); : 해당 요소를 사라지게 하는 기능( display : none )
- $(selector).show(speed, callback); : 해당 요소를 보이게 하는 기능( display : block )
- $(selector).toggle(speed, easing, callback); : 두 기능을 번갈아 가며 실행
속성
- Speed : milliseconds, slow, fast
- Easing : swing(가속), linear(평균)
- Callback : 효과가 끝나고 실행할 기능
</head>
<body>
<div>메뉴1</div>
<ul>
<li>LIST 01</li>
<li>LIST 02</li>
<li>LIST 03</li>
<li>LIST 04</li>
<li>LIST 05</li>
</ul>
<button id="toggle">OFF</button>
<p>>LIST 01</p>
<p>>LIST 02</p>
<p>>LIST 03</p>
<p>>LIST 04</p>
<p>>LIST 05</p>
</body>
<script>
$('ul').hide(); //display를 none으로 설정
$('div').hover(function(){
$('ul').show();
},function(){
$('ul').hide('fast'); //fast|slow 로 속도 조절
});
$('#toggle').click(function(){
//speed, easing, callback
$('p').toggle('slow',function(){
//callback 함수는 애니메이션이 모두 종료되고 나서 실행
//alert('애니메이션 끝');
var tog = $('#toggle').text();
if(tog == 'OFF'){
$('#toggle').text('ON');
}else{
$('#toggle').text('OFF');
}
});
});
Fade effect
- $(selector).fadeIn(speed, callback); : 서서히 나타나는 효과
- $(selector).fadeOut(speed, callback); : 서서히 사라지는 효과
- $(selector).fadeToggle(speed, callback); : 위 두 개의 효과를 토글
- $(selector).fadeTo(speed, opacity, callback); : opacity 조정
속성
- Speed : milliseconds, slow, fast
- Opacity : 도달할 투명도 수치
- Callback : 효과가 끝나고 실행할 기능
<body>
<button id="viz">fadeIn</button>
<button id="inviz">fadeOut</button>
<button id="toggle">ON</button>
<div></div>
<br/>
<img src="../img/chrome.png" width="100px"/>
</body>
<script>
$('#viz').on('click',function(){
//speed, callback
//show() : 크기를 조절하면서 투명도를 조절
//fadeIn() : 요소를 만들고 이후 투명도를 조절
$('div').fadeIn('slow',vizCheck);
});
var vision; //div의 display 상태 저장
function vizCheck(){
vision = $('div').css('display');
console.log('display : ',vision);
if(vision == 'block'){
$('#toggle').text('OFF');
}else{
$('#toggle').text('ON');
}
}
$('#inviz').on('click',function(){
$('div').fadeOut(3000,vizCheck);
});
$('#toggle').on('click',function(){
$('div').fadeToggle('fast',vizCheck);
});
$('img').hover(function(){
//fadeTo(속도, 투명도)
$(this).fadeTo('slow',0.2)
},function(){
$(this).fadeTo('slow',1);
});
</script>
Slide
- $(selector).slideUp(speed, callback); : 요소가 아래서 위로 크기가 작아지며 사라지는 효과
- $(selector).slideDown(speed, callback); : 요소가 위에서 아래로 크기가 커지며 나타나는 효과
- $(selector).slideToggle(speed, callback); : 위 두 개의 효과를 토글
속성
- Speed : milliseconds, slow, fast
- Callback : 효과가 끝나고 실행할 기능
<body>
<div id="flip">MENU 1</div>
<div class="panel" id="p1">SUB MENU</div>
<div id="flip2">MENU 2</div>
<div class="panel" id="p2">SUB MENU</div>
</body>
<script>
/*
$('#flip').hover(function(){
//slideDown(속도,콜백함수)
$(this).next().slideDown('slow');
console.log('in');
},function(){
//slideUp(속도,콜백함수)
$('#p1').slideUp();
console.log('slow');
});
*/
//문제점 : 슬라이드업이 될 때 마우스가 들어오면 다시 슬라이드 다운 실행
//해결책 : 마우스가 나갔다 들어왔을 때 슬라이드 다운이 실행 X
//1.마우스엔터 -> 슬라이드 다운
$('#flip').on('mouseenter',down);
//2.마우스아웃 -> 슬라이드 업 / 마우스엔터 off -> 애니메이션이 끝날 때 마우스엔터 on
$('#flip').on('mouseleave',function(){
$(this).off('mouseenter');
$(this).next().slideUp('slow',function(){
$('#flip').on('mouseenter',down);
});
});
function down(){
$(this).next().slideDown('slow');
}
// 1. 클릭 -> 슬라이드 다운 -> 클릭 -> 슬라이드 업
$('#flip2').on('click',function(){
$(this).next().slideToggle('slow');
});
</script>
Animate
- $(selector).animate({params}, speed, easing, callback);
- Params : css에서 정의 할 수 있는 속성들(애니메이션 결과로 나타날 형태를 지정)
- Speed : 애니메이션이 시작해서 끝날 때 까지 걸릴 시간
- Callback : 애니메이션 종료 후 일어날 기능
- $(selector).stop();
- 진행 중인 내용을 정지 시킨다.
<body>
<button id="left">left</button>
<button id="right">right</button>
<button id="stop">stop</button>
<button id="special">special</button>
<button id="step">step</button>
<div id="obj"></div>
</body>
<script>
$('#right').on('click',function(){
//{css 최종결과},속도,가속
$('#obj').animate({'left':'+=200'},'slow','swing');
});
$('#left').on('click',function(){
$('#obj').animate({'left':'-=200'},'slow','swing');
});
$('#stop').on('click',function(){
$('#obj').stop();
});
$('#special').on('click',function(){
$('#obj').animate({
'left':'+500',
'width':'-=50',
'height':'-=50',
'opacity':'-=0.5'
},1000,'linear',function(){
alert('애니메이션 끝');
});
});
$('#step').on('click',function(){
$('#obj').animate({'left':'+=500'},'slow')
.animate({'top':'+=500'},'slow')
.animate({'left':'-=500'},'slow')
.animate({'top':'-=500'},'slow');
});
</script>
'코딩도전기 > J-Query' 카테고리의 다른 글
J-Query_TEST (1) | 2023.02.15 |
---|---|
CODO Day11_J-Query(Method Chaining/요소 추가&삭제&면적) (0) | 2023.02.15 |
J-Query_TEST (0) | 2023.02.14 |
CODO Day9_J-Query(관계&Filtering&Event&속성) (0) | 2023.02.13 |
CODO Day8_J-Query(selector) (0) | 2023.02.10 |