FrontEnd/JQuery

JQuery 사이트에서 css 파일을 불러와서 사용함.

웹이란 ? 웹브라우저란 웹 호스팅 웹은 'World Wide Web'의 약어로서 간단하게 WWW로 표현한다. 웹이란 인터넷에 연결된 컴퓨터를 통해, 전 세계 사람들이 정보를 제공하고 공유할 수 있는 사이버 공간을 의미한다. 웹 사이트에 구축된 웹 페이지, 즉 HTML 문서를 볼 수 있는 응용 프로그램을 의미한다. 인터넷 익스플로러, 크롬, 사파리, 파이어폭스 등이 여기에 속한다. 인터넷 연결 전문 업체에서 자신이 보유한 웹 서버와 네트워크를 이용해서 개인이나 기관에게 홈 페이지를 구축할 수 있도록 서버 상에 사용자 계정과 디스크 공간을 임대해주는 서비스이다.

FrontEnd/JQuery 2022. 7. 14. 19:56

JQuery ( offset(), hasClass(), toggleClass() ) hambuger_slide_accordion_menu

offset() 선택된 요소의 상대적 위치를 나타내는 좌표 값을 구하는데 사용 offset().top은 수직 방향의 좌표이고, offset().left는 수평 방향의 좌표이다. hasClass() 특정 클레스를 가졌으면, true 아니면 false 값 반환. $("p").hasClass("intro") 요소 intro 클레스 가졌으면 true 없으면 false toggleClass() 매우 자주 사용. 선택된 요소에 특정 클레스를 더하고 빼는 것을 반복. $("p").toggleClass("main")는 요소에 'main'클레스를 더하고 빼는 것을 반복한다. hambuger_slide_accordion_menu 메뉴 1 서브메뉴 1 서브메뉴 2 서브메뉴 3 메뉴 2 서브메뉴 1 서브메뉴 2 메뉴 3 서브..

FrontEnd/JQuery 2022. 7. 14. 19:42

JQuery Widget( Accordion Pannel, Image Slider, Dropdown Menu, Smooth Scrolling, Hamburger slide Accordion Menu )

제이쿼리 위젯(Widget) 롤오버 버튼, 달력, 이미지 슬라이더, 드롭다운 메뉴, 아코디언 패널, 다이얼로그 박스 등의 기능을 제공하는 도구 모음 아코디언 패널 (Accordion Pannel) 아코디언 악기와 같이 패널의 내용이 아래로 펼쳐지는 위젯 웹이란? 웹은 'World Wide Web'의 약어로서 간단하게 WWW로 표현한다. 웹이란 인터넷에 연결된 컴퓨터를 통해 전 세계 사람들이 정보를 제공하고 공유할 수 있는 사이버 공간을 의미한다. 웹 브라우저 웹 사이트에 구축된 웹 페이지, 즉 HTML 문서를 볼 수 있는 응용 프로그램을 의미한다.인터넷 익스플로러, 크롬, 사파리, 파이어폭스 등의 프로그램이 여기에 속한다. 웹 호스팅 인터넷 전문 업체에서 자신이 보유한 웹 서버와 네트워크를 이용하여 개인..

FrontEnd/JQuery 2022. 7. 14. 19:11

JQuery ( animate(), stop() )

요소의 크기, 투명도, 경계선, 위치 등 애니메이션 효과를 줄 수 있다. animate() 선택된 요소에 애니메이션 효과를 줌 (position을 주어야만 사용 가능) $("선택자").animate({스타일},실행_시간) left, right, top, bottom, width, height, margin, padding 등이 있으며, 시간은 ms 단위를 사용 default는 400값을 갖는다. stop() 선택된 요소에서 진행 중인 애니메이션을 멈춤 animate() animate() animate()_0 어려울 때 친구가 진정한 친구이다. animation effects reset 어려울 때, 친구가 진정한 친구이다. animation effects stop 어려울 때, 친구가 진정한 친구이다. 기차..

FrontEnd/JQuery 2022. 7. 14. 17:46

JQuery ( show(), hide(), toggle(), fadeIn(), fadeOut(), fadeTo(), fadeToggle(), slideUp(), slideDown(), slideToggle() )

show() hide() toggle() fadeIn() 점차 나타남 fadeOut() 점차 사라짐 fadeTo() fadeTo(시간,투명도) | fadeTo(1000,0.1) 1초 동안 0.1투명도 지정 fadeToggle() slideUp() slideDown() slideToggle() hide(), show(), toggle() hide() show() toggle() 어려울 때, 친구가 진정한 친구이다. fadeOut(), fadeIn() fadeOut() fadeIn() 어려울 때, 친구가 진정한 친구이다. fadeOut()와 fadeIn() 는 hide()와 show() 처럼 p테그를 사라지고 나타내지만, 천천히 사라지고 천천히 나타내는 효과가 있다. fadeTo() fadeTo() 어려울 ..

FrontEnd/JQuery 2022. 7. 14. 17:26

JQuery ( on() )

이벤트 등록 앞에서는 하나의 이벤트가 발생했을 때 그에 해당되는 이벤트 메써드로 발생된 이벤트를 처리했는데, 예를 들어서 사용자가 마우스를 클릭하면 click 이벤트가 발생되고 click() 매써드로 이 이벤트를 처리했다. 비슷한 예로 mouseenter 이벤트가 발생되면 이 이벤트를 처리하는 mouseenter() 메써드로 처리할 수 있다. 제이쿼리에서는 on() 매써드를 사용해서 발생되는 이벤트를 이벤트 핸들러에 직접 등록할 수 있다. on() 매써드로 다수의 이벤트를 처리해보자. https://dev-jones.tistory.com/97 ** 이벤트 등록자 on() 메써드 ▪ 하나의 이벤트 등록 on() 매써드 $(선택자).on(“이벤트”, funcrion() { 이벤트_핸들러_코드1; }); 구문..

FrontEnd/JQuery 2022. 7. 13. 19:11

마우스이벤트(click(),dbclick(),mouseenter(),mouseleave())키보드이벤트(keypress(),keydown(),keyup())폼이벤트(focus(),blur(),change())문서윈도우이벤트(ready(),resize(),scroll())

이벤트와 효과 마우스, 키보드, 폼, 윈도우(창) 등의 조작으로 인해 발생되는 이벤트를 제이쿼리로 처리하고, 페이지 요소들에 대해 숨기기(Hide), 페이드(Fade), 슬라이드(Slide), 그리고 애니메이션(Animation) 등, 다양한 효과를 주는 제이쿼리 메써드도 알아본다. 구분 메써드 설명 마우스 이벤트 click() 선택 요소의 클릭 이벤트 처리 dblclick() 선택 요소의 더블클릭 이벤트 처리 mouseenter() 선택 요소에 마우스 포인터가 들어갔을 때 발생되는 이벤트 처리 mouseleave() 선택 요소에서 마우스 포인터가 벗어났을 때 발생되는 이벤트 처리 ( mouseover, mouseout은 직접 이벤트를 걸지않은 자식요소에 마우스 포인터가 와도 발생하지만, mouseent..

FrontEnd/JQuery 2022. 7. 13. 19:03

parent(), find(), siblings()

요소 탐색 DOM 트리에서 현재 요소를 기준으로 특정 요소를 찾는 다양한 메써드를 제공한다. parent() 현재 요소의 부모 요소를 찾아서 그 요소의 CSS를 조작 find() 현재 요소를 기준으로 하위에 있는 특정 요소를 찾아서 CSS를 조작 siblings() 선택된 요소의 형제 요소들을 찾아서 CSS를 조작 parent() $("span").parent() parent() 메써드 항목 1 항목 2 품목 1 품목 2 span의 parent()인 두번째 li에 green 보더를 넣어주고, li의 parent()인 ul에 blue, ul의 부모인 div에 dotted red를 준다. find() $("div").find("ul") find() 메써드 항목1 항목2 품목1 품목2 div안에 find("u..

FrontEnd/JQuery 2022. 7. 12. 18:47

페이징

1 2 3

티스토리툴바