使用DOM可以新建HTML元素,也可以删除已有的HTML元素。(一)新建元素:<script>//创建新的 <p> 元素var newEle=document.createElement("p");//创建文本节点var node=document.createTextNode("这是使用Javascript创建的新段落。");//将文本节点添加到新创建的 <p> 元素中newEle.appendChild(node);var p1_ele=document.getElementById("p1");//将新创建的元素添加到已有的元素中p1_ele.appendChild(newEle); </script>(二)删除...
通过JavaScript动态的改变HTML中的元素向HTML中添加元素首先需要创建一个标签,然后向该标签中添加相应的内容,然后将创建好的标签添加到相应的位置。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>测试文...
显示/隐藏1。编写js函数 <script type="text/javascript"> function display(y){$(y).style.display=($(y).style.display=="none")?"":"none";} function $(s){return document.getElementById(s);} </script>2. 要显示/隐藏的html元素加上 id 属性 <table> <tr id="menu" > <td>控制这个tr的显示/隐藏</td> </tr> </table>3,添加按钮,链接等触发 js 函数 <input type="button" onclick="display(menu)" value="显示/隐藏...
应用的平台环境:安卓webview;涉及的技术点:(1) <input type="file" > :在开发中,安卓webview默认点击无法调用文件选择与相机拍照(其他的设备ios等浏览器没有此问题),需要让安卓开发同学在代码调整即可;(2) 点击选择图片后如何展示在页面上呢?很多开发人员估计是直接获取 this.value,这是错误的,不可行。有2个API可以现实,new FileReader与window.URL.createObjectURL(最优); new FileReader的实现如下:upl...
在前端模块化的时候,不仅仅是js需要进行模块化管理,html有时候也需要模块化管理。这里就介绍下如何通过requirejs,实现html代码的模块化开发。如何使用requirejs加载htmlReuqirejs有一个text的插件,它可以读取指定文件的内容,读取到的内容就是文本。如何下载text插件第一种方法,可以通过npm下载: npm install requirejs/text 第二种方法,也可以直接去官方github上面直接下载。 直接拷贝内容到text.js中即可。如何安装text插...
1、HTML 有的时候会将一段HTML片段保存在HTML文件中,在另外的主页面直接读取该HTML文件,然后解析里面的HTML代码片段融入到主页面中。 fragment.html文件,其内容: 代码如下:hello Jquery 在主页面Test.html中解析代码 代码如下:$("#a1").click(function(){ $("#div2").load(fragment.html); return false; });[code] 2、JSONJSON文件是test.json,其内容:[code][{"name":"jim","age":"20"},{"name":"lily","age":"18...
本文实例讲述了jQuery对html元素的取值与赋值方法。分享给大家供大家参考,具体如下: Jquery给基本控件的取值、赋值 TEXTBOX:var str = $('#txt').val(); $('#txt').val("Set Lbl Value"); //文本框,文本区域: $("#text_id").attr("value",'');//清空内容 $("#text_id").attr("value",'test');// 填充内容LABLE: var str = $('#lbl').text(); $('#lbl').text("Set Lbl Value"); var valradio = $("input[@type=radio][@checke...
v-cloak 当用户频繁刷新页面或网速慢时,页面未完成 Vue.js 的加载时,导致 Vue 来不及渲染,这就会导致在浏览器中直接暴露插值(表达式),Vue由此也给出了解决方法。在指定标签或整个父容器加入v-cloak指令,通过css选择器选中v-cloak,隐藏元素即可。 // html <div v-cloak id="app"><span>{{ msg }}</span> </div> // css [v-cloak]{display:"none"; } // vue实例对象 => vm var vm = new Vue({el:#app,data:{msg:"hello world",...
都知道浏览器和服务端是通过 HTTP 协议进行数据传输的,而 HTTP 协议又是纯文本协议,那么浏览器在得到服务端传输过来的 HTML 字符串,是如何解析成真实的 DOM 元素的呢,也就是我们常说的生成 DOM Tree,最近了解到状态机这样一个概念,于是就萌生一个想法,实现一个 innerHTML 功能的函数,也算是小小的实践一下。 函数原型 我们实现一个如下的函数,参数是 DOM 元素和 HTML 字符串,将 HTML 字符串转换成真实的 DOM 元素且 appe...
本文实例讲述了JS/HTML5游戏常用算法之追踪算法。分享给大家供大家参考,具体如下: 追踪算法在动作游戏中非常常见,从很早的游戏《吃豆人》到大型的街机机战类游戏,到处可见追踪效果的身影。一个好的追踪算法将会大大提高游戏的可玩性和玩家的兴趣。 【简单算法】 先来看一个简单的跟踪算法,如下图所示,假设在canvas坐标系中存在物体A和B,物体A将把B作为追踪目标,物体在二维空间中的运动可以分解为坐标系中X、Y轴的运动,其在...
本文实例讲述了JS/HTML5游戏常用算法之碰撞检测 地图格子算法。分享给大家供大家参考,具体如下: 这种算法经常用于RPG(早期的《最终幻想》、《DQ》、《仙剑奇侠传》)、SLG(《炎龙骑士团》、《超级机器人大战》)、PUZ(《俄罗斯方块》、《宝石谜阵》)类型的游戏。这类游戏中,通常情况下整个地图都是由一些地图块元素组成,在制作的时候首先给制作出地图所需要的最基本的元素进行编号,然后把这些编号的地图块组合起来就可以根...
本文实例讲述了JS/HTML5游戏常用算法之碰撞检测 像素检测算法。分享给大家供大家参考,具体如下: 使用像素碰撞检测法算是最精确的算法了,当然,带来的代价也是比较明显的,那就是效率上的低下。除非是在极为特殊的情况下,要求使用非常精确的碰撞,否则,一般情况下在游戏中是不建议使用这种算法,特别是在运行效率不太高的HTML5游戏中。 一般来说在使用像素碰撞检测之前会使用AABB矩形包围盒先检测两个精灵是否有碰撞,如果AABB...
HTML中使背景图片自适应浏览器大小实例详解 解决办法:1、图片不够大,又background属性不能拉伸图片; 2、只能用个div,把其z-index值设为负,并使这个div大小为整个body大小,在div里用<img> ;3、body的background属性去掉,要不然会被遮住。 <html> <body> <div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:100%"> <img src="pictures/background.jpg" width="100%" height="100%"/> </...
AngularJS HTML DOMAngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。ng-disabled 指令ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body><div ng-app="" ng-init="mySwitch=true"> <p> <button ng-disabled="mySwitch">点我!<...
简单的说:html()和text()的区别主要在于是否包含标签。而val()针对的是表单元素。 但是有时还是不是那么太清晰。 html(),val(),text()都分为有参和无参。 举例说明它们的不同之处: html()在没有参数的情况下,取得第一个匹配元素的内容。必须要注意的是,即使匹配多个,也只能取得匹配的第一个元素。 如: <body> <p>你选中这段文字后,看看它们的文本颜色和背景色,就能明白::selection的作用。</p> <h3>选中下面的文字,看看它...