Day27 html css
|
div 块标签. |
|
|
特点: 独占一行,有高度和宽度 |
|
|
span 行元素. |
|
|
特点:在同一行显示,当前行满了自动去下一行显示. 不识别高度和宽度 |
1.1.1.1 2.输入域标签 ：<input>
l <input> 标签用于获得用户输入信息，type属性值不同，搜集方式不同。最常用的标签。
n type属性
u text：文本框，单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符
u password：密码框，密码字段。该字段中的字符以黑圆显示。
u radio：单选框，表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的 。
u submit：提交按钮。提交按钮会把表单数据发送到服务器。一般不写name属性，否则将“提交”两个字提交到服务器。
因为不同项目注册需要的字段不同，需要完成的案例中没有覆盖所有的表单元素，以下标签使用也需要大家掌握。
u checkbox： 复选框
u file：文件上传组件,提供"浏览"按下可以选择需要上传文件.
u hidden：隐藏字段. 数据会发送给服务器，但浏览器不进行显示。
u reset：重置按钮。将表单恢复到默认值。
u image：图形提交按钮，通过src给按钮设置图片。
u button：普通按钮，常用于与JavaScript结合使用。
n name：元素名，如果需要表单数据提交到服务器，必须提供name属性值，服务器通过属性值获得提交的数据。
n value属性：设置input标签的默认值。submit和reset为按钮显示数据
n size：大小
n checked属性：单选框或复选框被选中。
n readonly：是否只读
n disabled：是否可用
n maxlength：允许输入的最大长度
Day28 javaScript
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。(HTML页面脚本)
l JavaScript 被设计用来向 HTML 页面添加交互行为。
l JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言）。
l JavaScript 由数行可执行计算机代码组成。
l JavaScript 通常被直接嵌入 HTML 页面。
JavaScript 是一种解释性语言（就是说，代码执行不进行预编译）
1.1.1 2.数据类型
【基本类型】
l Undefined ,Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。
l Null ,只有一个专用值 null，表示空，一个占位符。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。
n alert(null == undefined); //输出 "true"，尽管这两个值相等，但它们的含义不同。
l Boolean，有两个值 true 和 false
l Number，表示任意数字
l String，字符串由双引号（"）或单引号（‘）声明的。JavaScript 没有字符类型
1.1.2 3.JS中的函数编写方式：(重点)
函数：实现一定功能的代码块，类似与Java中的方法。关键字function，函数名自定义。
<script type="text/javascript">
//方式1：声明函数
function demo01(){
alert("案例1");
}
// 方式1：调用函数
demo01();
//方式2：声明匿名函数
var demo02 = function(){
alert("案例2");
};
//方式2：调用函数
demo02();
</script>
1.1 window对象(掌握)
概念:浏览器窗口
特点:window关键字一般可以不写.
l 方法：定时器
|
函数名 |
描述 |
|
setInterval() |
按照指定的周期（以毫秒计）来调用函数或计算表达式 |
|
clearInterval() |
取消由 setInterval() 设置的 timeout。 |
|
setTimeout() |
在指定的毫秒数后调用函数或计算表达式。 |
|
clearTimeout() |
取消由 setTimeout() 方法设置的 timeout |
l 方法：消息框
|
函数名 |
描述 |
|
alert() |
显示带有一段消息和一个确认按钮的警告框。
|
|
confirm() |
显示带有一段消息以及确认按钮和取消按钮的确认框。
确认框： 确定返回true 取消返回false |
|
prompt() |
显示可提示用户输入的提示框。
点击确定获得用户输入数据 |
BOM总结(Browser Object Mode) (掌握)
浏览器对象模型,通过这个就可以操作浏览器
1.2 location对象(了解)
概念:浏览器的地址栏
l href属性：设置或返回完整的 URL。
1.3 history对象(了解)
概念:浏览器的前进/后退按钮
l go() 方法：跳转到指定页面
a) go(-1) 加载前一个连接，等效back()
b) go(1) 加载后一个链接，等效forward()
1.3.0.1 标签体内容：innerHTML
l alert() ：向页面中弹出一个提示框！！
l innerHTML ：向页面的某个元素中写一段内容，将原有的东西覆盖
概念: <a>标签体</a>. 标签体可以是普通文本,也可以是标签
l nnerHTML - HTML 元素的内部文本
获得：document.getElementById(“divId”).innerHTML
设置：document.getElementById(“divId”).innerHTML = "...."
l 常见事件
|
事件名 |
描述 |
|
onsubmit |
提交按钮被点击 |
|
onblur |
元素失去焦点 |
|
onfocus |
元素获得焦点 |
1.4 常见事件
l 常见事件
|
事件名 |
描述 |
|
onload |
某个页面或图像被完成加载 |
|
onsubmit |
提交按钮被点击 |
|
onclick |
鼠标单击某个对象 |
|
ondblclick |
鼠标双击某个对象 |
|
onblur |
元素失去焦点 |
|
onfocus |
元素获得焦点 |
|
onchange |
用户改变域的内容 |
|
onkeydown |
某个键盘的键被按下 |
|
onkeypress |
某个键盘的键被按下或按住 |
|
onkeyup |
某个键盘的键被松开 |
|
onmousedown |
某个鼠标按键被按下 |
|
onmouseup |
某个鼠标按键被松开 |
|
onmouseover |
鼠标被移到某元素之上 |
|
onmouseout |
鼠标从某元素移开 |
|
onmousemove |
鼠标被移动 |
1.4.1 表单事件(掌握)
onsumbit 表单提交事件
onblur 元素失去焦点
onfocus元素获得焦点
1.4.2 页面加载事件(掌握)
window.onload
1.4.3 鼠标事件(掌握)
onclick 鼠标单击事件
ondblclick 鼠标双击事件
onmouseover 鼠标移入事件
onmouseout 鼠标移出事件
1.4.4 键盘事件(了解)
onkeydown 键盘按下
onkeypress 键盘按下或按住
onkeyup 键盘弹起
1.5 步骤分析
- 添加页面加载事件
- 获得所有的tr对象
var trs = document.getElementsByTagName(‘tr’);
- 使用for循环,给奇数行添加背景色
1.6 案例实现
l 在提供html页面的基础上，编写js代码
<script type="text/javascript">
window.onload = function () {
var allTr = document.getElementsByTagName("tr");
// 跳过前2行
for (var i = 2 ; i < allTr.length ; i ++) {
//给行tr设置背景颜色，奇数行白色，偶数行指定颜色
if(i % 2 == 0){
allTr[i].style.backgroundColor="#FFF";
} else {
allTr[i].style.backgroundColor="#4E7FD1";
}
DOM总结(掌握)
1.6.1 什么是DOM
l DOM：Document Object Model 文档对象模型，定义访问和操作结构化文档（HTML）的方式。
n 创建的结构化文档：html、xml 等
n DOM包括：核心DOM、HTML DOM、XML DOM。通常情况下HTML DOM 和XML DOM是可以相互使用的。
l HTML DOM 将 整个HTML文档呈现成一颗DOM树，树中有元素、属性、文本等成员。
l 块标签：以区域块方式出现。每个块标签独自占据一整行或多整行。
n 常见的块元素：<h1>、<div>、<ul>等
l 行内元素：不必在新的一行开始，同时也不强迫其他元素在新的一行显示。
n 常见的行内元素：<span>、<a> 等
原文地址：https://www.cnblogs.com/shan1393/p/8945255.html