반응형
반응형
event
mouseover | mouseout : 자식 객체에 진입시, 탈출시에도 이벤트 발생
mouseenter | mouseleave : 자식개체에 진입시, 탈출(출차)시에는 이벤트 발생하지 않음
div 로 outer와 inner를 만들어 비교해보자.
<div class="outer">
<div class="inner"></div>
</div>.outer{
width:200px;
height: 200px;
background-color: orange;
padding: 50px;
margin: 20px auto;
}
.inner{
width: 100%;
height: 100%;
background-color: tomato;
} $(".outer")
.mouseover((e)=>{
console.log("mouseover",e.target)
})
.mouseout((e)=>{
console.log("mouseout",e.target)
})
내부요소인 inner에도 반응을 한다.
$(".outer")
// .mouseenter((e)=>{
// console.log("mouseenter",e.target);
// })
// .mouseleave((e)=>{
// console.log("mouseleave",e.target);
// })
.hover((e)=>{
console.log("mouseenter",e.target);
},((e)=>{
console.log("mouseleave",e.target);
}))
위 주석코드와 아래 hover코드는 같다.
mouseenter와 mouseleave는 내부요소에 반응하지 않는다.
on 핸들러 바인딩용
off 핸들러 바인딩용
바인딩(binding) : 요소에 행위(ex. click)에 대한 이벤트 핸들러를 바인딩하는 다양한 방법
$(btn1).on('click',(e)=>{
alert('감사합니다.');
//e.target -> #btn1
$(e.target).off('click'); //click핸들러 제거
}); $(btn2).one('click',(e)=>{
alert('처음이자 마지막');
});off를 하면 핸들러 바인딩이 끝난다.
.on() 메소드의 특징
- 선택한 요소에 어떤 타입의 이벤트라도 연결할 수 있다.
- 하나의 이벤트 핸들러에 여러개의 이벤트를 동시에 연결할 수 있다.
- 선택한 요소에 여러개의 이벤트 핸들러와 여러개의 이벤트를 같이 연결할 수 있다.
- 사용자 지정 이벤트(custom event)를 위해 이벤트 핸들러로 데이터를 넘길 수 있다.
- 차후에 다루게 될 요소를 이벤트에 바인딩 할 수 있다.
이런 특징을 가지고 있다. 수업때 짧게 넘어갔으므로 사용하고싶다면 다음 링크를 보자
글씨가 초과하면 제출이 불가능한 입력폼 만들기
<form action="javascript:alert('제출성공');" name="tweeterFrm">
<fieldset>
<legend>트위터</legend>
<p>
<span id="counter"></span> / <span id="max-counter"></span>
</p>
<textarea name="content" id="content" cols="30" rows="10"></textarea>
<br>
<input type="submit" value="제출">
<button>제출</button>
</fieldset>
</form> const MAX_COUNTER=30; //최대길이설정
// document.querySelector("#counter").innerHTML=0;
// document.querySelector("#max-counter").innerHTML=MAX_COUNTER;
$(counter).html(0);
$("#max-counter").html(MAX_COUNTER);
$(content).keyup((e)=>{
const {target:{value}}=e; //value를 타겟이자, 변수로 지정
console.log(value);//content의 값(value)을 받아온다.
const len=value.length;
const $counter = $(counter);
// const $submit = $("form:submit"); //input[type=submit], button[type=submit]
const $submit=$(":submit",document.tweeterFrm);//tweeterFrm에 대해 submit을 실행하는 제이쿼리
$counter.html(len);//길이 확인
if(len<=MAX_COUNTER){ //만약 길이가 최대길이(30)보다 작은경우
$counter.css('color',"initial"); //초기 색상으로 돌리라는 뜻
$submit.prop("disabled",false); //prop불가능을 해제
}else{
$counter.css('color',"red"); //빨간색으로 길이가 초과했음을 알림
$submit.prop("disabled",true); //prop불가능 설정 (제출 불가)
}
});
코드에 대한 설명은 코드 안에 작성하였다.
제출버튼 클릭시 제출 성공이 뜬다.
traversing
기준요소가 여러개일 때 선택하기에 좋기 때문에 사용한다.
부모방향 요소 설정
- parent([selector]) : 직계부모요소
- parents([selector]) : 모든 조상요소
- parentsUtil(selector) : 특정 부모요소 전까지 모든 조상요소
자식방향 요소 설정
- childern([selector]) : 선택자와 일치하는 직계 자식요소
- find(selector) : 선택자와 일치하는 모든 후손요소
형제방향 요소 설정
- siblings([selector]) : 선택자와 일치하는 모든 형제요소
- next([selector]) : 선택자와 일치하는 다음 형제요소 하나
- nextAll([selector]) : 선택자와 일치하는 모든 다음 형제요소
- nextUntil(selector) : 선택자와 일치하는 다음 형제요소의 전까지의 형제요소
- prev([selector]) : 선택자와 일치하는 이전 형제요소 하나
- prevAll([selector]) : 선택자와 일치하는 모든 이전 형제요소
- prevUntil(selector) : 선택자와 일치하는 이전 형제요소의 전까지 해당하는 형제요소
부모방향 요소 설정
<div class="wrap">
<div class="type">div.type (great-grandparent)
<ul>ul (grandparent)
<li>li (direct parent)
<span>span1</span>
</li>
<li>li (direct parent)
<span>span2</span>
</li>
</ul>
</div>
<div class="type">div.type (grandparent)
<p>p (direct parent)
<span>span3</span>
</p>
</div>
</div> .wrap * {
border: 1px solid lightgray;
display: block;
padding: 5px;
margin: 15px;
color: gray;
}
.type {
width: 500px;
}const style={
"color" : "red",
"border" : "2px solid red"
};
$(btn1).on('click',(e)=>{
console.log(
$("span")
// .parent()//span 태그의 부모를 가져옴
// .css(style)
// .parents() //span태그의 모든부모를 가져옴
// .parents("div") //모든 조상중에 선택
.parentsUntil("div.type")//div.type 전까지만 조상요소 전부 호출
.css(style)
);
});
버튼을 클릭하지 않았을 때 원래와 비교해보면, .parent()는 span의 바로 윗단계인 p를 선택하는것을 알 수 있다.
.parents()는 span(본인)을 제외한 모든 부모요소를 선택하고
.parents("div")는 모든 조상중에 div를 가지는 요소를 선택한다.
.parentsUntil("div.type)은 div.type전까지의 모든 요소를 선택한다.
자식방향 요소 설정
$(btn2).on("click",(e)=>{
console.log(
$(".wrap")
// .children().children()
// .children(":has(li)")
.find("span")
.css(style)
);
});
.children().children() 은 wrap을 기준으로 자식의 자식인 ul, p가 선택되었다.
.children(":has(li)") 는 wrap중에서 li를 가지는 자식요소가 선택되었다.
.find("span") 은 자식요소중에서 span을 가지는 모든 자식 요소가 선택되었다.
형제방향 요소설정
<div class="wrap">
<p>p</p>
<span>span</span>
<h1>h1</h1>
<h2 id="start">h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<p>p</p>
</div>
<button id="btn3">형제방향</button>
$(btn3).on('click',(e)=>{
console.log(
$("#start")
// .siblings() h2빼고 다 선택
// .siblings(":header") //header 태그인 h1 ~ h4 중 본인제외하고 선택
// .next() //h3
// .next("p") //다음형제요소가 p가아니기때문에 선택 x
// .nextAll() //h2 이후 모두
// .nextAll("h3,h4") //다음형제요소중 h3, h4만
.nextUntil("p") //다음 형제요소중 p태그 전까지만
.css(style)
)
});
형제요소 설명은 코드 안 주석 참고
실습문제
li2-2, li2-3 선택하기
<div>
<div class="type test">
div.test
<ul>
ul1
<li>li1-1</li>
<li>
li1-2
<ul>
ul2
<li>li2-1</li>
<li>li2-2</li>
<li>
li2-3
<ul>
ul3
<li>
li3
<span id="fromMe">fromMe</span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>1. .wrap부터 시작
$(btn4).on('click', (e)=>{
console.log(
$(".wrap")
.children()
.children()
.children()
.children(":has(li)")
.children("li")
.nextAll()
.css(style)
)
});
2. span#fromMe부터 시작
$(btn4_1).on('click',(e)=>{
console.log(
$("#fromMe")
.parent()
.parent()
.parent()
.prev("li")
.prev("li")
.nextAll("li")
.css(style)
)
})
css
display : none 효과 처리
- show(speed, easing, callbackFunction)
- hide(speed, easing, callbackFunction)
- toggle(speed, easing, callbackFunction)
<div>
<img id="river1" src="../sample/image/river1.PNG" alt="">
</div> $(btn1).click(() => {
$(river1).show(1000, 'easeOutBounce', () => {
console.log('show complete!');
});
});
$(btn2).click(() => {
$(river1).hide(1000, 'easeOutBounce', () => {
console.log('hide complete!');
});
});
$(btn3).click(() => {
$(river1).toggle();
});
show를 누르면 보이고, hide를 누르면 숨겨진다.
toggle을 누르면 보였다 안보였다가 반복한다.
- slideDown
- slideUp
- silideToggle
<div class="wrapper">
<div class="menu">HTML</div>
<p class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur debitis, voluptatibus, nemo eum doloremque molestiae vitae, aut inventore alias nihil officiis veniam enim! Neque nobis, rem ex cupiditate fugiat quisquam!</p>
<div class="menu">CSS</div>
<p class="content">Nam maiores repellat minima laudantium ipsum ratione! Consequuntur harum quidem facilis animi nesciunt labore reiciendis eum aspernatur mollitia molestias perspiciatis ipsam, iste natus atque asperiores voluptatem veniam voluptas enim beatae?</p>
<div class="menu">JAVASCRIPT</div>
<p class="content">Adipisci in dolorum inventore quia excepturi pariatur nihil iste ratione nulla enim debitis neque, ut cupiditate dicta repudiandae maiores expedita distinctio accusantium minima natus ex itaque labore quas? Vero, magni.</p>
<div class="menu">JQUERY</div>
<p class="content">Sed quae quaerat temporibus expedita ducimus blanditiis, aliquid est, voluptatem harum ut recusandae quia ad assumenda odit, saepe excepturi iure. Illum vitae dignissimos cumque repellendus quidem commodi facere deserunt mollitia?</p>
<div class="menu">HTML5 API</div>
<p class="content">Debitis, rem quo eaque ipsum obcaecati quisquam consequatur nobis, est beatae optio qui perspiciatis ea alias quis eum maiores amet praesentium ratione voluptas quas. Corrupti rerum facere obcaecati quisquam natus.</p>
</div> .menu {
width: 300px;
height: 30px;
line-height: 30px;
border-radius: 10px;
text-align: center;
border: 1px solid lightgreen;
cursor: pointer;
padding: 3px;
}
.content {
width: 300px;
margin: 3px 0;
padding: 3px;
border: 1px solid gray;
border-radius: 10px;
display: none;
} $(".menu").click((e) => {
// $(e.target).next()
// .slideDown(5000);
// .slideUp(5000);
// .slideToggle();
// @실습문제 : 아코디언 효과만들기
// $(e.target).next()
// .slideToggle()
// .siblings(".content")
// .slideUp()
$(e.target).next().slideToggle();
$("p.content").not($(e.target).next()).slideUp();
});
클릭시 1개씩 열렸다가 닫히는 구조이다. (토글)
열린 상태로 다른 버튼을 클릭하면, 열렸던 것이 닫히고 클릭한 것이 열린다.
Opacity / Display
FadeIn
FadeOut
FadeToggle
<button id="btn4">fadeIn</button>
<button id="btn5">fadeOut</button>
<button id="btn6">fadeToggle</button>
<div>
<img id="river2" src="../sample/image/river2.PNG" alt="">
</div> img {
width: 300px;
margin: 10px 0;
} $(btn4).click(() => {
$(river2).fadeIn(1000);
});
$(btn5).click(() => {
$(river2).fadeOut(1000);
});
$(btn6).click(() => {
$(river2).fadeToggle(1000);
});
사진이 사라질경우 아래 사진이 올라오는 것임!
<div class="img-wrapper">
<img id="forest1" src="../sample/image/forest1.PNG" alt="">
</div> .img-wrapper {
width: 300px;
height: 200px;
overflow: hidden;
}
.img-wrapper img {
opacity: .7;
margin: 0;
transition-duration: .1s;
} $(forest1).hover((e) => {
// mouseenter
$(e.target)
.fadeTo(100, 1)
.css('transform', 'scale(1.2)');
}, (e) => {
// mouseleave
$(e.target)
.fadeTo(100, .7)
.css('transform', 'scale(1)');
});
도형 움직이게 만들기(animate)
<div class="box"></div>
.box {
width: 200px;
height: 200px;
background-color: tomato;
border: 2px solid #000;
margin: 10px 0;
position: relative;
} $(btn7).click(() => {
const style = {
"width" : "400px",
"height" : "400px",
"top" : "200px",
"border-radius" : "50%",
"background-color" : "yellow"
};
// animate(styleProps, duration, easing, callback)
$(".box").animate(style, 1000, 'swing', () => {
$(".box").animate({
"width" : "300px",
"height" : "300px",
"top" : "0",
"background-color" : "#369c7a"
}, 1000, 'easeOutBounce');
});
});
반응형