>웹 프론트엔드 >H5 튜토리얼 >당신이 모르는 5가지 HTML5 인터페이스 소개_html5 튜토리얼 기술

당신이 모르는 5가지 HTML5 인터페이스 소개_html5 튜토리얼 기술

WBOY
WBOY원래의
2016-05-16 15:48:581961검색

원본 주소: 당신이 몰랐던 존재하는 HTML5 API 5개
원본 날짜: 2010년 9월 27일
번역 날짜: 2013년 8월 7일
사람들이 "HTML5"라는 단어를 볼 때 "라고 하면 적어도 절반 이상의 사람들은 그녀를 섹시하고 매력적인 미인으로 생각할 것이지만 동시에 당신을 비참하게 만들 수 있는 유니콘으로 생각할 것이라고 추정됩니다. 당연하지 우리 개발자?
기본 API가 오랫동안(아마 1999~2009년) 정체되어 있어 "자리 표시자"와 같은 기본 추가 기능도 처리하는 데 오랜 시간이 걸린다는 사실을 알게 되었습니다.
현재 주류 브라우저는 많은 새로운 HTML5 기능을 구현했지만, 많은 개발자는 이러한 간단하고 유용한 API를 눈치채지 못했습니다.
이 시리즈 기사에서는 이러한 인터페이스 API를 소개하고 더 많은 개발자가 아직 널리 알려지지 않은 API를 탐색하도록 장려하기를 바랍니다.
Element.classList
이 속성은 몇 년 동안 출시되었습니다. classList를 통해 JavaScript를 통해 기본 CSS의 클래스 속성을 조작할 수 있습니다.
코드는 다음과 같습니다. 🎜>

코드 복사코드는 다음과 같습니다.
// classList 속성을 사용합니다( Dom 요소, CSS 클래스 이름)
functionggleClassList(element,cName){
// 1. classList API
// 클래스를 전환하고, 존재하면 제거하고, 없으면 추가
if(element.classList.toggle){
element .classList.toggle(cName);
return true;
}
// 실제로 이 함수가 지원되는 경우 ,
// 그러면 다음 코드는 실행되지 않습니다. 이는 단지 데모용이므로 유연하게 사용하십시오.
// 2. classList API
// 요소의 클래스 속성에 이 CSS 클래스가 포함되어 있는지 여부
var hasHide = element.classList.contains(cName);
//
if(hasHide){
// 3. classList API
// 숨기기 클래스
요소를 제거합니다. classList.remove(cName);
} else {
// 4. classList API
// 숨기기 클래스 추가
element.classList.add(cName)
}
return true;
};


ContextMenu API
테스트 후 chrome28이 작동하지 않습니다. . .
새로운 API인 ContextMenu는 뛰어난 인터페이스입니다. 이 인터페이스를 사용하면 브라우저의 기본 마우스 오른쪽 버튼 클릭 메뉴를 재정의하는 대신 브라우저의 컨텍스트 메뉴(오른쪽 클릭 메뉴)에 메뉴 항목을 쉽게 추가할 수 있습니다.
페이지에서 JS 스크립트를 비활성화할 때 중복되는 HTML 코드를 방지하려면 js 스크립트를 사용하여 메뉴 컨텍스트 메뉴를 동적으로 생성하는 것이 좋습니다.
코드는 다음과 같습니다.


코드를 복사하세요코드는 다음과 같습니다.




보려면 이 영역을 클릭하세요. 메뉴


;





/menuitem>


Element.dataset
Dataset(dataset) API를 사용하면 개발자는 DOM 요소에서 data- 접두사로 시작하는 속성 값을 설정(설정)하고 가져오(가져오기)할 수 있습니다.
코드는 다음과 같습니다.

코드를 복사하세요
코드는 다음과 같습니다.




코드 복사
코드는 다음과 같습니다.
function testDataset(){
//
var intro = document.getElementById("intro")// 이 ID는 아닙니다. 속성이지만 data-id
var id = intro.dataset.id;
// data-website
var website = intro.dataset.website;// data-blog- URL, 카멜 케이스..
var blogUrl = intro.dataset.blogUrl;
// data-my-name
var myName = intro.dataset.myName
//
var msg = "qq:" id
",website:" 웹사이트
",blogUrl:" blogUrl
",myName:" myName

//
warn(msg);
};


말할 것도 없고, classList와 마찬가지로 간단하지만 실용적입니다. (생각해 보세요. 일부 상호 작용과 백그라운드 및 프런트 엔드 JS의 분리가 변경되었나요?)
window.postMessage API

IE8은 몇 년 동안 postMessage API를 지원해 왔으며 이 API는 window를 허용합니다. 및 iframe 요소가 서로 통신합니다. 교차 도메인 지원. 코드는 다음과 같습니다.



코드 복사
코드는 다음과 같습니다.
// 도메인 1의 창이나 프레임에서 다른 도메인을 호스팅하는 iframe으로 메시지를 보냅니다.
var iframeWindow = document.getElementById("iframe").contentWindow
iframeWindow.postMessage("첫 번째 창에서 안녕하세요. !");
// 다른 호스트의 iframe 내부에서 메시지 수신
window.addEventListener("message", function(event) {
// 보내는 도메인을 신뢰하는지 확인하세요
if(event.origin = = "http://davidwalsh.name") {
// 메시지 로그아웃
console.log(event.data)
// 메시지 보내기
event.source.postMessage ("안녕하세요!");
}
]);
// 메시지는 문자열 형식의 데이터만 허용하지만 JSON.stringify 및 JSON.parse를 사용하여 더 많은 데이터를 전달할 수 있습니다. 의미 있는 메시지.



autofocus 속성

autofocus 속성은 페이지가 로드될 때 특정 BUTTON, INPUT 또는 TEXTAREA 요소에 자동으로 초점을 맞추도록 합니다.


코드 복사
코드는 다음과 같습니다.



autofocus 속성은 주로 단순 입력 페이지에서 사용됩니다. 자세한 내용은 autofocus 속성을 참조하세요.
브라우저 제조사마다 이러한 API를 지원하는 방식이 다르기 때문에 사용하기 전에 호환성을 확인하고 읽어보는 것이 가장 좋습니다. 위에 나열된 API에 대해 자세히 알아보고 마스터하게 됩니다.
부분에 대한 테스트 코드는 다음과 같습니다.




코드 복사
코드는 다음과 같습니다.



5 HTML5 API 인터페이스 <br> <meta name="Generator" content="EditPlus"> <br><meta name="Author" content="renfufei@qq.com"> <br><meta name="Description" 콘텐츠 = "original=http://davidwalsh.name/html5-apis"> <br><style> <br>.hide{ display:none} <br>.poplayer{ z-index:999; 배경색:#fff; 상단:0px;왼쪽:0px;오버플로: 숨김;너비:100%;높이:100%;불투명도:1;} <br>.close{ 상단:3px; 오른쪽:10px; 절대;} <br></style> <br><script> <br>// 경고 메시지 표시<br>function warning(msg){ <br>warn || "알 수 없는 경고입니다." <br>if(window.console){ <br>console.warn(msg); <br>} else { <br>alert(msg) <br>} <br>}// classList 사용 attribute (Dom 요소, CSS 클래스 이름) <br>functionggleClassList(element, cName){ <br>// 1. classList API <br>// 클래스를 전환하고, 존재하면 제거하고, 없으면 추가합니다. 존재 <br>if (element.classList.toggle){ <br>element.classList.toggle(cName); <br>return true; <br>} <br>// 실제로 이 함수는ggleClassList입니다. 지원됨, <br> // 그러면 다음 코드는 실행되지 않습니다. 데모용이므로 유연하게 적용해 주세요. <br>// 2. classList API <br>// 요소의 클래스 속성에 이 CSS가 포함되어 있는지 여부 class <br>var hasHide = element.classList.contains(cName); <br>// <br>if(hasHide){ <br>// 3. classList API <br>// 숨기기 클래스 <br>요소 제거 .classList.remove( cName); <br>} else { <br>// 4. classList API <br>// 숨기기 클래스 추가 <br>element.classList.add(cName); return true; <br>// className 속성 사용(Dom 요소, css 클래스 이름) <br>functionggleClassName(element, cName){ <br>var className = element.className || 🎜>// 시작과 끝의 공백을 제거합니다 <br>cName = cName.replace(/^s*|s*$/g,"") <br>// 중간에 공백이 있는 경우 cName을 잘 처리하려면 분할해서 처리하면 됩니다. <br>var BlankReg = /s / <br>if(blankReg.test(cName)){ <br> warning("'" cName "'contains 공백 문자 in the middle"); <br>return false; <br>} <br>// 일반적으로 b는 표시되는 연속 문자의 경계를 나타내며 다음과 같이 이해할 수 있습니다. <br>// "hide2 hide hide myname" 그러면 <br>// hide2 전후에 가상이 있습니다. hide 전후에도 b가 있습니다. <br>// 하지만 hi와 de 사이에는 없습니다. if (rep.test(className)){ <br>className = className.replace(rep,"") <br>} else { <br>className = " " cName; / 새 클래스명을 교체합니다. <br>element.className = className; <br>return true; <br>}; <br>// 함수, 토글(요소 ID, 클래스 이름) <br>functionggleClass(elementId, cName){ <br>// DOM 요소 가져오기 <br>var element = document.getElementById(elementId) <br>// 요소가 존재하지 않는 경우 <br>if(!element){ <br>warn("ID가 " elementId "인 요소 존재하지 않습니다. "); <br>false를 반환합니다. <br>} <br>if(!element.classList){ <br>warn("ID가 " elementId "인 요소는 classList 속성을 지원하지 않으며 다른 속성을 사용합니다. 달성하는 것을 의미합니다.") ; <br>returnggleClassName(element,cName); <br>} else { <br>returnggleClassList(element,cName); <br>} <br>}; <br>function testDataset( ){ <br>/ / <br>var intro = document.getElementById("intro") <br>// 이는 id 속성이 아니라 data-id 값입니다. <br>var id = intro .dataset.id <br>/ /data-website <br>var website = intro.dataset.website; <br>// data-blog-url, camel case.. <br>var blogUrl = intro.dataset. blogUrl;// data -my-name <br>var myName = intro.dataset.myName <br>// <br>var msg = "qq:" id <br> ",website:" 웹사이트 <br> ",blogUrl:" blogUrl <br> ",myName:" myName <br>// <br>warn(msg) <br>}// dom 로드 후 실행 <br>window.addEventListener("DOMContentLoaded" , function() { <br>var open = document.getElementById("open"); <br>var close = document.getElementById("close"); <br>open.addEventListener ("click",function(){ <br>// <br>toggleClass("diary2","hide"); <br>toggleClass("loading","hide"); <br>}); >close.addEventListener("click", function(){ <br>// <br>toggleClass("diary2","hide"); <br>toggleClass("loading","hide"); <br>} ); <br>testDataset() <br>}, <br></script><br><body> div> <br><div id ="diary2" class="diary poplayer hide"> <br><a href="javascript:void(0)" _fcksavedurl=""javascript:void(0)"" id="close">닫기< ;/a><div id="loading" class="loading hide" style="z-index:1; 위치: 절대; 왼쪽: 40%; 위쪽: 30%; 너비: 104px; 높이: 104px;불투명도: 0.5;배경 : #000000;테두리: 0px 솔리드 #000000;테두리 반경: 10px;-webkit-border-radius: 10px;"> <br><img src="http://mat1.gtimg.com/app/ opent/images/wiki/resource/weiboicon32.png" alt="" <br />style="position:absolute; left:26px; top:10px;width: 50px;height: 50px;border-radius: 10px;-webkit -border-radius: 10px;"> <br><div class="loadingtext" style="position:absolute;left: 12px;top: 76px;color: #ffffff;">로드 중</ div> <br></div> <br></div> <br><div> <br><a href="javascript:void(0)" id="open">열기< ;/a> <br></div> <br></div> <br><div class="hide"> <br><!-- contextmenu는 사용할 상황별 메뉴를 지정합니다. --> <br><!-- !!!이유는 모르겠지만 이 구성은 내 브라우저에서 작동하지 않습니다. --> <br><section contextmenu="mymenu" style="min-height:100px;min-height:200px;ground:#999;"> <br><h1>보려면 이 영역을 클릭하세요. 메뉴 </h1> <br><!-- <br />코드 구조를 명확하게 하기 위해 메뉴 요소는 사용할 요소 내부에 배치됩니다. 실제로 외부에 배치할 수도 있습니다. <br />--> ; <br /><!-- 메뉴 추가, 사진 아이콘은 직접 설정해주세요. 메뉴 추가 --> <br><menu type="context" id="mymenu"> <br><menuiitem label="페이지 새로 고침" onclick="window.location.reload();" ="http://mat1.gtimg.com/app/opent/images/wiki/resource/weiboicon32.png"></menuitem> <br><menu label="공유 대상..." icon= "http://www.sinaimg.cn/blog/developer/wiki/32x32.png"> <br><menuiitem label="Sina Weibo" icon="http://www.sinaimg.cn/blog / 개발자/wiki/32x32.png" onclick="window.location.href='http://www.weibo.com'"></menuitem> <br><menuitem label="Tencent Weibo" icon= "http://mat1.gtimg.com/app/opent/images/wiki/resource/weiboicon32.png" onclick="window.location.href='http://t.qq.com'"> /menuitem></menuitem> <br></menu> <br></div> <br><div id= " " data-website="www.csdn.net" data-id="551996458" data-my-name="철 앵커" data-blog-url="http://blog.csdn.net/renfufei" > </div> <br></span></div> </div> </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="HTML5 canvas_html5 튜토리얼 기술을 사용하여 베지어 곡선을 그리기 위한 전체 코드" href="https://m.php.cn/ko/faq/6218.html">HTML5 canvas_html5 튜토리얼 기술을 사용하여 베지어 곡선을 그리기 위한 전체 코드</a></span><span>다음 기사:<a class="dBlack" title="HTML5 canvas_html5 튜토리얼 기술을 사용하여 베지어 곡선을 그리기 위한 전체 코드" href="https://m.php.cn/ko/faq/6220.html">HTML5 canvas_html5 튜토리얼 기술을 사용하여 베지어 곡선을 그리기 위한 전체 코드</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/348281.html" title="AlloyTouch 전체 화면 스크롤 플러그인으로 30초 만에 부드러운 H5 페이지 생성" class="aBlack">AlloyTouch 전체 화면 스크롤 플러그인으로 30초 만에 부드러운 H5 페이지 생성</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348372.html" title="HTML5 실제 전투 및 터치 이벤트 분석(touchstart, touchmove 및 touchend)" class="aBlack">HTML5 실제 전투 및 터치 이벤트 분석(touchstart, touchmove 및 touchend)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348373.html" title="HTML5 Canvas 9의 이미지 그리기 예제에 대한 자세한 설명" class="aBlack">HTML5 Canvas 9의 이미지 그리기 예제에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348374.html" title="정규 표현식과 새로운 HTML5 요소" class="aBlack">정규 표현식과 새로운 HTML5 요소</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/348469.html" title="NodeJS와 HTML5를 결합하여 여러 파일을 끌어서 놓아 서버에 업로드하는 방법" class="aBlack">NodeJS와 HTML5를 결합하여 여러 파일을 끌어서 놓아 서버에 업로드하는 방법</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></html>