[HTML, CSS, JS] jQuery 2
jQuery
오늘은 jQuery 를 배워보겠습니다.
jQuery는 JavaScript로 만든 사용하기 편한 무료 라이브러리 입니다.
JavaScript는 특정 browser 제대로 작동하지 않는 경우가 있습니다.
그렇지만 jQuery의 경우 모든 browser 에서 동일하게 작동합니다.
jQuery 사용방법
설치도 가능하지만 CDN방식을 이용하려고 합니다.
CDN(Content Delivery Network) 방식은 네트워크를 통해서 라이브러리를 동적으로 다운로드해서 사용하는 개념입니다.
하기코드는 jQuery사이트에서 직점 복사할 수 있습니다.
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
jQuery 첫걸음
그렇다면 jQuery 사용하여 보도록 하겠습니다.
jQuery는 공부할때 가장먼저 배워야하는 것은 바로 Selector 입니다.
하기 예제를 통하여 Selector에 대하여 자세하게 알아보겠습니다.
HTML
<script src="js/05_jQuery.js"></script>
</head>
<body>
<h1>jQuery 연습입니다.!!</h1>
<div>
<ul>
<!--class는 중복해서 사용가-->
<li class="region">서울</li>
<!--ID 는 중복해서 사용 불가능-->
<li id="haha">인천</li>
<li class="region">강원</li>
</ul>
<ol>
<li id="hong">홍길동</li>
<li>신사임당</li>
<li>강감찬</li>
</ol>
<input type="button" value="클릭클릭!" onclick="my_func()">
</div>
</body>
</html>
상기 코드에서 ‘클릭클릭’이라는 버튼을 누르면 my_func()라는 함수가 호출됩니다.
my_func()는 HTML에서 명시한 것 처럼 js/05_jQuery.js 에 위치하고 있습니다.
my_func()를 살펴보도록 하겠습니다.
function my_func() {
alert("함수가 호출되요") // print 기능으로 활용가능합니다!
1. 전체 선택자(universal selector)
$("*").css("color","red") // * 전체선택자
$("*").text() // 태그안에 모든 글자를 가져옵니다
2. 태그 선택자(tag selector)
$("li").remove() // li 테그를 모두 삭제합니다. 인자와 항목까지 전부삭제
3. 아이디 선택자(id selector) 중복하여 사용불가능
$("#haha").text() // # ID지칭
// 인자가 없으면 값을 알아오라는 의미, 인자가 있으면 값을 변경
$("#haha").text("울산")
4. 클래스 선택자 (class selector) 중복하여 사용가능
$(".region").css("background-color", "yellow")
5. 구조 선택자 (자식 선택자 후손 선택자)
$("ol > *").remove() // ol > * ol에 자식으로 있는 것들 중 모든것
$("ol > li").css("color", "blue") // ol > * ol에 자식으로 있는 것들중 li
$("div li").css("color", "pink") // div 후손으로 있는 것들 중 li를 모두 선택
6. 구조 선택자 (형제 선택자)
$("#haha + li").css("color", "pink") // id의 형제를 찾고 +를 이용하여 바로 다음 형제를 찾는 것이 가능
$("#hong ~ li").css("color", "pink") //id 이후의 모든 형제를 찾음 (자신제외)
7. 속성 선택자
$("[id]").css("color", "yellow") // id 모든 속성을 전부 찾음
$("[class]").css("color", "red") // class 모든 속성을 전부 찾음
// 이 7가지를 조합하면 왠만한 element는 지정하는게 가능 !!!!
상기 코드에 주석을 처리하여 어떤 element 를 지정하는지 알아보았습니다.
Leave a comment