연동법은 이전 강좌를 참조 하시면 되겠습니다.
2014/10/08 - [웹개발강좌/jQuery] - jQuery 1강 - jQuery 연동부터 $(document).ready() 이해하기
우선적으로 많이 사용되는 id,class,태그를 이용한 셀렉터에 대하여 알아보도록 하겠습니다.
jQuery의 코드는 $(셀렉터) 또는 jQuery(셀렉터) 구조로 시작이 됩니다.
id 셀렉터 : $("#셀렉터") = document.getelementbyid("셀렉터")
class 셀렉터 : $(".셀렉터") = document.getElementsByClassName("셀렉터")
태그 셀렉터 : $("태그명") = document.getelementsbytagname("셀렉터")
상단에 id,class,tag 별 셀렉터를 이용하여 태그내에 결과값을 출력해보는 예를 들어보겠습니다.
html페이지를 하나 생성 후 BODY 태그내에 다음 코드를 추가 합니다.
<div id="id_selector">아이디값으로알아보는 셀렉터</div> <div class="class_selector">클래스값으로 알아보는 셀렉터</div> <span>태그로 알아보는 셀렉터</span>
다음은 스크립트 코드를 작성해보도록 하겠습니다.
물론, jQuery 파일이 include 되있어야 하겠죠?
그리고 아직은 정확하게 아실필요는 없지만 태그에 감싸져 있는 내용들을 알기위해서는
$(셀렉터).text() 라는 함수를 적용하시면 되겠습니다.
$(function(){ //태그 id가 id_selector인 태그로 감싸져있는 문자열찾기 var id_selector = $("#id_selector").text(); //태그 class가 class_selector인 태그로 감싸져있는 문자열찾기 var class_selector = $(".class_selector").text(); //span 태그로 감싸져있는 문자열찾기 var tag_selector = $("span").text(); alert("셀렉터(id)값 : " + id_selector); alert("클래스(class)값 : " + class_selector); alert("태그(tag)값 : " + tag_selector); });
간단하게 셀렉터를 이용하여 각 태그내에 존재하는 텍스트내용을
ALERT 경고창에 띄워주는 기능을 구현한 코드를 작성해보았습니다.
실행결과 각 태그안에 존재하는 결과값들을
정상적으로 alert을 통하여 출력되었습니다.
한페이지에 여러개의 같은 태그 및 동일한 클래스명을 가지고 작업해야 하는 부분이 존재하는데
이 부분은 jQuery에서 사용되는 함수를 몇가지 익힌다음에
이어서 진행 하도록 하겠습니다.
by 개발로짜
jQuery 6강 - (Traversing) 특정 태그로부터 다른 태그의 위치 찾아보기 (2) | 2014.12.01 |
---|---|
jQuery 5강 - input태그,태그속성을 이용하여 셀렉터 알아보기 (1) | 2014.11.27 |
jQuery 4강 - attr() vs prop() 함수의 차이점을 비교하여 알아보자 (4) | 2014.11.15 |
jQuery 3강 - html() vs text() 함수 차이점 알아보기 + val() 함수를 이용한 input 태그의 값 확인 추가 (0) | 2014.11.12 |
jQuery 1강 - jQuery 연동부터 $(document).ready() 이해하기 (0) | 2014.10.08 |
안녕하세요 jQuery 강좌 첫번째 시간입니다.
jQuery 심플하게 설명하여 jquery 입문자들의 이해를 돕고자
시작하게 되었습니다.
해당 강좌는 jQuery를 설치하지 않고 CDN을 통하여 진행하도록 하겠습니다.^^
우선은 CDN URL을 스크립트태그의 src속성에 적용을 해주시면 되겠습니다.
jquery 최초 쓰던 버전이 1.3 버전이었는데 벌써 1.11에다가 2.x 버전까지 나왔네요!!
2.x 버전은 뭔지 추후에 확인 해봐야 겠습니다 ㅋ
우선은 간단 예제를 들기위한 것이므로 단순하게 1.11.0 버전은로 진행을 하겠습니다.
웹파일을 하나 생성 후 jQuery CDN 스크립트 태그를 include 해주는 것을 우선해주세요
위치는 <body> 태그내에 혹은 <head> 태그내에 상관은 없겠지만
기본적으로 저는 <head></head> 태그 사이에 넣도록 하겠습니다 .
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
다음으로는 $(document).ready()에 대하여 설명을 드리겠는대요
$(function(){ // code insert });
위와 같이 더욱 간결하게 사용하실수도 있습니다.
자바스크립트를 사용하셨던분이시라면 window.onload와 동일한 기능이라고 생각하시면 되겠는대요.
물론 window.onload, $(function(){}) , $(document).ready() 의 onload 스크립트 코드들은 body태그의 모든 태그들이
출력된 다음에 호출이 되는 코드입니다.
onload 라고 해서 모두 같은 1순위인건 아닙니다.
호출순서는
1. $(document).ready() = $(function(){})
2. window.onload
위 순서입니다.
즉, 둘이 동일하게 body 태그내의 모든 코드를 읽은 후 호출되는 onload 기능들이어도
순수 window.onload 코드가 가장 나중에 호출이 된다는 것입니다.
그렇다면 HTML 태그가 읽히는 예제를 한번 들어보도록 하겠습니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript"> alert("HEAD ALERT 경고창"); window.onload = function(){ alert("window.onload ALERT 경고창"); } $(document).ready(function(){ alert("$(document).ready ALERT 경고창"); }) </script> </head> <body> <script type="text/javascript"> alert("BODY ALERT 경고창"); </script> </body> </html>
샘플로 작성한 HTML 코드는 위와 같습니다.
총 4개의 ALERT이 화면에 뜨도록 작성해보았는대요
결과를 미리 예상해보자면
1차 ALERT 메시지 : HEAD ALERT 경고창
2차 ALERT 메시지 : BODY ALERT 경고창
3차 ALERT 메시지 : $(document).ready ALERT 경고창
4차 ALERT 메시지 : window.onload ALERT 경고창
코드 순서로 따지자면 결과가 위처럼 나올거 같습니다.
호출순서가
위 -> 아래 -> $(document).ready() -> window.onload 형태라고 말씀을 드렸으니까...
그렇다면 실제로 html 코드를 실행해보도록 하겠습니다.
실행결과 예상대로 결과값이 정상적으로 나왔습니다.
^^ 그럼 다음 포스팅으로 돌아오겠습니다~
by 개발로짜
jQuery 6강 - (Traversing) 특정 태그로부터 다른 태그의 위치 찾아보기 (2) | 2014.12.01 |
---|---|
jQuery 5강 - input태그,태그속성을 이용하여 셀렉터 알아보기 (1) | 2014.11.27 |
jQuery 4강 - attr() vs prop() 함수의 차이점을 비교하여 알아보자 (4) | 2014.11.15 |
jQuery 3강 - html() vs text() 함수 차이점 알아보기 + val() 함수를 이용한 input 태그의 값 확인 추가 (0) | 2014.11.12 |
jQuery 2강 - jQuery 자주 사용되는 id,class,태그별 셀렉터 맛보기 (0) | 2014.11.11 |