表格的跨行跨列
需求1：新建一个五行，五列的表格，
第一行，第一列的单元格要跨两列，
第二行第一列的单元格跨两行，
第四行第四列的单元格跨两行两列。
colspan表示跨几列
rowspan表示跨几行
<table width="500" height="500" border="1" cellspacing="0">
<tr>
<td colspan="2">1.1</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td rowspan="2" colspan="2">4.4</td>
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
</tr>
</table>
iframe标签
iframe 是内嵌窗口加载单独页面的标签
src属性设置要加载的html页面的路径,可以是相对路径,也可以是绝对路径.
iframe和a标签组合使用的两个步骤:
1 在iframe标签上使用name属性设置名称.
2 在a标签上使用target属性设置iframe标签的name属性值.
<br>
<iframe src="表格跨行跨列.html" name="abc" width="500" height="300"></iframe>
<br><br>
<a href="标题标签.html" target="abc">3.标题标签.html</a> <br>
<a href="超链接.html" target="abc">4.超链接.html</a> <br>
<a href="img.html" target="abc">5.img.html</a> <br>
需求：
创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），兴趣爱好（多选），国籍（下拉列表）。
隐藏域，自我评价（多行文本域）。重置，提交。
分析：
form是表单标签
input type=text 是普通的文本输入框 value设置默认值
input type=password 是密码输入框 value设置默认值
input type=radio 是单选框 checked=checked是默认选中
input type=checkbox 是复选框 checked=checked是默认选中
input type=reset 是重置按钮 默认到所有默认状态. value属性可以修改按钮上的文本
input type=submit 是提交按钮 把表单信息发送给服务器 value属性可以修改按钮上的文本
input type=file 是文件上传域. 上传文件使用
input type=button 是普通按钮 value属性可以设置按钮上的文本
input type=hidden 当我们需要发送个别信息给服务器,而又不希望用户参与或感知.那么就可以使用隐藏域
select 是下拉列表框
option 是下拉列表框的选项 selected=selected表示默认选中
textarea 是多行文本输入框 默认值是起始标签和结束标签中的内容
cols 设置每行显示几个字符宽度
rows 设置几行的高度
上代码：
<form action="http://www.baidu.com">
用户名:<input type="text" value="1234" placeholder="请输入内容"> <br>
密码:<input type="password" value="1234"> <br>
确认密码:<input type="password" value="1234"> <br>
性别: <input type="radio" name="sex" >男<input type="radio" name="sex" checked="checked">女 <br>
兴趣爱好: <input type="checkbox" checked="checked">Java
<input type="checkbox" checked="checked">C++
<input type="checkbox" checked="checked">JavaScript <br>
国籍: <select>
<option>--请选择国籍--</option>
<option selected="selected">中国</option>
<option>美国</option>
<option>日本</option>
</select> <br>
<input type="hidden" name="abc" value="abcValue">
自我评价: <textarea rows="10" cols="20">默认值</textarea> <br>
<input type="reset" />
<input type="submit" />
</form>
dom查询
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
window.onload = function(){
//1.查找#bj节点
document.getElementById("btn01").onclick = function () {
alert( document.getElementById("bj").innerHTML );
}
//2.查找所有li节点
var btn02Ele = document.getElementById("btn02");
btn02Ele.onclick = function(){
alert( document.getElementsByTagName("li").length );
};
//3.查找name=gender的所有节点
var btn03Ele = document.getElementById("btn03");
btn03Ele.onclick = function(){
alert( document.getElementsByName("gender").length );
};
//4.查找#city下所有li节点
var btn04Ele = document.getElementById("btn04");
btn04Ele.onclick = function(){
// 1 先查找id为city的节点
var cityObj = document.getElementById("city");
// 2 通过city节点,查找li子节点
alert( cityObj.getElementsByTagName("li").length );
};
//5.返回#city的所有子节点
var btn05Ele = document.getElementById("btn05");
btn05Ele.onclick = function(){
// 1 查找id为city的节点对象
var cityObj = document.getElementById("city");
//2 通过city查找所有子节点
alert( cityObj.childNodes.length );
};
//6.返回#phone的第一个子节点
var btn06Ele = document.getElementById("btn06");
btn06Ele.onclick = function(){
// 1 先查找id为phone的节点
// 2 再找phone的第一个子节点
alert( document.getElementById("phone").firstChild.innerHTML );
};
//7.返回#bj的父节点
var btn07Ele = document.getElementById("btn07");
btn07Ele.onclick = function(){
alert( document.getElementById("bj").parentNode.innerHTML );
};
//8.返回#android的前一个兄弟节点
var btn08Ele = document.getElementById("btn08");
btn08Ele.onclick = function(){
alert( document.getElementById("android").previousSibling.innerHTML );
};
//9.读取#username的value属性值
var btn09Ele = document.getElementById("btn09");
btn09Ele.onclick = function(){
alert(document.getElementById("username").value);
};
//10.设置#username的value属性值
var btn10Ele = document.getElementById("btn10");
btn10Ele.onclick = function(){
document.getElementById("username").value = "哥为什么这么帅!";
};
//11.返回#bj的文本值
var btn11Ele = document.getElementById("btn11");
btn11Ele.onclick = function(){
// alert( document.getElementById("bj").innerHTML );
// alert( document.getElementById("bj").innerText );
alert( document.getElementById("city").innerHTML );
alert( document.getElementById("city").innerText );
};
};
</script>
</head>
<body>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</body>
变量
<script type="text/javascript">
var a;
// typeof() 是一个函数.它可以取变量的数据类型返回
// alert( typeof(a) ); // undefined
a = 12;
// alert(a); // 12
// alert( typeof(a) ); // number
a = "abc";
// alert( typeof(a) ); // string
var b = 12;
var c = "abc";
var result = b * c;
alert( result ); // NaN 非数字.非数值
</script>
关系运算
<script type="text/javascript">
var a = 12;
var b = "12";
// alert( a == b ); // true
// alert( a === b ); // false
alert( typeof(a) );
alert( typeof(b) );
</script>
逻辑运算
<script type="text/javascript">
// 在JavaScript语言中，所有的变量，都可以做为一个boolean类型的变量去使用。
// 0 、null、 undefined、””(空串) 都认为是 false；
// var a = 0;
// if (a) {
// alert("零为真");
// } else {
// alert("零为假");
// }
// var b = null;
// if (b) {
// alert("null为真");
// } else {
// alert("null为假");
// }
// var c = undefined;
// if (c) {
// alert("undefined 为真");
// } else {
// alert("undefined 为假");
// }
// var d = "";
// if (d) {
// alert("空串 为真");
// } else {
// alert("空串 为假");
// }
var a = "abc";
var b = true;
var d = false;
var c = null;
// && 与运算。
// 有两种情况：
// 第一种：当表达式全为真的时候。返回最后一个表达式的值。
// alert( a && b ); // true
// alert( b && a ); // abc
// 第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值
// alert( d && a ); //false
// alert( c && a ); // null
// alert(a && c); // null
// || 或运算
// 第一种情况：当表达式全为假时，返回最后一个表达式的值
// alert( d || c ); // null
// alert( c || d); // false
// 第二种情况：只要有一个表达式为真。就会返回第一个为真的表达式的值
// alert(a || b); // abc
// alert(b || a); // true
</script>
数组
<script type="text/javascript">
// 定义一个空数组
var arr = [true,"abc",12];
alert( arr.length ); //0
arr[0] = 1; // 对第一个元素进行赋值
// alert( arr[0] );//1
// alert(arr.length);// 1
arr[2] = "abc"; // 对第三个元素进行赋值
// alert(arr[2]); // abc
/*
JavaScript语言的数组,在每次通过数组下标做赋值操作的时候.
会自动的根据最大下标值做扩容操作.
* */
// alert( arr.length ); //3
// alert(arr[1]); // undefined
// arr[9] = 1;
// alert(arr.length);// 10
// alert( arr[99] );// undefined
// alert( arr.length ); // 取值操作不会做扩容操作
// 遍历数组
for(var i = 0; i < arr.length; i++) {
alert(arr[i]);
}
</script>
定义函数
<script type="text/javascript">
// 定义无参函数
function abc() {
alert("无参函数abc() 被调用");
}
// 函数调用
// abc();
// 有参函数的定义
function fun(a , b) {
alert("有参函数调用fun(" +a +"," + b + ")调用");
}
// fun(12,"abc");
function sum(num1,num2) {
var result = num1 + num2;
return result;
}
var c = sum(100,100);
alert(c);
</script>
<script type="text/javascript">
var fun = function () {
alert("无参函数fun()");
}
// fun();
var fun1 = function (a,b) {
alert("有参函数调用fun1(" +a +"," + b + ")调用");
}
// fun1(12,true);
var sum = function (num1,num2) {
return num1 + num2;
}
alert(sum(100,200));
</script>
</head>
js不允许重载
<script type="text/javascript">
// 在JS中函数的重载会直接覆盖掉上一次的定义(js不能函数重载)
function fun(a,b) {
alert(a);
alert(b);
alert("有参函数fun(a,b)");
}
function fun() {
alert("无参函数fun()");
}
fun(1,"abc");
</script>
隐形函数
<script type="text/javascript">
function fun( a , b ) {
// arguments// 是隐形参数.它的使用跟数组类似.它用于接收所有传递进来的参数值
// alert(arguments.length); // 查看参数个数
// alert(arguments[0]); // 第一个参数值:12
// alert(arguments[1]); // 第二个参数值:abc
// alert(arguments[2]); // 第三个参数值:true
alert(a ) ;
alert(b ) ;
}
// fun(12,"abc",true);
// 需求: 定义一个函数.用于计算所有传递进来的number类型参数的和并返回.
function sum(num1,num2) {
var result = 0;
for (var i = 0; i < arguments.length; i++) {
if (typeof(arguments[i]) == "number"){
result += arguments[i];
}
}
return result;
}
alert( sum(100,200,"abc",300) );
</script>
自定义对象
<script type="text/javascript">
// 格式如下:
// var 变量名 = new Object(); // 定义一个空对象
// 变量名.属性名 = 值; // 给这个对象添加一个属性
// 变量名.方法名 = function(){} // 给对象添加方法
var obj = new Object();
obj.sname = "华仔";
obj.age = 18;
obj.fun = function () {
alert("姓名:" + this.sname + " , 年龄:" + this.age);
}
// 如何访问:
// 变量名.属性名 / 方法名();
// alert(obj.sname);
// obj.fun();
</script>
<script type="text/javascript">
var obj = {
name : "菜丸",
age : 18,
fun : function () {
alert("姓名:" + this.name + " , 年龄:" + this.age);
}
};
// alert( obj.name );// 访问变量
// obj.fun();
</script>
