DAY4 추가
- 원래
$()로 시작하는 onload 대체 함수는$(document).ready로 표기한다.
$('#title').text(); // .value와 동일
$('#content').html(); // 자신 내부의 html 태그를 전부 가져온다.
$('p').attr('class'); // 'class' 속성의 값을 반환한다.
$('p').attr('class', 'new_class'); // 'class' 속성을 'new_class'로 변경한다.
$('#name').val(); // input 태그의 value를 반환한다.
$('#name').val('kim'); // input 태그의 value를 변경한다.jQuery - event
- jQuery 문법을 이용하여 이벤트 처리를 할때는 람다 함수(arrow function)를 권장하지 않는다.
- 1.8.x 미만 버전은
live()도 사용 가능하지만, 1.7.x 버전 이후로는live(),bind(),delegate()가 모두on()으로 통합됐다.on()또는${이벤트 이름}()함수를 사용하자.
<script>
$(document).ready(() => { // window.onload와 같다.
$('#btn_click').click(function () { // on('click', function)으로도 줄 수 있다.
console.log('click');
});
// click, submit, mouseover 등등 이벤트 다 있다.
});
</script>
<body>
<button id="btn_click"></button>
</body>- 함수 체이닝 기법으로도 사용 가능하다.
this키워드로 간편하게 자신에게 접근도 가능하다.
<script>
$(document).ready(() => {
$('#title').mouseenter(function() {
console.log('enter');
$(this).css('background', 'green');
}).mouseleave(function () {
console.log('leave');
$(this).css('background', 'red');
});
// hover(in function, out function);
$('#title').hover(function() {
console.log('hover in');
}, function() {
console.log('hover out');
});
});
</script>
<body>
<h1 id="title">jQuery</h1>
</body>- selector가 아닐 떄는
$이 안붙음에 주의하자.
<script>
$(document).ready(() => {
$('#checkbox').change(function() {
console.log('checkbox: ', this.checked);
});
$('#name').keyup(function() {
console.log('keyup: ', $(this).val());
})
});
</script>
<body>
<input type="checkbox" id="checkbox">정보동의
<input type="text" id="name">
</body>submit()이벤트에return false를 적어주면e.stopPropagation()과 동일하게 작동하며, 로직이 처리되는 것을 기다렸다가 전송하는 기능을 만들 수 있다.
<script>
$(document).ready(() => { // window.onload와 같다.
$('#checkbox').change(function() {
console.log('checkbox: ', this.checked);
});
$('#name').keyup(function() {
console.log('keyup: ', $(this).val());
});
$('#test_form').submit(function () {
console.log('test_form');
console.log('name: ', $('#name').val());
console.log('age: ', $('#age').val());
return false; // e.stopPropagation();과 비슷하다. 위 로직이 전부 처리되지 않으면, 다음으로 안 넘어간다.
});
});
</script>
<body>
<form action="jquery02_event2.html" method="get" id="test_form">
<input type="checkbox" id="checkbox">정보동의
<input type="text" id="name">
<input type="number" id="age">
<input type="submit" value="send">
</form>
</body>- 이벤트를 여러 같은 태그에 할당하려고 할 때, 각자 할당하지 않으면 모두 한번에 실행된다. 이를 막기 위해
each()함수를 사용한다. each()함수를 이용하여 클래스 이름을 부여할 수도 있다. 미리 설정해둔 css가 있다면, css 요소가 적용된다.
<script>
$(document).ready(() => { // window.onload와 같다.
$('span').each(function() {
console.log('spans');
$(this).click(function () {
$(this).css('font-size', '32px');
$(this).addClass('bg_span'); // removeClass(${클래스 이름})로 지우기도 가능하다.
});
});
});
</script>
</head>
<body>
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
<span>ddd</span>
</body>jQuery - 비동기 통신
$.ajax()를 사용한다.
$(() => {
$('#test_form').submit(function() {
console.log('submit');
const id = $('#id').val();
const pw = $('#pw').val();
const name = $('#name').val();
const tel = $('#tel').val();
// GET일때는 URLparameter 이용
$.ajax({
url: `http://localhost:8090/web02hello/insertOk.do`,
type: "post",
dataType: "json",
data: {
id: id,
pw: pw,
name: name,
tel: tel,
},
success: function(result) {
console.log(result);
}
});
return false;
});
});
개발자를 꿈꾸는 사람