개발/js·jquery

jquery | .not() 특정 선택자만 제외하기

.not() jquery 선택자 중에 특정 요소(특정 클래스, 특정 아이디)만 제외하고 싶은 경우 아래와 같이 사용하면 된다. .not(selector) 사용 예시 1) 클래스명이 link인 것만 제외한 a 태그 $('a').not('.link').css(); 2) 링크 주소가 #인 것만 제외한 a태그 $('a').not('[href^=#]').css(); 3) 클래스명이 content 가 아닌 #section $('#section').not('.content').css(); .not() 여러개 지정하기 아래와 같이 두가지 방법으로 사용 가능하다. [방법1] 선택자(여기서는 a태그) 밖에 .not()을 사용하여 '제외할 선택자1, 제외할선택자2' 로 표기한다. ※ 주의 ※ 작은 따옴표 안에 제외할 선택자..

php + ajax return false 처리하기

php로 폼 내용을 전송하는 경우, 폼 스크립트 안에 ajax를 넣어 값을 체크한 뒤에 문제가 없는 경우 전송하는 스크립트를 짜는데, ajax success 안에 바로 return false를 쓰니 제대로 실행되지 않고 그냥 submit이 되어버렸다. 해결 방법은 ajax 구문안에 return false를 직접적으로 쓰기보다는 스크립트 상단 부분에 rtn=false;를 정의한뒤 ajax 구문안에서 실패한 경우 rtn = false; 성공한 경우 rtn = true 값을 넣어주고 스크립트 맨 마지막에 return rtn을 호출하면 된다. 이때 ajax 구문안에 async: false를 꼭 넣어줘야한다. function checkform() { var rtn = false; // 변수선언 $.ajax({ t..

[jQuery] Owl Carousel 여백 없애기

Owl Carousel는 jquery 기반으로 반응형, 터치 기능을 제공하는 이미지 슬라이더이다. https://owlcarousel2.github.io/OwlCarousel2/ Home | Owl Carousel | 2.3.4 Modules and Plugins Owl Carousel supports plugin modular structure. Therefore, you can detach plugins that you won't use on your project or create new ones that fit your needs owlcarousel2.github.io 그런데 Owl Carousel 옵션에 margin:0, items:1 을 넣어 이미지 하나씩 나오도록 설정하여 사용하였는데, 오..

ajax 순서대로 여러번 사용하기 (Promise, then)

ajax란? AJAX란 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말한다. 간단히 말하면, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말한다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있다. AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"이다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해준다. 출저 : MDN Web docs 정리하자면 ajax의 가장 큰 특징 두가지는 페이지 새로고침 없이 서버에 요청하고, 서버로부터 데이터를 받고 작업을 수행한다는 것이다. 아마 웹이나 앱개발을..

[jQuery] 반응형 bxSlider

bxSlider 다양한 옵션을 제공해주어 사용하기가 편해 웹에서 많이 사용되는 이미지슬라이더 bxslider https://bxslider.com/ jQuery Content Slider | Responsive jQuery Slider | bxSlider Coded with ♥ by bxslider.com bxSlider 깃허브를 확인해보니 responsive jQuery content slider 라고 써있다. 어느 기기에서나 조정이 되는 Fully responsive 라고... 기존 bxSlider bxSlider는 기본적으로 반응형을 제공하기는 하지만 화면을 줄이면 전체적으로 사이즈가 작아지는 것일 뿐, 보여지는 슬라이드 갯수를 반응형으로 조절해주지는 않는다. 화면이 작아지는데 슬라이드 갯수를 그대..

onclick 현재창/새창/팝업창 페이지 이동

자바스크립트에서 유용하게 사용되는 onclick. 모든 브라우저에서 지원이 된다. 불가피하게 링크 태크 a 사용이 어려운 경우 onclick으로 링크 연결을 하는 경우가 종종 있는데, onclick으로도 이동할 페이지를 현재창/새창/상위프레임/팝업으로 다양하게 열 수 있다. 1. 현재창에서 열 때 onclick="location.href='링크주소'" 2. 새창으로 열 때 onclick="window.open('링크주소')" 3. 상위 프레임에서 열 때 onclick="parent.location.href='링크주소'" 4. 팝업창으로 열 때 onclick="window.open('링크주소','창이름','width=가로사이즈,height=세로사이즈,left=왼쪽위치,top=상단위치');" 팝업의 경우 옵..

javascript + ajax 오류 해결하는 여러가지 방법

javascript로 ajax를 활용하여 값을 저장 불러올때 오류가 나는 경우, 아래와 같은 코드를 추가해주면 어디서 오류가 나는지 알 수 있다. success: function(result) { if (result) { alert("완료"); } else { alert("전송된 값 없음"); } }, error: function() { alert("에러 발생"); } [적용예시] $.ajax({ type:"POST", url:"/shop/ajax_uploader.php", data: { it_id : it_id, is_id : is_id }, contentType: "application/json", success: function(result) { if (result) { alert("완료"); } ..

[jQuery] jquery ui를 이용한 tooltip 커스터마이징 (툴팁 배경색, 글자색 변경)

회원가입이나 폼 입력시에 해당 항목에 대한 상세한 설명이 필요한 경우, 상세하게 설명을 넣을수도 있지만 필요에 따라 볼 수 있게 툴팁으로 안내가 가능하다. 생일 옆에 느낌표 아이콘에 마우스를 대보면 해당 항목에 대한 상세 설명을 툴팁으로 띄워준다. 툴팁의 배경색상이나 폰트 컬러도 변경가능하다. jquery ui 파일 로드 일단 관련된 jquery ui파일을 로드한다. html 툴팁이 나오게할 아이콘 또는 요소를 넣는다. 툴팁 설명은 title=""안에 넣으면 된다. 여기서는 Font Awesome 을 활용하였는데, 꼭 Font Awesome이 아니더라도 input, img 등 다양하게 활용이 가능하다. 스크립트 삽입 위에 넣은 툴팁 아이콘 클래스명을 알맞게 넣어주고 tooltip() 스크립트를 넣어주면 ..

[jQuery] 스크롤 따라다니는 퀵메뉴 만들기

예전에 한 때 홈페이지에 항상 퀵메뉴가 있던 시절이 있었는데, 없어지는 듯 하다가 요새 다시 보이는 듯 하다. 아무래도 쇼핑몰이나 고객의 요구에 빨리 응해야하는 사이트에서는 퀵메뉴가 필수불가결한 요소인 것 같다. 보통 오른쪽에 완전히 고정해두는 형태(position:absolute)로 넣을 수도 있지만 완전 고정해두면 좀 유연성이 없어보이고(?) 너무 큰 사이즈로 넣는다면 사이트의 다른 구성요소보다 더 이목이 집중되는 느낌... 요새는 아래처럼 작은메뉴를 만들어 스크롤 내릴때 마다 부드럽게 따라오는 형태로 많이 사용하는 것 같다. jquery를 활용하면 부드럽게 따라오는 메뉴를 만들 수 있다. 일단 결과물은 아래 HTML 퀵메뉴를 구성하고 클래스값(quickmenu)이나 아이디를 지정한다. 등급별혜택 1..

[jquery] attr()을 활용하여 속성 변경하기

placeholder="아이디를 입력하세요">이런식으로 태그에 직접 속성을 지정해주면 간단하지만 간혹 직접 지정이 어려운 경우가 있다. ex) 카페24에서는 자체 모듈(변수)로 회원가입 인풋항목을 생성하기 때문에 인풋 태그 안에 placeholder를 직접 지정해줄수가 없다.또는 제이쿼리 스크립트에 따라 속성이 추가되거나 삭제되어야하는 경우 등  이런 경우 아래의 스크립트를 넣어 해결이 가능하다.$( document ).ready( function() { $("input#member_id").attr("placeholder", "아이디를 입력하세요");}); 그러면 직접 placeholder="아이디를 입력하세요"를 넣지 않고도 동일한 결과를 얻을 수 있다.  attr()의 다양한 활용 방법제이쿼리의..

[jQuery] 일정 시간이 지나면 자동으로 넘어가는 탭

https://hongpage.kr/16 [jQuery] 기본 탭 소스 유용하게 많이 사용하는 기본 jquery 탭 html부분 탭1 탭2 탭3 탭1내용 탭1내용 탭3 탭을 추가하는 경우 1) 사이에 를 추가하고 탭4 탭5 2) 클릭시 나올 컨텐츠 부분도 추가하면된다. 탭4 내용 hongpage.kr 지난번 올린 기본 탭 소스 포스팅은 탭 메뉴를 클릭 했을 때 내용이 바뀌는 방식이었다. 이 코드는 기본 탭 코드와 동일하게 탭 메뉴를 클릭했을 때 내용이 바뀌는 방식 뿐만아니라 auto switch 를 활용해서 탭 메뉴를 클릭하지 않아도 일정시간이 지나면 다음 탭으로 넘어가는 코드이다. 다른 것은 동일하고 스크립트만 변경하면 된다. 탭 넘어가는 속도는 3000 숫자를 조정하면 된다.

[jQuery] 디바이스 크기별로 jquery 스크립트 다르게 불러오기 (반응형)

홈페이지가 반응형인 경우, 디바이스 크기별 jQuery 스크립트를 다르게 불러와야하는 경우가 종종있다. 같은 슬라이더를 쓰더라도 PC버전과 Mobile 버전의 속성을 다르게 할 수도 있는데 아래와 같이 윈도우 가로 사이즈에 따라서 스크립트를 다르게 불러 올 수 있다. 예시코드 $(window).resize(function(){ if (window.innerWidth > 480) { // 다바이스 크기가 480이상일때 /* 스크립트내용*/ } else { /* 스크립트내용*/ } }).resize(); 화면이 리사이즈 될 때마다 조건에 맞는 스크립트를 불러 오게 된다.

[jQuery] 기본 탭 소스

유용하게 많이 사용하는 기본 jquery 탭 html부분 탭1 탭2 탭3 탭1내용 탭1내용 탭3 탭을 추가하는 경우 1) 사이에 를 추가하고 탭4 탭5 2) 클릭시 나올 컨텐츠 부분도 추가하면된다. 탭4 내용 탭5 내용 rel값고, id만 동일하게 넣어주면 된다. 스크립트 $(function () { $(".tab_content").hide(); $(".tab_content:first").show(); $("ul.tabs li").click(function () { $("ul.tabs li").removeClass("active").css("color", "#555"); $(this).addClass("active").css("color", "#fff"); $(".tab_content").hide() v..

[jQuery] Datepicker 한글로 바꾸기, 선택 날짜 범위 지정

Datepicker 기본 코드 결과 이 영문으로 표기된 datepicker를 한글로 바꿔보자! 한글로 변경 (모든 input에 적용) 스크립트 부분을 아래와 같이 적용하면 웹사이트 내에 사용되는 모든 datepicker에 한글이 적용된다. 특정 인풋 클릭시에만 datepicker를 한글로 변경하고 싶다면 아래와 같이 인풋 아이디( #datepicker )를 지정하는 방식으로 하면 되지만, 굳이 그럴 이유가 있을까 싶다. 선택 날짜 범위 지정하기 option value 설명 minDate -1D : 하루전 -1M : 한달전 -1Y : 일년전 0 : 오늘부터 최소로 가능한 선택 일자를 지정 max Date 0 : 오늘까지 +1D : 하루후 -1M : 한달후 -1Y : 일년후 최대로 가능한 선택 일자를 지정 ..