반응형
| 메서드명 | 설명 |
| addClass() | 문서 객체의 클래스 속성을 추가함 |
| removeClass() | 문서 객체의 클래스 속성을 제거함 |
| attr() | 속성과 관련된 기능을 수행 |
| removeAttr() | 객체의 속성을 제거 |
| css() | 스타일과 관련된 기능을 수행 |
| html() | 문서 객체 내부의 html 태그와 관련된 기능을 수행 |
| text() | 문서 객체 내부의 text(문자열)에 관련된 모든 기능을 수행 |
| remove() | 특정 문서 객체를 제거 |
| empty() | 특정 문서 객체의 자식을 모두 제거 |
| clone() | 문서 객체를 복사 |
| $(a).prepend(b) | b를 a의 앞에 추가 |
| $(a).append(b) | b를 a의 뒤에 추가 |
| $(a).after(b) | b를 a의 뒤에 추가 |
| $(a).before(b) | b를 a의 앞에 추가 |
예제 코드 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<style type="text/css">
.back{
color: yellow; /* font 색 */
}
</style>
</head>
<body>
<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>27</td>
</tr>
<tr class="cls">
<th>3</th><td>이초희</td><td>29</td>
</tr>
</table>
<p>p tag</p>
<button type="button" id="btn">버튼</button>
<script type="text/javascript">
$(document).ready(function name() {
$("tr.cls").mouseover(function() {
//JS시 이런식으로 접근
//document.getElementsByClassName('cls').style.backgroundColor
//jQuery (property, value)
$(this).css('background','green'); //현재 접근되어진 this
});
$("tr.cls").mouseout(function () {
$(this).css('background','white');
});
//클릭시에 클릭한 부분의 데이터가 p tag에 출력이 되도록 하라.
$("td").click(function () {
$("p").text($(this).text());
});
//$('btn').click('function'); 과 동일하다
$('#btn').click(function (){
//setter
$('p').css('background', "#0000ff");
$('p').text('여기가 p tag');
//getter
let color = $('p').css('background'); //color값 return 받기.. property값만 넣어서!
let text = $('p').text();//text값 return받기
//alert(color);
//attribute
//속성을 추가
//JS
//document.getElementsByTagName('p').setAttribute(name,value);
//document.getElementsByTagName('p').getAttribute(name);
//jQuery
$("p").attr("id","pid"); //p태그에 id=pid를 추가
let id = $("p").attr("id"); //getter
alert(id);
//$("p").addClass("back"); //p태그에 class=back 추가
$("p").attr("class","back");
//html(), text(), val(), css(), attr(), prop() 정리하기
//class 지우기
//$("p").attr("class","");
$("p").removeClass('back');
$('tr').attr('class','test');
});
});
</script>
</body>
</html>결과
| 번호 | 이름 | 나이 |
|---|---|---|
| 1 | 박남규 | 24 |
| 2 | 이엄지 | 27 |
| 3 | 이초희 | 29 |
p tag
예제 코드 2
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- 데이터 넣기 -->
<h1>수영시합</h1>
<table border="1">
<tr>
<th>title</th><th>name</th><th>time</th>
</tr>
<tr>
<th>우승</th><td></td><td><
</tr>
<tr>
<th>2위</th><td></td><td><
</tr>
<tr>
<th>3위</th><td></td><td><
</tr>
</table>
<script type="text/javascript">
let woman = [ //back end 에서 가져온 data
["",""],
["성춘향","01:06:11"],
["향단이","01:18:23"],
["심청이","01:23:51"]
];
console.log(woman.length);
console.log(woman[1].length);
for(i=0; i < woman.length; i++){ //4
for(j=0; j < woman[i].length; j++){ //2
$("tr:eq("+ i +") td:eq("+ j +")").html(woman[i][j]);
}
}
//$("tr:eq(1) td:eq(0)").html('input data'); //tr : 1번째, td : 0번째
</script>
</body>
</html>수영시합
| title | name | time |
|---|---|---|
| 우승 | 성춘향 | 01:06:11 |
| 2위 | 향단이 | 01:18:23 |
| 3위 | 심청이 | 01:23:51 |
예제 코드 3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<!-- radio -->
<ul>
<li><input type="radio" name="radioTest" value="apple" checked="checked">사과</li>
<li><input type="radio" name="radioTest" value="peach">복숭아</li>
<li><input type="radio" name="radioTest" value="banana">바나나</li>
</ul>
<button type="button" id="choice">선택</button>
<br><br>
<script type="text/javascript">
$(document).ready(function (){
$("#choice").click(function () {
//getter
let radioVal = $("input[name='radioTest']:checked").val();
alert(radioVal);
//setter
$("input[name='radioTest']").val(["banana"]);
});
});
</script>
<!-- checkbox -->
<input type="checkbox" id='ch'>그림그리기
<br>
<button type="button" id="btn">check</button>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
//getter 2가지방법
//let check = $("#ch").is(':checked');
let check = $("input:checkbox[id='ch']").is(':checked'); //위에와 같지만 다른 문법
alert(check);
//setter 2가지방법
//$("#ch").attr("checked", "checked");
$("#ch").prop("checked",false);
});
});
</script>
</body>
</html>결과
- 사과
- 복숭아
- 바나나
그림그리기
예제 코드 4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<!-- tag 추가 -->
<button type="button">태그 추가</button>
<script type="text/javascript">
$("button").click(function () {
//3가지 방법
//1.text로 추가
// let txt = "<p>p 태그 추가함 - text</p>";
// $("body").append(txt); //body태그에 추가
//2.JavaScript로 추가
// let obj = document.createElement('h3');
// obj.innerHTML = "h3 태그 추가 - JavaScript";
// $("body").append(obj);
//3.jQuery로 추가
let jqu = $("<p>").html('p 태그 추가 - jQuery'); //
$("body").append(jqu);
});
</script>
</body>
</html>결과
반응형
'프로그래밍 언어 > jQuery' 카테고리의 다른 글
| [jQuery] 간단한 예제를 통해 getter, setter 이해하기 (0) | 2021.06.10 |
|---|---|
| [jQuery] .click 함수 사용 (JavaScript onclick()와 차이점) (0) | 2021.06.10 |
| [jQuery] jQuery란 무엇일까? ( jQuery사용방법, JavaScript 와 jQuery 차이점 ) (0) | 2021.06.10 |