반응형
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="style.css">
<script type="text/javascript">
$(document).ready(function () {
var result = 'Welecome,';
$('.inputRequired').change(function () {
if(result == 'Welcome,')
{
result = $(this).val();
}
else
{
result += ' '+ $(this).val();
}
$('#divResult').html(result);
});
$('#btnSubmit').on('click',{
firstName: $('#textFirstName').val(),
lastName: $('#textLastName').val()
}, sayHello);
$('ol').on('click', 'li', function() {
$(this).fadeOut(500);
});
$('#btnAdd').on('click', function() {
$('ol').append('<li>@@@@@@@@@@@@@</li>')
});
$('#btn').on({
click: function(){
alert('Button Clicked');
},
mouseover: function() {
$(this).css('background-color', 'yellow');
},
mouseout: function(){
$(this).css('background-color', 'white');
}
})
var jqueryObject = $('#btn');
var rawDOMElement = jqueryObject.get(0);
var eventObject = $._data(rawDOMElement, 'events');
if(eventObject != undefined && eventObject.click != undefined)
{
alert('Click event already exists')
}
else
{
alert('Click event does not exist')
}
function sayHello(event)
{
if(event.data == null)
{
alert('Enter Name please')
}
else {
alert('You must be' + (event.data.firstName!=null ? event.data.firstName + ' ' : '' )+(event.data.lastName!=null ? event.data.lastName : '' ));
}
}
});
</script>
</head> 참고
반응형
'Library > jQeury' 카테고리의 다른 글
| jQuery - 스크롤 이벤트 Scroll event (0) | 2021.02.24 |
|---|---|
| jQuery - preventdefault (0) | 2021.02.24 |
| jQuery - 메소드들 methods (0) | 2021.02.18 |
| jQuery - jQuery 제이 쿼리란 ? (0) | 2021.02.11 |
| jQuery - ajax 란? (0) | 2021.01.28 |