코딩하다 현타올 때

질문 : 스크롤 후 요소가 보이는지 확인하는 방법은 무엇입니까? AJAX를 통해 요소를로드하고 있습니다. 일부는 페이지를 아래로 스크롤해야만 볼 수 있습니다. 페이지의 보이는 부분에 요소가 있는지 알 수있는 방법이 있습니까? 답변 이것은 트릭을 수행해야합니다. function isScrolledIntoView(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; var elemBottom = elemTop + $(elem).height(); return ((elemBottom = docViewTop)); } 간단한 ..

질문 : jQuery를 사용하여 JavaScript 개체에서 선택 항목에 옵션을 추가하는 가장 좋은 방법은 무엇입니까? jQuery를 사용하여 JavaScript 객체에서 옵션을 추가하는 가장 좋은 방법은 무엇입니까? 나는 플러그인이 필요하지 않은 것을 찾고 있지만 거기에있는 플러그인에도 관심이있을 것입니다. 이것이 내가 한 일입니다. selectValues = { "1": "test 1", "2": "test 2" }; for (key in selectValues) { if (typeof (selectValues[key] == 'string') { $('#mySelect').append('' + selectValues[key] + ''); } } 깔끔하고 간단한 솔루션 : 이것은 matdumsa의 정리..

질문 : 자바 스크립트 (또는 jQuery)를 사용하여 :: before 및 :: after와 같은 CSS 의사 요소 선택 및 조작 ::before 및 ::after (및 하나의 세미콜론이있는 이전 버전)과 같은 CSS 의사 요소를 선택 / 조작하는 방법이 있습니까? 예를 들어 내 스타일 시트에는 다음 규칙이 있습니다. .span::after{ content:'foo' } 바닐라 JS 또는 jQuery를 사용하여 'foo'를 'bar'로 어떻게 변경할 수 있습니까? 답변 데이터 속성이있는 의사 요소에 콘텐츠를 전달한 다음 jQuery를 사용하여이를 조작 할 수도 있습니다. HTML에서 : foo jQuery에서 : $('span').hover(function(){ $(this).attr('data-con..

질문 : Firebug 또는 유사한 도구를 사용하여 JavaScript / jQuery 이벤트 바인딩을 디버깅하는 방법은 무엇입니까? 상당히 복잡하고 복잡한 DOM 조작을 수행하기 위해 jQuery를 사용하는 웹 애플리케이션을 디버깅해야합니다. 어느 시점에서 특정 요소에 바인딩 된 일부 이벤트가 실행되지 않고 단순히 작동을 중지합니다. 응용 프로그램 소스를 편집 할 수있는 기능이 있다면 Firebug console.log() 문을 드릴 다운하고 추가하고 문제를 정확히 찾아 내기 위해 코드를 주석 / 주석 해제합니다. 그러나 애플리케이션 코드를 편집 할 수없고 Firebug 또는 유사한 도구를 사용하여 Firefox에서 완전히 작업해야한다고 가정 해 보겠습니다. Firebug는 내가 DOM을 탐색하고 조작..

질문 : 깨진 이미지를 대체하는 jQuery / JavaScript 여러 이미지가 포함 된 웹 페이지가 있습니다. 때때로 이미지를 사용할 수 없어 클라이언트의 브라우저에 깨진 이미지가 표시됩니다. jQuery를 사용하여 이미지 세트를 가져오고 깨진 이미지로 필터링 한 다음 src를 대체하려면 어떻게해야합니까? -jQuery로이 작업을 수행하는 것이 더 쉬울 것이라고 생각했지만 순수한 JavaScript 솔루션, 즉 Prestaul에서 제공하는 솔루션을 사용하는 것이 훨씬 쉬워졌습니다. 답변 이미지의 onError 이벤트를 처리하여 자바 스크립트를 사용하여 소스를 다시 할당합니다. function imgError(image) { image.onerror = ""; image.src = "/images/no..

질문 : JavaScript 콘솔에 jQuery 포함 jQuery를 사용하지 않는 사이트를 위해 Chrome JavaScript 콘솔에 jQuery를 포함하는 쉬운 방법이 있습니까? 예를 들어, 웹 사이트에서 테이블의 행 수를 얻고 싶습니다. 나는 이것이 jQuery로 정말 쉽다는 것을 안다. $('element').length; 이 사이트는 jQuery를 사용하지 않습니다. 명령 줄에서 추가 할 수 있습니까? 답변 브라우저의 JavaScript 콘솔에서 실행하면 jQuery를 사용할 수 있습니다. var jq = document.createElement('script'); jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.j..

질문 : JavaScript를 사용하여 URL에서 #hash를 어떻게 확인할 수 있습니까? # ) 앵커 링크가있을 때만 실행하려는 jQuery / JavaScript 코드가 있습니다. JavaScript를 사용하여이 문자를 어떻게 확인할 수 있습니까? 다음과 같은 URL을 감지하는 간단한 포괄 테스트가 필요합니다. example.com/page.html#anchor example.com/page.html#anotheranchor 기본적으로 다음과 같은 내용이 있습니다. if (thereIsAHashInTheUrl) { do this; } else { do this; } 누구든지 저를 올바른 방향으로 안내해 주시면 대단히 감사하겠습니다. 답변 단순한: if(window.location.hash) { // ..

질문 : 누구든지 일반 용어로 JSONP가 무엇인지 설명 할 수 있습니까? JSONP 는 패딩이있는 JSON 것을 알고 있습니다. jQuery.getJSON() 과 함께 사용하는 방법을 이해합니다. 그러나 JSONP를 도입 할 때 callback 개념을 이해하지 못합니다. 누구든지 이것이 어떻게 작동하는지 설명 할 수 있습니까? 답변 이 답변은 6 년이 넘었습니다. JSONP의 개념과 적용은 변경되지 않았지만 (즉, 답변의 세부 정보가 여전히 유효 함), 가능한 경우 CORS를 사용해야합니다 (즉, 서버 또는 API 가이를 지원하고 브라우저 지원 이 적절 함). 내재 된 보안 위험이 있습니다 . JSONP ( JSON with Padding )는 웹 브라우저에서 교차 도메인 정책을 우회하는 데 일반적으로..

질문 : jQuery를 통해 어떤 라디오 버튼이 선택되었는지 어떻게 알 수 있습니까? 두 개의 라디오 버튼이 있고 선택한 버튼의 값을 게시하고 싶습니다. jQuery로 어떻게 가치를 얻을 수 있습니까? 다음과 같이 모두 얻을 수 있습니다. $("form :radio") 어느 것이 선택되었는지 어떻게 알 수 있습니까? 답변 id가 myForm 양식에서 선택한 radioName 항목의 값을 가져 오려면 다음을 수행하십시오. $('input[name=radioName]:checked', '#myForm').val() 예를 들면 다음과 같습니다. $('#myForm input').on('change', function() { alert($('input[name=radioName]:checked', '#myFor..

질문 : jQuery를 사용하여 롤오버시 이미지 소스 변경 몇 개의 이미지와 롤오버 이미지가 있습니다. jQuery를 사용하여 onmousemove / onmouseout 이벤트가 발생할 때 롤오버 이미지를 표시하거나 숨기고 싶습니다. 내 모든 이미지 이름은 다음과 같이 동일한 패턴을 따릅니다. 원본 이미지 : Image.gif 롤오버 이미지 : Imageover.gif onmouseover 및 onmouseout 이벤트에서 각각 이미지 소스 의 "over" 부분을 삽입하고 제거하고 싶습니다. jQuery를 사용하여 어떻게 할 수 있습니까? 답변 준비 상태로 설정하려면 : $(function() { $("img") .mouseover(function() { var src = $(this).attr("sr..

질문 : jQuery.ajax로 multipart / formdata 보내기 jQuery의 ajax 함수를 사용하여 서버 측 PHP 스크립트에 파일을 보내는 데 문제가 있습니다. $('#fileinput').attr('files') 하여 파일 목록을 가져올 수 있지만이 데이터를 서버로 보낼 수있는 방법은 무엇입니까? 파일 입력을 사용할 때 서버 측 php-script의 결과 배열 ( $_POST NULL 가능하다는 것을 알고 있습니다 (지금까지 jQuery 솔루션을 찾지 못했지만 Prototye 코드 만 ( http://webreflection.blogspot.com/2009/03/safari-4-multiple-upload-with-progress.html ) ). 이것은 비교적 새로운 것으로 보이므로..

질문 : jQuery를 사용하여 요소의 ID를 어떻게 얻을 수 있습니까? 위의 방법이 작동하지 않는 이유는 무엇이며 어떻게해야합니까? 답변 jQuery 방식 : $('#test').attr('id') 귀하의 예에서 : $(document).ready(function() { console.log($('#test').attr('id')); }); 또는 DOM을 통해 : $('#test').get(0).id; 또는 : $('#test')[0].id; 그리고 JQuery에서 $('#test').get(0) $('#test')[0] 를 사용하는 이유는 $('#test') 가 JQuery 선택기이고 array ()를 반환한다는 것입니다. 기본 기능으로 단일 요소가 아닌 결과 jquery의 DOM 선택기에 대한 대안..

질문 : jQuery 각 루프에서 벗어나는 방법 each 루프에서 jQuery를 어떻게 중단합니까? 나는 시도했다 : return false; 루프에서 그러나 이것은 작동하지 않았습니다. 어떤 아이디어? 업데이트 2020 년 9 월 5 일 나는 return false; 잘못된 장소에서. 루프 안에 넣으면 모든 것이 작동했습니다. 답변 위해 break $.each 또는 $(selector).each 루프를, 당신은 반환해야 false 루프 콜백. true 반환하면 다음 반복으로 건너 뜁니다. 이는 일반 루프에서 continue $.each(array, function(key, value) { if(value === "foo") { return false; // breaks } }); // or $(sele..

질문 : jquery의 일반 패키지와 슬림 패키지의 차이점은 무엇입니까? CDNJS에서 jquery.slim 패키지가 배치됩니다. 크기가 더 작습니다. 원본과의 주요 차이점은 무엇입니까? 코드를 훑어 보아도 답을 얻지 못했고 https://jquery.com slim 패키지에 대한 참조를 찾지 못했습니다. jquery.js 와 jquery.slim.js 의 차이점은 무엇입니까? 답변 코드를 살펴보면 jquery.js와 jquery.slim.js 사이에 다음과 같은 차이점이 있습니다. jquery.slim.js에서 다음 기능이 제거되었습니다. jQuery.fn.extend jquery.fn.load jquery.each // 일반적인 AJAX 이벤트를 처리하기 위한 여러 함수 첨부 jQuery.expr.f..

질문 : 자바 스크립트의 코드 구성과 관련하여 일반적으로 인정되는 모범 사례 jQuery와 같은 JavaScript 프레임 워크가 클라이언트 측 웹 애플리케이션을 더 풍부하고 기능적으로 만들면서 한 가지 문제를 발견하기 시작했습니다. 세상에서 이것을 어떻게 정리하고 있습니까? 모든 핸들러를 한 자리에 놓고 모든 이벤트에 대한 함수를 작성 하시겠습니까? 모든 기능을 래핑하는 함수 / 클래스를 만드시겠습니까? 미친 듯이 작성하고 최선을 다하기를 바랍니다. 포기하고 새로운 경력을 얻으시겠습니까? jQuery에 대해 언급했지만 실제로는 일반적인 JavaScript 코드입니다. 줄에 줄이 쌓이기 시작하면 스크립트 파일을 관리하거나 원하는 것을 찾는 것이 더 어려워집니다. 내가 찾은 가장 큰 문제점은 동일한 작업을..

질문 : jQuery를 사용하여 요소의 절대 위치를 어떻게 찾습니까? jQuery를 사용하여 요소의 절대 위치, 즉 창의 시작에 상대적인 위치를 찾는 방법이 있습니까? 답변 .offset() 은 요소의 오프셋 위치를 간단한 객체로 반환합니다. 예 : var position = $(element).offset(); // position = { left: 42, top: 567 } 이 반환 값을 사용하여 같은 지점에 다른 요소를 배치 할 수 있습니다. $(anotherElement).css(position) 출처 : https://stackoverflow.com/questions/683339/how-do-i-find-the-absolute-position-of-an-element-using-jquery

질문 : 순수 JS 또는 jQuery로 이스케이프 키 누르기를 감지하는 방법은 무엇입니까? 중복 가능성 : jQuery를 사용하는 이스케이프 키의 키 코드 IE, Firefox 및 Chrome에서 이스케이프 키 누름을 감지하는 방법은 무엇입니까? 아래 코드는 IE 및 경고 27 에서 작동하지만 Firefox에서는 경고 0 $('body').keypress(function(e){ alert(e.which); if(e.which == 27){ // Close my modal window } }); 답변 참고 : keyCode 는 더 이상 사용되지 않습니다 key 사용하세요. function keyPress (e) { if(e.key === "Escape") { // write your logic here. ..

질문 : jQuery로 확인란이 선택되었는지 테스트 확인란이 선택되어 있으면 값을 1로만 가져 오면됩니다. 그렇지 않으면 0으로 가져와야합니다. jQuery를 사용하여 어떻게해야합니까? $("#ans").val() 은이 경우 항상 나에게 하나의 권리를줍니다. 답변 .is(':checked') 를 사용하여 선택 여부를 결정한 다음 그에 따라 값을 설정하십시오. 여기에 더 많은 정보가 있습니다. 출처 : https://stackoverflow.com/questions/4813219/testing-if-a-checkbox-is-checked-with-jquery

질문 : Webpack에서 jQuery 플러그인 종속성 관리 내 애플리케이션에서 Webpack을 사용하고 있는데, 여기에서 모든 JavaScript 파일 / 코드에 대한 bundle.js와 jQuery 및 React와 같은 모든 라이브러리에 대한 vendor.js의 두 가지 진입 점을 만듭니다. 종속성으로 jQuery가있는 플러그인을 사용하고이를 vendor.js에도 포함하려면 어떻게해야합니까? 해당 플러그인에 여러 종속성이 있으면 어떻게됩니까? 현재 https://github.com/mbklein/jquery-elastic 이 jQuery 플러그인을 사용하려고합니다. Webpack 문서에는 providePlugin 및 imports-loader가 언급되어 있습니다. providePlugin을 사용했지만..

질문 : 여러 요소에 대한 jQuery 동일한 클릭 이벤트 페이지의 다른 요소에 대해 동일한 코드를 실행하는 방법이 있습니까? $('.class1').click(function() { some_function(); }); $('.class2').click(function() { some_function(); }); 대신 다음과 같은 작업을 수행하십시오. $('.class1').$('.class2').click(function() { some_function(); }); 감사 답변 $('.class1, .class2').on('click', some_function); 또는: $('.class1').add('.class2').on('click', some_function); 이것은 기존 개체에서도 작동합니..

질문 : jQuery를 사용하여 이미지 소스 변경 내 DOM은 다음과 같습니다. 누군가 이미지를 클릭하면 이미지 src가 로 변경되기를 원합니다. 여기서 x 는 이미지 번호 1 또는 2를 나타냅니다. 이것이 가능합니까 아니면 이미지를 변경하기 위해 CSS를 사용해야합니까? 답변 jQuery의 attr () 함수를 사용할 수 있습니다. 예를 들어 img id 속성이있는 경우 다음을 수행합니다. 그런 다음 다음과 같이 jQuery를 사용하여 이미지 src $("#my_image").attr("src","second.jpg"); click 이벤트에 첨부하려면 다음과 같이 작성할 수 있습니다. $('#my_image').on({ 'click': function(){ $('#my_image').attr('src'..

질문 : jQuery에서 이벤트 핸들러를 제거하는 가장 좋은 방법은 무엇입니까? input type="image" 있습니다. 이것은 Microsoft Excel의 셀 노트처럼 작동합니다. 사람이있는 텍스트 상자에 숫자를 입력하면 input-image I 설정,과에 대한 이벤트 핸들러 짝을 input-image . 그런 다음 사용자가 image 클릭하면 데이터에 메모를 추가하는 작은 팝업이 표시됩니다. 내 문제는 사용자가 텍스트 상자에 0을 입력 할 때 input-image 의 이벤트 처리기를 비활성화해야한다는 것입니다. 다음을 시도했지만 아무 소용이 없습니다. $('#myimage').click(function { return false; }); 답변 jQuery 1.7 이상에서는 이벤트 API가 업데이..

질문 : backbone.js의 목적은 무엇입니까? http://documentcloud.github.com/backbone 사이트에서 backbone.js의 유틸리티를 이해하려고했지만 여전히 많이 알아낼 수 없었습니다. 아무도 그것이 어떻게 작동하는지 설명하고 더 나은 JavaScript를 작성하는 데 어떻게 도움이 될 수 있는지 설명함으로써 나를 도울 수 있습니까? 답변 Backbone.js는 기본적으로 MVC (모델, 뷰, 컨트롤러) 방식으로 Javascript 코드를 구조화 할 수있는 uber-light 프레임 워크입니다. 모델 은 데이터를 검색하고 채우는 코드의 일부입니다. 보기 는이 모델의 HTML 표현입니다 (모델이 변경됨에 따라보기가 변경됨). 이 경우 해시 뱅 URL을 통해 자바 스크립트..

질문 : jQuery로 'Enter'에 양식을 제출 하시겠습니까? HTML / jQuery를 사용하는 AIR 프로젝트의 이메일 텍스트 필드, 암호 필드 및 제출 버튼과 같은 bog 표준 로그인 양식이 있습니다. 양식에서 Enter 키를 누르면 전체 양식의 내용이 사라지지만 양식이 제출되지 않습니다. 이것이 Webkit 문제인지 (Adobe AIR는 HTML 용 Webkit을 사용함) 또는 내가 물건을 묶었는지 아는 사람이 있습니까? 나는 시도했다 : $('.input').keypress(function (e) { if (e.which == 13) { $('form#login').submit(); } }); 그러나 그것은 정리 행동을 멈추거나 양식을 제출하지 않았습니다. 양식과 관련된 작업이 없습니다. 문..

질문 : jQuery로 라디오 버튼을 확인하는 방법은 무엇입니까? jQuery로 라디오 버튼을 확인하려고합니다. 내 코드는 다음과 같습니다. 그리고 자바 스크립트 : jQuery("#radio_1").attr('checked', true); 작동하지 않음 : jQuery("input[value='1']").attr('checked', true); 작동하지 않음 : jQuery('input:radio[name="type"]').filter('[value="1"]').attr('checked', true); 작동하지 않음 : 다른 아이디어가 있습니까? 내가 무엇을 놓치고 있습니까? 답변 jQuery 1.6 이상 (> =) 버전의 경우 다음을 사용하십시오. $("#radio_1").prop("checked",..