1Q74

jQuery All Selector("*"), Native All Selector("*")의 React버전이다. "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router": "^6.8.1", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" } 1. Example import React from 'react'; import './AllSelector.css' export defau..

1. Description querySelectorAll("[name|='value']") 기본적으로 속성값의 전체 문자열이 같은 요소들을 선택하지만, [시작문자열]다음에 '-'(하이픈)기호가 들어 있는 요소도 선택한다. ※ 【jQuery/Selector #3】Attribute Contains Prefix Selector [name|=”value”]의 Native버전입니다. 2. Example #1버튼을 클릭하면 name속성이 UTF-8로 되어 있는 Element를 찾아서 배경색을 변경하고, #2버튼을 클릭하면 name속성이 UTF로 시작하면서 '-'(하이픈)으로 연결되는 Element를 찾아서 배경색을 변경한다.

1. Description querySelectorAll("*") 부모 Element하위에 있는 모든 자식 Element를 찾는다. 2. Example #1버튼을 클릭하면 태그 하위의 모든 Element를 찾아서, 태그이름과 텍스트를 표시한다. document.getElementById("_1q74-example").querySelectorAll("*")

1. What I did? 아래의 명령어를 실행하여 React앱을 생성했다. npx create-react-app 어떻게 jQuery의 all-selector를 구현할까 하고 고민중이었다. 확인해 보지는 않았지만 findDOMNode같은 메소드를 사용하는 것은 배제했다. 그래서 다음과 같은 코드로 테스트를 감행해 봤다. index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.get..

1. I don't know nothing about react(except for a little bit skills) 그래서, 설치 및 환경을 구성하는 메뉴얼을 찾았다. 2. Where 구성에 필요한 설치파일들은 아래의 링크를 통해서 다운로드 했다. Node.js : https://nodejs.org/en/ Visual Studio Code : https://code.visualstudio.com/download 3. How 다운로드 받은 실행파일들을 더블클릭하고 안내에 따라 설치하면 된다. 4. Tutorial 아래의 링크를 참고했다. https://code.visualstudio.com/docs/nodejs/reactjs-tutorial 5. Create first react app by myse..

1. Description 3.4버전부터 Deprecated되었다. 매칭된 Element들 중에서 주어진 인덱스보다 더 큰 인덱스의 Element들을 찾는다. :gt()처럼 사용하던 것을 선행하는 Selector와 조합하여 사용한 다음 .slice()를 사용하는 것으로 대신할 수 있다. ※ jQuery1.8 이전 버전은 :gt(-index)가 지원되지 않는다. 2. Usage jQuery(":gt(index)") : 첫 번째 Element부터 찾는다. 첫 번째 Element의 인덱스는 0이다. jQuery(":gt(-index)") : 마지막 Element부터 찾는다. 마지막 Element의 인덱스는 -1이다. 3. Example #1버튼을 누르면 처음부터 세 번째로 시작하는 태그들의 border스타일을..

1. Description 현재 포커스가 들어가 있는 Element를 찾는다. 2. Example 3초마다 포커싱되는 Element를 찾아 배경색을 변경한다.

1. Description 3.4버전부터 Deprecated되었다. 매치되는 첫 번째 Element를 찾는다. :first는 :eq(0), :lt(1)과 동일하며 오직 한 개의 Element와 매치되지만, :first-child는 여러 개의 Element와 매치될 수 있다. 2. Example #1버튼을 클릭하면 태그들 중 첫 번째 요소를 찾아서 border스타일을 변경한다. 버튼 클릭할 때마다 해당 스타일이 토글된다.

1. Description 다른 부모Element 하위에 있는 있는 자식Element들 중에서 태그이름이 같은 첫 번째 요소를 찾는다. 2. Example #1버튼을 클릭하면 첫 번째 태그를 모두 찾아서 배경색을 변경한다. 버튼을 클릭할 때마다 해당 스타일이 토글된다.

1. Description .first()는 한 개의 자식Element만 찾지만, :first-child는 각 부모Element의 첫 번째 자식Element를 찾는다. :first-child는 :nth-child(1)과 같다. 2. Example #1버튼을 클릭하면 태그 하위의 첫 번째 태그를 찾아서 배경색을 변경한다. 버튼을 클릭할 때마다 해당 스타일을 토글한다.