FrontEnd/jQuery (8) 썸네일형 리스트형 [jQuery]Ajax 제이쿼리에서 에이젝스를 사용하는 방법은 다음과 같은데 여기서 살펴볼 것은 data : $('form').serialize()임 속성 data는 우리가 ajax를 통해 서버로 전송할 데이터를 말함 속성값으로 form태그를 넣었고 .serialize()라는 메소드를 이용했는데. 이는 태그의 value값을 리턴하게 됨 여기서는 form태그의 자식 태그인 option의 value값들을 리턴함 위 코드에서 dataType이 추가 되었는데 여기서 dataType을 json이라고 값을 주었다. 이는 무엇을 의미하냐면 이전에는 parse를 통해서 json객체의 속성들과 속성값들을 분류했는데, dataType을 지정하면 이것들을 제이쿼리에서 대신 처리해 준다. [jQuery]이벤트 , on , off 제이쿼리와 바닐라자바스크립트의 addEventListener의 차이는 위와 같다. 제이쿼리의 이벤트 메소드인.on()에 대해 알아보자. W3C의 설명은 다음과 같다. .on(events[selector1,selector2][data], handler(eventObject)) 우리가 아는 것은 events와 hander(eventObject))이다. 그렇다면 [selector][data]는 무엇을 의미할까? [selector]는 일종의 필터링 기능을 한다. 위 코드가 selector를 추가한 코드이다. ul태그의 a와 li에 이벤트를 발생시킨다. 그 예로 콘솔 값의 this는 ul태그가 아닌 이벤트가 발생하는 a와 li이다. 위 코드는 만약 $('body')부분이 ul태그였다면 실행되지 않았을 것이다. 하.. [jQuery] node 제어 API 이번에는 jquey를 이용하여 노드를 제어해보자! before after prepend append 모두 엘리멘트를 더하는 메소드이다. 차이점을 살펴보면 before 는 여기 에 추가되고 after는 여기 에 추가되고 prepend는 여기 content1 after는 content1 여기 에 추가된다. 다음 코드는 제거에 관한건데 remove 메소드와 empty메소드가 있다. remove는 엘리먼트를 전체를 삭제하고empty는 엘리먼트 자식노드 중 text노드를 삭제한다. 다음 코드는 노드 변경! 1. btn1엘리먼트를 클릭할시에 replaceAll 를 #target1의 엘리먼트에 덮어 쓴다. 2.1. btn2엘리먼트를 클릭할시에 #target1의 엘리먼트를 replaceWith로 덮어 쓴다. 순서만 다.. [jQuery] 조회범위 제한하기 위는 id가 active인 엘리먼트들의 class가 marked인 엘리먼트만 background를 변경한다. 위는 css 선택자의 효과를 이용하여 속성을 다룬 것이다. 다음은 find메소드를 이용한 것이다. #active객체에 .marked를 찾아서 css를 적용한다. 이때 find는 이렇게 부분만 선택해 사용할 수 있다. 이는 active엘리먼트의 css를 모두 적용하고 find를 이용해 .marked만 background를 추가적으로 적용한 예제이다. [jQuery]속성 제어API Javascript에서는 객체의 속성값에 접근하기 위해서 getAttribute()를 사용했어야 했다. jQuery는 다음과 같이 아이디가 target인 엘리먼트를 제이쿼리 객체로 t에 두고 attr()를 사용해서 값을 불러오거나 변경한다. 애트리뷰트 값뿐만 아니라 prop를 이용해서 프로퍼티를 리턴해 줄 수도 있다. 아래의 t2를 보게 되면 attr()은 cheked 속성을 물어보면 속성값을 리턴하지만 prop()는 존재 여부에 따라 true false 를 리턴한다. [jQuery]map메소드 map메소드는 다음과 같이 객체의 배열을들 모두 순회하는 기능을 가졌다. 여기서 재밌는건 li.map(function(index,elem) 이부분인데 보통 함수의 파라미터값은 바깥에서 받는데 여기서 map과 같이 딸려오는 function은 자기 스스로 값을 얻고 움직인다. 그래서 index는 0~2까지의 순서를 받으며 실행되고 elem는 각각의 index에 맞는 li의DOM객체 엘리먼트를 호출한다. 그래서 제이쿼리 메소드를 통해서 dom객체를 제이쿼리 객체로 바꾸고 제이쿼리 메소드인 css를 이용해서 색깔을 바꿨다. [jQuery] 객체 $('li') => 모든 li태그 앨리먼트를 가져옴 var li = $('li') li.css('text-decoration','underline') =>모든 li태그 앨리먼트의 css 속성 text-decoration의 속성값을 underline으로 바꿈 li.css('text-decoration') =>변수 li의 css 속성 text-decoration의 속성값을 호출함 그렇다면 for(var i =0; i [jQuery]기본문법 일반적인 형태$('선택자').jQuery객체(객체의 속성); 여기서 $()는 jQuery함수로 jQuery 객체를 리턴함jQuery객체는 메소드가 포함되어 있음 예시$('li').css('color', 'red'); 제이쿼리 함수를 실행하는데 li태그 전체를 선택자로 둔다. 제이쿼리 함수의 객체인 css는 속성값이 메소드이며 이는 css값을 변환하는 기능을 가진다. 이전 1 다음
