jQuery 3부 읽기(선택기 작성)_jquery
May 16, 2016 pm 06:05 PM
선택자
각 기사의 핵심 사항을 설명하기 위해 샘플 코드가 가장 간소화되었습니다. 예를 들어 선택기는 HTMLElement 및 id만 전달할 수 있습니다.
이 글에서는 2/8 원칙에 따라 선택기를 강화할 것이며 여기서는 가장 일반적으로 사용되는 것만 구현하겠습니다.
1, id로 획득, 이 요소는 고유함
$('#id')
2, className으로 획득
$('.cls') className이 cls
$('.cls', el)
$('.cls', '#id')$('span.cls') 문서에서 className이 cls인 모든 범위 요소를 가져옵니다.
$('span.cls', el) 지정된 요소에서 className이 cls인 요소를 가져옵니다. el은 HTMLElement입니다(권장되지 않음) )
$('span.cls', '#id') 지정된 id가
3인 요소 중 className이 cls인 요소를 가져오고 $를 가져옵니다. (' tagName 범위를 통해') 문서의 모든 범위 요소를 가져옵니다.
$('span', el) 지정된 요소의 범위 요소를 가져옵니다. el은 HTMLElement입니다(권장하지 않음)
$('span', '#id') 지정된 id가
4인 요소에서 스팬 요소를 가져오고, 속성을 통해 $('[name]')을 가져옵니다. 속성 이름이 있는 요소를 가져옵니다. 문서에서
$( '[name]', el)
$('[name]', '#id')
$('[name=uname]') 속성이 있는 모든 요소 가져오기 문서의 name=uname
$('[name=uname]', el)
$('[name=uname]', '#id')
$('input[name=uname ]') 문서의 모든 속성 이름 가져오기 =uname의 입력 요소
$('input[name=uname]', el)
$('input[name=uname]', '#id')
예:
코드 복사 코드는 다음과 같습니다.
<!DOCTYPE html>
zchain 테스트<BR><스크립트 src=" http://demo.jb51.net/js/2011/zchain/zchain-0.3.js"></script> <br></head> <br><body> <div id='content'>aaa</div> <br><div>bbb</div><br><p class="pra">ccc</p> 입력 유형= "제출" 값="제출"/> <br><input type="button" value="submit"/><br><script type="text/javascript"> >var obj1 = $("#content"); // id <br>var obj2 = $('div'); // tagName <br>var obj3 = $('.pra') // className >var obj4 = $('input[type=button]'); // 속성 <br><br>console.log(obj1) <br>console.log(obj2); ) <br>console.log(obj4) <br></body> <br><br> <br><br>
<br>Firebug 출력은 다음과 같습니다<br>
<br><br><br>
</div>
<br>http://demo.jb51.net/js/2011/zchain/zchain-0.3.js
</div>
</div>
<div class="wzconShengming_sp">
<div class="bzsmdiv_sp">본 웹사이트의 성명</div>
<div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>인기 기사</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796773439.html" title="Repo : 팀원을 부활시키는 방법" class="phpgenera_Details_mainR4_bottom_title">Repo : 팀원을 부활시키는 방법</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796775427.html" title="스플릿 소설을이기는 데 얼마나 걸립니까?" class="phpgenera_Details_mainR4_bottom_title">스플릿 소설을이기는 데 얼마나 걸립니까?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796780570.html" title="R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796774171.html" title="헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법" class="phpgenera_Details_mainR4_bottom_title">헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796773695.html" title="공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?" class="phpgenera_Details_mainR4_bottom_title">공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By 王林</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ko/article.html">더보기</a>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR2">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottag2.png" alt="" />
<h2>핫툴 태그</h2>
</div>
<div class="phpmain1_4R_readrank_bottom">
<div class="phpmain1_4R_readrank_bottoms">
<div class="phpmain1_4R_readrank_bottoms_num">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/taglogo_black.png" alt="" />
</div>
<a href="https://www.php.cn/ko/ai/tag/code-it" title="코드앤아이" class="phpmain1_4R_readrank_bottom_title">코드앤아이</a>
</div>
<div class="phpmain1_4R_readrank_bottoms">
<div class="phpmain1_4R_readrank_bottoms_num">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/taglogo_black.png" alt="" />
</div>
<a href="https://www.php.cn/ko/ai/tag/voice" title="오디오" class="phpmain1_4R_readrank_bottom_title">오디오</a>
</div>
<div class="phpmain1_4R_readrank_bottoms">
<div class="phpmain1_4R_readrank_bottoms_num">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/taglogo_black.png" alt="" />
</div>
<a href="https://www.php.cn/ko/ai/tag/business" title="사업" class="phpmain1_4R_readrank_bottom_title">사업</a>
</div>
<div class="phpmain1_4R_readrank_bottoms">
<div class="phpmain1_4R_readrank_bottoms_num">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/taglogo_black.png" alt="" />
</div>
<a href="https://www.php.cn/ko/ai/tag/marketing" title="마케팅" class="phpmain1_4R_readrank_bottom_title">마케팅</a>
</div>
<div class="phpmain1_4R_readrank_bottoms">
<div class="phpmain1_4R_readrank_bottoms_num">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/taglogo_black.png" alt="" />
</div>
<a href="https://www.php.cn/ko/ai/tag/ai-detector" title="AI감지기" class="phpmain1_4R_readrank_bottom_title">AI감지기</a>
</div>
<div class="phpmain1_4R_readrank_bottoms">
<div class="phpmain1_4R_readrank_bottoms_num">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/taglogo_black.png" alt="" />
</div>
<a href="https://www.php.cn/ko/ai/tag/chatbot" title="챗봇" class="phpmain1_4R_readrank_bottom_title">챗봇</a>
</div>
<div class="phpmain1_4R_readrank_bottoms">
<div class="phpmain1_4R_readrank_bottoms_num">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/taglogo_black.png" alt="" />
</div>
<a href="https://www.php.cn/ko/ai/tag/design-art" title="디자인&아트" class="phpmain1_4R_readrank_bottom_title">디자인&아트</a>
</div>
</div>
</div>
</div>
<script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script>
<div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>인기 기사</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796773439.html" title="Repo : 팀원을 부활시키는 방법" class="phpgenera_Details_mainR4_bottom_title">Repo : 팀원을 부활시키는 방법</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796775427.html" title="스플릿 소설을이기는 데 얼마나 걸립니까?" class="phpgenera_Details_mainR4_bottom_title">스플릿 소설을이기는 데 얼마나 걸립니까?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By DDD</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796780570.html" title="R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)" class="phpgenera_Details_mainR4_bottom_title">R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>1 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796774171.html" title="헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법" class="phpgenera_Details_mainR4_bottom_title">헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By 尊渡假赌尊渡假赌尊渡假赌</span>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/1796773695.html" title="공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?" class="phpgenera_Details_mainR4_bottom_title">공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<span>3 몇 주 전</span>
<span>By 王林</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ko/article.html">더보기</a>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>뜨거운 기사 태그</h2>
</div>
<div class="phpgenera_Details_mainR3_bottom">
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/toolset/development-tools/92" title="메모장++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="메모장++7.3.1" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/toolset/development-tools/92" title="메모장++7.3.1" class="phpmain_tab2_mids_title">
<h3>메모장++7.3.1</h3>
</a>
<p>사용하기 쉬운 무료 코드 편집기</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/toolset/development-tools/93" title="SublimeText3 중국어 버전" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 중국어 버전" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/toolset/development-tools/93" title="SublimeText3 중국어 버전" class="phpmain_tab2_mids_title">
<h3>SublimeText3 중국어 버전</h3>
</a>
<p>중국어 버전, 사용하기 매우 쉽습니다.</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/toolset/development-tools/121" title="스튜디오 13.0.1 보내기" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="스튜디오 13.0.1 보내기" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/toolset/development-tools/121" title="스튜디오 13.0.1 보내기" class="phpmain_tab2_mids_title">
<h3>스튜디오 13.0.1 보내기</h3>
</a>
<p>강력한 PHP 통합 개발 환경</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/toolset/development-tools/469" title="드림위버 CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="드림위버 CS6" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/toolset/development-tools/469" title="드림위버 CS6" class="phpmain_tab2_mids_title">
<h3>드림위버 CS6</h3>
</a>
<p>시각적 웹 개발 도구</p>
</div>
</div>
<div class="phpmain_tab2_mids_top">
<a href="https://www.php.cn/ko/toolset/development-tools/500" title="SublimeText3 Mac 버전" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 Mac 버전" />
</a>
<div class="phpmain_tab2_mids_info">
<a href="https://www.php.cn/ko/toolset/development-tools/500" title="SublimeText3 Mac 버전" class="phpmain_tab2_mids_title">
<h3>SublimeText3 Mac 버전</h3>
</a>
<p>신 수준의 코드 편집 소프트웨어(SublimeText3)</p>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ko/toolset/development-tools">더보기</a>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4">
<div class="phpmain1_4R_readrank">
<div class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>뜨거운 주제</h2>
</div>
<div class="phpgenera_Details_mainR4_bottom">
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/gmailyxdlrkzn" title="Gmail 이메일의 로그인 입구는 어디에 있나요?" class="phpgenera_Details_mainR4_bottom_title">Gmail 이메일의 로그인 입구는 어디에 있나요?</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>7284</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>9</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/java-tutorial" title="자바 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">자바 튜토리얼</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1622</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>14</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/cakephp-tutor" title="Cakephp 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">Cakephp 튜토리얼</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1342</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>46</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/laravel-tutori" title="라라벨 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">라라벨 튜토리얼</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1259</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>25</span>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR4_bottoms">
<a href="https://www.php.cn/ko/faq/php-tutorial" title="PHP 튜토리얼" class="phpgenera_Details_mainR4_bottom_title">PHP 튜토리얼</a>
<div class="phpgenera_Details_mainR4_bottoms_info">
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1206</span>
</div>
<div class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>29</span>
</div>
</div>
</div>
</div>
<div class="phpgenera_Details_mainR3_more">
<a href="https://www.php.cn/ko/faq/zt">더보기</a>
</div>
</div>
</div>
</div>
</div>
<div class="Article_Details_main2">
<div class="phpgenera_Details_mainL4">
<div class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div class="phpgenera_Details_mainL4_info">
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/496167.html" title="CSS에서 ID 선택기의 식별자는 무엇입니까" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202209/22/2022092215382122250.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS에서 ID 선택기의 식별자는 무엇입니까" />
</a>
<a href="https://www.php.cn/ko/faq/496167.html" title="CSS에서 ID 선택기의 식별자는 무엇입니까" class="phphistorical_Version2_mids_title">CSS에서 ID 선택기의 식별자는 무엇입니까</a>
<span class="Articlelist_txts_time">Sep 22, 2022 pm 03:57 PM</span>
<p class="Articlelist_txts_p">CSS에서 ID 선택기의 식별자는 무엇입니까</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/629094.html" title="위치가 3보다 크거나 같은 하위 요소의 스타일을 선택하려면 :nth-child(n+3) 의사 클래스 선택기를 사용하십시오." class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/465/014/170045044029480.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="위치가 3보다 크거나 같은 하위 요소의 스타일을 선택하려면 :nth-child(n+3) 의사 클래스 선택기를 사용하십시오." />
</a>
<a href="https://www.php.cn/ko/faq/629094.html" title="위치가 3보다 크거나 같은 하위 요소의 스타일을 선택하려면 :nth-child(n+3) 의사 클래스 선택기를 사용하십시오." class="phphistorical_Version2_mids_title">위치가 3보다 크거나 같은 하위 요소의 스타일을 선택하려면 :nth-child(n+3) 의사 클래스 선택기를 사용하십시오.</a>
<span class="Articlelist_txts_time">Nov 20, 2023 am 11:20 AM</span>
<p class="Articlelist_txts_p">위치가 3보다 크거나 같은 하위 요소의 스타일을 선택하려면 :nth-child(n+3) 의사 클래스 선택기를 사용하십시오.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/494600.html" title="CSS 의사 선택기 학습 의사 클래스 선택기 분석" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/62e9e24bc9146635.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS 의사 선택기 학습 의사 클래스 선택기 분석" />
</a>
<a href="https://www.php.cn/ko/faq/494600.html" title="CSS 의사 선택기 학습 의사 클래스 선택기 분석" class="phphistorical_Version2_mids_title">CSS 의사 선택기 학습 의사 클래스 선택기 분석</a>
<span class="Articlelist_txts_time">Aug 03, 2022 am 11:26 AM</span>
<p class="Articlelist_txts_p">CSS 의사 선택기 학습 의사 클래스 선택기 분석</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/604045.html" title="초보자부터 숙련자까지: is 및 where 선택기 사용 기술을 익히세요." class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/887/227/169413573489834.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="초보자부터 숙련자까지: is 및 where 선택기 사용 기술을 익히세요." />
</a>
<a href="https://www.php.cn/ko/faq/604045.html" title="초보자부터 숙련자까지: is 및 where 선택기 사용 기술을 익히세요." class="phphistorical_Version2_mids_title">초보자부터 숙련자까지: is 및 where 선택기 사용 기술을 익히세요.</a>
<span class="Articlelist_txts_time">Sep 08, 2023 am 09:15 AM</span>
<p class="Articlelist_txts_p">초보자부터 숙련자까지: is 및 where 선택기 사용 기술을 익히세요.</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/500827.html" title="자바스크립트 선택기가 실패하면 어떻게 해야 할까요?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202302/10/2023021010132241285.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="자바스크립트 선택기가 실패하면 어떻게 해야 할까요?" />
</a>
<a href="https://www.php.cn/ko/faq/500827.html" title="자바스크립트 선택기가 실패하면 어떻게 해야 할까요?" class="phphistorical_Version2_mids_title">자바스크립트 선택기가 실패하면 어떻게 해야 할까요?</a>
<span class="Articlelist_txts_time">Feb 10, 2023 am 10:15 AM</span>
<p class="Articlelist_txts_p">자바스크립트 선택기가 실패하면 어떻게 해야 할까요?</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/495587.html" title="CSS의 선택기에 하이퍼텍스트 태그 선택기가 포함되어 있나요?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/024/631079bcbb711256.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS의 선택기에 하이퍼텍스트 태그 선택기가 포함되어 있나요?" />
</a>
<a href="https://www.php.cn/ko/faq/495587.html" title="CSS의 선택기에 하이퍼텍스트 태그 선택기가 포함되어 있나요?" class="phphistorical_Version2_mids_title">CSS의 선택기에 하이퍼텍스트 태그 선택기가 포함되어 있나요?</a>
<span class="Articlelist_txts_time">Sep 01, 2022 pm 05:25 PM</span>
<p class="Articlelist_txts_p">CSS의 선택기에 하이퍼텍스트 태그 선택기가 포함되어 있나요?</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/604716.html" title="is 및 where 선택기에 대한 심층 분석: CSS 프로그래밍 수준 향상" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/000/000/164/169417577128346.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="is 및 where 선택기에 대한 심층 분석: CSS 프로그래밍 수준 향상" />
</a>
<a href="https://www.php.cn/ko/faq/604716.html" title="is 및 where 선택기에 대한 심층 분석: CSS 프로그래밍 수준 향상" class="phphistorical_Version2_mids_title">is 및 where 선택기에 대한 심층 분석: CSS 프로그래밍 수준 향상</a>
<span class="Articlelist_txts_time">Sep 08, 2023 pm 08:22 PM</span>
<p class="Articlelist_txts_p">is 및 where 선택기에 대한 심층 분석: CSS 프로그래밍 수준 향상</p>
</div>
<div class="phphistorical_Version2_mids">
<a href="https://www.php.cn/ko/faq/615388.html" title="wxss 선택자는 무엇입니까?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/202309/28/2023092816155222141.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="wxss 선택자는 무엇입니까?" />
</a>
<a href="https://www.php.cn/ko/faq/615388.html" title="wxss 선택자는 무엇입니까?" class="phphistorical_Version2_mids_title">wxss 선택자는 무엇입니까?</a>
<span class="Articlelist_txts_time">Sep 28, 2023 pm 04:27 PM</span>
<p class="Articlelist_txts_p">wxss 선택자는 무엇입니까?</p>
</div>
</div>
<a href="https://www.php.cn/ko/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div class="footer">
<div class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p>
</div>
<div class="footermid">
<a href="https://www.php.cn/ko/about/us.html">회사 소개</a>
<a href="https://www.php.cn/ko/about/disclaimer.html">부인 성명</a>
<a href="https://www.php.cn/ko/update/article_0_1.html">Sitemap</a>
</div>
<div class="footerbottom">
<p>
© php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>
<script src="/static/js/common_new.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js?1743315782"></script>
<script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script>
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<script type='text/javascript' src='/static/js/viewer.min.js?1'></script>
<script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script>
<script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script>
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function () {
var u = "https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u + 'matomo.php']);
_paq.push(['setSiteId', '9']);
var d = document,
g = d.createElement('script'),
s = d.getElementsByTagName('script')[0];
g.async = true;
g.src = u + 'matomo.js';
s.parentNode.insertBefore(g, s);
})();
</script>
<script>
// top
layui.use(function () {
var util = layui.util;
util.fixbar({
on: {
mouseenter: function (type) {
layer.tips(type, this, {
tips: 4,
fixed: true,
});
},
mouseleave: function (type) {
layer.closeAll("tips");
},
},
});
});
document.addEventListener("DOMContentLoaded", (event) => {
// 定义一个函数来处理滚动链接的点击事件
function setupScrollLink(scrollLinkId, targetElementId) {
const scrollLink = document.getElementById(scrollLinkId);
const targetElement = document.getElementById(targetElementId);
if (scrollLink && targetElement) {
scrollLink.addEventListener("click", (e) => {
e.preventDefault(); // 阻止默认链接行为
targetElement.scrollIntoView({
behavior: "smooth"
}); // 平滑滚动到目标元素
});
} else {
console.warn(
`Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.`
);
}
}
// 使用该函数设置多个滚动链接
setupScrollLink("Article_Details_main1L2s_1", "article_main_title1");
setupScrollLink("Article_Details_main1L2s_2", "article_main_title2");
setupScrollLink("Article_Details_main1L2s_3", "article_main_title3");
setupScrollLink("Article_Details_main1L2s_4", "article_main_title4");
setupScrollLink("Article_Details_main1L2s_5", "article_main_title5");
setupScrollLink("Article_Details_main1L2s_6", "article_main_title6");
// 可以继续添加更多的滚动链接设置
});
window.addEventListener("scroll", function () {
var fixedElement = document.getElementById("Article_Details_main1Lmain");
var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器
var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度
var scrollHeight = document.documentElement.scrollHeight; // 页面总高度
// 计算距离底部的距离
var distanceToBottom = scrollHeight - scrollTop - clientHeight;
// 当距离底部小于或等于300px时，取消固定定位
if (distanceToBottom <= 980) {
fixedElement.classList.remove("Article_Details_main1Lmain");
fixedElement.classList.add("Article_Details_main1Lmain_relative");
} else {
// 否则，保持固定定位
fixedElement.classList.remove("Article_Details_main1Lmain_relative");
fixedElement.classList.add("Article_Details_main1Lmain");
}
});
</script>
</body>
</html>