chain : 여러 기능 한번에 넣기
💡 예시
<body>
<a id="naver" href="http://www.naver.com"> naver </a>
<script>
// attr : 속성값 수정
$("#naver").attr('href','http://google.com')
.css('color','tomato')
</script>
</body>🕜 결과
click() : 클릭 이벤트 발생 시
💡 예시
<body>
<input type="button" id="click_me" value="click me"/>
<script>
function clickHandler(){
alert("thank you")
}
$("#click_me").click(clickHandler)
</script>
</body>🕜 결과
on() : 버튼 외 클릭 이벤트 발생 시
💡 예시
<body>
<h1>on()</h1>
<p>여기를 클릭해주세요</p>
<script>
$('p').on('click', function(){
alert('문장이 클릭되었습니다.')
})
</script>
</body>🕜 결과
💡 예시
<body>
<h1>.on()</h1>
<p>이 문장 위로 마우스를 움직여 보세요.</p>
<div></div>
<script>
// 이벤트 2개 이상 적용이 가능하다
$("p").on("mouseenter mouseleave", function(){
// div태그에 다른 태그 추가 덧붙이다 추가하다
$('div').append("마우스 커서가 문장위로 들어오거나 빠져나갔습니다.<br>")
})
</script>
</body>🕜 결과
text() : 텍스트 변환
mouse--() : 마우스 위치 변동 이벤트
💡 예시
<body>
<div id="listener" class="event-box">
Mouse Here~!!!
</div>
<script>
$('#listener').mouseenter(function(){
$('.event-box').text('Mouse Enter~!!');
});
$('#listener').mouseleave(function(){
$('.event-box').text('Mouse Leave!!');
});
$('#listener').mousedown(function(){
$('.event-box').text('Mouse Down~!!');
});
$('#listener').mouseup(function(){
$('.event-box').text('Mouse Up~!!');
});
</script>
</body>🕜 결과
keyup() : 키 누르는 이벤트
keydown() : 키가 계속 눌리는 이벤트
💡 예시
<body>
<!--
keyup
keydown
각각의 이벤트 발생 횟수를 기록한다.
-->
<input type="text" id="listener" class="event-box input" placeholder="여기에 입력하세요" />
<div class="event-box console">
up=<span id="result1">0</span>, down=<span id="result2">0</span>
</div>
<script>
// 이벤트 발생 횟수를 기록하기 위한 데이터
// 객체로 받아와서 리스트처럼 (js)
let counter = { down : 0, up : 0};
$('#listener').keyup(function(){
counter.up++;
$('#result1').html(counter.up);
});
$('#listener').keydown(function(){
counter.down++;
$('#result2').html(counter.down);
});
</script>
</body>🕜 결과
keycode : 키보드의 키마다 주어진 번호
💡 예시
<body>
<input type="text" id="listener" class="event-box input" placeholder="여기에 입력하세요" />
<div class="event-box console">
<p>keycode=<span id="result1">0</span></p>
<p>enter press=<span id="result2">none</span></p>
</div>
<script>
//이벤트 객체에서 keycode를 가지고 있음
$('#listener').keyup(function(e){
$("#result1").html(e.keyCode);
if( e.keyCode == 13){
$('#result2').text("enter를 누르셨습니다.")
} else{
$('#result2').text("none")
}
})
</script>🕜 결과
bind : 이벤트 붙이기
unbind : 이벤트 지우기 -> 지우려면 먼저 bind해야함
💡 예시
<body>
<input type="button" id="click_me" value="click_me">
<input type="button" id="remove_event" value="unbind">
<script>
function clickHandler(){
alert('hello');
}
$("#click_me").bind('click', clickHandler);
$("#remove_event").bind('click', function(){
//unbind : 어떤 이벤트의 어떤 이벤트 핸들러를 제거할지에 대해 정확히 기입
$('#click_me').unbind('click',clickHandler);
});
</script>
</body>🕜 결과
unbind 클릭 후
selector : 선택자
💡 예시
<head>
<style>
.selected{
background-color: tomato !important;
color: white;
border: 2px solid red !important;
}
</style>
</head>
<body>
<ul id="list">
<li id="htmlID">HTML</li>
<li class="selectClass">CSS</li>
<li>JAVASCRIPT</li>
<li>PHP</li>
<li id="mysqlID">ORACLE</li>
</ul>
<script>
// id
$("#htmlID").addClass('selected');
// class
$('.selectClass').addClass('selected');
// tag
$('li').addClass('selected');
// 여러개 1
$("#htmlID, .selectClass").addClass('selected');
// 여러개 2
// list라는 id를 가진 태그안에 있는 모든 태그 선택
$("#list li").addClass("selected");
// 인자와 인덱스가 동일한 엘리먼트를 찾아내는 선택자
// 2이라는 숫자는 index (0부터 시작)
$("#list li:eq(2)").addClass("selected");
// 인자보다 인덱스가 큰 엘리먼트를 찾아내는 선택자
// index값이 1을 초과하는 값을 가져온다.
$("#list li:gt(1)").addClass("selected");
// 인자보다 인덱스가 작은 엘리먼트를 찾아내는 선택자
// index값이 1보다 작은 값
$("#list li:lt(1)").addClass("selected");
// 짝수 인덱스 값을 가지는 엘리먼트
$("#list li:even").addClass("selected");
$("#list li:first").addClass("selected");
$("#list li:last").addClass("selected");
</script>
</body>🕜 결과
$("#list li:first").addClass("selected");
$("#list li:last").addClass("selected");
안녕하세요, 한보람입니다.