코딩하다 현타올 때

질문 : jQuery를 사용하여 HTML 요소를 만드는 가장 효율적인 방법은 무엇입니까? 최근에 저는 많은 모달 창 팝업을 수행하고 있으며 jQuery를 사용했습니다. 페이지에 새 요소를 만드는 데 사용한 방법은 압도적으로 다음과 같습니다. $(""); 그러나 이것이 최선이거나 가장 효율적인 방법이 아니라는 느낌을 받고 있습니다. 성능 관점에서 jQuery에서 요소를 만드는 가장 좋은 방법은 무엇입니까? 이 답변 에는 아래 제안에 대한 벤치 마크가 있습니다. 답변 나는 $(document.createElement('div')); 벤치마킹은 이 기술이 가장 빠르다는 것을 보여줍니다. 나는 이것이 jQuery가 그것을 요소로 식별하고 요소 자체를 만들 필요가 없기 때문이라고 추측합니다. 실제로 다른 자바 스..

질문 : HTML은 왜 "chucknorris"가 색상이라고 생각합니까? HTML에서 배경색으로 입력 할 때 특정 임의의 문자열이 색상을 생성하는 이유는 무엇입니까? 예를 들면 : test ... 모든 브라우저와 플랫폼 에서 빨간색 배경 의 문서를 생성합니다. 반면에 chucknorr 는 노란색 배경을 생성합니다! 여기서 무슨 일이 일어나고 있습니까? 답변 넷스케이프 시대의 이월입니다. 누락 된 숫자는 0 [...]으로 처리됩니다. 잘못된 숫자는 단순히 0으로 해석됩니다. 예를 들어 # F0F0F0, F0F0F0, F0F0F, #FxFxFx 및 FxFxFx 값은 모두 동일합니다. 그것은 다양한 길이의 색상 값 등을 포함하여 매우 자세하게 다루는 Microsoft Internet Explorer의 색상 구..

질문 : HTML 양식을 중첩 할 수 있습니까? 다음과 같은 HTML 양식을 중첩 할 수 있습니까? 두 양식이 모두 작동하도록? 내 친구는 이것에 문제가 있습니다. subForm 의 일부는 작동하지만 다른 부분은 작동하지 않습니다. 답변 한마디로, 아닙니다. 한 페이지에 여러 양식이있을 수 있지만 중첩되어서는 안됩니다. html5 작업 초안에서 : 4.10.3 form 요소 콘텐츠 모델 : 흐름 콘텐츠이지만 양식 요소 하위 항목이 없습니다. 출처 : https://stackoverflow.com/questions/379610/can-you-nest-html-forms

질문 : 클래스가있는 첫 번째 요소에 대한 CSS 선택기 클래스 이름이 red 인 여러 요소가 있지만 다음 CSS 규칙을 사용하여 class="red" 첫 번째 요소를 선택할 수없는 것 같습니다. .home .red:first-child { border: 1px solid red; } blah first second third fourth red 클래스를 가진 첫 번째 어린이를 대상으로하려면 어떻게 수정합니까? 답변 :first-child 작동 방식을 오해하는 가장 잘 알려진 사례 중 하나입니다. CSS2에 도입 된 :first-child 가상 클래스는 부모의 첫 번째 자식을 나타냅니다. 그게 다야. 나머지 복합 선택기에서 지정한 조건과 가장 먼저 일치하는 자식 요소를 선택한다는 매우 일반적인 오해가 있..

질문 : HTML 텍스트 입력은 숫자 입력 만 허용합니다. 숫자 키 입력 (+ '.') 만 허용하도록 )을 설정하는 빠른 방법이 있습니까? 답변 참고 : 이것은 업데이트 된 답변입니다. 아래 주석은 키 코드를 엉망으로 만든 이전 버전을 나타냅니다. JSFiddle에서 직접 시도해보십시오. setInputFilter 함수를 사용하여 의 입력 값을 필터링 할 수 있습니다 (복사 + 붙여 넣기, 드래그 + 드롭, 키보드 단축키, 컨텍스트 메뉴 작업, 입력 할 수없는 키, 캐럿 위치, 다른 키보드 레이아웃 및 모든 브라우저 지원). IE 9 이후 ) : function setInputFilter(textbox, inputFilter) { ["input", "keydown", "keyup", "mousedown"..

질문 : HTML5를 사용하는 사용자 정의 데이터 속성에 대한 jQuery 선택기 HTML5와 함께 제공되는 이러한 데이터 속성에 사용할 수있는 선택기를 알고 싶습니다. 이 HTML 부분을 예로 들어 보겠습니다. 얻을 선택자가 있습니까? "Companies" 아래에 data-company="Microsoft" 모든 요소 "Companies" 아래에 data-company!="Microsoft" 모든 요소 다른 경우에는 "포함, 미만, 초과 등 ..."과 같은 다른 선택기를 사용할 수 있습니다. 답변 $("ul[data-group='Companies'] li[data-company='Microsoft']") //Get all elements with data-company="Microsoft" below ..

질문 : HTML에서 줄 바꿈을 해제하는 방법은 무엇입니까? 이것을 알아낼 수 없어서 어리석은 느낌이 들지만, 단어 줄 바꿈을 어떻게 해제합니까? css word-wrap break-word 를 사용하여 강제로 설정할 수 있지만 강제로 끌 normal 값으로 만 그대로 둘 수 있음). 줄 바꿈을 강제로 해제하려면 어떻게합니까? 답변 white-space 속성을 사용해야합니다. 특히 white-space: nowrap 및 white-space: pre 가 가장 일반적으로 사용되는 값입니다. 첫 번째는 당신이 추구하는 것 같습니다. 출처 : https://stackoverflow.com/questions/4652654/how-to-turn-off-word-wrapping-in-html

질문 : HTMLCollection을 배열로 변환하는 가장 효율적인 방법 HTMLCollection을 배열로 변환하는 더 효율적인 방법이 있습니까? 상기 컬렉션의 내용을 반복하고 각 항목을 배열로 수동으로 푸시하는 것보다 더 효율적인 방법이 있습니까? 답변 var arr = Array.prototype.slice.call( htmlCollection ) "네이티브"코드를 사용하여 동일한 효과를 갖습니다. 편집하다 이것은 많은 뷰를 얻으므로 (@oriol의 의견에 따라) 다음과 같은 더 간결한 표현이 사실상 동일하다는 점에 유의하십시오. var arr = [].slice.call(htmlCollection); 그러나 @JussiR의 주석에 따르면 "verbose"형식과 달리 프로세스에서 비어 있고 사용되지..

질문 : HTMLCollection 요소에 대한 For 루프 HTMLCollectionOf 의 모든 요소에 대한 ID 가져 오기를 설정하려고합니다. 다음 코드를 작성했습니다. var list = document.getElementsByClassName("events"); console.log(list[0].id); for (key in list) { console.log(key.id); } 하지만 콘솔에 다음과 같은 출력이 나타납니다. event1 undefined 내가 기대했던 것이 아닙니다. 두 번째 콘솔 출력이 undefined 않았지만 첫 번째 콘솔 출력이 event1 이유는 무엇입니까? 답변 원래 질문에 대한 응답으로 for/in 잘못 사용하고 있습니다. 코드에서 key 는 색인입니다. 따라서 ..

질문 : CSS를 사용하여 SVG 이미지의 색상을 변경하는 방법 (jQuery SVG 이미지 대체)? 이것은 내가 생각해 낸 편리한 코드 조각에 대한 자체 Q & A입니다. 현재 SVG 이미지를 삽입 한 다음 CSS를 통해 SVG 요소에 액세스하는 쉬운 방법은 없습니다. JS SVG 프레임 워크를 사용하는 방법에는 여러 가지가 있지만 롤오버 상태의 간단한 아이콘을 만드는 것이라면 지나치게 복잡합니다. 그래서 여기에 제가 생각해 낸 것이 있는데, 웹 사이트에서 SVG 파일을 사용하는 가장 쉬운 방법이라고 생각합니다. 초기 텍스트에서 이미지로의 대체 방법에서 개념을 가져 왔지만 내가 아는 한 SVG에 대해 수행 된 적이 없습니다. 이것이 질문입니다. 답변 먼저, HTML에서 IMG 태그를 사용하여 SVG 그..

질문 : 본문에 설정된 CSS3 그라데이션 배경이 늘어나지 않고 대신 반복됩니까? 안의 콘텐츠가 총 300px 높이라고 말하세요. -webkit-gradient 또는 -moz-linear-gradient 사용하여 의 배경을 설정하면 그런 다음 창을 최대화하거나 (또는 300px보다 크게 만듭니다) 그래디언트의 높이가 정확히 300px (콘텐츠 높이)가되고 나머지 창을 채우기 위해 반복합니다. 나는 이것이 webkit과 gecko에서 동일하기 때문에 이것이 버그가 아니라고 가정하고 있습니다. 그러나 반복하는 대신 창을 채우기 위해 그라디언트를 늘리는 방법이 있습니까? 답변 다음 CSS를 적용하십시오. html { height: 100%; } body { height: 100%; margin: 0; back..

질문 : 두 개의 클래스가있는 요소에 적용되는 CSS 선택기 두 개의 특정 클래스로 설정되는 클래스 속성의 값을 기반으로 CSS로 요소를 선택하는 방법이 있습니까? 예를 들어 3 개의 div가 있다고 가정 해 보겠습니다. Hello Foo Hello World Hello Bar foo 및 bar 클래스의 구성원이라는 사실을 기반으로 목록의 두 번째 요소 만 선택하려면 어떤 CSS를 작성할 수 있습니까? 답변 두 클래스 선택기를 연결합니다 (사이에 공백 없음). .foo.bar { /* Styles for element(s) with foo AND bar classes */ } IE6와 같은 고대 브라우저를 여전히 다루어야한다면, 연결된 클래스 선택기를 올바르게 읽지 않는다는 점에 유의하십시오. 나열한 다..

질문 : 공백이 아닌 태그가 HTML5에서 유효한가요? W3C 유효성 검사기 는 무효가 아닌 요소 /> "로 끝나는 태그)를 좋아하지 않습니다. (Void 요소는 콘텐츠를 포함 할 수없는 요소입니다.) HTML5에서도 여전히 유효합니까? 허용되는 void 요소의 몇 가지 예 : 무효가 아닌 거부 된 요소의 몇 가지 예 : 노트 : W3C의 유효성 검사기가 실제로 무효 자동 폐쇄 태그를 허용합니다 저자가 원래 때문에 단순한 오타의 문제가 있었다 ( \> 대신 /> ); 그러나 자동 종료 태그는 일반적으로 HTML5에서 100 % 유효하지 않으며 다양한 HTML 버전에서 자동 종료 태그 문제에 대한 답변이 자세히 설명되어 있습니다. 답변 (이론적으로) HTML 4 에서 는 전혀 없음)는 ( 의미 > (즉 >..

질문 : 문자열에서 HTML 태그 제거Java 문자열에서 HTML을 제거하는 좋은 방법이 있습니까? 다음과 같은 간단한 정규식replaceAll("\\", "") 작동하지만 & 올바르게 변환되지 않고 두 꺾쇠 괄호 사이의 비 HTML이 제거됩니다 (예 : .*? 가 사라짐).답변정규식 대신 HTML 파서를 사용하십시오. 이것은 Jsoup으로 매우 간단합니다.public static String html2text(String html) { return Jsoup.parse(html).text(); } Jsoup은 또한 사용자 정의 가능한 화이트리스트에 대한 HTML 태그 제거 를 지원합니다 , 및 만 허용하려는 경우 매우 유용합니다.정규식은 XHTML 자체 포함 태그를 제외한 열린 태그와 일치합니다.주요 ..

질문 : 내장 DOM 메소드 또는 프로토 타입을 사용하여 HTML 문자열에서 새 DOM 요소 생성 요소를 나타내는 HTML 문자열이 있습니다 : 'text' . DOM의 요소 (제 경우 ul 프로토 타입이나 DOM 메소드로 어떻게 할 수 있습니까? (나는 jQuery에서 쉽게 할 수 있다는 것을 알고 있지만 불행히도 jQuery를 사용하지 않습니다.) 답변 참고 : 대부분의 최신 브라우저는 HTML 요소를 지원하므로 문자열에서 요소를 만드는보다 안정적인 방법을 제공합니다. 자세한 내용은 아래 Mark Amery의 답변을 참조하십시오 . 이전 브라우저 및 node / jsdom 요소를 지원하지 않음)의 경우 다음 방법을 사용하십시오. HTML 문자열에서 DOM 요소를 가져 오기 위해 라이브러리가 사용하는 ..

질문 : '$ (this)'와 'this'의 차이점은 무엇입니까? 저는 현재이 튜토리얼을 통해 작업하고 있습니다 : jQuery 시작하기 아래 두 가지 예 : $("#orderedlist").find("li").each(function (i) { $(this).append(" BAM! " + i); }); $("#reset").click(function () { $("form").each(function () { this.reset(); }); }); 첫 번째 예제에서 $(this) li 요소 내부에 텍스트를 추가합니다. 두 번째 예에서는 양식을 재설정 할 때 this $(this) this 보다 훨씬 더 자주 사용되는 것 같습니다. 내 생각에 첫 번째 예제에서 $() 는 각 li append() 함수를..

질문 : Google Maps JS API v3-간단한 다중 마커 예제 Google Maps API를 완전히 처음 사용합니다. 순환하고지도에 플로팅하려는 데이터 배열이 있습니다. 상당히 간단 해 보이지만 내가 찾은 모든 다중 마커 자습서는 매우 복잡합니다. 예를 들어 Google 사이트의 데이터 배열을 사용하겠습니다. var locations = [ ['Bondi Beach', -33.890542, 151.274856, 4], ['Coogee Beach', -33.923036, 151.259052, 5], ['Cronulla Beach', -34.028249, 151.157507, 3], ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], ['Mar..

질문 : Chrome을 사용하여 XML 대신 JSON을 반환하도록 ASP.NET Web API를 얻으려면 어떻게해야합니까? 최신 ASP.NET Web API를 사용하여 Chrome 에서 XML이 표시됩니다. 브라우저에서 볼 수 있도록 JSON 을 요청하도록 변경하려면 어떻게해야합니까? 요청 헤더의 일부일 뿐이라고 생각합니다. 그게 맞습니까? 답변 MVC Web API 프로젝트의 App_Start / WebApiConfig.cs 클래스에 다음을 추가합니다. config.Formatters.JsonFormatter.SupportedMediaTypes .Add(new MediaTypeHeaderValue("text/html") ); 이렇게하면 대부분의 쿼리에서 JSON을 얻을 수 있지만 text/xml 을 보..

질문 : CSS를 사용하여 HTML5 입력의 자리 표시 자 색상 변경 Chrome은 input[type=text] 요소에 대한 자리 표시 자 속성 을 지원합니다 (다른 요소도 가능). 그러나 다음 CSS는 자리 표시 자의 값에 아무런 영향을주지 않습니다. input[placeholder], [placeholder], *[placeholder] { color: red !important; } 그러나 Value 는 여전히 red 대신 grey 유지됩니다. 자리 표시 자 텍스트의 색상을 변경하는 방법이 있습니까? 답변 세 가지 다른 구현이 있습니다 : 의사 요소, 의사 클래스 및 아무것도 없습니다. WebKit, Blink (Safari, Google Chrome, Opera 15+) 및 Microsoft E..

질문 : HTML5 양식 요소의 유효성 검사 비활성화 내 양식에서 새로운 HTML5 양식 유형 (예 : ( 유형에 대한 자세한 정보는 여기 ))을 사용하고 싶습니다. 문제는 Chrome이 나를 위해 매우 유용하고 이러한 요소를 검증하기를 원한다는 것입니다. 기본 제공 유효성 검사에 실패하면 포커스를받는 요소 외에 다른 메시지 나 표시가 없습니다. URL 요소를 "http://" 미리 채우므로 내 사용자 지정 유효성 검사는 해당 값을 빈 문자열로 처리하지만 Chrome은이를 거부합니다. 유효성 검사 규칙을 변경할 수 있다면 그것도 작동 할 것입니다. type="text" 를 사용하여 다시 되돌릴 수 있다는 것을 알고 있지만 이러한 새로운 유형의 제안을 사용하여 멋진 향상을 원합니다 (예 : 모바일 장치에서..

질문 : Node.js의 Connect, Express 및 "미들웨어"는 무엇입니까? JavaScript를 잘 알고 있음에도 불구하고 Node.js 생태계의이 세 가지 프로젝트가 정확히 무엇을하는지 혼란 스럽습니다. Rails의 랙과 비슷합니까? 누군가 설명해 주시겠습니까? 답변 [ 업데이트 : 4.0 릴리스부터 Express는 더 이상 Connect를 사용하지 않습니다. 그러나 Express는 Connect 용으로 작성된 미들웨어와 여전히 호환됩니다. 내 원래 대답은 다음과 같습니다.] Node.js를 보는 사람들에게 분명히 공통적 인 혼란의 지점이기 때문에 이것에 대해 질문 해 주셔서 감사합니다. 이를 설명하는 최선의 방법은 다음과 같습니다. Node.js 자체는 HTTP 요청에 응답하는 데 사용할 ..

질문 : 특정 클래스 나 속성이없는 요소를 선택하는 CSS 선택기를 작성할 수 있습니까? 특정 클래스 가없는 모든 요소를 선택하는 CSS 선택기 규칙을 작성하고 싶습니다. 예를 들어, 다음 HTML이 주어지면 : Example Print me! This page is super interresting and you should print it! 나는 선택을 작성하려합니다 선택이이 경우, 탐색 및 요소의 "인쇄"클래스가없는 모든 요소. 이것이 가능한가? 참고 : 이것을 사용하려는 실제 HTML에는 "인쇄 가능"클래스가없는 요소가 훨씬 더 많이있을 것입니다 (위의 예에서 그 반대라는 것을 알고 있습니다). 답변 :not() 의사 클래스에 클래스 선택기를 추가합니다. :not(.printable) { /* S..

질문 : JavaScript에서 "유효하지 않은 날짜"날짜 인스턴스 감지 JS에서 유효한 날짜 개체와 잘못된 날짜 개체의 차이점을 말하고 싶지만 방법을 알 수 없습니다. var d = new Date("foo"); console.log(d.toString()); // shows 'Invalid Date' console.log(typeof d); // shows 'object' console.log(d instanceof Date); // shows 'true' isValidDate 함수 작성에 대한 아이디어가 있습니까? Ash는 Date.parse 를 권장했습니다. 이는 날짜 문자열이 유효한지 확인할 수있는 권한있는 방법을 제공합니다. 가능한 경우 내 API가 Date 인스턴스를 수락하고 유효한지 여부를..

질문 : 문자열에서 텍스트를 제거하는 방법은 무엇입니까? data-123 문자열이 있습니다. 123 을 떠나면서 문자열에서 data- 를 제거하려면 어떻게해야합니까? 답변 var ret = "data-123".replace('data-',''); console.log(ret); //prints: 123 문서. 모든 발생을 폐기하려면 다음을 사용하십시오. var ret = "data-123".replace(/data-/g,''); 추신 : replace 함수는 새 문자열을 반환하고 원래 문자열을 변경하지 않고 그대로 두므로 replace () 호출 후에 함수 반환 값을 사용하십시오. 출처 : https://stackoverflow.com/questions/10398931/how-to-remove-text-..

질문 : Moment Js에서 두 날짜 간의 시간 차이 가져 오기 다음과 같이 MomentJs를 사용하여 두 날짜의 차이를 얻을 수 있습니다. moment(end.diff(startTime)).format("m[m] s[s]") 그러나 해당되는 경우 시간도 표시하고 싶습니다 (> = 60 분이 경과 한 경우에만). 그러나 다음을 사용하여 기간 시간을 검색하려고 할 때 : var duration = moment.duration(end.diff(startTime)); var hours = duration.hours(); 두 날짜 사이의 시간이 아니라 현재 시간을 반환합니다. 두 Moments의 시간 차이를 어떻게 알 수 있습니까? 답변 당신은 가까웠습니다. duration.asHours() 메서드를 사용하기..