#javascript Dizzle - CSS 선택기 라이브러리

5664 단어 htmlcssjavascript
여러분 안녕하세요,

Dizzle이라는 새로운 자바스크립트 라이브러리를 공유하게 되어 정말 자랑스럽습니다.

디즐이란 무엇입니까?



Dizzle은 CSS 선택자를 요소가 일치하는지 테스트하는 함수로 바꿉니다. 요소를 검색할 때 테스트는 브라우저가 CSS 선택기를 실행하는 방식과 유사하게 "위에서"실행됩니다.

특징:


  • CSS 3 및 CSS 4 선택기의 전체 구현
  • jQuery 확장의 부분 구현
  • 꽤 좋은 성능
  • 경량

    • jQuery가 이 작업을 수행할 때 이 라이브러리가 생성되는 이유는 무엇입니까?



    간단히 말해서 jQuery에서 VanillaJS로 옮기고 싶었지만 VanillaJS에서 :input와 같은 특수 CSS 선택기를 사용하여 이 라이브러리에서 작업한 요소를 가져올 수 없는 장애물에 직면했습니다.

    자세한 내용은 Github Repo를 확인하십시오.


    바룬스리다란 / 현기증


    ~ 간단하고 빠른 CSS 선택기 엔진 ~









    뭐?


    Dizzle은 CSS 선택자를 요소가 일치하는지 테스트하는 함수로 바꿉니다. 요소를 검색할 때 테스트는 브라우저가 CSS 선택기를 실행하는 방식과 유사하게 "위에서"실행됩니다.

    특징:


  • CSS3 및 CSS4 선택기의 전체 구현
  • jQuery 확장의 부분 구현
  • 꽤 좋은 성능

    • 용법


    jsDelivr에서 Dizzle을 가져와 다음과 같이 사용합니다.
    <script src="https://cdn.jsdelivr.net/npm/dizzle/dist/dizzle.umd.min.js"></script>
<script>
  var divs = dizzle('div');
  console.log(divs);
</script>

    Dizzle is also available through npm as the dizzle package:

    npm install --save dizzle
    그런 다음 다음과 같이 사용할 수 있습니다.
    import dizzle from "dizzle";
dizzle.find('div.myelement');

    선적 서류 비치

    요소 찾기

    /**
 * Search For h2 elements inside div in whole document
 */
console.log(dizzle('div > h2'));
/**
 * Fetches
    …
    View on GitHub

    사용 예

    양식 내부의 모든 입력 요소 찾기

    var $elements = dizzle('div#yourID :input');
console.log($elements);


    필터 요소




    /**
 * Filter All Visible H2 tags
 */
var visibleH2 = dizzle.filter(':visible',dizzle('h2'));
    누락된 추상화 법칙이 있다
    ElasticSearch 그룹 조회의 몇 가지 예

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage