[Javascript] - Jquery

​

오늘은 즐거운 JQuery시간이네요!

​

jQuery등장 배경을 보면 javascript를 사용하면서 불편한점을 개선했다고 보시면 생각하시면 되는데요

예를 들면, 이벤트를 등록하려고 했을때 크롬이랑 익스플로어 여는 코드가 다르빈다.

크롬은 addEvnetListenr

익스플로어는 attachEvent입니다.

​

이처럼 jQuery는 모든 브라우저에서 동작하는 자바스크립트를 간편하게 사용할 수 있도록 단순화시킨 오픈소스 기반 라이브러리 입니다.

​

이 라이브러리를 사용할 수 있는 방법은 내부, 외부 방법이있스빈다.

먼저, 내부에서 다운로드 하는 방법입니다.

​

크롬창에서 jquery를 검색합니다.

들어가게 되면

이창이 뜨는데 download를 누르면 됩니다.

여기서 저희는 위에있는것을 다운받아서 할 것입니다.

compressed는 압축이 된것이고

이처럼 빈칸을 없애 데이터 저장공간을 늘렸습니다.

​

uncompressed는 다음과 같이 눈으로 볼 수 있게 정리되어있습니다.

​

​

아래 slim은 말그대로 더 적은 데이터가 있습니다.!!

저희는 이중 uncompressed를 다운받아 가져올 예정입니다!

​

오른쪽 마우스 버튼을 클릭을 누르면 다음과 같이뜨는데 여기서 다른 이름으로 저장을 누르시고 저는 바탕화면에 저장했습니다.

​

​

1. 글자 출력

​

항상 head부분에 src중 jquery를 가져오셔야합니다.

$("태그명").css("","")로 단일스타일 처리가 가능합니다.

다중스타일을 처리하기 위해서는

$("태그명").css({

}) 으로 객채처럼 처리하며, 안에 처리할때 대소문자 구분을 잘하셔야합니다.

​

2. 이벤트처리

 

 

this를 통해 내 마우스 올라가있는 곳에만 일처리가 되도록!

this를 사용하는 이유

1) cpu 부하를 줄여 처리 성능 향상

-> $()함수 실행 시, 지정된 선택자를 통해 HTML요소를 수집&처리 프로세스 동작

2) $()함수에 여러 선택자를 지정한 경우 처리 시점을 나눌 수 있음

​

3. 다중이벤트 처리

 

 

코드 :

이처럼 다중 이벤트를 처리 하기 위해서는 객체형으로 처리하면 됩니다.!

​

* 순서때문에 실행되지 않는 코드 처리 방법

$(document).ready(function(){()}

원래는 <h1>이 아래에 있으면 인터프리터(interpreter) 언어상 적용이 안된다. 왜냐하면 위부터 적용을 하기 때문에, 그러나 다음과 같은 코드를 넣게되면 준비가 되면 넣기떄문에 이또한 코드적용이 된다.

​

​

4. 인풋태그(inputtag)

코드 :

$("input"[type=text]".val("추가한데이터") // 를 통해 input의 text에 값을 넣을 수 있으며 $("input"[type=text]".attr("checked",ture) // 가 true이면 자동체크가 되어있다.

이렇게 checked를 쓰는 이유는 회원가입에서 모두 동의하기 기능때 자주 사용된다.

​

 

 

#shift

#unshift

#pop

#push

#javascipt

#js

#html

#body

#onclick

#body

#조건문

#배열문

#배열함수

#length

#property

#dom

#tagname

#img

#inputtage

#인풋태그

#jquery

#제이쿼리

​