반복문 each

 

 

여러개의 태그가 선택되었을 때 각 태그 하나하나 돌아가면서 설정한 기능을 실행하는 것.

(jQuery에서만 가능한 반복문이다)

 

 

 

each(function(실행되고 있는 태그의 순서를 나타내는 매개변수){

....})

 

 

 

 

 

ex)

 

<HTML>

이렇게 10까지.

 

 

 

<js, OWL 이용 >

 

 

 

 

 

위의 슬라이드 기능의 ani 함수를

 

 

 

이런식으로 나타낼 수 있다.

 

 

 

 

 

저작자표시 비영리 동일조건

'프론트엔드 > ㄴjQuery' 카테고리의 다른 글

<jQuery> 슬라이드 만들기  (0) 2017.08.25
<jQuery> 애니메이션 만들기 (animate)  (0) 2017.08.18
<jQuery> 선택자와 스타일(css)  (0) 2017.08.18
<jQuery> js와 jQuery 같이 쓰기  (0) 2017.08.18
<jQuery> js 파일연결이 헤드 혹은 태그보다 위에 있을 때 해결방안  (0) 2017.08.18

 

* 슬라이드 *

 

설정 가능한 옵션

 

1. 슬라이드 너비

2. 한 화면에 뜨는 박스 갯수

3. 총 박스 갯수

 

 

 

 

<HTML>

 

 

 

<CSS>

 

 

 

 

<JS>

 

1. 변수, 시작화면 선언

 

 

 

2. 함수 부분

 

 

 

 

3. 본체. 실제로 실행되는 부분

 

 

 

 

 

 

 

저작자표시 비영리 동일조건

'프론트엔드 > ㄴjQuery' 카테고리의 다른 글

<jQuery> each 반복문  (0) 2017.08.25
<jQuery> 애니메이션 만들기 (animate)  (0) 2017.08.18
<jQuery> 선택자와 스타일(css)  (0) 2017.08.18
<jQuery> js와 jQuery 같이 쓰기  (0) 2017.08.18
<jQuery> js 파일연결이 헤드 혹은 태그보다 위에 있을 때 해결방안  (0) 2017.08.18

jQuery로 애니메이션 만들기 


.animate({속성1 : 속성값1, 속성2:속성값2, 속성3:속성값3..},시간,콜백(애니메이션이 끝나고 할 행동))


* 속도 default : 400ms = .4s

* slow : 600ms

*fast : 200ms

* 직접 시간 입력 가능 







<HTML>




<CSS>




<화면>






* 일반 CSS 속성 넣기 *







* 애니메이트는 css와 같이 할 수 없다. 무조건 객체 이용해야함 *










1. 속성과 속성값 : CSS문법일 경우 ''를 붙이고 js 문법일 경우에는 안붙인다. px 는 안붙인다. 




- 안됨



- 되는경우





*margin-left의 경우 


- 안됨




-되는경우







2. 속도를 넣은 animate ( 오른쪽으로 200px 가는 애니메이션. css에서 position : relative를 넣어놔서 left만 써도 사용가능하다)








3. 한 애니메이트에 여러 동작 넣기 




: 동시에 여러 동작이 같이 실행됨 





4. 여러 animate가 들어간 경우 ( 같은 선택자 ) 



: 한 동작이 끝난 후 다음 동작이 실행됨. 





5. 여러 animate가 들어간 경우 (다른 선택자)



: 동시에 동작 실행






6. 콜백 : animation이 끝난 후 시행할 것 


아래의 그림은 콜백으로 많이 중첩된 콜백지옥이다. 

* 해결방안 : es6 - promise, await / async : 차차 공부할 예정. ie 낮은 버전에서 지원이 안되지만 webpack을 이용하면 사용 가능하다. 







*7. toggle : 있으면 없어지고 없으면 생긴다. 






저작자표시 비영리 동일조건

'프론트엔드 > ㄴjQuery' 카테고리의 다른 글

<jQuery> each 반복문  (0) 2017.08.25
<jQuery> 슬라이드 만들기  (0) 2017.08.25
<jQuery> 선택자와 스타일(css)  (0) 2017.08.18
<jQuery> js와 jQuery 같이 쓰기  (0) 2017.08.18
<jQuery> js 파일연결이 헤드 혹은 태그보다 위에 있을 때 해결방안  (0) 2017.08.18

선택자와 스타일(css) 



<HTML>




<CSS>




<화면>


1. 스타일 

.css('속성','속성값'); 




여러개 : 객체를 이용한다. 

.css({'속성1' : '속성값1', '속성2' : '속성값2' ... })  










2. 선택자 


1)  제 3자. 대상 - 그냥 css처럼 선택한다 

2) 부모 - parent, parents

parent : 바로 위의 부모 ( 선택가능, 굳이 선택할 필요는 없음 ) 

parents : 여러 부모 ( 선택가능 )

2) 자식 - children : 바로 아래 자식. (선택가능)

3) 형제 : siblings (선택가능)

4) 자손 : find

아래에 있는 모든 자손. (선택필수)

5) 순서로 선택하기 : nth-child()(1부터시작) , eq()(0부터시작)











1) 제 3자. 대상

css 에서 사용했던 모든 특수문자가 가능하다






2) 부모 



- parent 속성이 따로 없어도 잘 선택한다. 






- parent('.grand') : 안된다. 오류도 안남 ( 그냥 선택자의 문제로 처리됨 )






- parents('.grand') 



- parents('.parent') 



- parents() : 모두. body까지 된다. 








3) 자식 : children 




- grand의 children()





-parent 의 children()





-parent의 children('.child2')









4) 형제 : siblings 



-child2의 siblings()





-child2의 siblings('..child1')









5) 자손 : find 



-grand의 fine() : find()는 선택이 필수이므로 아무일도 안일어난다 ( 오류도 안남 )





-grand의 find('.parent')




-grand의 find('.child2') : 잘 동작한다





-grand의 .children('.child2') : 바로 아래 자식만 가능하므로 안된다. 








6) 인덱스 (index) : 순서로 선택하기. 



(1) : css에서처럼 nth-child로 선택하기 : 1부터 index 시작





(2) .eq이용하기 : 0부터 index시작 









- 한번에 붙여서도 가능하다. 바로 그 대상에게 적용 됨







- 인덱스 응용. 



저작자표시 비영리 동일조건

'프론트엔드 > ㄴjQuery' 카테고리의 다른 글

<jQuery> 슬라이드 만들기  (0) 2017.08.25
<jQuery> 애니메이션 만들기 (animate)  (0) 2017.08.18
<jQuery> js와 jQuery 같이 쓰기  (0) 2017.08.18
<jQuery> js 파일연결이 헤드 혹은 태그보다 위에 있을 때 해결방안  (0) 2017.08.18
<jQuery> 이벤트 (event)  (0) 2017.08.18

jQuery는 js의 비교대상이 아닌 라이브러리 이므로 ( 본체 - 라이브러리 관계 ) jquery안에 js를 적절히 섞어서 쓸 수 있다 


* jquery는 jquery 파일을 읽고 진행하기 때문에 js 가 더 빠르다 (사람이 체감할 정도는 아니다)

*jquery는 명령어가 직관적이다 




<HTML>





<CSS>




<화면>



* 클릭하면 active class가 추가되고, 배경색이 변하는 기능. *









1. jQuery 이용하지 않고 구현하기 










2. jquery로 구현하기


* 좀 더 쉽게 변수 대신에 this 사용하기










* js, jQuery 섞어 사용해 더욱 직관적고 편하게 구현하기



저작자표시 비영리 동일조건

'프론트엔드 > ㄴjQuery' 카테고리의 다른 글

<jQuery> 애니메이션 만들기 (animate)  (0) 2017.08.18
<jQuery> 선택자와 스타일(css)  (0) 2017.08.18
<jQuery> js 파일연결이 헤드 혹은 태그보다 위에 있을 때 해결방안  (0) 2017.08.18
<jQuery> 이벤트 (event)  (0) 2017.08.18
<jQuery> 변수와 선택자  (0) 2017.08.18

 js 파일연결이 헤드 혹은 태그보다 위에 있을 때 해결방안 



* 아래의 경우들 *


1. 태그보다 위에



2. 태그보다 위에 ( 헤드 ) 


이런 경우엔 태그보다 파일이 먼저 읽히기 때문에 오류가 난다. 






1.. js 방식

window.onload = 함수; 






: 대입 ( = ) 의 개념이 이용되기 때문에 한번밖에 사용하지 못한다. 






2. jQuery 방식 



$(document).ready(함수); 




: 기능의 개념이기 때문에 여러번 사용 가능하다. 




저작자표시 비영리 동일조건

'프론트엔드 > ㄴjQuery' 카테고리의 다른 글

<jQuery> 선택자와 스타일(css)  (0) 2017.08.18
<jQuery> js와 jQuery 같이 쓰기  (0) 2017.08.18
<jQuery> 이벤트 (event)  (0) 2017.08.18
<jQuery> 변수와 선택자  (0) 2017.08.18
<jQuery> jQuery 시작하기.  (0) 2017.08.18

jQuery 이벤트 






<HTML>





<CSS>





<화면>



<변수>







1. js에서의 이벤트와 실행

.addEventListener('이벤트',함수)








2. jQuery에서의 이벤트와 실행 



1) 하나의 이벤트만 설정할 때 

.event(함수)








2) 여러 이벤트 설정 

addEventListener가 on으로 바뀐다.

.on('이벤트',함수);









-여러 이벤트 설정 가능 (띄어쓰기로 연달아 쓴다)




* addEventListener(js)에서는 불가능. click도 기능하지 않는다








- 여러 이벤트 마다 각각의 실행 설정하기 ( 객체 {} 이용 )

.on({이벤트1 : 함수2 , 이벤트2 : 함수2 , ...})


 






*addEventListener vs on* 


addEventListener : 일단 찾는다. 함수 안에 오류가 있으면 바로 오류가 뜬다 

on : 코드를 지나가도 대기상태. 대기상태에서도 오류가 안나고 이벤트를 실행해도 오류가 안난다 ( 오류가 있을 경우에도) 

저작자표시 비영리 동일조건

'프론트엔드 > ㄴjQuery' 카테고리의 다른 글

<jQuery> 선택자와 스타일(css)  (0) 2017.08.18
<jQuery> js와 jQuery 같이 쓰기  (0) 2017.08.18
<jQuery> js 파일연결이 헤드 혹은 태그보다 위에 있을 때 해결방안  (0) 2017.08.18
<jQuery> 변수와 선택자  (0) 2017.08.18
<jQuery> jQuery 시작하기.  (0) 2017.08.18



jQuery 변수와 선택자




<HTML>





<CSS>





<화면>








1. js 변수와 선택자 






2. jQuery 


* $ : jquery의 약자처럼 사용

* css의 선택자 방식과 비슷하다






↓ 더욱 압축한 것 




저작자표시 비영리 동일조건

'프론트엔드 > ㄴjQuery' 카테고리의 다른 글

<jQuery> 선택자와 스타일(css)  (0) 2017.08.18
<jQuery> js와 jQuery 같이 쓰기  (0) 2017.08.18
<jQuery> js 파일연결이 헤드 혹은 태그보다 위에 있을 때 해결방안  (0) 2017.08.18
<jQuery> 이벤트 (event)  (0) 2017.08.18
<jQuery> jQuery 시작하기.  (0) 2017.08.18

제이쿼리 

(자바스크립트 vs 제이쿼리 : 제이쿼리는 (한국)실무에서 많이 쓴다.) 


제이쿼리는 자바스크립트로 할 수 있는 것을 좀 더 쉽고 직관적인 문법형식으로 사용하는 '라이브러리'





<제이쿼리 설치>



1. 제이쿼리닷컴 접속 (http://jquery.com/)




* 제이쿼리의 여러 종류* 


1)그냥 보통 jquery





2) jquery ul : 효과를 더 많이 줌. 사람들이 좋아하는 기능을 많이 넣은 것. 확장팩이라고 이해하면 쉽다. 






3) jquery mobile : 앱 어플리케이션을 만들기 위한 것. 잘 안쓴다 ( react / angular나 다른 native한 것 쓰는게 좋다) 







2. 다운로드 버튼 누르기. 







3. 원하는 버전 다운로드 


* jquery의 버전 * 


원래는 1.11.0( ie8 지원 ) , 2.1.0 ( ie지원 x ) 으로 나눠져 있었따. 

두개를 통합해서 jquery 3버전이 나옴.. ie는 지원하지 않도록 통합되었다 (js 발전으로 이렇게 됬다. ) 



* 버전이 바뀌면 동작을 안하는 경우도 있다. 

1.7 이하면 기존에 있던 파일을 쓰는게 낫다. 



*slim version : 통신버전빠짐. ui만 신경쓰는 것 ( 화면만 조작 )  





*npm으로도 다운로드 가능하다 (node package manager)


*cdn도 가능 (cdn : 가장 가까운 서버에 있는 것 가져다 쓰는 것)





4. 다운로드한 파일 중 .min과 일반 파일 중 원하는 것을 골라 사용하기 좋은 폴더에 넣고 html 파일과 연결한다.


 

(연결예시)


 

저작자표시 비영리 동일조건

'프론트엔드 > ㄴjQuery' 카테고리의 다른 글

<jQuery> 선택자와 스타일(css)  (0) 2017.08.18
<jQuery> js와 jQuery 같이 쓰기  (0) 2017.08.18
<jQuery> js 파일연결이 헤드 혹은 태그보다 위에 있을 때 해결방안  (0) 2017.08.18
<jQuery> 이벤트 (event)  (0) 2017.08.18
<jQuery> 변수와 선택자  (0) 2017.08.18

+ Recent posts

티스토리툴바