* each 메소드 :
배열의 모든 인덱스에 순차적으로 접근할 수 있는 메소드
객체를 대상으로 사용할 경우 모든 속성에 접근할 수 있다.
방법 1 )
$.cach(객체|배열, function(키|인덱스, 밸류(값)){})
$.each(arr,function(index[키], value[밸류]){
console.log(index + ", " + value)
})
$(arr).cach(function(index, value){
console.log(index + "," + value);
})
for(let index in arr){
console.log(index + " : " + arr[index]);
}
for of => 배열에서만 사용이 가능하다 객체는 사용이 불가능하다
방법 2)
배열.cach(function[인덱스, 밸류]{
// 순차적으로 접근하여 실행할 코드
})
for(let index in arr){
console.log(index + " : " + arr[index]);
}
for(let key in obj){
console.log(key + ',' + obj[key]);
}
obj에 담긴 key 값을 반환한다.
obj[key]값을 담고
in : 객체의 열거 가능한 속성들을 순회하는 데 사용된다.
out : 반복 가능한 객체(배열, 문자열, Map, set 등을)를 순회하는데 사용된다.
$.each(animals,function(idx, obj){
result +=
})
is 메소드 :
선택된 요소가 전달된 값과 일치하는 지 판단하여
결과를 반환해주는 메소드
$(선택자).is('선택자');
<script>
$(function(){
// p 태그 요소들 중 bold라는 클래스 속성을 가진 요소에 글자굵기를 변경
$('p').each(function(){
// bold 클래스 속성이 있는 경우
if( $(this).is('.bold') ) {
$(this).css('font-weight', 900);
$(this).addClass('bg-2');
}
});
});
</script>
* 이벤트 관련 메소드 :
여기 클릭 시 h6 요소 추가 !
$("#area2").on('click', 'h6', function() {
$("#area2").append('<h6>부모 요소를 통해 이벤트로 추가된 요소</h6>');
});
on('click', 'h6' function(){
$("#area2").append('')
})
* 키보드 관련 이벤트
keydown | keypress : 키가 눌러질 때 발생되는 이벤트
> keydown : 키보드의 모든 키가 눌러질 때 발생
> keypress : 키보드 펑션키(Fn), 기능키, 한글 제외한 키가 눌러질 때 발생
keyup : 키나 눌러진 후 뗼 때 발생되는 이벤트
<script>
$(function(){
$('#content').keyup(function(){
console.log($(this).val());
// 입력한 글자 길이만큼 #count 요소의 값을 업데이트!
const length = $(this).val().length;
$('#count').text(length);
// TODO: 150자를 넘어갈 경우.. 처리할 수 있을까?
});
})
</script>
* 효과를 주는 메소드
fadeIn, fadeOut, fadeToggle
<h3>* 효과를 주는 메소드</h3>
<h4>fadeIn, fadeOut, fadeToggle</h4>
<button id="fadeIn">보기</button>
<button id="fadeOut">숨기기</button>
<button id="fadeToggle">토글</button>
<br>
<img id="img02"
src="resources/images/flower.jpg"
alt="flower"
width="300">
<script>
$(function(){
$("#fadeIn").click(function(){
$("#img02").fadeIn();
});
$("#fadeOut").click(function(){
$("#img02").fadeOut();
});
$("#fadeToggle").click(function(){
$("#img02").fadeToggle();
});
})
</script>
<script>
$(function(){
$('.qa_box div').click(function(){
const $p = $(this).next();
// $를 변수명 앞에 붙이게 되면 보통 jQuery방식으로 선택된 요소를 의미함!
// .next() : 선택된 요소의 뒤에 오는 요소(현재 코드 기준 p요소)
if($p.css('display') == 'none') {
$p.siblings('p').slideUp();
$p.slideDown();
} else {
$p.slideUp();
}
});
})
</script>