web sprit

$("[선택자], [선택자], [선택자]").EventMethod(); 어떠한 선택자들이 같은 이벤트의 함수를 실행한다고 한다면 위와 같이 선택자를 여러개 묶어 같이 실행할 수 있습니다. 예를 들어 클래스명이 다른 슬라이드가 있는데 이것을 같은 슬라이드 플러그인 이벤트로 묶고 싶다거나 datepicker 와 같이 달력 기능이 있는 부분을 한번에 묶고 싶다면 사용할 수 있겠습니다. 아래 예시를 보면 어떻게 작성하는지 더 쉽게 이해하실 수 있을 것 같네요. 예를 들어 클릭 이벤트를 여러개의 선택자로 묶고 싶다면 아래와 같이 작성하면 되겠습니다. $(".box01, .box02, #box01, #box02, div, p").click(function(){ //....... }) 선택자로는 클래스명, 아이디명,..

$(selector).on(event, childSelector, data, function, map); 제이쿼리의 on 메서드 활용의 기본형은 다음과 같습니다. $(selector).on(event, function(){ // ..... }); // selector : 이벤트를 적용할 태그나 아이디, 클래스를 선택 // event : 제이쿼리 이벤트 (ex - click, mouseenter, mouseleave 등.) 이벤트를 여러게 연결 하려면 다음과 같이 작성하면 됩니다. $(selector).on({ click: function() { // ..... }, mouseenter: function() { // ..... }, mouseleave: function() { // ..... } }); 위..

jQuery를 사용할때 어떠한 객체의 크기값을 가져오기 위해 아래와 같은 방법을 사용한다. $('.box').width(); // box 클래스의 가로크기 값을 가져온다 $('.box').height(); // box 클래스의 세로크기 값을 가져온다 하지만 위에서의 값을 가져오는 방법의 문제점은 객체에 padding값이나 border값이 있다면 그것을 제외한 순수 가로,세로값을 가져오기 때문에 실제의 크기값을 가져오지는 못한다. 예를 들어 border:1px padding:10px width:100px height:100px .box{ width:100px; height:100px; border:1px solid #000; padding:10px;} 위와 같이 box 클래스를 가진 객체의 실제 width..

오늘은 ESC(Escape)를 눌렀을때 이벤트를 발행시키기 위해ESC를 눌럿을 때 감지하는 Script를 만들어 봅시다. ESC를 감지하기 위해서는브라우저에서 제공되는KeyCode 또는 which속성을 사용해야 합니다.현재 최신 브라우저에서는 KeyCode 보다는 which 속성을 지원하고 있습니다.그래도 구 브라우저를 위해서 KeyCode도 사옹해 보도록 하죠. 저는 ESC감지를 어디에 사용하려 하냐~레이어 팝업이 떳을때 ESC 버튼을 누르면 닫히게 작업하려 합니다.아래 코드를 보시죠 1234567$(document).keydown(function(e){ var code = e.keyCode || e.which; if (code == 27) { $('.레이어팝업 클래스').hide(); }});cs해석..

참고 : https://opentutorials.org/module/904/6851http://api.jquery.com/category/ajax/

제이쿼리의 animate 메서드로 접혓다 펼쳐지는 토글 형식의 animation 을 만들려면 height 의 값을 알고 그것에 대한 값을 animate 메서드에 전달 해줘야 작동할 수 있습니다. 기존의 toggle 메서드를 이용하여 toggle 메뉴를 만들 수 있지만 ,toggle 메서드는 style 값으로 width 값까지 제어하는 현상이 일어나면서 이상하게 접혓다 펼쳐짐을 확인하였습니다. 그래서 알아본 결과 animate 메서드로 height 를 이용하기로 하였는데 height 값으로 auto를 주면 접혓다 펼처지나 animation 효과는 나타나지 않습니다. 효과를 나타내려면 height 값을 auto로 주지말고 초기값을 전달해 줘야 합니다. (0px 이면 0px이라는 것을 전달.) 다음과 같은 트..

우리가 흔히 마크업을 하게 되면layerPopUp을 만들게 됩니다. 레이어 팝업을 만들 경우 레이어팝업 안에 닫기 버튼이 존재하게 되는데요.PC 같은경우 닫기 버튼이 존재하게 되면 그리 큰 이상은 없습니다.만약 닫기 버튼이 없는 레이어 메뉴라고 가정합시다. 그리고 모바일 입니다.닫기 버튼이 없는 레이어 메뉴는 어떻게 숨김처리 해야할까요?? 이럴때 메뉴영역을 제외한 영역을 클릭했을 시 숨김처리되는 스크립트 소스가 필요한 것입니다. 검색을 통하여 여러가지 소스를 확인해 보았는데요. 정작 저에게 필요하고 깔금한 소스를 찾지 못했습니다.그래서 제가 정리한 소스를 정리하려 합니다.많은 분들이 참고하고 더 좋게 custom 하셧음 좋겠네요 소스는 아래와 같습니다. HTML1234567891011121314 targ..

is() 메서드는 선택한 요소 중 하나가 is( 선택한 Element )와 일치하는지 확인합니다.결과값은 참(true)/거짓(false)을 나타냅니다.말보다 예시를 보면 더 빠른 이해가 되겠죠? 아래에 예를 들겠습니다. html12345678 item01 item02 item03 확인cs javascript (tag 확인)1234567891011121314151617$(document).ready(function(){ var $testBox = $(".is_test_box"); var $list = $(".is_test_box .list"); var $Btn = $(".is_test_box button"); $Btn.on("click", function(){ var $liBool = $list.child..

다음과 같이 jQuery로 select box 를 제어할 수 있는 방법을 정리해 보았습니다.참고 바랍니다. 선택된 값(value) 가져오기1234 $("#selectBox option:selected").val();$("select[name=name]").val(); Colored by Color Scriptercs 선택된 내용 가져오기123 $("#selectBox option:selected").text(); Colored by Color Scriptercs 선택된 옵션의 갯수 구하기123 $('#selectbox option').size(); cs 선택된 옵션의 index 값 구하기123 $('#selectbox option').index($('#selectbox option:selected'));..

select 를 꾸미는 건 쉽지 않다. 브라우저마다 css 값도 다르게 적용되어 지고 제한되는 부분도 많이 때문에 원하는 디자인 변경이 불가한 경우도 있다. 기존의 select 를 꾸며주는 플러그인들이 많지만 접근성을 해치는 방식으로 꾸며주기 다반사다. select를 커스터마이징 해줄 때 다음과같이 이용한다. HTML1234567891011 선택해 주세요 선택해 주세요 선택1 선택2 선택3 선택4 Colored by Color Scriptercs CSS12345.select-script{position:relative; width:200px; height:40px; line-height:40px; border:1px solid #606976; border-radius:4px; text-transform:..