html css javascript 知识点总结 bom js 操作标…
2018-06-18 02:34:13来源：未知 阅读 ()
<!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>
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：RSA加密解密
下一篇：SSM_基于传统web项目
相关文章
- 书籍分享《JavaScript高级程序设计》高清DPF版 2020-05-18
- 模板引擎 Thymeleaf 动态渲染 HTML 2020-05-11
- 让网页变灰的实现_网站蒙灰CSS样式总汇 2020-04-26
- Java中使用JavaScript脚本 2020-03-30
- 这一次，彻底弄懂 JavaScript 执行机制 2020-03-24
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
热门词条
最新资讯
热门关注
热门标签