jquery bloat를 잃습니다
<.> nodelist.js는 jQuery의 DOM 작업의 대안으로서 유사한 기능을 제공하지만 (압축 후 4K), 기본 브라우저 API의 개선을 활용합니다.
-
jQuery와 달리 NODELIST.JS는 노드 어레이를 단일 노드로 취급하여 클리너 코드와 더 쉬운 NODELIST 객체 작업을 가능하게합니다. -
<..> nodelist.js에는 속성을 설정하고 얻는 특수 메소드, 요소 별 방법을 호출하고 Nodelist에서 노드에 액세스하고 jQuery의 속성에 해당합니다.
-
p.tip {
배경색 : RGBA (128,128,128,0.05);
국경-오른쪽 라디우스 : 5px;
국경-바닥-라디우스 : 5px;
패딩 : 15px 20px;
왼쪽 경계 : 10px 고체 RGBA (128,128,128,0.075);
} <.>
prevObject최근 몇 년 동안 JQuery는 웹에서 사실상의 JavaScript 라이브러리가되었습니다. 그것은 많은 크로스 브라우저 불일치를 제거하고 클라이언트 스크립트에 인기있는 구문 설탕 층을 추가합니다. 추상화 처리의 주요 통증 중 하나는 DOM 작업이지만 jQuery의 출현 이후 기본 브라우저 API가 크게 개선되었으며 "jQuery가 필요하지 않을 것"이라는 개념이 인기를 얻었습니다.owner이유는 다음과 같습니다 jQuery에는 필요하지 않거나 사용하지 않는 많은 기능이 포함되어 있으므로 (따라서 큰 경우에는 불필요합니다). -
DOM 운영 측면에서 브라우저 API는 이제 jQuery의 대부분의 기능을 수행 할 수 있습니다. 브라우저 API는 이제 를 사용하는 등 동기화되었습니다. 문제는 무엇입니까?
Nodelist 객체는 및 메소드에 의해 반환 된 노드와 같은 노드 모음입니다.
는 동적입니다.
이것은 어떤 역동적이고 어느 것이 정적인지 알 수 없기 때문에 문제가 될 수 있습니다. Nodelist에서 각 노드를 제거하고 Nodelist가 비어 있는지 확인하지 않으면. 비어 있다면, 당신은 역동적 인 노드리스트가 있습니다 (단지 나쁜 생각입니다).
예를 들어
var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
// do something
});
// 错误：nodes.forEach 不是函数
<🎜 🎜> <<> nodelist.js 배열 메소드 지원 <.> nodelist.js는
에서 상속하지만 일부 방법은 변경되었으므로 직접적으로 변경되지 않으므로 Nodelist (노드 배열)와 함께 사용하는 것이 합리적입니다.
<<> 및 Array.prototype
및 push 메소드는 노드 만 매개 변수로 만 가져갈 수 있습니다. 그렇지 않으면 오류가 발생합니다.
unshift
<🎜 🎜> <<> 따라서 <🎜 🎜> 및
둘 다 메소드 체인을 허용하기 위해 Nodelist를 반환합니다. 즉, JavaScript의 기본 <🎜 <🎜 또는 push 메소드와 다릅니다. 우리가 Nodelist의 길이를 원한다면, 우리는 unshift 속성 만 사용하면됩니다.
var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
// do something with nodes[i]
} <<> <🎜 🎜> <<> 메소드는 다음을 매개 변수로 받아들입니다.
push <<>는 재귀적인 방법 이므로이 배열은 우리가 원하는만큼 깊을 수 있으며 평평해질 수 있습니다. 그러나 전달 된 배열의 요소가 노드, 노드리스트 또는 htmlcollection이 아닌 경우 오류가 발생합니다. unshift
Array#push <<> <🎜 javaScript 방법과 마찬가지로 새로운 노드리스트를 반환합니다. Array#unshift
<🎜 🎜> <<> length,
, <🎜
,, concat, <🎜 🎜>
<<<> 및 concat 메소드는 모두 옵션 매개 변수를 가져갈 수 있으며, 노드리스트에서 팝 또는 전환 할 노드 수를 나타냅니다. JavaScript의 Native <🎜
[].forEach.call(document.querySelectorAll('div'), function(node) {
// do something
});
메소드는 그렇지 않은 경우 맵핑 된 값을 반환합니다. concat
<🎜 🎜>
메소드는 실제 배열에서와 동일하지만 노드리스트를 반환합니다. concat
Array#concat에 추가하면 상속되지 않습니다.
<🎜 🎜> 특수 방법 <🎜 🎜> <..> nodelist.js에는 네 가지 고유 한 방법과
라는 속성이 있으며, 이는 jQuery의 pop 속성에 해당합니다. shift
map <<> slice 및 filter 메소드 :
속성). 그렇기 때문에 pop가 정의되지 않은 반환을 반환하는 이유입니다. 왜냐하면 노드리스트의 모든 요소가 상속받은 속성이 아니기 때문입니다. 이것이 우리가 shift 메소드를 사용하여 이러한 속성에 액세스하는 방법입니다.
var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
// do something
});
// 错误：nodes.forEach 不是函数
<🎜 🎜> 메소드는 각 요소에 대한 이러한 특성을 설정하는 데 사용될 수 있습니다.
set
<🎜 🎜> <<> 또한 방법 체인을 허용하기 위해 NODELIST를 반환합니다. 우리는
var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
// do something with nodes[i]
}
set
textContent <<>
[].forEach.call(document.querySelectorAll('div'), function(node) {
// do something
}); <🎜 🎜>
메소드를 사용하면 요소 별 메소드를 호출 할 수 있습니다 (예 : 비디오 요소에서var nodes = document.querySelectorAll('div');
nodes.item(0) === nodes[0]; // true).
style <<>
var buttons = document.querySelectorAll('button'); // 返回浏览器无用的 NodeList
for(var i = 0, l = buttons.length; i < l; i++) {
buttons[i].textContent = 'Click Me';
} <🎜 🎜>
메소드는 jQuery의 call 방법과 동일합니다. 색인을 전달하는 노드 만 포함하는 노드리스트를 반환합니다.
<<> 속성 call <🎜 🎜>
<🎜 🎜> pause 속성은 jQuery의
$('button').text('Click Me');
<<>는 스타일 배열을 반환하고 item는 <🎜 🎜>에 의해 매핑 된 노드리스트를 반환합니다.
<..> nodelist.js 호환성
내 라이브러리는 아래에 설명 된대로 모든 주요 새로운 브라우저와 호환됩니다.
<🎜 🎜> <<> item eq 브라우저
$$('button').textContent = 'Click Me'; 버전 <🎜
owner
firefox 6 owner prevObject
$$('button').set('textContent', 'Click Me'); safari <🎜 🎜> <🎜 🎜 5.0.5 <🎜 btns.style owner style Chrome
6
<🎜 <🎜 <🎜 <🎜 < 🎜 <🎜 <🎜 <🎜 <🎜 <🎜 <<🎜
ie 9 11.6 <<> OPERA <🎜
var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
// do something
});
// 错误：nodes.forEach 不是函数
<'s> jQuery의 체인 메커니즘은 변경하기 전에 이전 객체를 저장하여 작동합니다. 이를 통해 <🎜 🎜> 메소드를 사용하여 이전 상태로 복원 할 수 있습니다. 실제 DOM 요소를 얻으려면
메소드 또는 배열 표기법을 사용할 수 있습니다.
.end()
.get()
jQuery의 <🎜 🎜> 메소드는 이전 형제 자매 바로 옆에 선택된 요소를 선택하는 데 사용됩니다. 선택기가 제공되는 경우, 이전 형제 요소는 선택기가 일치하는 경우에만 검색됩니다.
forEach()
Nodelist에서 특정 노드를 선택하는 방법은 무엇입니까?
var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
// do something with nodes[i]
}
.prev()
지정된 CSS 선택기와 일치하는 문서의 첫 번째 요소를 반환하고
노드리스트가 비어 있는지 확인하는 방법은 무엇입니까?
위 내용은 jquery bloat를 잃습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undress AI Tool
무료로 이미지를 벗다
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
node.js에서 HTTP 요청을하는 방법?
Jul 13, 2025 am 02:18 AM
Node.js에서 HTTP 요청을 시작하는 세 가지 일반적인 방법이 있습니다. 1. 기본 시나리오에 적합하지만 데이터 스티칭 및 오류 모니터링의 수동 처리 및 https.get () 사용과 같은 데이터 스티치 및 오류 모니터링의 수동 처리가 필요합니다. 2.axios는 약속을 기반으로 한 타사 도서관입니다. 간결한 구문과 강력한 기능을 가지고 있으며 비동기/기다림, 자동 JSON 변환, 인터셉터 등을 지원합니다. 비동기 요청 작업을 단순화하는 것이 좋습니다. 3. 노드 페치는 약속과 간단한 구문을 기반으로 브라우저 페치와 유사한 스타일을 제공합니다.
JavaScript 데이터 유형 : 원시 대 참조
Jul 13, 2025 am 02:43 AM
JavaScript 데이터 유형은 원시 유형 및 기준 유형으로 나뉩니다. 원시 유형에는 문자열, 숫자, 부울, 널, 정의되지 않은 및 기호가 포함됩니다. 값은 불변이없고 값을 할당 할 때 사본이 복사되므로 서로 영향을 미치지 않습니다. 객체, 배열 및 함수와 같은 참조 유형은 메모리 주소를 저장하고 동일한 개체를 가리키는 변수는 서로 영향을 미칩니다. 타입 및 인스턴스는 유형을 결정하는 데 사용될 수 있지만 TypeofNull의 역사적 문제에주의를 기울일 수 있습니다. 이 두 가지 유형의 차이점을 이해하면보다 안정적이고 안정적인 코드를 작성하는 데 도움이 될 수 있습니다.
JavaScript Time Object, 누군가 Google Chrome에 EACTEXE, 더 빠른 웹 사이트를 구축합니다.
Jul 08, 2025 pm 02:27 PM
안녕하세요, JavaScript 개발자! 이번 주 JavaScript 뉴스에 오신 것을 환영합니다! 이번 주에 우리는 다음에 중점을 둘 것입니다. Deno와의 Oracle의 상표 분쟁, 새로운 JavaScript 시간 개체는 브라우저, Google Chrome 업데이트 및 강력한 개발자 도구에서 지원됩니다. 시작합시다! Deno Oracle의 "JavaScript"상표를 등록하려는 Oracle의 상표 분쟁은 논란을 일으켰습니다. Node.js와 Deno의 제작자 인 Ryan Dahl은 상표를 취소하기위한 탄원서를 제출했으며 JavaScript가 개방형 표준이며 Oracle이 사용해서는 안된다고 생각합니다.
약속 핸들링 : JavaScript의 체인, 오류 처리 및 약속 콤비네이터
Jul 08, 2025 am 02:40 AM
약속은 JavaScript에서 비동기 작업을 처리하기위한 핵심 메커니즘입니다. 체인 호출, 오류 처리 및 빗자루 이해는 응용 프로그램을 마스터하는 열쇠입니다. 1. 체인 호출은 비동기 프로세스를 실현하기 위해. ()을 통해 새로운 약속을 반환합니다. 각. ()은 이전 결과를 받고 값이나 약속을 반환 할 수 있습니다. 2. 오류 처리는 .catch ()를 사용하여 침묵 실패를 피하기 위해 예외를 포착해야하며, 캐치의 기본값을 반환하여 프로세스를 계속할 수 있습니다. 3. Promise.all ()과 같은 콤비네이터 (모든 성공 후에 만 성공적으로 성공), Promise.Race () (첫 번째 완료가 반환 됨) 및 Promise.AllSettled () (모든 완료를 기다리고 있음)
캐시 API는 무엇이며 서비스 작업자와 어떻게 사용됩니까?
Jul 08, 2025 am 02:43 AM
Cacheapi는 브라우저에서 캐시 네트워크 요청이 제공하는 도구로, 종종 서비스 워크와 함께 사용하여 웹 사이트 성능 및 오프라인 경험을 향상시킵니다. 1. 개발자는 스크립트, 스타일 시트, 사진 등과 같은 리소스를 수동으로 저장할 수 있습니다. 2. 요청에 따라 캐시 응답과 일치 할 수 있습니다. 3. 특정 캐시 삭제 또는 전체 캐시를 지우는 것을 지원합니다. 4. 서비스 작업자를 통해 페치 이벤트를 듣는 캐시 우선 순위 또는 네트워크 우선 순위 전략을 구현할 수 있습니다. 5. 종종 오프라인 지원, 속도를 반복적 인 액세스 속도, 예비 리소스 및 배경 업데이트 컨텐츠에 사용하는 데 종종 사용됩니다. 6.이를 사용할 때는 캐시 버전 제어, 스토리지 제한 및 HTTP 캐싱 메커니즘의 차이에주의를 기울여야합니다.
JS Roundup : JavaScript 이벤트 루프에 대한 깊은 다이빙
Jul 08, 2025 am 02:24 AM
JavaScript의 이벤트 루프는 통화 스택, 웹 캡 및 작업 대기열을 조정하여 비동기 작업을 관리합니다. 1. 통화 스택은 동기 코드를 실행하고 비동기 작업을 마치면 처리를 위해 WebAPI에 양도됩니다. 2. WebAPI가 백그라운드에서 작업을 완료 한 후 콜백을 해당 대기열 (매크로 작업 또는 마이크로 작업)에 넣습니다. 3. 이벤트 루프는 통화 스택이 비어 있는지 확인합니다. 비어 있으면 콜백이 대기열에서 꺼져서 실행을 위해 콜 스택으로 밀려납니다. 4. 마이크로 작업 (예 : Promise. 5. 이벤트 루프를 이해하면 기본 스레드를 차단하지 않고 코드 실행 순서를 최적화하는 데 도움이됩니다.
JavaScript DOM 이벤트에서 이벤트 버블 링 및 캡처 이해를 이해합니다
Jul 08, 2025 am 02:36 AM
이벤트 기포는 대상 요소에서 조상 노드로 전파되는 반면 이벤트 캡처는 외부 층에서 대상 요소로 전파됩니다. 1. 이벤트 버블 : 자식 요소를 클릭 한 후 이벤트는 부모 요소의 리스너를 차례로 위쪽으로 트리거합니다. 예를 들어, 버튼을 클릭 한 후 먼저 하위를 클릭 한 다음 부모를 클릭했습니다. 2. 이벤트 캡처 : 버튼을 클릭하기 전에 상위 요소의 캡처 리스너를 트리거하는 등 캡처 스테이지에서 리스너가 실행되도록 세 번째 매개 변수를 true로 설정하십시오. 3. 실제 용도로는 아동 요소 사건의 통합 관리, 차단 전처리 및 성능 최적화가 포함됩니다. 4. DOM 이벤트 스트림은 캡처, 대상 및 버블의 세 단계로 나뉘며 기본 리스너는 버블 단계에서 실행됩니다.
MAP 및 필터 이상의 고차 기능의 JS 라운드 업
Jul 10, 2025 am 11:41 AM
JavaScript 배열에는 맵 및 필터 외에도 강력하고 드물게 사용되는 다른 방법이 있습니다. 1. 감소는 합산뿐만 아니라 계산, 그룹, 평평한 배열 및 새로운 구조를 구축 할 수 있습니다. 2. 찾기 및 findIndex는 개별 요소 또는 인덱스를 찾는 데 사용됩니다. 3. 일부는 조건이 존재하는지 모든 충족 여부를 결정하는 데 사용됩니다. 4. 소트를 정렬 할 수 있지만 원래 배열을 변경합니다. 5. 부작용을 피하기 위해 배열을 사용할 때 배열 복사에주의하십시오. 이러한 방법은 코드를보다 간결하고 효율적으로 만듭니다.
