HTML5 보다가
JQuery $가 나왔는데
이놈의 $가 무슨 뜻인지 모르겠는거야..
인터넷 찾다가
찾았어.. 근데 이게.. 복사 금지더라구 ㅠㅠ
그래서 그냥 그분이 쓴거 내가 조금 바꿔서 옮겨왔어욤.
1. JQuery의 개념이 뭐냐?
웹 페이지를 즉석에서 해석해서 변경하는 액션에 특화된 javascript 라이브러리임.
그러니깐, 모든 브라우저에는 엔진이 있는데, 이 엔진이 브라우저 언어들을 해석을 한다고,
해석하고 행동하는거지..
예를 들면 ,<script> 태그 안의 지시사항들을 해석해서 여러가지 action을 하는
javascript 해석 인터픠리터가 내장되어 있는거지..
이 JQuery를 누가 만들었냐면.... 존뤠식 http:// ejohn.org/about라고 하네
인터넷 찾아보니깐 <script> 주의 사항도 있음.
그분의 말에 의하면 보통 페이지에서는 레이지 로딩을 통해 여러 이미지와 파일들을 순차적으로 로딩할 필요없이
로딩되는 순으로 페이지에 표시하곤 하는데(이미지 파일은 여러파일을 동시에 받을 수 있듬)
<script>파일이 있으면 다른 이미지나 script 파일을 받아오지 못한데..
그래서 script부분은 페이지의 가장 하단에 위치하는것이 좋다고함..
JQuery로 애플리케이션을 개발할 때 파이어폭스나 크롬, Ex 사용하면되긴하는데
http://plugins.jquery.com/tag/jquery/
여기 보면 각종 플러그인이 업데이트 되고 있다고 하네..
2. $ 지시자 (<- 난 이놈을 알고 싶었듬)
$가 가지고 있는 의미는 JQuery의 단축표시래.
jQuery() -> $()
근데, 만약 다른 라이브러리에서 $를 다른의미로 사용할 때 충돌이 일어나게 되는데(보통 prototype.js와 충돌나곰함) 이거 피하려면
<script>
$.noConflict();
</script>
을 같이 해주면되.
$() 안에는 3가지를 넣을 수 있데..
ㄱ. $(css selector)
ㄴ. $(html element)
ㄷ. $(javascript Object)
css selector 역시 3가지임
ㄱ. h1, a, span 처럼 html element를 직접 사용하는 방법
ㄴ. .class_name 처럼 class이름을 적어주는 방법
ㄷ. #element_id 처럼 element에 할당한 아이디를 사용하는 방법
jQuery로 변환하믄!
ㄱ. $("h1")
ㄴ. $(".class_name")
ㄷ. $("#element_is")
이렇게 하믄 된데..
*폼 요소들을 가져오고 싶으면
ㄱ. $(":input")
ㄴ. $(":text")
ㄷ. $(":password")
이렇게 ':폼요소'를 지정하여 모두 가져올수있데
또, 요소의 상태에 대해서도 아래와 같이 하면 모두 가져올수 있다네.
ㄱ. $(":checked")
ㄴ. $(":selected")
ㄷ. $(":disabled")
ㄹ. $(":enabled")
3. Jquery로 요소가져오기
css의 경우에 하위의 지시자를 지정하고 싶을 때,
h1 #element_id{
}
h1 .class_name{
}
이런식이면 Jquery에서는
$("h1.class_name")
$("h1#element_is")
이렇게 하면,
<h1 class="class_name" />
<h1 id="element_id" />
의 요소를 지정할 수 있음.
만약 하위의 요소를 가져오고 싶은 경우라면?
<div>
<div> 하위요소 가져오기 </div>
</div>
$("div div")
이런식으로 하면됨.
4. DOM 구조 (http://w3.org/dom)
DOM 구조는 트리 형태래(=ㅅ= 뭐든 어디서든, 다 트리야.트리 게시판도 트리트리트리!!)
element.parent()
element.children()
element.children().first()
element.children().last()
element.children().eq(0);
element.children().eq(1);
element.children().eq(3);
element.children().slice(1,3);
->2번째, 3번째 요소 가져옴(0부터 시작하는 인덱스, 처음 범위 포함, 나중 범위 제외)
-> 슬라이스의 시작지점에 음수를 넣으면 뒤부터 가져옴
element.children().filter(".myclass"); -> myclass class가 선언된 요소만 남김
element.children().not(".mayclass"); -> myclass class가 선언된 요소는 제외
element.prev()
element.next()
element.find("ul") -> ul을 찾는다
element.siblings()
메소드를 통해 여기저기 트리 구조상의 element로 이동할 수 있다.
5. jQuery 변수 선언
일반적인 자바 스크립트는 var my 이런식으로 변수를 선언한다면 ,
jQuery는 $my 이런 표현으로 선언할 수 있듬.
6. css 와 jQuery 표현식의 차이점
[ css ] [ jQuery ]
border-style | borderStyle
border-width | borderWidth
Css 는 Css 표기법을 , jQuery는 DOM 표기법을 사용하기 때문이다.
참고 사이트 : http://www.oxfordu.net/webdesign/dom/straight_text.html
[출처] http://cafe.naver.com/junes81/6963의 [덩어리]님의 글
댓글 없음:
댓글 쓰기