十行HTML完成增进现实

十行HTML完结增加现实

2017/06/11 · HTML5 · 1 评论

本文由 伯乐在线 - 豆蔻梢头杯哈希不加盐 翻译,艾凌风 校稿。未经许可,禁绝转发!
斯洛伐克语出处:Alexandra Etienne。迎接参加翻译组。

你想透过互联网完结增进现实吧?未来你只需要 10 行 HTML 代码!真的!让自个儿带您看大器晚成看代码,特简单。

小编们这段时间发布了AR.js。你不要求安装其余利用,用你的无绳电话机通过互连网就能够心获得有力的增长现实。但让大家更进一层,看一下怎么着令你也撰写出本人的做达成实体验。多亏掉巧妙的a-frame,最短的 A陆风X8.js 独有 10 行 HTML 代码。你能够在codepen观察在线版:

XHTML

<!-- Augmented Reality on the Web in 10 lines of html! --> <script src="; <script src="; <script>THREEx.ArToolkitContext.baseURL = '; <body style='margin : 0px; overflow: hidden;'> <a-scene embedded artoolkit='sourceType: webcam;'> <a-box position='0 0.5 0' material='opacity: 0.5;'></a-box> <a-marker-camera preset='hiro'></a-marker-camera> </a-scene> </body>

1
2
3
4
5
6
7
8
9
10
<!-- Augmented Reality on the Web in 10 lines of html! https://github.com/jeromeetienne/ar.js -->
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
<script>THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'</script>
<body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded artoolkit='sourceType: webcam;'>
        <a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>
        <a-marker-camera preset='hiro'></a-marker-camera>
    </a-scene>
</body>

笔者们来后生可畏行风度翩翩行看.

你想透过互联网实现增进现实吗?以后您只须求 10 行 HTML 代码!真的!让自家带您看生机勃勃看代码,非常轻巧。

第三章 jQuery中的DOM操作,jquerydom

  DOM(Document Object Model)文书档案对象模型,每张网页都能用DOM表示出来,每意气风发份DOM都能当作风姿罗曼蒂克颗DOM树。

  jQuery世襲了JavaScript对DOM对象操作的特征,使开采人士能造福地操作DOM对象。

  1.查找节点

图片 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-1</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function () { var $para = $("p"); // 获取<p>节点 var p_txt = $para.attr("title"); // 获取<p>成分节点属性title alert(p_txt); var $li = $("ul li:eq(1)"); // 获取第四个<li>元商节点 var ul_txt = $li.attr("title"); // 获取<ul>里的第二个<li>成分节点的属性title var li_txt = $li.text(); // 获取第二个<li>元季秋点的text alert(ul_txt); alert(li_txt); }); //]]> </script> </head> <body> <p title="选择你最心爱的水果." >你最欢欣的果品是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘柑'>金橘</li> <li title='凤梨'>凤梨</li> </ul> </body> </html> View Code

  2.创办节点

图片 2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-2-1</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ var $li_1 = $("<li></li>"); // 创造第二个<li>成分 var $li_2 = $("<li></li>"); // 创制第二个<li>成分 var $parent = $("ul"); // 获取<ul>节点,<li>的父节点 $parent.append($li_1); // 加多到<ul>节点中,使之能在网页中显得 $parent.append($li_2); // 能够运用链式写法:$parent.append($li_1).append($li_2); }); //]]> </script> </head> <body> <p title="选择你最欣赏的水果." >你最爱怜的鲜果是?</p> <ul> <li title='苹果'>苹果</li> <li title='柑橘'>金橘</li> <li title='黄梨'>黄梨</li> </ul> </body> </html> View Code 图片 3<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-2-2</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ var $li_1 = $("<li>金蕉</li>"); // 创制二个<li>成分,包罗成分节点和文书节点 //“天宝蕉”便是开创的公文节点。 var $li_2 = $("<li>香梨</li>"); // 创设叁个<li>成分,包罗元晚秋点和文书节点 //“黄冠梨”正是开创的公文节点。 var $parent = $("ul"); // 获取<ul>节点。<li>的父节点 $("ul").append($li_1); // 增多到<ul>节点中,使之能在网页中显得 $("ul").append($li_2); // 增多到<ul>节点中,使之能在网页中显得 }); //]]> </script> </head> <body> <p title="采用你最赏识的水果." >你最喜爱的瓜果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>广橘</li> <li title='黄梨'>凤梨</li> </ul> </body> </html> View Code 图片 4<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-2-3</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ var $li_1 = $("<li title='大蕉'>天宝蕉</li>"); //创设叁个<li>成分//包含成分节点,文本节点和品质节点 //此中title='美蕉' 正是成立的品质节点 var $li_2 = $("<li title='丰水梨'>丰水梨</li>"); //创造一个<li>成分 //包蕴元季秋点,文本节点和质量节点 //在那之中title='烟台梨' 正是成立的质量节点 var $parent = $("ul"); // 获取<ul>节点。<li>的父节点 $parent.append($li_1); // 加多到<ul>节点中,使之能在网页中显得 $parent.append($li_2); // 等价于:$parent.append($li_1).append($li_2); }); //]]> </script> </head> <body> <p title="采用你最赏识的水果." >你最心爱的鲜果是?</p> <ul> <li title='苹果'>苹果</li> <li title='柑儿'>橘柑</li> <li title='凤梨'>凤梨</li> </ul> </body> </html> View Code

  3.插入节点

图片 5<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-3-1</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ var $li_1 = $("<li title='香蕉'>天宝蕉</li>"); // 成立第二个<li>元素var $li_2 = $("<li title='南果梨'>黄冠梨</li>"); // 创制第二个<li>成分 var $li_3 = $("<li title='此外'>其余</li>"); // 创制第三个<li>成分 var $parent = $("ul"); // 获取<ul>节点,即<li>的父节点 var $two_li = $("ul li:eq(1)"); // 获取<ul>节点中第二个<li>成分节点 $parent.append($li_1); // append方法将开创的首先个<li>成分增加到父元素的结尾面 $parent.prepend($li_2); // prepend方法将创建的第一个<li>元素增加到父成分里的最前头 $li_3.insertAfter($two_li); // insertAfter方法将成立的第八个<li>成分成分插入到收获的<li>之后 }); //]]> </script> </head> <body> <p title="采取你最心爱的水果." >你最兴奋的鲜果是?</p> <ul> <li title='苹果'>苹果</li> <li title='广橘'>柑橘</li> <li title='凤梨'>凤梨</li> </ul> </body> </html> View Code 图片 6<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-3-2</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ var $one_li = $("ul li:eq(1)"); // 获取<ul>节点中第一个<li>成分节点 var $two_li = $("ul li:eq(2)"); // 获取<ul>节点中第一个<li>元晚秋点 $two_li.insertBefore($one_li); //移动节点 }); //]]> </script> </head> <body> <p title="选择你最欢腾的水果." >你最欣赏的水果和干果是?</p> <ul> <li title='苹果'>苹果</li> <li title='广橘'>金橘</li> <li title='黄梨'>黄梨</li> </ul> </body> </html> View Code

  4.刨除节点

图片 7<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-4-1</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("ul li:eq(1)").remove(); // 获取第三个<li>成分节点后,将它从网页中除去。 }); //]]> </script> </head> <body> <p title="选取你最赏识的水果." >你最心爱的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='金橘'>金橘</li> <li title='菠萝'>黄梨</li> </ul> </body> </html> View Code 图片 8<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-4-2</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ var $li = $("ul li:eq(1)").remove(); // 获取第三个<li>元素秋点后,将它从网页中去除。 $li.appendTo("ul"); // 把刚刚剔除的又再一次增添到<ul>成分里 //所以,删除只是从网页中去除,在jQuery对象中,那个元素依然存在的,大家能够再度获得它 }); //]]> </script> </head> <body> <p title="采用你最爱怜的水果." >你最快乐的鲜果是?</p> <ul> <li title='苹果'>苹果</li> <li title='广橘'>柑果</li> <li title='凤梨'>凤梨</li> </ul> </body> </html> View Code 图片 9<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-4-3</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("ul li").remove("li[title!=菠萝]"); //把<li>成分中属性title不等于"黄梨"的<li>成分删除 }); //]]> </script> </head> <body> <p title="选拔你最欣赏的水果." >你最怜爱的鲜果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘柑'>柑桔</li> <li title='凤梨'>凤梨</li> </ul> </body> </html> View Code 图片 10<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-4-4</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("ul li:eq(1)").empty(); // 找到第三个<li>成分节点后,清空此因素里的内容 }); //]]> </script> </head> <body> <p title="接收你最赏识的水果." >你最心爱的瓜果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘柑'>蜜橘</li> <li title='黄梨'>凤梨</li> </ul> </body> </html> View Code

  5.复制节点

图片 11<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-5-1</title> <!-- 引进jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("ul li").click(function(){ $(this).clone().appendTo("ul"); // 复制当前点击的节点,并将它追加到<ul>成分 }) }); </script> </head> <body> <p title="采纳你最赏识的水果." >你最快乐的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘柑'>柑果</li> <li title='凤梨'>黄梨</li> </ul> </body> </html> View Code 图片 12<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-5-2</title> <!-- 引进jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("ul li").click(function(){ $(this).clone(true).appendTo("ul"); // 注意参数true //能够复制自个儿,並且她的别本也许有雷同效果。 }) }); </script> </head> <body> <p title="采纳你最喜爱的水果." >你最高兴的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='凤梨'>凤梨</li> </ul> </body> </html> View Code

  6.替换节点

图片 13<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-6</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("p").replaceWith("<strong>你最不赏识的鲜果是?</strong>"); // 同样的贯彻: $("<strong>你最厌倦的水果和干果是?</strong>").replaceAll("p"); }); //]]> </script> </head> <body> <p title="选取你最爱怜的水果." >你最爱怜的瓜果是?</p> <ul> <li title='苹果'>苹果</li> <li title='金橘'>广橘</li> <li title='黄梨'>凤梨</li> </ul> </body> </html> View Code

  7.包裹节点

图片 14<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-7-1</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("strong").wrap("<b></b>");//用<b>成分把<strong>成分包裹起来 }); //]]> </script> </head> <body> <strong title="采取你最欢跃的水果." >你最赏识的水果和干果是?</strong> <ul> <li title='苹果'>苹果</li> <li title='橘柑'>金橘</li> <li title='黄梨'>黄梨</li> </ul> </body> </html> View Code 图片 15<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-7-2</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("strong").wrap("<b></b>"); }); //]]> </script> </head> <body> <strong title="选用你最心爱的水果." >你最欢欣的瓜果是?</strong> <strong title="采用你最赏识的水果." >你最怜爱的水果和干果是?</strong> <ul> <li title='苹果'>苹果</li> <li title='蜜柑'>丑柑</li> <li title='凤梨'>黄梨</li> </ul> </body> </html> View Code 图片 16<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-7-3</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("strong").wrapAll("<b></b>"); }); //]]> </script> </head> <body> <strong title="选取你最欢娱的水果." >你最赏识的瓜果是?</strong> <strong title="选取你最欢悦的水果." >你最欢欣的鲜果是?</strong> <ul> <li title='苹果'>苹果</li> <li title='橘柑'>丑柑</li> <li title='凤梨'>凤梨</li> </ul> </body> </html> View Code 图片 17<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-7-4</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("strong").wrapInner("<b></b>"); }); //]]> </script> </head> <body> <strong title="选取你最赏识的水果." >你最爱怜的瓜果是?</strong> <ul> <li title='苹果'>苹果</li> <li title='金橘'>橘子</li> <li title='凤梨'>黄梨</li> </ul> </body> </html> View Code

  8.属性操作

图片 18<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-8</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ //设置<p>成分的属性'title' $("input:eq(0)").click(function(){ $("p").attr("title","接受你最赏识的水果."); }); //获取<p>元素的天性'title' $("input:eq(1)").click(function(){ alert( $("p").attr("title") ); }); //删除<p>成分的性质'title' $("input:eq(2)").click(function(){ $("p").removeAttr("title"); }); }); //]]> </script> </head> <body> <input type="button" value="设置<p>成分的属性'title'"/> <input type="button" value="获取<p>成分的性质'title'"/> <input type="button" value="删除<p>成分的习性'title'"/> <p title="选择你最爱怜的水果." >你最高兴的瓜果是?</p> <ul> <li title='苹果'>苹果</li> <li title='广橘'>橘柑</li> <li title='凤梨'>凤梨</li> </ul> </body> </html> View Code

  9.样式操作

图片 19<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-9-1</title> <style type="text/css"> .high{ font-weight:bold; /* 粗体字 */ color : red; /* 字体颜色设置草绿*/ } .another{ font-style:italic; color:blue; } </style> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function () { //获取样式 $("input:eq(0)").click(function () { alert($("p").attr("class")); }); //设置样式 $("input:eq(1)").click(function () { $("p").attr("class", "high"); }); //追加样式 $("input:eq(2)").click(function () { $("p").addClass("another"); }); //删除全体体制 $("input:eq(3)").click(function () { $("p").removeClass(); }); //删除钦命样式 $("input:eq(4)").click(function () { $("p").removeClass("high"); }); //重复切换样式 $("input:eq(5)").click(function () { $("p").toggleClass("another"); }); //决断成分是不是包蕴某样式 $("input:eq(6)").click(function () { alert($("p").hasClass("another")); alert($("p").is(".another")); //同上 }); }); //]]> </script> </head> <body> <input type="button" value="输出class类"/> <input type="button" value="设置class类"/> <input type="button" value="追加class类"/> <input type="button" value="删除全体class类"/> <input type="button" value="删除钦定class类"/> <input type="button" value="重复切换class类"/> <input type="button" value="判别成分是还是不是含有有个别class类"/> <p class="myClass" title="接纳你最欢欣的水果." >你最赏识的瓜果是?</p> <ul> <li title='苹果'>苹果</li> <li title='柑儿'>广橘</li> <li title='黄梨'>黄梨</li> </ul> </body> </html> View Code

  10.装置获取HTML,文本和值

图片 20<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-10-1</title> <style type="text/css"> .test{ font-weight:bold; color : red; } .add{ font-style:italic; } </style> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ //获取<p>成分的HTML代码 $("input:eq(0)").click(function(){ alert( $("p").html() ); }); //获取<p>成分的文书 $("input:eq(1)").click(function(){ alert( $("p").text() ); }); //设置<p>元素的HTML代码 $("input:eq(2)").click(function(){ $("p").html("<strong>你最爱怜的录制是?</strong>"); }); //设置<p>成分的文件 $("input:eq(3)").click(function(){ $("p").text("你最欢快的头面人物是?"); }); //设置<p>成分的文件 $("input:eq(4)").click(function(){ $("p").text("<strong>你最欣赏的二二十七日游是?</strong>"); }); //获取开关的value值 $("input:eq(5)").click(function(){ alert( $(this).val() ); }); //设置开关的value值 $("input:eq(6)").click(function(){ $(this).val("作者被点击了!"); }); }); //]]> </script> </head> <body> <input type="button" value="获取<p>元素的HTML代码"/> <input type="button" value="获取<p>成分的文件"/> <input type="button" value="设置<p>成分的HTML代码"/> <input type="button" value="设置<p>元素的公文"/> <input type="button" value="设置<p>成分的文书(带HTML)"/> <input type="button" value="获取按键的value值"/> <input type="button" value="设置按键的value值"/> <p title="选取你最欢畅的水果." ><strong>你最爱怜的水果是?</strong></p> <ul> <li title='苹果'>苹果</li> <li title='柑儿'>金橘</li> <li title='黄梨'>凤梨</li> </ul> </body> </html> View Code 图片 21<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-10-2-1</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("#address").focus(function(){ // 地址框得到鼠标大旨 var txt_value = $(this).val(); // 获得当前文本框的值 if(txt_value=="请输入邮箱地址"){ $(this).val(""); // 若是相符条件,则清空文本框内容 } }); $("#address").blur(function(){ // 地址框失去鼠标主题 var txt_value = $(this).val(); // 拿到当前文本框的值 if(txt_value==""){ $(this).val("请输入邮箱地址");// 假使切合条件,则设置剧情 } }) $("#password").focus(function(){ var txt_value = $(this).val(); if(txt_value=="请输入邮箱密码"){ $(this).val(""); } }); $("#password").blur(function(){ var txt_value = $(this).val(); if(txt_value==""){ $(this).val("请输入邮箱密码"); } }) }); //]]> </script> </head> <body> <input type="text" id="address" value="请输入邮箱地址"/> <br/><br/> <input type="text" id="password" value="请输入邮箱密码"/> <br/><br/> <input type="button" value="登入"/> </body> </html> View Code 图片 22<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-10-2-2</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function () { $("#address").focus(function () { // 地址框得到鼠标核心 var txt_value = $(this).val(); // 得到当前文本框的值 if (txt_value == this.defaultValue) { $(this).val(""); // 借使切合条件,则清空文本框内容 } }); $("#address").blur(function () { // 地址框失去鼠标主旨 var txt_value = $(this).val(); // 获得当前文本框的值 if (txt_value == "") { $(this).val(this.defaultValue); // 假如相符条件,则设置剧情 } }) $("#password").focus(function () { var txt_value = $(this).val(); if (txt_value == this.defaultValue) { $(this).val(""); } }); $("#password").blur(function () { var txt_value = $(this).val(); if (txt_value == "") { $(this).val(this.defaultValue); } }) }); //]]> </script> </head> <body> <input type="text" id="address" value="请输入邮箱地址"/> <br/><br/> <input type="text" id="password" value="请输入邮箱密码"/> <br/><br/> <input type="button" value="登录"/> </body> </html> View Code 图片 23<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-10-3</title> <style type="text/css"> .test{ font-weight:bold; color : red; } .add{ font-style:italic; } </style> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ //设置单选下拉框选中 $("input:eq(0)").click(function(){ $("#single").val("选用2号"); }); //设置多选下拉框选中 $("input:eq(1)").click(function(){ $("#multiple").val(["选择2号", "选择3号"]); }); //设置单选框和多选框选中 $("input:eq(2)").click(function(){ $(":checkbox").val(["check2","check3"]); $(":radio").val(["radio2"]); }); }); //]]> </script> </head> <body> <input type="button" value="设置单选下拉框选中"/> <input type="button" value="设置多选下拉框选中"/> <input type="button" value="设置单选框和多选框选中"/> <br/><br/> <select id="single"> <option>选取1号</option> <option>选择2号</option> <option>接收3号</option> </select> <select id="multiple" multiple="multiple" style="height:120px;"> <option selected="selected">选取1号</option> <option>选择2号</option> <option>选拔3号</option> <option>接受4号</option> <option selected="selected">选用5号</option> </select> <br/><br/> <input type="checkbox" value="check1"/> 多选1 <input type="checkbox" value="check2"/> 多选2 <input type="checkbox" value="check3"/> 多选3 <input type="checkbox" value="check4"/> 多选4 <br/> <input type="radio" value="radio1"/> 单选1 <input type="radio" value="radio2"/> 单选2 <input type="radio" value="radio3"/> 单选3 </body> </html> View Code 图片 24<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-10-4</title> <style type="text/css"> .test{ font-weight:bold; color : red; } .add{ font-style:italic; } </style> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ //设置单选下拉框选中 $("input:eq(0)").click(function(){ $("#single option").removeAttr("selected"); //移除属性selected $("#single option:eq(1)").attr("selected",true); //设置属性selected }); //设置多选下拉框选中 $("input:eq(1)").click(function(){ $("#multiple option").removeAttr("selected"); //移除属性selected $("#multiple option:eq(2)").attr("selected",true);//设置属性selected $("#multiple option:eq(3)").attr("selected",true);//设置属性selected }); //设置单选框和多选框选中 $("input:eq(2)").click(function(){ $(":checkbox").removeAttr("checked"); //移除属性checked $(":radio").removeAttr("checked"); //移除属性checked $("[value=check2]:checkbox").attr("checked",true);//设置属性checked $("[value=check3]:checkbox").attr("checked",true);//设置属性checked $("[value=radio2]:radio").attr("checked",true);//设置属性checked }); }); //]]> </script> </head> <body> <input type="button" value="设置单选下拉框选中"/> <input type="button" value="设置多选下拉框选中"/> <input type="button" value="设置单选框和多选框选中"/> <br/><br/> <select id="single"> <option>采取1号</option> <option>选择2号</option> <option>采取3号</option> </select> <select id="multiple" multiple="multiple" style="height:120px;"> <option selected="selected">选用1号</option> <option>选取2号</option> <option>采纳3号</option> <option>选用4号</option> <option selected="selected">选用5号</option> </select> <br/><br/> <input type="checkbox" value="check1"/> 多选1 <input type="checkbox" value="check2"/> 多选2 <input type="checkbox" value="check3"/> 多选3 <input type="checkbox" value="check4"/> 多选4 <br/> <input type="radio" value="radio1" name="a"/> 单选1 <input type="radio" value="radio2" name="a"/> 单选2 <input type="radio" value="radio3" name="a"/> 单选3 </body> </html> View Code

  11.遍历节点

图片 25<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-11-1</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ var $body = $("body").children(); var $p = $("p").children(); var $ul = $("ul").children(); alert( $body.length ); // <body>成分下有2个子成分 alert( $p.length ); // <p>元素下有0个子成分 alert( $ul.length ); // <p>元素下有3个子成分 for(var i=0;i< $ul.length;i++){ alert( $ul[i].innerHTML ); } }); //]]> </script> </head> <body> <p title="选择你最爱怜的水果." >你最爱怜的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='柑橘'>橘柑</li> <li title='凤梨'>黄梨</li> </ul> </body> </html> View Code 图片 26<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-11-2</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ var $p1 = $("p").next(); alert( $p1.html() ); // 紧邻<p>元素后的同辈成分 var $ul = $("ul").prev(); alert( $ul.html() ); // 紧邻<ul>成分前的同辈成分 var $p2 = $("p").siblings(); alert( $p2.html() ); // 紧邻<p>成分的头一无二同辈成分 }); //]]> </script> </head> <body> <p title="选取你最赏识的水果." >你最心爱的鲜果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>蜜橘</li> <li title='菠萝'>凤梨</li> </ul> </body> </html> View Code 图片 27<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-11-3</title> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function () { $(document).bind("click", function (e) { $(e.target).closest("li").css("color", "red"); }) }); //]]> </script> </head> <body> <p title="选拔你最爱怜的水果." >你最欢欣的瓜果是?</p> <ul> <li title='苹果'>苹果</li> <li title='柑橘'>蜜柑</li> <li title='黄梨'>凤梨</li> </ul> </body> </html> View Code

  12.CSS-DOM操作

图片 28<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3-12-1</title> <style type="text/css"> .test{ font-weight:bold; color : red; } .add{ font-style:italic; } </style> <!-- 引入jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ //获取<p>元素的color $("input:eq(0)").click(function(){ alert( $("p").css("color") ); }); //设置<p>元素的color $("input:eq(1)").click(function(){ $("p").css("color","red") }); //设置<p>元素的fontSize和backgroundColor $("input:eq(2)").click(function(){ $("p").css({"fontSize":"30px" ,"backgroundColor":"#888888"}) }); //获取<p>元素的高度$("input:eq(3)").click(function(){ alert( $("p").height() ); }); //获取<p>成分的上升的幅度 $("input:eq(4)").click(function(){ alert( $("p").width() ); }); //获取<p>成分的中度$("input:eq(5)").click(function(){ $("p").height("100px"); }); //获取<p>元素的肥瘦 $("input:eq(6)").click(function(){ $("p").width("400px"); }); //获取<p>元素的的侧边距和上边距 $("input:eq(7)").click(function(){ var offset = $("p").offset(); var left = offset.left; var top = offset.top; alert("left:"+left+";top:"+top); }); }); //]]> </script> </head> <body> <input type="button" value="获取<p>成分的color"/> <input type="button" value="设置<p>成分的color"/> <input type="button" value="设置<p>成分的fontSize和backgroundColor"/> <input type="button" value="获取<p>成分的莫斯中国科学技术大学学"/> <input type="button" value="获取<p>成分的幅度"/> <input type="button" value="设置<p>成分的冲天"/> <input type="button" value="设置<p>成分的上涨的幅度"/> <input type="button" value="获取<p>成分的的左臂距和上边距"/> <p title="采用你最垂怜的水果."><strong>你最欢欣的鲜果是?</strong></p> <ul> <li title='苹果'>苹果</li> <li title='柑橘'>橘柑</li> <li title='黄梨'>凤梨</li> </ul> </body> </html> View Code

 PS:参照他事他说加以考查文献《锋利的jQuery》

引入库

XHTML

<script src="; <script src="; <script>THREEx.ArToolkitContext.baseURL = ';

1
2
3
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
<script>THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'</script>

第生机勃勃,你要求引入a-frame,一款MozillaVR引领的付出 V福特Explorer 体验的利器。A-frame 包括了 three.js。然后您只须要为 a-frame 引进A悍马H2.js。AOdyssey.js能让 A陆风X8 中的 3d 突显在您的无绳话机上高速运行,哪怕是 2、3 年前的旧手提式有线电话机。

咱俩方今公告了A中华V.js。你无需设置任何利用,用你的手提式有线电话机通过网络就会体会到无敌的加强现实。但让大家更进一层,看一下怎么让你也撰文出本人的进步现实心得。多亏掉奇妙的a-frame,最短的 AEvoque.js唯有10行HTML 代码。

对于jquery一些难题

哇哦,作者帮您写代码:
<script type="text/javascript">
$(function(){
$(".has_children").click(function(){
$(this).addClass("highlight")
.children("a").show().end()
.siblings().removeClass("highlight")
.children("a").hide();
});

});

定义 Body

XHTML

<body style='margin : 0px; overflow: hidden;'> <!-- ... --> </body>

1
2
3
<body style='margin : 0px; overflow: hidden;'>
    <!-- ... -->
</body>

这一步,国际惯例。就像你在富有 HTML 页面中做的大器晚成致,定义 body。

图片 29

</script>

看出来去其余吗?一定要加在:
$(function(){ })
的函数内。

您之所以没意义,是因为你绑定事件的时候 ,dom 节点根本不设有。
而 $(function(){ }) 这么些函数的情趣是,当 全数 html

创建 3d 场景

XHTML

<a-scene embedded artoolkit='sourceType: webcam;'> <!-- put your 3d content here --> </a-scene>

1
2
3
<a-scene embedded artoolkit='sourceType: webcam;'>
    <!-- put your 3d content here -->
</a-scene>

下一场,我们就要创制大家的 a-farme 场景。大家本来也急需投入 ARToolkit 组件。ARToolkit是二个开源库,我们透过它来达成录像头定位。

引入库

文本加载渲染完毕的时候,才最初实施。

^_* ,这样能够设为最棒了呢?多谢哦  

累计轻易的内容

XHTML

<a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>

1
<a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>

假若大家创造了 3d 场景,我们得以起头入里面增加对象。在这里行代码中,我们增加了一个简约的盒子。然后大家改善了它的质量,让它变得透明。大家也退换了它的地方,所以它出以往ARubicon 标记(A中华V marker卡塔尔的最上部。

(录像截图卡塔尔

图片 30

图片 31

jQuery:这里是怎完结?原代码没看懂

你这段代码中jquery只是管理了,<span>的click事件。
当click产生时,只体现大标题,况且点击了哪些大标题,就能够呈现其下相应的小标题。

有关何今后生可畏步入页面就显得大标题,或许跟你的css有涉嫌吧。  

jQuery中的DOM操作,jquerydom DOM(Document Object Model)文书档案对象模型,每张网页都能用DOM表示出来,每风流倜傥份DOM都能比量齐观少年老成颗DOM树。 jQuery世襲...

增加 AR 摄像头

XHTML

<a-marker-camera preset='hiro'></a-marker-camera>

1
<a-marker-camera preset='hiro'></a-marker-camera>

在终极一步,大家扩张八个摄像头。大家预设多个 ‘hiro’(来自Hiro marker卡塔尔最终,我们让它像你手提式有线电话机相近移动。是或不是很简单?

恭贺!你成功了。你仅用了 10 行 HTML 代码达成了加强现实,手提式无线电话机上也能运营高效,而且免费。

能够看一下自己做的摄像教程(搬运自youtube,字幕为 youtube 自动识别内嵌字幕,有微量识别相对误差,不影响观看卡塔 尔(阿拉伯语:قطر‎:

(一些截图卡塔尔

图片 32

打赏援助笔者翻译越多好小说,多谢!

打赏译者

第生机勃勃,你必要引进a-frame,生龙活虎款MozillaV奥迪Q5引领的费用 V奇骏 体验的利器。A-frame 包蕴了 three.js。然后你只供给为 a-frame 引入 AOdyssey.js。A福睿斯.js能让 AENCORE 中的 3d 展现在你的手提式有线电电话机上高速运转,哪怕是 2、3 年前的旧手提式有线电话机。

打赏补助笔者翻译更加多好作品,多谢!

任选一种支付办法

图片 33 图片 34

2 赞 8 收藏 1 评论

定义 Body

关于小编:生机勃勃杯哈希不加盐

图片 35

毕业于罗萨里奥高校软件工程标准,身为 Java 技士也常用 JavaScript 做点风趣的东西 。为了兴趣而写代码,做要好喜好做的事。Keep Coding ... Stay Cool ... (单身,迎接侵扰) 个人主页 · 小编的稿子 · 30 ·    

图片 36

图片 37

这一步,国际惯例。就如您在具备 HTML 页面中做的生龙活虎致,定义 body。

创建 3d 场景。

图片 38

下一场,大家就要创制我们的 a-farme 场景。大家自然也亟需投入 ARToolkit 组件。ARToolkit是叁个开源库,大家通过它来得以达成摄像头定位。

增添轻松的内容

图片 39

固然我们创制了 3d 场景,我们能够初走入个中增加对象。在此行代码中,我们增加了三个简短的盒子。然后大家订正了它的品质,让它变得透明。我们也退换了它的职位,所以它现身在APAJERO 标记(AEscort marker卡塔 尔(阿拉伯语:قطر‎的顶上部分。

增加 AR 摄像头

图片 40

在最终一步,大家扩充叁个录制头。大家预设三个‘hiro’最终,我们让它像你手提式有线电话机相似移动。是或不是很粗大略?

恭喜!你成功了。你仅用了 10 行html代码完结了进步现实,手提式有线电话机上也能运转高效,并且无偿。

本文由澳门威斯尼人平台登录发布于Web前端,转载请注明出处:十行HTML完成增进现实

相关阅读