jquery bloat를 잃습니다
- Christopher Nolan원래의
- 2025-02-19 08:27:10283검색
<.> 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가 비어 있는지 확인하지 않으면. 비어 있다면, 당신은 역동적 인 노드리스트가 있습니다 (단지 나쁜 생각입니다).
예를 들어
JavaScript의 기본 배열 방법과 같은이 두 가지 방법은 Nodelist를 변경합니다.
<code class="language-javascript">var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
// do something with nodes[i]
}</code> 메소드는 다음을 매개 변수로 받아들입니다.
push 는 재귀적인 방법 이므로이 배열은 우리가 원하는만큼 깊을 수 있으며 평평해질 수 있습니다. 그러나 전달 된 배열의 요소가 노드, 노드리스트 또는 htmlcollection이 아닌 경우 오류가 발생합니다. unshift
Array#push Array#unshift
length,
, ,
, concat,
및 concat 메소드는 모두 옵션 매개 변수를 가져갈 수 있으며, 노드리스트에서 팝 또는 전환 할 노드 수를 나타냅니다. JavaScript의 Native 또는
<code class="language-javascript">[].forEach.call(document.querySelectorAll('div'), function(node) {
// do something
});</code>
메소드는 그렇지 않은 경우 맵핑 된 값을 반환합니다. concat
메소드는 실제 배열에서와 동일하지만 노드리스트를 반환합니다. concat
Array#concat에 추가하면 상속되지 않습니다.
특수 방법 <..> nodelist.js에는 네 가지 고유 한 방법과
라는 속성이 있으며, 이는 jQuery의 pop 속성에 해당합니다. shift
map slice 및 filter 메소드 :
속성). 그렇기 때문에 pop가 정의되지 않은 반환을 반환하는 이유입니다. 왜냐하면 노드리스트의 모든 요소가 상속받은 속성이 아니기 때문입니다. 이것이 우리가 shift 메소드를 사용하여 이러한 속성에 액세스하는 방법입니다.
<code class="language-javascript">var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
// do something
});
// 错误：nodes.forEach 不是函数</code>
메소드는 각 요소에 대한 이러한 특성을 설정하는 데 사용될 수 있습니다.
set
또한 방법 체인을 허용하기 위해 NODELIST를 반환합니다. 우리는
<code class="language-javascript">var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
// do something with nodes[i]
}</code>
set
textContent
<code class="language-javascript">[].forEach.call(document.querySelectorAll('div'), function(node) {
// do something
});</code> 메소드를 사용하면 요소 별 메소드를 호출 할 수 있습니다 (예 : 비디오 요소에서
<code class="language-javascript">var nodes = document.querySelectorAll('div');
nodes.item(0) === nodes[0]; // true</code>).
style
<code class="language-javascript">var buttons = document.querySelectorAll('button'); // 返回浏览器无用的 NodeList
for(var i = 0, l = buttons.length; i < l; i++) {
buttons[i].textContent = 'Click Me';
}</code>
메소드는 jQuery의 call 방법과 동일합니다. 색인을 전달하는 노드 만 포함하는 노드리스트를 반환합니다.
속성 call
pause 속성은 jQuery의
<code class="language-javascript">$('button').text('Click Me');</code>
는 스타일 배열을 반환하고 item는 에 의해 매핑 된 노드리스트를 반환합니다.
<..> nodelist.js 호환성
내 라이브러리는 아래에 설명 된대로 모든 주요 새로운 브라우저와 호환됩니다.
item eq 브라우저
<code class="language-javascript">$$('button').textContent = 'Click Me';</code> 버전 owner
firefox 6 owner prevObject
<code class="language-javascript">$$('button').set('textContent', 'Click Me');</code> safari btns.style owner style Chrome 6
ie
<code class="language-javascript">var nodes = document.querySelectorAll('div');
nodes.forEach(function(node) {
// do something
});
// 错误：nodes.forEach 不是函数</code>
jQuery의 체인 메커니즘은 변경하기 전에 이전 객체를 저장하여 작동합니다. 이를 통해 메소드를 사용하여 이전 상태로 복원 할 수 있습니다. 실제 DOM 요소를 얻으려면
메소드 또는 배열 표기법을 사용할 수 있습니다.
.end()
.get()
jQuery의 메소드는 이전 형제 자매 바로 옆에 선택된 요소를 선택하는 데 사용됩니다. 선택기가 제공되는 경우, 이전 형제 요소는 선택기가 일치하는 경우에만 검색됩니다.
forEach()
Nodelist에서 특정 노드를 선택하는 방법은 무엇입니까?
<code class="language-javascript">var nodes = document.querySelectorAll('div');
for(var i = 0, l = nodes.length; i < l; i++) {
// do something with nodes[i]
}</code>
.prev()
지정된 CSS 선택기와 일치하는 문서의 첫 번째 요소를 반환하고
노드리스트가 비어 있는지 확인하는 방법은 무엇입니까?
위 내용은 jquery bloat를 잃습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!