JQuery
- Java script를 경량화, 간략화
- Ajax 가 포함. (비동기 통신)
- 많이 쓰지 않음 → Vue, React 로 대체
- 개발자가 문법을 쓰기엔 편하지만 javascript 에 비해 성능 면에서 떨어진다.
- format
$(tag명 | id | class | name).핸들러 함수명(매개변수)
// input 태그의 경우
let val = document.getElementById('id').value;
// 일반 태그의 경우
document.getElementById('id').innerHTML;
| JavaScript | JQuery |
| value | val() |
| innerHTML | html(), text() |
- JQuery 시작하기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>해당 script 를 <head>에 추가한다. 서버이기 때문에 다소 속도가 느릴 수는 있는데 이 속도 차를 개선하고 싶다면 해당 링크를 타고 들어가 파일로 저장한 뒤 프로젝트에 넣어주면 속도가 빨라진다.
$(document).ready(function() {
// render 후에 실행된다 (화면에 다 뿌려주고 실행)
let p = $("p").html(); // getter
$('p').html('<b>hello</b> jquery'); //setter
// 태그 설정 안됨. 문자열로 취급
$('p').text('hello jquery'); //setter
});text() 에는 html() 와는 달리 태그 입력이 안된다. string으로 취급되어 그대로 출력됨.
- <button> 태그
<button type="button" id="btn">클릭</button>
<script type="text/javascript">
$("button").click(function() {
alert('click');
});
$("#btn").click(function() {
alert('#btn click');
});
$('#btn').on("click", function() {
alert('on btnfunc()');
});
- <input> 태그
<body>
입력 : <input type="text" id="text" value="" placeholder="입력해 주세요">
<br><br>
<input type="button" id="btn" value="버튼">
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
// getter
let value = $("#text").val();
alert(value);
// setter
$('#text').val('nice to meet you');
});
});
</script>
</body>
- <table>
<table border="1">
<col width="50">
<col width="200">
<col width="150">
<tr>
<th>번호</th><th>이름</th><th>나이</th>
</tr>
<tr class="cls">
<th>1</th><td>홍길동</td><td>24</td>
</tr>
<tr class="cls">
<th>2</th><td>성춘향</td><td>16</td>
</tr>
<tr class="cls">
<th>3</th><td>이순신</td><td>56</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function() {
// onclick -> click()
// hover 역할
$("tr.cls").mouseover(function() {
$(this).css('background', '#00ff00');
});
$("tr.cls").mouseout(function() {
$(this).css('background', '#fff');
});
// td 태그 click시 해당 value값 출력
$("td").click(function() {
let value = $(this).html();
alert(value);
});
});
</script>css() 함수는 객체에 css 적용한다.
$("tr:eq(" + i + ") td:eq(" + j + ")").html(member[i][j]);Table에 접근하는 방법
- attr()
// setter
$('p').attr('id', 'pid');
// getter
let id = $('p').attr('id');p 태그에 id를 pid로 설정한다. attr()
- Radio
<!-- radio -->
<ul>
<li><input type="radio" name="ra" value="apple">사과</li>
<li><input type="radio" name="ra" value="banana">바나나</li>
<li><input type="radio" name="ra" value="berry">딸기</li>
</ul>
<button type="button" id="choice">선택</button>
<script type="text/javascript">
$(document).ready(function() {
$('#choice').click(function() {
// getter
let value = $("input[name='ra']:checked").val();
alert(value);
// setter
$("input[name='ra']").val([ "banana" ]);
});
});
/script>
- Checkbox
<!-- checkbox -->
<input type="checkbox" id="ch">그림그리기<br><br>
<button type="button" id="btn">체크</button>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
// getter
/* let check = $("#ch").is(":checked"); */
let check = $("input:checkbox[id='ch']").is(":checked");
alert(check);
// setter
$("#ch").prop("checked", false);
});
});
</script>
- Tag 추가
<!-- tag 추가 -->
<div id="demo"></div>
<button type="button">추가</button>
<script type="text/javascript">
$('button').click(function() {
// 문자열로 추가
let txt = "<p>추가된 p태그</p>";
$("#demo").append(txt);
// js
let js = document.createElement("h3");
js.innerHTML = '추가된 h3 태그';
$("#demo").append(js);
// jquery
let jq = $("<p></p>").html("jquery p 태그 추가");
$("#demo").append(jq);
});
</script>'WEB' 카테고리의 다른 글
| [Server] servlet - servlet 통신 (0) | 2022.06.30 |
|---|---|
| [Server] servlet 개념 (0) | 2022.06.30 |
| [JSON] JSON이란? (0) | 2022.06.28 |
| [XML] XML이란? (0) | 2022.06.28 |
| [JS] 개념 (0) | 2022.06.24 |
