본문 바로가기

Frontend/jQuery11

화면 내리면 최상단으로 이동할 아이콘 뜨고, 맨 위에 있으면 아이콘 사라지게 하기 jquery 에서 제공해주는 스크롤 이벤트인 아래 두개로 구현이 가능하다 !!1. $(document).scroll() //스크롤이 변경될 때마다 이벤트를 발생시킴2. $("body").scrollTop() //브라우저의 스크롤 위치 값 //최상단이면 0을 반환함 * 구현방법 *1. Body 내에 아이콘부터 선언 12cs2. Head 내에 자바스크립트 선언123456789101112131415161718$(function(){ //*스크롤감지 $("body").scroll(function(){ var scrollLocation = $("body").scrollTop(); //브라우저의 스크롤 값 if(scrollLocation!=0){ //화면을 내리면 gotoTop 뜨게하고 $(".gotoTop").f.. 2018. 7. 13.
[jQuery] 동적으로 추가한 요소에 이벤트 걸기 (event binding) jQuery 동적 메소드를 통해서 DOM 객체에 추가했는데, 그 추가한 요소에 클릭이벤트를 걸으려니 계속 안됐다. .after() .html() .append() .prepend() 등.. 처음엔 jQuery Selector 를 잘못잡은건가 싶었지만 찾아보니 그게 아니었고, 동적으로 추가한 요소는 마우스 액션이 등록되어있지 않기 때문에 마우스 이벤트를 걸어도 아무 반응이 없었던거였다.. 그래서 찾은 해결방법. 당황하지 말고 아래의 'to-be' 로 적용하면 된다 :) // as-is $("#boardContent").on("click", function() { console.log( $(this).attr("id"); ); //-> not working }); // to-be $(document).on(.. 2018. 7. 10.
jQuery에서 지원하는 Ajax 사용법 $.ajax() function 사용법 : http://api.jQuery.com/jQuery.ajax/ 참조 asyn : boolean==> true(default) | falsemethod : http method==> GET(default) | POSTcontentType : 서버로 전송되는 Data 형식- ==> 'application/x-www-form-urlencoded; charset=UTF-8' (default)data : 서버로 전송하는 QueryString- ==> Object | StringdataType : 서버에서 받는 Data 형식- ==> default : Intelligent Guess (xml, json, script, html...)success : function(val.. 2018. 5. 23.
jQuery Selector 셀렉터 종류 한눈에 보기[ Attrbute Filters 일부 해석 ]att = value : value와 같은att != value : value와 같지않은att ^= value : value로 시작하는att $= value : value로 끝나는att *= value : value를 포함하는..Basic Selector, 기본 셀렉터 (id, class, element 등) Filter Selector, 필터 셀렉터 Child Filter Selector, 자식 필터 셀렉터 2018. 5. 14.
jQuery 기본개념 JQuery란? jQuery.comjavascript framework 중 가장 많이 사용되는 프레임워크 jQuery의 특징* Decoupling Script (HTML/CSS/JS)* easy* Ajax 지원* Dom 처리* Event 처리 일관성 jQuery 사용 Notationwindow.jQuery = window.$ = jQuery = $ 12345678910111213141516171819202122//1.javascript 이용window.onload = function(){ alert("element파싱, load 완료시점 alert 창 open\n\nwindow.onload 사용");} //2-1. jQuery 이용 $(document).ready(function(){ alert("ele.. 2018. 5. 14.