JQuery

개발새발 해도 개발자·2021년 10월 20일

jquery

목록 보기
1/1
post-thumbnail

JQuery(JavaScript Framework)
1.Decoupling (MVC 패턴? 인터페이스 캡슐화한 이유)
2.Easy (다른 언어와의 차이점?)
3.Ajax 지원 (Ajax 파악 불가)
4.Dom 처리 관리 (Dom: Document Object Model == 소스보기)
5.일관성 있는 event 처리

==> 3-rd part lib 이용 == CDN 사용

●톰캣 시 익스플로어 쓰는 이유: Cross Browsing 문제 해결을 위함 -->
JQuery가 해결

               **  ----------------UI------------------**

●javaScript <------> html
교집합 부분 = Coupling Script(static + dynamic) == 분리 시켜서 개발하자!!


●onload: element의 load 또는 image 또는 외부 모든 resource들이 load완료 시점

<body onload="javascript:init()">

●사용법
document.~.~.~.value = $(~)
●anonymous: 익명클래스, 일회용 클래스의 의미를 담고있음 (class/ function)
인스턴스 생성 후 () {~이름없는 객체 생성~}


● css <------> html
교집합 부분: coupling Script(static + design)
so css에서 제공하는 Selector개념을 만듬!!!!

Selector
사용법: [ tagName {~}, #id {~}, .class{~} ]

●<get/set>
.css(propertyName) == get
.css(propertyName.value) == set

●Div 와 Span는 묶어서 디자인 하는 용도(개행 여부)
Div: 줄바꿈
Span: 줄바꿈 x


●필터 selector(:사용한경우) : $('element:expresion')

ex) 1.form 필터 선택자
$('input:button')
$('input:checkbox') 등등

2.위치 필터 선택자 = $(element.위치정보)

$('input:first') = input에 제일 첫번째
$('input:last') = input에 제일 마지막
$('input:even') = input에서 짝수인 인데스(checkbox / radio는 화면에 보이지 않음!!!)
$('input:odd') = input에서 홀수인 인덱스(,,)

3.함수 필터 선택자 = $(element:function)

$('input:eq(0)') = input에서 0번째 인덱스
$('input:eq(12)') = input에서 12번째 인덱스
$('input:gt(11)') = input에서 11보다 큰 인덱스 리턴
$('input:it(11)') = input에서 11보다 작은 인덱스 리턴

4.기타 필터 선택자
$("p:contains('Frame')").css('color', 'red');
== sql like 개념?!? Frame을 포함하면 css 적용!!




1.button 전송 버튼을 눌렀을때 색 변경 되고 다시 눌렀을땐 유지
2.submit 버튼 클릭시 새 페이지를 보내는 것이니 색 다시 변경!! 처음 클릭시 변화 없음
3.reset 버튼 클릭시에도 색 다시 변경!! 처음 클릭시 변화 없음

profile
컴퓨터가 알아서 해주는건 없다. 게으른 개발자가 되자

0개의 댓글