H5学习笔记

CSS clear 属性

指定段落的左侧或右侧不允许浮动的元素:

img
{
    float:left;
}
p.clear
{
    clear:both;
}

属性值

描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

js 定时器


js 定时器有以下两个方法:

  • setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
  • setTimeout() :在指定的毫秒数后调用函数或计算表达式。

setInterval()
语法

setInterval(code,millisec,lang)
参数 描述
code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。
lang 可选。 JScript | VBScript | JavaScript

setTimeout()
语法

setTimeout(code,millisec,lang)
参数 描述
code 必需。要调用的函数后要执行的 JavaScript 代码串。
millisec 必需。在执行代码前需等待的毫秒数。
lang 可选。脚本语言可以是:JScript | VBScript | JavaScript

CSS border-color 属性

border-color属性设置一个元素的四个边框颜色。此属性可以有一到四个值.

属性值

说明
color 指定背景颜色。在CSS颜色值查找颜色值的完整列表
transparent 指定边框的颜色应该是透明的。这是默认
inherit 指定边框的颜色,应该从父元素继承

HTML DOM \color{blue}{classList} 属性


定义和用法

classList 属性返回元素的类名,作为 DOMTokenList 对象。
该属性用于在元素中添加,移除及切换 CSS 类。
classList 属性是只读的,但你可以使用 add() 和 remove() 方法修改它。


Properties

属性 Description
length 返回类列表中类的数量 该属性是只读的

方法

方法 描述
add(class1, class2, ...) 在元素中添加一个或多个类名
如果指定的类名已存在,则不会添加
contains(class) 返回布尔值,判断指定的类名是否存在。
可能值:
true - 元素包已经包含了该类名
false - 元素中不存在该类名
item(index) 返回类名在元素中的索引值。索引值从 0 开始。
如果索引值在区间范围外则返回 null
remove(class1, class2, ...) 移除元素中一个或多个类名。

注意: 移除不存在的类名,不会报错。
toggle(class, true|false) 在元素中切换类名。

第一个参数为要在元素中移除的类名,并返回 false。
如果该类名不存在则会在元素中添加类名,并返回 true。

第二个是可选参数,是个布尔值用于设置元素是否强制添加或移除类,不管该类名是否存在。例如:

移除一个 class: element.classList.toggle("classToRemove", false);
添加一个 class: element.classList.toggle("classToAdd", true);

注意: Internet Explorer 或 Opera 12 及其更早版本不支持第二个参数。

HTML DOM \color{rgb(157,183,132)}{createTextNode()} 方法


创建一个文本节点:

var btn=document.createTextNode("Hello World");

输出结果:
Hello World

HTML元素通常是由元素节点和文本节点组成。

创建一个标题 (H1), 你必须创建 "H1" 元素和文本节点:
创建一个标题:

var h=document.createElement("H1")
var t=document.createTextNode("Hello World");
h.appendChild(t);

输出结果:
Hello World


HTML DOM \color{rgb(157,183,132)}{addEventListener()} 方法


在文档中添加点击事件。当用户在文档任何地方点击时,在 id="demo" 的 <p> 元素上输出 "Hello World":

document.addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";
});

定义与用法

document.addEventListener() 方法用于向文档添加事件句柄。

提示: 可以使用 document.removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

提示:使用 element.addEventListener() 方法为指定元素添加事件句柄。


语法

document.addEventListener(event, function, useCapture)

参数值

参数 描述
event 必需。描述事件名称的字符串。

注意: 不要使用 "on" 前缀。例如,使用 "click" 来取代 "onclick"。

提示: 所有 HTML DOM 事件,可以查看我们完整的 HTML DOM Event 对象参考手册
function 必需。描述了事件触发后执行的函数。

当事件触发时,事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture 可选。布尔值,指定事件是否 在捕获或冒泡阶段执行。

可能值:
* true - 事件句柄在捕获阶段执行
* false- 默认。事件句柄在冒泡阶段执行

CSS3 :nth-child() 选择器

指定每个 p 元素匹配的父元素中第 2 个子元素的背景色:

p:nth-child(2)
{
    background:#ff0000;
}

定义和用法

:nth-child(n) 选择器匹配父元素中的第 n 个子元素,元素类型没有限制。
n 可以是一个数字,一个关键字,或者一个公式。


JavaScript eval() 函数

定义和用法
eval() 函数计算 JavaScript 字符串,并把它作为脚本代码来执行。

如果参数是一个表达式,eval() 函数将执行表达式。如果参数是Javascript语句,eval()将执行 Javascript 语句。
语法

eval(string)
参数 描述
string 必需。要计算的字符串,其中含有要计算的 JavaScript 表达式或要执行的语句。

延迟脚本 defer

这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说,脚本会 被延迟到整个页面都解析完毕后在运行。因此在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但延迟执行。

<head>
  <script type="text/javascript defer="defer" scr=''***.js "></script>
</head>

异步脚本

html5为<script>元素定义了async属性。与defer类似 ,async只适用外部脚本,并告诉浏览器立即下载文件。但是与defer不同的是,标记为async的脚本并不保证按照指定它们的先后顺序执行

<head>
  <script type="text/javascript async scr=''***.js "></script>
  <script type="text/javascript async scr=''***.js "></script>
</head>

以上代码中,第二个脚本可能会在第一个脚本文件之前执行。因此,确保两者之间互不依赖非常重要。指定async属性的目的是不让页面等待两个脚本的下载和执行,从而异步加载页面其他内容。为此,建议异步脚本不要在加载期间修改DOM。


在XHTML中的用法

可扩展超文本标记语言,即XHTML,是将HTML作为XML的应用而重新定义的一个标准 。编写XHTML代码的规则要比编写HTML严格的多,而且直接影响能否在嵌入Javascript代码时使用<script>标签。以下面代码为例,虽然它们在HTML中是有效的,但是在XHTML中则是无效的。

<script type="text/javascript">
        function compare(a,b) {
            if (a < b) {

            } else if (a > b) {

            } else {
                
            }
        }
</script>

这里比较语句a < b 中的小于号(<)在XHTML中被当作开始一个新标签来解析。但是作为标签来讲,小于号后面不能跟空格,因此就会导致语法错误。
可以用相应的HTML实体(<)替换代码中所有的小于号(<).
第二个方法就是用CData片段来包含JavaScript代码。在XHTML(XML)中,CData片段是文档中的一个特殊区域,这个区域中可以包含不需要解析的任意格式的文本内容。因此在CData片段中就可以使用任意的字符,引入CData片段后的JavaScript代码如下所示:

<script type="text/javascript">
        <![CData[
            function compare(a,b) {
                if (a < b) {

                } else if (a > b) {

                } else {

                }
            }
        ]]>
    </script>

在有不少浏览器不兼容XHTML,因此不支持CData片段。怎么办呢?在使用JavaScript注释将CData标记注释掉就可以了:

<script type="text/javascript">
        //<![CData[
            function compare(a,b) {
                if (a < b) {

                } else if (a > b) {

                } else {

                }
            }
        //]]>
    </script>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,402评论 6 499
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,377评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,483评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,165评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,176评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,146评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,032评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,896评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,311评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,536评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,696评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,413评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,008评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,815评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,698评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,592评论 2 353

推荐阅读更多精彩内容

  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,122评论 0 21
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,490评论 1 11
  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,180评论 0 3
  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 3,640评论 0 7
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,474评论 1 45