Jquery 연구 노트(2)_jquery

Selector
Jquery 같은 선택자를 처음 봤을 때부터 CSS 선택자가 생각났어요. 개인적으로 CSS의 선택자 구문은 꽤 고전적이어서 Jquery는 CSS에서 배울 수 없습니다. 많은 의심이 남았습니다.

Jquery의 선택자를 살펴보겠습니다

그 중 h1이 선택자이고, color:red와 background:#d00이 둘의 조합도 {} 선언 내에서 호출됩니다. 블록, 색상과 배경은 속성이라고 하며, 빨간색과 #d00은 값이라고 합니다.

선택기 범주는 다음 범주로 나눌 수 있습니다.

태그 선택기: p{CSS 규칙}

id 선택기: #ID{CSS 규칙}

클래스 선택기: .Class{CSS 규칙}

그룹 선택기: h1,h2,h3,h4,h5,h6{CSS 규칙}

하위 선택기: div p{CSS 규칙}

와일드카드 선택기: *{CSS 규칙}

의사 클래스 선택기: a:link,a:visited{CSS 규칙}

또 다른 덜 일반적으로 사용되는 멀티도 있습니다. -유형 선택자, 속성 선택자, 부분 속성 선택자, 인접 형제 선택자, 하위 선택자 등 자세한 내용은 "CSS Authoritative Manual" 책이나 http://www.w3 .org/TR/CSS2/selector를 참조하세요. .html.

따라서 Jquery에서는 $("#ID")를 이해하는 것이 어렵지 않습니다.
Jquery의 기본 선택자에는 *, class, element, id가 포함되며 이 그룹 메서드 selector1, selector2,...

전체 예제를 살펴보겠습니다

<style type="text/css"> .normalStyle{}{ background:#C3D9FF; } .alterStyle{}{ background:#DDF8CC; } .h{}{ background:#fcc; border:solid 1px #d00; } .button{}{ background:#FAFAA0; border:solid 1px #996699; padding:4px; } </style> <ul> <li> </li> <li class="alter">옵션 1</li> <li>옵션 2</li> <li class="alter">옵션 3</li> </ul>옵션 4<h1> </h1> <h2>제목 1</h2> <h3>제목 2</h3> <button id="btn">제목 3</button> 버튼
[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다
]

2. 계층적 선택기

말할 필요도 없이 계층적 선택기의 아이디어는 CSS에서 따왔습니다.
$("divspan")//

span> 요소에서 모두 선택
$("div>span")//

요소 아래에서 이름이 인 요소를 선택합니다.
$('prev next')/ /prev 바로 뒤의 요소 선택
$('prev~siblings')//이전 요소 뒤의 모든 형제 요소 선택

예: 코드 복사

코드는 다음과 같습니다.


$(function(){
$("ul li").css(" color","#f00");
$("div>span").css("color","#008000");
$("divspan").css("color", "#d00");
$( "div~span").css("배경","#ffc")
head>

텍스트 1
텍스트 2
텍스트 3

• 옵션 1


• 옵션 2
  
• 3개 선택< ;/li>
  

관련 라벨：

jquery 学习笔记

원천：php.cn

이전 기사：JavaScript 핵심 참조 튜토리얼 내장 object_js 객체 지향 다음 기사：events_jquery를 바인딩할 때 매개변수를 전달하는 JQuery 구현 방법

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

• NullPointerException은 무엇이며 어떻게 해결합니까?
  2024-10-22 09:46:29
• 초보자에서 코더까지: C 기초로 시작되는 여정
  2024-10-13 13:53:41
• PHP로 웹 개발 잠금 해제: 초보자 가이드
  2024-10-12 12:15:51
• C에 대한 이해: 새로운 프로그래머를 위한 명확하고 간단한 길
  2024-10-11 22:47:31
• 코딩 잠재력 발휘: 완전 초보자를 위한 C 프로그래밍
  2024-10-11 19:36:51
• 내면의 프로그래머를 깨워보세요: 완전 초보자를 위한 C
  2024-10-11 15:50:41
• C로 일상을 자동화하세요: 초보자를 위한 스크립트 및 도구
  2024-10-11 15:07:41
• PHP가 쉬워졌습니다: 웹 개발의 첫 번째 단계
  2024-10-11 14:21:21
• Python으로 무엇이든 빌드하기: 창의력을 발휘하기 위한 초보자 가이드
  2024-10-11 12:59:11
• 코딩의 핵심: 초보자를 위한 Python의 힘 활용
  2024-10-11 12:17:31

최신 이슈

Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...

에서 2024-04-06 14:54:03

0

2

421

jquery를 사용하여 HTML 데이터 테이블에서 선택되지 않은 행의 값을 검색하는 방법 버튼을 클릭하지 않은 모든 행의 값을 얻으려고합니다. 예를 들어, 첫 번째 행의 버튼을 클릭했을 때 클릭되지 않은 행의 값을 검색하고 싶습니다. vartable=...

에서 2024-04-05 09:26:49

0

1

1418

최종 사용자의 현재 선택에 따라 선택 상자에서 선택한 옵션을 이동하려면 jquery 스크립트가 필요합니다. 최종 사용자가 선택 상자 요소를 통해 항목의 순위를 지정할 수 있는 HTML 페이지가 있습니다. 간단한 데모를 보려면 바이올린을 참조하세요: https://jsf...

에서 2024-04-04 18:40:04

0

1

3528

북마크를 통해 순수 CSS로 요소를 만들었습니다. 생성되었으나 표시되지 않음 내 코드는 다음과 같습니다: g=document.createElement('div');g.setAttribute("id","divcon...

에서 2024-04-04 17:27:27

0

1

417

Safari/Firefox iOS에서 양식 데이터를 보낼 수 없습니다. 이는 iOS의 Safari/Firefox를 제외한 모든 플랫폼에서 작동합니다: jQuery("#gform_1").one('submit',func...

에서 2024-04-04 12:53:48

0

1

303

관련 주제

더>

• jquery 플러그인이란 무엇입니까?
• jquery로 json을 조작하는 방법
• Jquery에서 요소를 삭제하는 방법
• jQuery hover() 메소드 사용
• jquery는 페이징 방법을 구현합니다.
• Jquery의 숨겨진 요소는 무엇입니까?
• jquery에서 강조표시되는 내용
• win8 컴퓨터의 전원 켜기 암호를 잊어버리는 문제를 해결하는 방법