본문 바로가기

WEB기초/JQuery13

[jquery] jQuery 입문 05 (170330) jQuery 입문 05 QUIZ > 버튼을 누르면 버튼과 함께 토글되는 상자 ANSWER >- 메뉴와 버튼을 함께 움직이기 위해서 animate를 잘 활용한다. addClass(), removeClass(), toggleClass() 적용해보기- 특정 시점에 클래스를 적용하려할 때 이용 ** 출력 결과 ** 자손 요소를 이용했을 때 부모요소에 클래스 추가하기 (헷갈림 주의!) (많이 쓰임 주의!)- parent( ), siblings( ) 사용됨- 클릭한 것의 상위로 가면 li 이다.- li 에 클래스를 추가하고- li 의 this를 제외한 나머지 형제의 클래스를 제거한다. ** 출력 결과 ** 속성추가하기 : attr( )- $( ).attr("src") : src속성을 읽어온다 ===> string타.. 2017. 3. 30.
[jquery] jQuery 입문 04 (170329) jQuery 입문 04 jQuery의 여러가지 Action- click( )- show( ), hide( ), toggle( )- fadeIn( ), fadeOut( ), fadeToggle( )- addClass("클래스명"), .removeClass( ), .toggleClass( )- slideUp( ), slideDown( ), slideToggle( )- mouseover( ), mouseout( ) => jQuery입문 03에서 설명했던 것과 동일하게 시간, function( ) 속성을 이용 가능하다. QUIZ 1 > jquery 이용하여 동적으로 박스 추가하기 ANSWER > stop ( ) - .stop( )은 끝나지 않은 애니메이션을 정지하고 새로 시작시킬 때 사용한다. animate( .. 2017. 3. 29.
[jquery] jQuery 입문 03 (170329) jQuery 입문 03 **중요해서 복습**jquery 개요함수의 형태var a = function(){ };=> 제이쿼리도 $라는 변수에 넣은 일종의 함수라고 보면 편하다. var $ = function(){ }; $( ); 형태를 이용하면 [ ] (외형상 배열)로 변한다. ( jquery 기능이 합쳐진 array로 바뀐다 )"div", "p", "#one", ".gura" 등 ===> selector 개체 생성되는 시점 (javascript 과 일반요소)- xxx.html의 body속 요소가 생성되는 시점 : 페이지가 로딩될 때 - $(""), $(""), $("") 가 생성되는 시점 : 원하는 시점에 가능하다. 체인 형태 - $( ).text().css().on(); 이러한 형태이다- value값이.. 2017. 3. 29.
[jquery] jQuery 입문 02 (170328) jQuery 입문 02 div 요소 중 특정 요소 동작시키기- div:even 짝수 인덱스만 선택해서 동작- div:odd홀수 인덱스만 선택해서 동작- div:first첫번째 요소 선택해 동작- div:last마지막 요소 선택해 동작 ** 출력 결과 ** 체인형태로 action적용하기- 같은 동작명이지만 기능이 반대인 동작 주의하기! ** 출력 결과 ** head에서 jquery 실행시키기- document.ready(function(){ });- window.onload=function(){ });- document.addEventListener("DOMContentLoaded", function(){ }); ** 출력 결과 ** - 이미지 로딩을 먼저 하지 않는 $(document).ready(fun.. 2017. 3. 28.

티스토리툴바