1html
<font size="6" color="red">hello world</font>
<meta http-equiv="contentType" content="text/html;charset=gbk">
让某个元素在文档加载时获取焦点:
<body οnlοad="document.forms['f1']['username'].focus();">
空格;
<img src="t1.jpg" width="200" height="200" border="1"/>
<!--锚点--><a name="top">import info...</a><a href="#top">to top</a>
<a href="html03.html"><img src="img/dl.gif" border="0"/></a>
<a href="javascript:;" οnclick="viewInfo();">viewInfo</a>
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%<frameset cols="50%,*" border="1">
<frame src="left.html" name="f1" noresize="true" />
<frame src="right.html" name="f2" marginwidth="50" marginheight="60" />
</frameset>
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%input:
<input type="text" name="username" value="zhangshan" maxlength="8" readonly="true"/>
<input type="password" name="pwd" />
<input type="button" value="去另一个页面" οnclick="location.href='html02.html'"/>
male:<input type="radio" name="sex" value="m"checked="checked"/>
female:<input type="radio" name="sex" value="f"/>
---------------------------------------------------------
checkbox的项被选择:checked="checked"或者checked="true"
<script src="js/prototype1.6.js">
</script>
<script>function selectAll(){
var arr = $('c1','c2','c3');
for(i=0;i<arr.length;i++){ //数组的
arr[i].checked=true;
}
}
</script>
<
<!--$('id') 相当于document.getElementById('id');-->
<!--$F('id') 相当于document.getElementById('id').value;-->
<!--$('id1','id2','id3'...) 相当于document.getElementById('id1'),...返回一个数组-->
fish:<input type="checkbox" id="c1" name="c1" value="fishing"/>
football:<input type="checkbox" id="c2" name="c1" value="football"/>
sleep:<input type="checkbox" id="c3" name="c1" value="sleep"/><br/>
<input type="button" value="全选" οnclick="selectAll();"/>
结果是:
fishing:<input type="checkbox" name="interest" value="c1" checked="checked"/>
football:<input type="checkbox" name="interest" value="c2"/>
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%select:
<select name="city" multiple="true" style="width:120px;height:60px;">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="cs">长沙</option>
</select>
------------------------------------------------------------------------------------------
function test1(){
//options:option数组,代表select的所有选项
var sObj = document.getElementById('s1');
var arr = sObj.options;
//alert(arr.length);
for(i=0;i<arr.length;i++){
var curr = arr[i];
//每一个选项 Option对象
document.write(curr.text + ' ' + curr.value + '<br/>');
}
}
//动态增加option
function test2(){
var sObj = document.getElementById('s1');
var opt = new Option('s100','100');
sObj.options[sObj.length] = opt;
}
//删除option
function test3(){
var sObj = document.getElementById('s1');
//sObj.options[1]=null;
sObj.innerHTML='';
}
//获得用户的选项
function test4(index){
var sObj = document.getElementById('s1');
alert(index);
}
<select name="s1" id="s1" multiple="true"οnchange="test4(this.selectedIndex);">
------------------------------------------------------------------------------------------
<script>
function change(index){
var subjects = new Array();
subjects[0] = [new Option('--方向--','-1')];
subjects[1] = [new Option('图形计算','1'),new Option('软件工程','2'),new Option('计算机应用','3')];
subjects[2] = [new Option('商务英语','1'),new Option('专业英语','2')];
var s2Obj = document.getElementById('s2');
//s2Obj.options.length=subjects[index].length;
s2Obj.innerHTML='';
for(i=0;i<subjects[index].length;i++){
s2Obj.options[i] = subjects[index][i];
}
}
</script>
</head>
<body>
<div id="d1">
<div id="d1_head">关联下拉列表</div>
<div id="d1_body">
<form action="" method="get">
<select id="s1" name="s1" style="width:100px;" οnchange="change(this.selectedIndex);">
<option value="-1">--专业--</option>
<option value="jsj">计算机</option>
<option value="eng">英语</option>
</select>
<select id="s2" name="s2" style="width:100px;">
<option value="-1">--方向--</option>
</select>
------------------------------------------------------------------------------------------
function moveTo(s1Id,s2Id){
var s1Obj = document.getElementById(s1Id);
var s2Obj = document.getElementById(s2Id);
//对于长度可变的对象,要注意删除方式,应该是
//从尾到头的方式来删除。
//for(i=0;i<s1Obj.options.length;i++){
for(i=s1Obj.options.length-1;i>=0;i--){
var curr = s1Obj.options[i];
if(curr.selected){
var txt = curr.text;
var val = curr.value;
var opt = new Option(txt,val);
s2Obj.options[s2Obj.options.length] = opt;
s1Obj.options[i] = null;
}
}
}
</script>
<select id="s1" name="s1" style="width:150px;height:200px;" multiple="true">
<option value="zs">张三</option>
<option value="ls">李四</option>
<option value="ww">王五</option>
</select>
<input type="button" value="-->" style="width:120px;" οnclick="moveTo('s1','s2');"/>
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%表格:
单元格间隔和单元格填充
table的cellspacing属性定义单元格之间的间距.
table的cellpadding属性定义单元格边界与单元格中内容的间距.
单元格的对齐方式
align属性用于指明横向对齐方式:left center right
valign属性纵向对齐方式:top middle bottom
单元格的合并
td的colspan用于指定单元格所占的列数, 用于横向合并单元格.
td的rowspan用于指定单元格所占的行数, 用于纵向合并单元格.
<body style="font-size:30pt;">
<table width="60%" border="1" bgcolor="#cccccc" cellpadding="3" cellspacing="0">
<td align="center" rowspan="2" colspan="2" align="center" valign="top">单元格4</td>
<table width="60%" border="1">
----------------------------------------------------------------------------------------------
<caption>这是一个表格</caption>
<!--表头,只有一个表头-->
<thead>
<tr><th>姓名</th><th>工资</th></tr>
</thead>
<!--表脚,只有一个,一般放在thead之后-->
<tfoot>
<tr><td>小计</td><td>10000</td></tr>
</tfoot>
<!--表体,可以有多个表体-->
<tbody>
<tr><td>张三</td><td>2000</td></tr>
</tbody>
</table>
------------------------------------------------------------------------------------------
function addRow(){
var tb1Obj = document.getElementById('tb1');
//TableRow
//rows属性(Table,Tbody)
//insertRow会返回一个新的行:相当于创建了一个tr
var row1 = tb1Obj.insertRow(tb1Obj.rows.length);
//insertCell会创建一个新的单元格:相当于td
//cells属性(TableRow)
var col1 = row1.insertCell(row1.cells.length);
var col2 = row1.insertCell(row1.cells.length);
//cell.innerHTML
var txt1Val = document.getElementById('txt1').value;
var txt2Val = document.getElementById('txt2').value;
col1.innerHTML=txt1Val;
col2.innerHTML=txt2Val;
//style属性 代表该元素的样式,该值可以修改
//css中的background-color在对应的对象当中,
//会变成backgroundColor
//style只得修改内联样式
// <tr style="background-color:red;"></tr>
//row1.style.backgroundColor='red';
tb1Obj.rows[1].cells[1].style.backgroundColor='blue';
}
<tbody id="tb1">
<tr><td>zs</td><td>1000</td></tr>
</tbody>
--------------------------------------------------------------------------------------------
addRow:
function addRow(){
var tb = $('tb1');
var row1 = document.createElement("tr");
var cell1 = document.createElement("td");
var cell2 = document.createElement("td");
var txt1 = document.createTextNode($F('txt1'));
var txt2 = document.createTextNode($F('txt2'));
cell1.appendChild(txt1);
cell2.appendChild(txt2);
row1.appendChild(cell1);
row1.appendChild(cell2);
tb.appendChild(row1);
}
<tbody id="tb1">
<tr><td>12</td><td>zs</td></tr>
<tr><td>3</td><td>ww</td></tr>
<tr><td>5</td><td>ls</td></tr>
</tbody>
<input type="button" οnclick="addRow();" value="addRow"/>
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%列表:
<body style="font-size:30pt;">
<!--列表-->
<ul>
<li>选项一</li>
<li>选项二</li>
</ul>
<ol>
<li>选项一</li>
<li>选项二</li>
</ol>
<ul>
<li>菜单一</li>
<ul>
<li>子菜单1</li>
<li>子菜单2</li>
</ul>
</ul>
</body>
2javascritp
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%掌握javascript脚本引入方式:
(1)页面内部
<script type="text/JavaScript">
alert('hello');
</script>
(2)单独放在文件里
<script type="text/JavaScript" src="js01.js"></script>
(3)嵌入html元素内部
<a href="javascript:alert('hello’);">sayHello</a>
掌握常见的数据类型及操作
(1)基本类型
JS有5种基本数据类型
number, string, boolean,null,undefined
var i = 100; var str = "abc"; var flag = true;
var j = null;
几个需要注意的问题:
var a = null; alert(a == undefined);
typeof 用于返回类型
Infinity和NaN
对于number类型Infinity表示无穷, NaN表示非数字
isNaN("aaa")
将字符串转换为数值
parseInt(…)。如何转换为double? 小技巧。
将数值转换为字符串
toString(…)
(2)字符串的基本属性和方法
length属性 返回字符串的长度
charAt(index) 返回指定位置的字符
substring(from, to) 返回子字符串
indexOf(str) 指定字符串在原字符串中第一次出现的位置
lastIndexOf(str) 指定字符串在原字符串中最后一次出现的的位置
match(regexp) 返回匹配指定正则表达式的字符串,返回的结果是一个数组
var str2 = 'asd212abc345';
var reg2 = /[0-9]+/g;
var arr = str2.match(reg2);
search(regexp) 返回按照正则表达式检索到的字符串位置
str2.search(reg2)
toLowerCase/toUpperCase 返回小写/大写形式
replace(regexp,'abc'); 替换符合reg正则表达式规定的字符串
str2 = str2.replace(reg2,'888');
5、掌握数组的使用
创建数组, 长度由后期赋值决定
var a = [1,2,3,4,5];
var b = [];
var c = new Array();
length属性返回数组的长度
toString()方法, 返回数组的字符串表示
concat方法, 用于连接两个数组
join方法,用于将数组中的各个元素连接成字符串。
reverse方法,将数组反转
slice用于截取数组的一部分并以数组的形式返回
sort()排序,可通过如下形式来重新定义排序方式:
var arr4 = arr3.sort(function(a1,a2){
return -a1.length + a2.length;
});
6、掌握常见事件
onclick 鼠标单击
onchange 内容改变
onfocus 获得焦点
onblur 失去焦点
onload 元素加载显示
onunload 页面关闭
onmouseout 鼠标移出
onDblClick 鼠标双击
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%--------------------------------------------------------------------------------------------
document.getElementById('id')
<script>
function test1(){
//document.getElementById('id');可以访问到所有的html对象
var txtObj1 = document.getElementById('username');
var txtObj2= document.forms['f1']['username'];
alert(txtObj2.value);
}
</script>
</head>
<body>
<form action="" method="get" name="f1">
username:<input type="text" name="username" id="username"/><br/>
</form>
<input type="button" οnclick="test1();" value="click"/>
--------------------------------------------------------------------------------------------
函数的使用:可以调用同意script中的函数,不同script中的函数需要先定义后使用,使用:do();
<script>
<!--函数的使用-->
sayHello3();//可以调用同一个script当中定义的函数
function sayHello3(){
alert('hello3!');
}
</script>
<script>
sayHello3();//;
function sayHell2(){
alert('hello2!');
}
</script>
</head>
<body style="font-size:30pt;">
<a href="javascript:;" οnclick="sayHello2();">testFunction1</a>
--------------------------------------------------------------------------------------------
函数: arguments隐含对象 匿名函数 执行函数 ,调用函数
<script>
//函数没有返回类型的声明,参数类型也不用声明
function add(i,j){
var rs = i + j;
alert(rs);
}
//arguments是一个隐含对象,封装了方法调用中传递的参数
function add2(){
var rs = arguments[0] + arguments[1];
alert(rs);
}
//定义了一个匿名函数,并让f指向了该函数。
var f = function(){
alert('hello');
}
f(); //执行函数
</script>
<a href="javascript:;" οnclick="add2(1,2);">testFunction</a>
---------------------------------------------------------------------------------------------
函数返回return的处理; 元素的name 属性的动态设置;
<head>
<script>
function valiUsername(m){
var v1 = m.value;
m.className='';
var v1_msg = document.getElementById('user_msg');
v1_msg.innerHTML='';
if(v1.length==0){
//alert('asdfasdf');
v1_msg.innerHTML='用户名必须填写';
m.className='s2';
return false;
}
return true;
}
function valiPwd(m){
//先清空
var msgObj = document.getElementById('pwd_msg');
msgObj.innerHTML='';
m.className='';
if(m.value.length==0){
msgObj.innerHTML='密码必须填写';
m.className='s2';
return false;
}
return true;
}
function valiForm(m){
// return valiUsername && valiPwd;
var rs = valiUsername(m['username'])
&& valiPwd(m['pwd']); 调用函数的使用
return rs;
}
</script>
</head>
<form action="" method="get" οnsubmit="return valiForm(this);">
<input type="text" name="username" οnblur="valiUsername(this);"/>
<span id="user_msg" class="s1"></span>
<input type="password" name="pwd" οnblur="valiPwd(this);"/>
<span id="pwd_msg" class="s1"></span>
<input type="submit" value="regist"/>
</form>
--------------------------------------------------------------------------------------------
绑订事件处理代码到dom对象之上 事件函数的使用
<script>
function f(){
alert('hello');
}
</script>
<body>
<input type="button" οnclick="f();" value="test" id="b1"/>
<script>
var obj = document.getElementById('b1');
//绑订事件处理代码到dom对象之上
/*
优点:不用修改html元素
缺点:不能传this参数
*/
obj.οnclick=f; 调用函数的使用
</script>
</body>
--------------------------------------------------------------------------------------------
var i=100;alert(typeof i);document.write(str1 + typeof i);
var s2="123";var s22 = parseInt(s2);var s1=100;var str1 = s1.toString();var str2 = str1 + s2;
isNaN() 是否为非数字 //match g表示match所有
var a1 = [];a1[0] = 3;
---------------------------------------------------------------------------------------
this:
function valiUsername(m){
var v1 = m.value;
m.className='';
var v1_msg = document.getElementById('user_msg');
v1_msg.innerHTML='';
if(v1.length==0){
//alert('asdfasdf');
v1_msg.innerHTML='用户名必须填写';
m.className='s2';
return false;
}
return true;
}
<input type="text" name="username" οnblur="valiUsername(this);"/>
<span id="user_msg" class="s1"></span>
---------------------------------------------------------------------------------------
form onsubmit的处理;
function valiForm(m){
// return valiUsername && valiPwd;
var rs = valiUsername(m['username'])
&& valiPwd(m['pwd']) &&valiPhone(m['phone']);
return rs;
}
<form action="" method="get" οnsubmit="return valiForm(this);">
---------------------------------------------------------------------------------------
setTimeout:
function openWin(){
//
var win = open('html05.html','w1','width=400,height=400');
//window.setTimeout(js代码,毫秒):在多长时间之后执行某个代码
setTimeout(function(){
win.close()
}
,5000);
}
<input type="button" value="openWindow" οnclick="openWin();"/><br/>
------------------------------------------------------------------------------------------
setInterval:周期执行clearInterval:setTimeout:
<script>
function go1(){
var obj = document.getElementById('d1');
//alert(obj.style.left);
var leftV = parseInt(obj.style.left);
obj.style.left = leftV + 50 + 'px';
}
function go2(){
//taskId表示任务
var taskId = setInterval(go1,1000);
setTimeout(function(){
//取消任务
clearInterval(taskId)
},5000);
}
</script>
</head>
<input type="button" οnclick="go2();" value="toGo!"/>
-----------------------------------------------------------------------------------------
事件及事件冒泡机制:
<html>
<head>
<!--事件对象的获得方式-->
<script>
function test1(){
//对于IE,有一个全局的event对象,可以直接使用
alert(event.clientX + ' ' + event.clientY);
}
function test2(e){
//为了兼容IE,FF,可通过传参(参数必须是event)的方式
//获得事件对象
alert(e.clientX + ' ' + e.clientY);
}
//FF获得事件对象的方式:e.target
function test3(e){
var srcObj = e.target;
alert(srcObj.innerHTML);
}
//IE获得事件对象的方式:e.target
function test4(e){
var srcObj = e.srcElement;
alert(srcObj.innerHTML);
}
//兼容
function test5(e){
var srcObj = e.target || e.srcElement;
alert(srcObj.innerHTML);
}
//事件冒泡机制
//子对象产生的事件默认为继续向上抛给父对象
function testHrefClick(e){
//var srcObj = e.target || e.srcElement;
//取消事件的冒泡
e.cancelBubble=true;
alert('click a link!');
}
function testDivClick(e){
alert('click a div!');
}
</script>
</head>
<body style="font-size:30pt;">
<a href="javascript:;" οnclick="test1();">link1</a><br/>
<a href="javascript:;" οnclick="test2(event);">link2</a><br/>
<a href="javascript:;" οnclick="test5(event);">link3</a><br/>
<div id="d1" οnclick="testDivClick(event);" style="width:200px;height:200px;background-color:cccccc;">
<a href="javascript:;" οnclick=testHrefClick(event);>测试div内部的链接</a>
</div>
</body>
</html>
3css
---------------------------------------------------------------------------------------------
diplay属性
display:none 不显示
display:block 块级元素
display: inline 行内元素
position属性
static 默认的选项, 按照浏览器默认的方式摆放。
absolute 相对于父元素, 按top和left值指定的值摆放。
relative 按照浏览器默认的方式摆放位置的基础上加以top和left值作为偏移
---------------------------------------------------------------------------------------------
<style>
#d3{
left:30px;
top:30px;
width:300px;
height:200px;
background-color:green;
position:relative;//position:absolute;
color:white;
font-size:30pt;
}
</style>
<div id="d3"></div>