728x90
All Selector
모든 Dom 선택
$("*")
ID selector
해당되는 id를 가진 dom을 선택
$("#id")
element selector
해당 이름을 가진 dom을 선택
$("elementName")
class Selector
CSS 중 해당되는 클래스 이름을 가지는 dom을 선택
$(".className")
multiple selector
해당되는 선택자를 가지는 모든 dom을 선택
$("Name1, Name2, Name3 ")
예시 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID 셀렉터 연습1</title>
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert($("#unique2").html());
});
</script>
</head>
<body>
<div class="class1">안녕하세요.</div>
<div id="unique2">제이쿼리입니다!!</div>
<div id="unique3">
<p>제이쿼리는 아주 쉽습니다!!!</p>
</div>
</body>
</html>
1. 제이쿼리 사용을 위한 CDN
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
2. id값을 검색하여 해당 태그의 값을 불러옴 (= 제이쿼리입니다!! )
alert($("#unique2").html());
예시 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID 셀렉터 연습1</title>
<script src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
<script type="text/javascript">
function addHtml(){
$("#article").html('안녕하세요' + '<br>');
}
</script>
</head>
<body>
<div>
<p id="article"></p>
</div>
<input type="button" value="추가하기" onclick="addHtml();"/>
</body>
</html>
1 id로 접근 >> 해당 id로 접근한 값에 안녕하세요가 추가
$("#article").html('안녕하세요' + '<br>');
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>엘러먼트 셀렉터 연습</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function addImage(){
$("div").html("<img src='../image/duke.png'>");
}
</script>
</head>
<body>
<div></div>
<div></div>
<input type="button" value="이미지 추가하기" onClick="addImage()" />
</body>
</html>div로 접근하기 때문에 각 div마다 이미지가 추가
(총 2개의 DIV마다 추가)
++ 기타
class 단위로 접근 >> 해당 function 수행시 이미지가 추가
function addImage(){
$(".class1").html("<img src='../image/duke.png'>");
}728x90
'개발' 카테고리의 다른 글
| 이클립스 : 톰캣에 프로젝트 추가가 불가능 할 때 (0) | 2020.11.08 |
|---|---|
| JSON (0) | 2020.08.09 |
| JSTL 표준 태그 라이브러리 (0) | 2020.08.01 |
| 표현 언어의 empty 연산자 (0) | 2020.07.04 |
| JSP의 usebean의 setProperty getProperty (0) | 2020.07.04 |