jquery (18) 썸네일형 리스트형 jquery Function에서 여러 항목을 return 받기 지금 껏 몰랐다. return을 여러개 받을 수 있을지 .. 객체(Object) 형태로 반환하는 법 (가장 일반적이고 가독성 좋음) function getInfo($el) { return { url: $el.css("background-image").replace(/^url\(["']?/, '').replace(/["']?\)$/, ''), title: $el.find("h3").text(), desc: $el.find("p").text(), type: $el.hasClass("img-type-mov") ? "mov" : "img" };} 이렇게 사용하면 된다.const { url, title, desc, type } = getInfo($(this));console.log(url.. 스크롤이 되는 특정 div 내부에 item에 'on' class를 주고, 해당 on 클래스가 있는 항목이 화면에 노출 되로록 처리 $('.img-bento-box.on').get(0)?.scrollIntoView({ behavior: 'smooth', inline: 'center', // 또는 'start', 'end' block: 'nearest'});'on' 클래스를 가진 .img-bento-box 요소를 부드럽게(scroll-behavior) 스크롤하여 가운데(inline: 'center') 위치로 이동하게 하는 코드이다.이게 중요한데 .get(0)은 jQuery 객체에서 DOM 요소를 꺼내는 부분이라고 볼 수 있다.?.는 해당 요소가 있을 경우에만 실행 (optional chaining) 하도록 설정하는 부분이다.아니면, 아래 처럼 강제로 위치를 잡아 줄 수 있다.const $target = $('.img-bento-b.. jquery 로 div 에 적용된 background-image url 을 통해서 이미지 경로를 가져오는 방법 갤러리를 만드는데, 이미지를 동일한 사이즈 또는 화면에 보기 좋게 배치하게 위해서, 배경으로 (background-image)로 설정했다. 해당 box를 클릭하여 이미지를 크게 표시하는 팝업을 만들건데, 배경에 있는 이미지 주소를 추출하여 표기를 하게 하는 방식이다. // background-image 속성값 가져오기var bgImage = $('#myDiv').css('background-image');// 정규식을 이용해 url() 안의 실제 경로만 추출var imageUrl = bgImage.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');console.log(imageUrl); // 출력: https://example.com/image.jpg.css('.. jquery 간단 toast 메세지 function showToast(text,type){ let msg = ''+text+''; let chk = $(".toast").length .toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #f32525; padding: 20px 30px; border-radius: 20px; z-index: 30;}.toast.app { background-color: #2e84e7;}.toast p { line-height: 20px; font-size: 30px; color: #fff; white-space: nowrap;}showToast('토스트.. jquery 간단 ajax 호출 function getTestData(testId, score){ $.ajax({ url: '/theme/mykidsmood/get.data.php', method: 'GET', data: { testId: testId, score : score }, dataType: 'json', success: function(response) { if( testId && score ){ setAnswer(response); }else{ setQes(response[testId]); } }, error: function(xhr, status, error) { co.. Radio 버튼에서 value 값 가져와서 합계 구하기 $(document).on('click',".result-btn button", function(){ let unansweredIndex = -1; $(".qes-box").each(function (index) { const hasChecked = $(this).find("input[type='radio']:checked").length > 0; if (!hasChecked) { unansweredIndex = index; return false; // break each } }); if (unansweredIndex > -1) { .. jQuery - Div 가 화면 중간에 위치했을 때 Class 추가하여 화면 조작 PC 웹에서는 특정 배너에 마우스 오버 시 효과를 적용하였는데, 모바일 웹에서는 마우스 오버 액션이 의미가 없어서, 해당 영역이 화면에 위치했을 때 hover 를 addClass('on') 으로 처리해서 화면 중간에 위치했을 때 클래스를 추가하는 소스를 gpt를 통해서 구현 $(document).ready(function () { // 스크롤이나 리사이즈 시 체크 $(window).on('scroll resize', function () { if (window.innerWidth = elementTop && windowCenter 모바일 적용을 위한 해상도 체크 : window.innerWidth 조건으로 처리스크롤 및 리사이즈 이벤트 감지 : scroll 및 res.. [jquery/js] 메일 자동완성 코드 메일 자동완성코드 Autocomplete | jQuery UIjQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.https://jqueryui.com/autocomplete/ jQuery UI Autocomplete 사용 link rel="s.. 이전 1 2 3 다음
