그는 또한 우리에게 DOM을 배우는 방법에 대한 많은 방법을 설명했는데 정말 유익했다고 생각합니다.
다음은 여러분과 공유하는 것이 더 좋다고 생각하는 몇 가지 예입니다.
1. 2차 연계 드롭다운 메뉴(1차 수준은 시, 2차는 도시, 1차에서는 지방을 선택해야 하며 그에 따라 2차 도시가 나타남)
단계: 1) 기본 프레임워크(HTML): 두 개의 복잡한 확인란, 두 번째 확인란에는 옵션이 없어야 합니다. 첫 번째 드롭다운 상자는 이벤트 소스로 사용되고 함수 구현 부분은 JavaScript는 onchange 메소드를 통해 활성화됩니다.
<![CDATA[ id= "province" onchange="selCity()"> <br><option >--지방 선택--</option><br><option >Beijing</option> <br>후베이옵션> <br>산둥옵션> <br><br></select> <br><select id="city"> <br><option>--도시 선택--</option> ;/xmp> <br><br> <br>2) 페이지 수정은 크게 필요하지 않고 드롭다운 메뉴에 하나만 표시되도록 하세요<br>3) JavaScript를 통해 기능을 구현하려고 합니다. 먼저 드롭다운 목록에서 지방을 선택하면 해당 도시가 나중에 직접 표시될 수 있습니다. 이 일대다 대응을 보고 처음에는 컨테이너 지도 컬렉션을 생각했지만 JavaScript에는 지도 컬렉션이 없기 때문에 생각했습니다. 배열과 같은 컨테이너에 대해 고민하고 최종적으로 이 기능을 구현하는 데 2차원 배열을 사용하기로 결정했습니다. <br>
</div>
<br><br><br>코드 복사<div class="codetitle">
<span><a style="CURSOR: pointer" data="4167" class="copybut" id="copybut4167" onclick="doCopy('code4167')"> 코드는 다음과 같습니다.<u></u> </a><script type="text/javascript "> </span>function selCity() </div>{ <div class="codebody" id="code4167">var arr= [["--도시 선택--"],["Haidian District","Chaoyang District","Dongcheng District","Xicheng District", "Xuanwu District"], <br>["Heping District", "Hebei District", "Hedong District", "Hexi District", "Nankai District"], <br>["Wuhan", "Yichang" , "Xiaogan","Xiangfan","Jingzhou"], <br>["Jinan","Qingdao","Yantai","Weihai","Rizhao"], <br>["Shijiazhuang","Baoding" ,"장자커우","랑팡","한단"]]; <br>var selpNode = document.getElementById("province"); <br>var selcNode = document.getElementById("city") <br>var 도시 = arr[ selpNode.selectedIndex]; <br>selcNode.options.length = 0; <br>for(var x=0; x<citys.length x>{ <br>var optNode = document.createElement ("옵션"); <br>optNode.innerText = 도시[x]; <br>selcNode.appendChild(optNode) <br>} <br>} <br></script> <br> 요약: 매번 배열을 삭제하는 것을 잊지 마세요. <br>2. 메일링 리스트<br>생각: 1) 우선 전체적인 프레임워크를 생각해보면 반드시 테이블을 사용하여 서식을 지정하고 행과 같은 테이블과 노드를 조작하여 관련 기능을 구현하는 것을 생각하게 됩니다. cells<br>2) css 가장 중요한 것은 테이블의 형식을 지정하는 것이고, 두 번째는 className을 동적으로 수정하여 두 행에 서로 다른 효과를 선택하고 표시하는 것입니다. <br> 길이 때문에 html. 그리고 코드의 CSS 부분은 비교적 간단해서 당황스럽지 않을 것입니다. </citys.length>
</div>3) JavaScript로 다양한 기능을 구현하는 코드는 다음과 같습니다. <br><br><br><br><br>코드를 복사합니다<br><br><div class="codetitle"> 코드는 다음과 같습니다. <span><div class="codebody" id="code82141"> <br><script> <br>var color =""; <br>function getStyle() <br>{ <br>var tableNode =document.getElementsByTagName("table")[0]; >var arr = tableNode.rows; <br>for(var x = 0;x<arr.length>{ <br>if(x%2) <br>arr[x].className = " one"; <br>else <br>arr[x].className = "two"; <br>var tdNode0 = arr[x].cells[0]; <br>tdNode0.align = "center"; <br>arr[x].onmouseover = function() <br>{ <br>color = this.className;//원래 값을 기록하고, 마우스를 한 번 움직이면 원래 색상으로 돌아옵니다. <br>this.className = "체크됨"; <br>} <br>arr[x].onmouseout = function() <br>{ <br>this.className = <br>} <br>} <br>} <br> / /동일한 기능을 달성하려면 모두 선택해야 하므로 어떤 노드인지 구별하기 위해 값을 전달합니다. <br>function allCheck(index) <br>{ <br>var allNode = document.getElementsByName("all") [index]; <br>var checkNodes = document.getElementsByName("mail"); <br>for(var x=0;x<checkNodes.length;x ) <BR>{ <BR>checkNodes[x].checked = allNode.checked ; <BR>} <BR>} <BR>function checkBut(num) <BR>{ <BR>var mailNodes = document.getElementsByName("mail") <BR>for(var x=0; x<mailNodes.length; <BR>else <BR>mailNodes[x].checked = num <BR>} <BR>} <BR>function del() <BR>{ <BR>var b = window.confirm ("이메일 선택을 모두 삭제하시겠습니까? "); <BR>if(!b) <BR>return ; <BR>var mailNodes = document.getElementsByName("mail"); <BR>var arr = new Array(); <BR>var pos = 0; <BR>for(var x=0; x<mailNodes.length; .parentNode; <BR>arr[pos ] = trNode; <BR>} <BR>} <BR>for(var x=0; x<arr .length; x ) <BR>{ <BR>arr[x] .parentNode.removeChild(arr[x]) <BR>} <BR>getStyle() <BR>} <BR>window.onload = getStyle ; <BR></스크립트></arr.length>
</div></span>
</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="jQuery html() 및 기타 방법 소개_jquery" href="https://m.php.cn/ko/faq/23201.html">jQuery html() 및 기타 방법 소개_jquery</a></span><span>다음 기사：<a class="dBlack" title="jQuery html() 및 기타 방법 소개_jquery" href="https://m.php.cn/ko/faq/23203.html">jQuery html() 및 기타 방법 소개_jquery</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="https://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ko/faq/1609.html" title="Bootstrap 목록 그룹 구성 요소에 대한 심층 분석" class="aBlack">Bootstrap 목록 그룹 구성 요소에 대한 심층 분석</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1640.html" title="JavaScript 함수 커링에 대한 자세한 설명" class="aBlack">JavaScript 함수 커링에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1949.html" title="JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)" class="aBlack">JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/2248.html" title="Angularjs는 WeChat UI(weui)를 통합합니다." class="aBlack">Angularjs는 WeChat UI(weui)를 통합합니다.</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/2351.html" title="JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술" class="aBlack">JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p></div><div class="footermid"><a href="https://m.php.cn/ko/about/us.html">회사 소개</a><a href="https://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="https://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' 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>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body><!-- Matomo --><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><!-- End Matomo Code --></html>]]> 
