html css javascript 知识点总结 bom js 操作标签 文本 节点 表格各行变色 悬停变色 省市联动 正则
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>淘,我喜欢</title>
<!--样式表是从上往下读的,所以样式表要写在上边-->
<!--样式表的引入方式
1.行内样式 即写在标签当中 标签当中有个style属性 <h3 style="color: #FF0000;">这是一个标题</h3> 特点作用域小,但优先级最高
2.写在head头部,使用如下格式,对所有相应标签都有效,如果某行有特殊需求,可以使用行内样式,作用域当前页面
3.外联 <link rel="stylesheet" href="css/demo.css" type="text/css"/> 3个属性写全,要不浏览器有的好使有的不好使
作用域最大,哪个html网页连接哪个有效,哪个用的多,看网站风格是否是一样的,一样的用外联
选择器 a.元素选择器(指标签名)
b.id选择器#(在标签上添加id属性)具有唯一性,整个网页id的属性是唯一的,不唯一的话,此id的样式全变
但为了配合js的getElementById(),将只能找到一个(前面的)
c.class选择器.(在标签上添加class属性) id优先级高于class高于元素
d.input[type="text"]{background-color:red;} 属性选择器,多用于表单
e.后代选择器 选择器 空格 后代{} 包括子孙 p font{}
f.组合选择器 div,p,font{} 如果写成 div p font是找后代
g.伪元素选择器 作用于超链接 a:link{color:red;} a:visited{color:green;} a:hover{color:yellow} a:active{color:pink;}
l_v_h_a是有顺序的 否则没有效果
举例 div{width:200px;height:200px;border} border有四个边 border-left right up bottom
border:2px red solid;属性值无顺序 但要写全 dotted dashed 虚线 double 双实线
字体 font-family 字体大小 font-size font-weight:bold;
背景 background-color 背景图 background-image:url(img/btn.jpg);颜色和图片放一块显示图
backgroung-repeat:repeat-x;
浮动设置 float clear:both 清除浮动两边的,他就不会上去了
盒子模型 外边距margin 内边距 padding-->
<!--<span></span> 行级元素 写多大占行内多少 span{display:none;} display:block;独占一行 display:inline;修饰div的-->
<style type="text/css">
/*注意这样都写换行的话,每一个换行两个字节,所以太多不要换行,手机骗流量用注释,浏览器显示注释*/
p{
color:red;
font-size: 100px;
}
.lunbo img{
width: 100%;
height: 843px;
}
</style>
</head>
<body>
<div id="adId" style="display: none;">
<img src="img/ad.jpg" />
</div>
<div class="lunbo">
<img id="imgId" src="./img/1.jpg" />
</div>
<font color="red">这是一个HBuilder项目网页</font>
<!--get 请求参数提交在浏览器的地址栏 地址栏是有限的 不适合发送大数据 地址栏内容全部显示 安全性不高 但是超链接就是get,避免不了-->
<!--属性 readonly disable multiple下拉菜单多选-->
<form action="#" method="get" onsubmit="return check()">
<table width="900" border="1" style="margin: 0 auto; line-height: 40px;">
<tr>
<td width="200">帐号:</td>
<td width="400"><input type="text" id="zhanghao" name="textname" value="" placeholder="请输入你的帐号"/></td>
<td width="300"><span id="kong" style="display: none;color:red">帐号不能为空</span></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="passwordname" placeholder="请输入你的密码"/></td>
<td></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" name="radio" checked="checked">男
<input type="radio" name="radio">女</td>
<td></td>
</tr>
<tr>
<td>爱好:</td>
<td>抽烟:<input type="checkbox" />
喝酒:<input type="checkbox" />
烫头:<input type="checkbox" /></td>
<td></td>
</tr>
<tr>
<td>喜欢的音乐</td>
<td>
<select>
<option>like dying in the sun</option>
<option>anything but ordinary</option>
<option>chocolate ice</option>
<option>don't cry</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td colspan="3" style="text-align: center;">
<input type="image" src="./img/regbtn.jpg" style="margin-top: 10px;">
</td>
</tr>
</table>
</form>
<!--div+css是网页布局的主流 灵活性要好,
table有弊端,必须把/table读完才能全部显示
div有个特点,独占一行,不能完成复杂内容,要借助样式表
语法:
选择器{属性:属性值;属性:属性值;}
注意选择器严格区分大小写
最后一个属性可以不写; 也可以写
注释使用/* */
font-size: 100 px; 注意值额单位之间不能用空格分开
-->
<div>这是一个div的标签1</div>
<div>这是一个div的标签2</div>
这里不是div标签
<p> 这是一个段落 </p>
<!-- <script type="text/javascript" src="外部JS文件相对路径"></script>注意引入外部事件后内部事件将被屏蔽 所以用1行
alert(typeof 变量)查看变量数据类型 有number string boolean null object undefined 定义变量用var +字符串表连接 -*/表示运算
=== 为全等表示数据类型也要相同 if()判定时除0外数值都为真 除空外字符串都为真 null false为假 对象都为真
for循环注意不能再用int for(var i=0;i<2;i++)
匿名函数较常用 var fu=function(i,j){return i+j;} 使用fu(3,4);
事件源 事件 绑定事件与源 处理方式
事件有两种鼠标事件(点击双击移入移出),键盘事件(按下弹起)按住不放
绑定:事件和事件源绑定在一起,事件发生了如何去处理使用函数
事件:onload 与body绑定<body onload="fun()"></body>
事件:onsubmit 与表单绑定<form onsubmit="blu()"></form>
事件:onchange 与select下拉菜单绑定<select onchange="blu()"></select>
事件:onclick 与鼠标事件绑定<input type="button" onclick="blu()"></input>
js BOM 对象 a.window
弹框
表示浏览器窗口 弹框 alert 弹出一个警告框 window.alert(""); window可以省略 调试程序用
var con=confirm("确认删除吗?");有两个按钮 确认返回true与取消返回false
var pro=prompt("请输入内容"); 取消返回null
定时器
setTimeOut(执行任务,毫秒值); function fun(){alert("定时器.")} setTimeOut(fun,2000)
setInterval(执行任务,毫秒值);function fun(){alert("定时器.")} var id=setInterval(fun,2000)
匿名函数 setInterval(function(){alert("定时器")},2000);
clearInterval(id);
eval("alert(123)") 把字符串解析成函数
b.location
function fnhei(){
location.href="http://www.itheima.com";
}
<a href="#" onclick="fn()">点我进入淘宝</a> 或者使用函数名不加双引号
c.history
history.go(-1);后退一步 history.go(1);前进一步 意义不大
d.图片轮播
一段时间把img标签的src属性图片名称改变
e.验证
span.innerHTML("加入内容");
-->
<input type="button" onclick="f()" value="点我关闭定时器"/>
<!--定时器 跳转网页 开始-->
<script type="text/javascript">
function fun(){alert("定时器.")}
var id=setInterval(fun,40000);
function f(){
clearInterval(id);
}
function fnhei(){
location.href="https://www.taobao.com/";
}
function myblog(){
window.alert("操作成功\r\n5秒后跳转主页.")
setTimeout(fnhei,5000);
}
</script>
<!--定时器 结束-->
<!--轮播和广告 开始-->
<script type="text/javascript">
var i=1;
var lunboId=setInterval(function(){
var imgId=document.getElementById("imgId");
imgId.src="img/"+i+".jpg";
i++;
if(i>4){
i=1;
}
},5000);
var adId=document.getElementById("adId");
setTimeout(function(){adId.style.display="block";},0);
setTimeout(function(){adId.style.display="none";},5000);
</script>
<!--轮播和广告 结束-->
<script type="text/javascript" src="js/close_lunbo.js"></script>
<br/><a href="#" onclick="myblog()">点我进入淘宝,实际是5秒后进入我的博客</a>
<center><button onclick="closeLunbo()">点我结束轮播</button></center>
<script type="text/javascript" src="js/checked.js"></script>
</body>
</html>
js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<table>
<tr>
<td>
<form method="get" action="#">
请输入表格的行数:<input type="text" id="table_r" /><br />
请输入表格的列数:<input type="text" id="table_l" /><br />
<input type="button" value="生成表格" onclick="createTable()" />
</form>
</td>
</tr>
</table>
</div>
<div id="div_t">
</div>
<script type="text/javascript">
/*获得标签方法*/
// var x=document.getElementsByTagName("div");
// var y=document.getElementsByClassName("");
// var z=document.getElementsByName("");
/*操作标签对象*/
// var tj=createElement("li");
// tj.setAttribute("id","tj");
// tj.setAttribute("value","tj");
// tj.innerHTML="天津";
// city.appendChild(tj);
// innerHTML="";
// 插入标签 insertBefore(xin,jiu);需要知道父和新旧3个标签.
/*操作标签属性*/
// getAttribute("属性名");
// setAttribute("属性名","属性值");
// removeAttribute(name);
/*设置标签体的文本 标签内容原样输出*/
// innerText="<h1>海马</h1>";
// alert(divElement.innerHTML());
// alert(divElement.innerText());
/*判断是否有子节点*/
// element.hasChildNodes();
// IE认为空白文本节点是没有子节点,火狐只要有回车都有节点
// 删除时自己不能删除自己,通过父节点删除,所有浏览器支持
// var fu=document.getElementById("fu");
// var zi=document.getElementById("zi");
// fu.remove(zi);
// zi.parentNode;
/*替换的时候也使用父节点 replaceChild*/
// var city=document.getElementById("fu");
// var bj=document.getElementById("zi");
// var fk=document.getElementById("ti");
// city.replaceChild(xin,jiu);
/*各行变色 奇数行偶数行设置不同背景色*/
// var trs=getElementsByTagName();得到行
// window.onload=function(){}
// for(var i=1;i<trs.length;i++){
// if(i%2==0){
// trs[i].style.backgroundColor="#ffffcc";
// }else{
// trs[i].style.backgroundColor="#ff00cc";
// }
// }
// 添加鼠标悬浮事件 trs[i].onmouseover=function(){
// color=this.style.backgroundColor;
// this.style.backgroundColor="#329393";
// }
// 添加鼠标离开事件 trs[i].onmouseout=function(){
// this.style.backgroundColor=color;
// }
// 全选全部选的思想 复选框的属性跟随总选框即可
// onclick=selectAll(this);参数就是那个复选框
// var checkboxes=document.getElementsByClassName("itemSelect");
// for(var i=0;i<checkboxes.length;i++){
// checkboxes[i].checked=checkedObj.checked;
// }
// 反选框if判断
// js.substr(kaishi,length) js.substring(kaishi,jieweishao1)
// var date=new Date();
// date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日";
// Math.round(3.14);
// js的Array对象 是唯一容器
// 创建Array对象的语法3种
// var arr1=new Array();
// arr1[0]=1;
// arr1[1]=1.5;
// arr1[2]="abc";
// var arr2=new Array(3);
// arr2[0]=1;
// arr2[1]=2;
// arr2[2]=3;
// arr2[3]=4;
// arr2[6]=6;
// js数组变长,可以存储不同的数据类型.
// var arr3=new Array(1,2,3,4,5);
// var arr4=new Array("5");
// 正则表达式
// var reg=/^1[345678][0-9]{9}$/;要写验证开头结尾不写后边再写还会true
// 正则对象.test("字符串");与java不同
// 省市联动
// 二维数组
// arr=[["海淀","昌平"],["长春","吉林","四平"],["南京"],"苏州"];
// arr(value);
// cityId.innerHTML="<option>-请-选-择-市</option>";
// onchange=selectCity(this.value) 传递的value即索引
function createTable() {
//这个要看什么时候执行
var r = document.getElementById("table_r").value;
var l = document.getElementById("table_l").value;
var div_t=document.getElementById("div_t");
alert(r+" "+l);
var tab="<table width='300px' height='100px' border='1' bordercolor='red'>";
for(var i=0;i<r;i++){
tab+="<tr>";
for(var j=0;j<l;j++){
tab+="<td>swift</td>";
}
tab+="</tr>";
}
alert(tab);
div_t.innerHTML=tab;
}
</script>
</body>
</html>
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="#" method="get" onsubmit="return check()">
<table id="table" width="455" border="1" style="margin: 0 auto; line-height: 25px;">
<tr>
<td width="95">帐号:</td>
<td width="230"><input type="text" id="zhanghao" name="textname" value="" placeholder="请输入你的帐号" /></td>
<td width="130"><span id="kong" style="display: none;color:red">帐号不能为空</span></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="passwordname" placeholder="请输入你的密码" /></td>
<td></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" name="radio" checked="checked">男
<input type="radio" name="radio">女</td>
<td></td>
</tr>
<tr>
<td>爱好:<input type="checkbox" onclick="selectAll(this)"/></td>
<td>
抽烟:<input class="itemcheck" type="checkbox" />喝酒:<input class="itemcheck" type="checkbox" />烫头:<input class="itemcheck" type="checkbox" />
</td>
<td></td>
</tr>
<tr>
<td>喜欢的音乐</td>
<td>
<select>
<option>like dying in the sun</option>
<option>anything but ordinary</option>
<option>chocolate ice</option>
<option>don't cry</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>省市联动</td>
<td>
<select onchange="selectCity(this.value)">
<option>--请-选-择-省--</option>
<option value="0">北京</option>
<option value="1">辽宁</option>
<option value="2">黑龙江</option>
<option value="3">海南</option>
</select>
<select id="cityid">
<option>--请-选-择-市--</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>照片:</td>
<td><input type="file"></td>
<td></td>
</tr>
<tr>
<td>个人简介:</td>
<td>
<textarea rows="5" cols="30">
</textarea>
</td>
<td></td>
</tr>
<tr>
<td colspan="3" style="text-align: center;">
<input type="image" src="./img/regbtn.jpg" style="margin-top: 10px;">
</td>
</tr>
</table>
</form>
<!--表格各行换色与悬停换色-->
<script type="text/javascript">
window.onload=function(){
var trs=document.getElementsByTagName("tr");
for (var i=0;i<trs.length;i++) {
if(i%2==0){
trs[i].style.backgroundColor="#FF4500";
}else{
trs[i].style.backgroundColor="#ffeeff";
}
var color;
trs[i].onmouseover=function(){
color=this.style.backgroundColor;
this.style.backgroundColor="#0045ff";
}
trs[i].onmouseout=function(){
this.style.backgroundColor=color;
}
}
}
</script>
<!--复选框的总选框设置-->
<script type="text/javascript">
function selectAll(checkObj){
var checks=document.getElementsByClassName("itemcheck");
for (var i=0;i<checks.length;i++) {
checks[i].checked=checkObj.checked;
}
}
</script>
<!--省市联动-->
<script type="text/javascript">
arr=[["海淀","昌平","大兴","丰台"],["沈阳","大连","葫芦岛","锦州"],["哈尔滨","齐齐哈尔","牡丹江","五常"],["三亚","海口","东方","三沙"]];
function selectCity(num){
alert(num);
var city=document.getElementById("cityid");
city.innerHTML="<option></option>";
city.innerHTML="<option>--请-选-择-市--</option>";
for (var i=0;i<arr[num].length;i++) {
city.innerHTML+="<option>"+arr[num][i]+"</option>";
}
}
</script>
</body>
</html>
Never waste time any more, Never old man be a yong man
