HTML5 실제 전투 및 CSS 선택기 분석 - querySelector()

黄舟
풀어 주다: 2017-02-10 14:44:06
원래의
2013명이 탐색했습니다.

오늘은 HTML5 관련 지식을 중심으로 새로운 셀렉터를 주제로 소개하겠습니다. 오늘 소개할 선택자는 querySelector() 입니다. jQuery와 JavaScript의 두 가지 작성 방법을 비교하여 공유하겠습니다. HTML5를 배우려는 모든 사람에게 도움이 되기를 바랍니다.

querySelector() 메서드는 CSS 선택기를 수신하고 패턴과 일치하는 첫 번째 요소를 반환합니다. 일치하는 요소가 없으면 null이 반환됩니다. 간단한 예는 다음과 같습니다.


 1) 태그 가져오기

JavaScript 코드

var body = document.querySelector('body');

	body.style.background = "red";

	alert(body)//[object HTMLpElement]
로그인 후 복사


 jQuery 코드

아아아아

 미리보기 효과

 1. 자바스크립트

HTML5 실제 전투 및 CSS 선택기 분석 - querySelector()


 2.jQuery


HTML5 실제 전투 및 CSS 선택기 분석 - querySelector()

 2) 아이디 찾기

 HTML 코드

var $body = $("body");

$body.css({
	'background': "red"
});

alert($body) //[object Object]
로그인 후 복사

JavaScript 코드

<p id="box1" class="box">梦龙小站</p>
<section id="box2" class="box">梦龙小站</section>
로그인 후 복사

jQuery 코드

var box1 = document.querySelector(&#39;#box1&#39;);

	box1.innerHTML = "这是box1";

	alert(box1)//[object HTMLpElement]
로그인 후 복사

미리보기 효과

1. 자바스크립트

HTML5 실제 전투 및 CSS 선택기 분석 - querySelector()

2. jQuery


HTML5 실제 전투 및 CSS 선택기 분석 - querySelector()

호출( 문서 유형) ) 메소드를 통해 문서 요소 범위 내에서 일치하는 요소를 찾습니다. querySelector() 메서드가 요소 유형을 통해 호출되면 일치하는 요소는 해당 요소의 하위 요소 범위 내에서만 검색됩니다. CSS 선택자는 상황에 따라 간단할 수도 있고 복잡할 수도 있습니다. 지원되지 않는 선택기가 전달되면 querySelector()는 오류를 보고합니다.

HTML5 실제 전투 소개와 CSS 선택자 querySelector() 분석입니다. HTML5는 더 많은 경험이 필요하고 많은 내용이 포함되어 있다는 점을 고려하면 구체적인 지식 포인트를 하나씩 소개하므로 각 기사가 반드시 그리 길지는 않을 것입니다. 이렇게 하면 나중에 검색이 쉬워진다는 점을 모두가 이해할 수 있기를 바랍니다. 여러분의 많은 응원과 사랑 부탁드립니다. HTML5와 관련된 더 많은 컨텐츠를 보시려면 HTML5의 실제 전투와 분석에 대한 Menglong Station 업데이트를 주목해주세요.

위 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿