WEB基础---HTML,Css,js用法最全汇总
1.HTML
基本结构:
hello html!
head标签里可写:
mypage
body标签:
你好!!!!
林富豪 a<b c>d <!--
用于换行 加粗ad <小于 >大于 1. 2.&ensp;比 空格数多一点 3. 空格更多一点 -->
页内布局常用标签:
我的标题
我的标题
我的标题
我的标题
我的标题
我的标题
我的段落
我的div 普通文本
行内结构排布常用标签:
普通文本新文本 普通文本新文本 普通文本新文本 普通文本新文本 普通文本新文本 普通文本新文本
自定义列表:
- 列表标题
- 列表内容
有序列表:
- 新闻1
- 新闻2
- 新闻3
无序列表:
- 新闻1
- 新闻2
- 新闻3
a标签:
我的文本我的超链接 我的文本我的超链接 我的文本我的超链接 我的文本我的超链接 我的文本我的超链接 我的文本我的超链接
相对路径./与../区别_imyujh的博客-CSDN博客_相对路径
a标签做锚点:
我的文本我的超链接 我的标题
回到顶部 回到顶部 指定跳转
a标签其它属性:
我的文本我的超链接
img标签:
一些常用的网站:w3school w3cschool 这些网站里有一些完整的html标签。
表格标签:
用户信息表 姓名 性别 年龄 小明 男 15 小白 女 18
表单标签:
表单元素标签:
性别: 女 女装大佬
兴趣:爬山 蹦极 游泳 喝水
<!-- 下拉列表select,配合option标签使用。name属性在select里.且一般传输是传码,不传文本,故在option里加value属性。下拉列表框默认选中第一个值,即下面的北京,可用selected="selected"调整.multiple="multiple"可将单选变为多选 --> 北京 上海 深圳
页面嵌套标签(已过时)(这是不用body标签):
iframe标签(还在用):
新页面
2.Css
引入Css代码方式(最常用的):
div{ color: red; } 我的文本
元素标签选择器:
div{ color: blue; } p{ color:red; } 测试文本 测试文本
测试文本二
class选择器(style里推荐):
.mycls{ color: red; } .mycls2{ color:green; } 咏鹅--骆宾王
鹅鹅鹅
曲项向天歌
白毛浮绿水
红掌拨清波
id选择器(css里不建议使用):
#mytitle{ color:brown; } 咏鹅--骆宾王
鹅鹅鹅
曲项向天歌
白毛浮绿水
红掌拨清波
class允许多值:
.mycls{color:red; } .cls2{background-color:lightcoral; } .cls3{border:1px solid black; } 咏鹅--骆宾王
鹅鹅鹅
曲项向天歌
白毛浮绿水
红掌拨清波
并集选择器(同时选多个元素和其它选择器,逗号隔开):
.mycls,h1{ color:red; } p,h1{ color:red; } 咏鹅--骆宾王
鹅鹅鹅
曲项向天歌
白毛浮绿水
红掌拨清波
交集选择器(之间无任何标点 ):
p.mycls{ color:green; } 咏鹅--骆宾王
鹅鹅鹅
曲项向天歌
白毛浮绿水
红掌拨清波
后代选择器(父元素+空格+子元素,指所有满足条件的后代,子,孙,...):
div p{ color:red; } .mytest p{ color:red; } 咏鹅--骆宾王
鹅鹅鹅
曲项向天歌
白毛浮绿水
红掌拨清波
子代选择器:
.mytest>p{ color:red; } .mytest>div>p{ color:green; } 咏鹅--骆宾王
鹅鹅鹅
曲项向天歌
白毛浮绿水
红掌拨清波
属性选择器([属性=属性值]):
input[type="button"]{ color:red; }
通用选择器(可被其它选择器轻易覆盖):
*{ color:red; } 咏鹅--骆宾王
鹅鹅鹅
曲项向天歌
白毛浮绿水
红掌拨清波
css常用样式属性:
/* 1.color,文字颜色。属性值可用英文字母,#0000FF形式 2.font-size字体大小。属性值可用xx-large超大号,可用像素50px,可用3.125rem。(rem相对默认字体的大小,3.125rem即相对原始字号的3.125倍) 3.font-family字体类型。常用黑体 4.text-align,文字对齐方式(默认左对齐).left,center,right.左中右 5.vertical-align:middle,图片和文字排在一行(默认底部对齐)。middle居中对齐,top顶部对齐,bottom底部对齐。 6.div块状效果。让其左右居中text-align:center。让其上下居中:让行高和块高相同。可设置块状的大小,可加边框,可让块内文字居中。 7.border边框,值是复合值,允许填多个值,中间用空格隔开。通常设置边框粗细(1px),线条(实线solid 虚线dashed),边框颜色(black)。也可不用复合使用,一个个分开写,border-1px这样分开写。 边框圆角border-radius:10px;可让边框变得更柔和,也可用%,border-radius:10%;比例最多到50%,此时为圆圈 8.text-decoration,文字修饰,underline下划线,line-through删除线,最常用的是none(给A标签用的,超链接一般带下划线,可让下划线消失。) 9.background-color:背景色 10.background背景图片,背景图片和背景颜色有冲突,一般用了背景图片,背景颜色看不着了。背景图片如果很小,会默认横纵,纵轴自己循环。background-repeat可设置重复方式,repeat-x只重复x轴,repeat-y只重复y轴no-repeat不重复 11.list-style可修改无序列表的样式,默认黑点。正方形点square,也可用图片做样式。 */ p{ color:#0000FF; 文字颜色 text-align:center;文字居中对齐 } .mycls{ /* font-size:xx-large; */ 字体大小,超大号 font-size:50px; font-family:"楷体"; 字体类型 } .myimg{ /* vertical-align:middle; */ 图片和文字居中对齐 vertical-align:top; /* vertical-align:bottom; */ } .mydiv{ width:200px; height:200px; border:1px solid black; 边框粗细,实线,边框颜色 border-radius:50%; 边框圆角 text-align:center; line-height:200px; 行高 /* text-decoration:underline; */ 文字修饰,下划线 background-color:#FFB6C1; 背景色 background:url(img/jdk1.7.jpeg) ; 图片路径 background-repeat:repeat-y; 重复方式,只重复y轴 } .mydiv>a{ text-decoration:none; 文字修饰,让下划线消失 } ul{ list-style:square; 无序列表的样式,正方形点 } 悯农--李绅
锄禾日当午
汗滴禾下土
谁知盘中餐
粒粒皆辛苦
超链接我的文本 <!-- 测试文字 --> - 项目1
- 项目2
- 项目3
display属性:
/* display显示方式,常用的值:inline行内 block块 inline-block行内块(还是从左到右排列,但可设置宽高) none看不见(元素还是存在的),效果等同于opacity:0;(透明度为0)(透明度的取值在0到1之间) 显示颜色一般用rgb,对于rgba就是把透明度也加进去 */ /* div,span{ border:1px solid black; width:100px; height:100px; } /* 设置宽高对行内元素无效*/ div{ border:1px solid black; width:100px; height:100px; display:inline; /*将块元素改成行内元素*/ opacity:0.2; } span{ border:1px solid black; width:100px; height:100px; display:none; } mydiv mydiv mydiv myspan myspan myspan
盒子模型相关属性:
/* 盒子模型相关的属性: 1.content 内容,一般通过宽高设置 2.border 边框 1px solid black; 3.padding,内部填充,边框与内容之间的距离 4. margin外边距,用法同padding,两个值时多了auto属性值 以上四个元素都占单独的大小。有一个值发生改变,整体布局就会改变。 */ .main{ width:400px; height:400px; border:1px solid black; margin:0px auto; } .innerdiv{ width:100px; height:100px; border:10px solid black; /* padding:10px; 边框与框内内容上下左右的距离*/ /* padding-left:50px; 边框与左边内容的距离*/ /* padding:10px 20px; 边框与上下10px,与左右20px */ /* padding:10px 20px 30px;上,左右,下 */ padding:10px 20px 30px 40px; /*上,右,下,左(按表走的方向)*/ } .mydiv{ /* margin:10px; */ /* margin-top:20px; 上边距 */ /* margin-left:20px; 左边距*/ /* margin:10px 20px 30px 40px; 上右下左 */ margin:10px 20px; /*上下和左右*/ margin:10px auto; /*auto可以让元素在父元素里左右居中*/ } div1 div2 div3
块嵌套:
/*overflow,溢出。大块里套小块,小块太多会超过外边界,超过的部分让其不显示,用hidden。 超过部分用滚动轴显示, 用scroll 另一种情况:父元素里面的每一个块会把其所在行占满,故虽然块右边是空白,但不会再放内容。(块元素是从上到下排列的) 若让块元素水平排列,用float,属性值有left,right float也可让某个元素分成左右各一个 注:漂浮时要让所有的块都漂浮起来,若加入不漂浮的块,边界就会按不漂浮的块重新来算,且与不漂浮的块一起排列时效果也不好 若大块里套小块,小块里再套小块,就一层一层去排列,解决完一层再解决一层。 */ .main{ width:400px; height:400px; border:1px solid black; margin:0px auto; overflow:scroll; } .innerdiv{ width:100px; height:100px; border:1px solid black; float:left; } .toRight{ float:right; } div1 div2 div3 div4 div5 xxx系统 欢迎你xxx
案例:打地鼠
案例:div+css替代frameset或farme做页面嵌套
伪类选择器:
/*伪类选择器,用于选取元素的状态,比较常见的两个状态:hover鼠标悬停,active鼠标点击(点击但没松开),只要是页面里能看到的元素都有状态,都可以修改*/ a:hover{ /* 悬浮状态 */ color:lightcoral; /* 修改文字颜色 */ font-size:x-large; /* 修改文字大小 */ } a:active{ /* 点击效果 */ color:purple; } .mydiv{ width:100px; height:100px; border:1px solid black; background-color:lightgreen; } .mydiv:hover{ background-color:lightblue; cursor:pointer; /* 鼠标变成手也是样式效果 */ } .mydiv:active{ background-color:olive; } 超链接
定位属性-position:
/*position属性默认static。其它属性值: 1.relative相对定位,以原来所在位置为原点,进行偏移。使用了属性值后, 通常还要使用另外两个属性,top(向下偏移)和left(向右偏移)来进行偏移。偏移量也可使用负值(故没有right和bottom)。元素未脱离文档流(其它元素不动,且位置改变的元素也是以原来位置为参照)。 2.absolute绝对定位,元素脱离文档流(其它元素视位置改变的元素不存在,按照默认文档流排列。位置改变的元素以整个窗口的页面位置为基准进行偏移。实际上,不在同一个图层了) 3.固定定位,元素脱离文档流,也是以窗口位置进行偏移,并固定在此处(拉滚动条也不动,不随页面移动而移动) 加了定位属性的块悬浮于其他块之上.实际上,样式表有分图层,z-index可改变图层顺序。默认图层为0,加了定位属性后,改变位置的元素所在图层变为1,故可覆盖原先元素。可给z-index一个-1的值,使改变位置的元素在原来元素的下面。 注:z-index只能用在有定位属性的元素上。 */ .div1{ width:100px; height:100px; border:1px solid black; background-color:lightblue; } /* .div2{ width:100px; height:100px; border:1px solid black; background-color:lightcoral; position:relative; top:50px; left:-50px; } */ /* .div2{ width:100px; height:100px; border:1px solid black; background-color:lightcoral; position:absolute; top:50px; left:50px; } */ .div2{ width:100px; height:100px; border:1px solid black; background-color:lightcoral; position:fixed; top:50px; left:50px; z-index:-1; } .div3{ width:100px; height:100px; border:1px solid black; background-color:lightgreen; } div1 div2 div3
导航条制作(行业内用ul和li去做):
/* ul和li都是块元素,想水平排列,可用:1.悬浮 */ /* .mynav>li{ float:left; border:1px solid black; margin-left:20px; 加外边距 width:80px; height:50px; text-align:center; line-height:50px; } .mynav{ list-style:none; 去无序列表标题 } .mynav>li>a{ text-decoration:none; 去a标签下划线 color:lightcoral; } .mynav>li:hover{ background-color:lightgreen; } */ /* 水平排列方法二:将块元素变成行元素,用display */ .mynav>li{ display:inline-block; /* 改成行内块 */ border:1px solid black; margin-left:20px; width:80px; height:50px; }
3.javascript
javascript引入(最常用):
页面中使用script标签,编写js代码 console.log("hello world!!!!")
js基本语法:
var myNum1 = 10; /* 变量类型会根据值的类型确定 */ console.log(myNum1); /*10 控制台会将不同类型的变量用不同颜色表示。数字用蓝色;字符串用黑色表示;*/ console.log(typeof myNum1); /* 检测变量的类型,结果为number */ var myStr1 = "abc"; /* 双引号引出是字符串,单引号引出也是字符串,点(键盘左上角,esc下面的点)引出也是字符串。 */ //var myStr2 = 'abc'; //var myStr3 = `abc`; //var myStr4 = '"abc"'; /* 引号嵌套,单引号里套双引号,或者双引号里套单引号 */ //var myStr5 = "'abc'"; console.log(myStr1); console.log(typeof myStr1); var mybol1 = true; //var mybol1 = false; 布尔值也是蓝色标记 console.log(mybol1); console.log(typeof mybol1); var myVar; console.log(myVar); // 结果为undefined,未初始化类型。颜色为灰色 console.log(typeof myVar); //类型为undefined /* console.log(myVar2); //未定义类型,控制台会报错。下面的语句不走了 (js从上到下,从左到右,逐行解析,解析出错,后面不再运行) console.log(typeof myVar2); */ /* console.log(typeof myVar2); //undefined,可检测出该类型 console.log(myVar2); //报错 */ var myDate = new Date(); console.log(myDate); console.log(typeof myDate); //object var myFun = function(){ console.log("abc"); } console.log(typeof myFun) //function
类型转换函数:
var myNumStr1 = "10"; console.log(parseInt(myNumStr1)); //字符串转整数 var myNumStr2 = "10a"; console.log(parseInt(myNumStr2)); //也能转成10 var myNumStr3 = "1a0"; console.log(parseInt(myNumStr3)); //1 规则,从左到右解析,能读出来的给出,碰到解析不了的,停止解析。 var myNumStr4 = "a10"; console.log(parseInt(myNumStr4)); //NaN not a number console.log(parseInt(typeof myNumStr4)); //number (设计者应付了事) var myNumStr5 = "10.01"; console.log(parseInt(myNumStr5)); //10 (将小数点当成一个特殊字符,停止解析) 故parseInt也可用来截取整数部分 var myNumStr6 = "10.01"; console.log(parseFloat(myNumStr6)); //10.01 (将小数点给加进来) var myNumStr7 = "1a0.01"; console.log(parseFloat(myNumStr7)); //1 var myNumStr8 = "10.0a1"; console.log(parseFloat(myNumStr8)); //10 var myNumStr9 = "a10.01"; console.log(parseFloat(myNumStr9)); //NaN var myNum1 = 10; console.log(myNum1.toString()); //10
比较运算符:
var myNum1 = 10; var myStr1 = "10"; console.log(myNum1==myStr1); //true js里有一些内置转换,会先将字符型数字和数字做一次转换,若转换成功, //就直接当做数字用 console.log(myNum1===myStr1); //false 希望直接比较,不用内置转换,就用=== //其它内置转换的情况var mybol1 = true;var myNum2 = 1;console.log(mybol1==myNum2); //trueconsole.log(mybol1===myNum2); //false
逻辑运算符:
console.log(!0); //true !的一个特殊用法:将数值类型转成布尔类型
小数相加问题:
var myNumber1 = 0.1;var myNumber2 = 0.2;//console.log(myNumber1 + myNumber2 ); //0.30000000000000004 精度丢失 //用toFixed保留指定位数的小数,转成的是字符串类型。想要数字再转一下,用parseFloat()console.log((myNumber1 + myNumber2).toFixed(1) ); //0.3
条件语句:
//if-else var mySource = 100; if(mySource>80){ console.log("良好"); }else if(mySource>60){ console.log("及格"); }else{ console.log("差劲"); } //switch-case var myGrade = 'g'; switch(myGrade){ case 'g':console.log("奖励一袋零食");break; case 'a':console.log("奖励一颗糖");break; case 'x':console.log("奖励一巴掌");break; default:console.log("啥都没有");break; }
循环语句:
//for var myarr = [1,4,5,2,4,5]; //js里定义数组,直接[] //遍历数组 for(var i=0;i<myarr.length;i++){ console.log(myarr[i]); } //for-in循环 var myarr1 = [1,4,5,2,4,5]; for(var x in myarr1){ console.log(myarr1[x]); //x是索引 } //while var myflag = true; while(myflag){ if(xxx){ myflag = false; } } //do-while do{ //循环体 }while(myflag)
课堂练习:
1.将1549各个位都摘出来,再相加,并输出相加后的结果。
var myNum = 1549; var myGe = myNum%10; var myShi = parseInt(myNum/10)%10; var myBai = parseInt(myNum/100)%10; var myQian = parseInt(myNum/1000); var mySum = myGe + myShi + myBai + myQian; console.log(mySum);
2.0-6分别表示周日,周一到周六。在控制台输出工作日(一到五)和周末(六和日)
var myDay=0; switch(myDay){ case 0: case 6:console.log("周末");break; case 1: case 2: case 3: case 4: case 5:console.log("工作日");break; default:console.log("输入不合法");break; }
3.输出乘法口诀表,但不输出到控制台,输出到页面。用document.write("
abc
"); //可带标签
for(var i=1;i<=9;i++){ for(var j=1;j<=i;j++){ document.write(j+"x"+i+"="+j*i ); document.write(" "); if(j*i<10){ //如果不是两位,补一个空格 document.write(" "); } } document.write("
"); }
系统函数:
console.log(isNaN("abc")); //true console.log(!isNaN("10")); //true//evalvar mystr = "1+5*3";console.log(mystr); //1+5*3//如果字符串是一个算式,eval可将结果运算出来(把字符串当脚本运行,返回结果)console.log(eval(mystr)); //16
自定义函数:
function myfun(){ //不带形参的函数 console.log("运行了自定义函数"); } myfun(); //函数的调用 function myfun1(a,b){ //带参数的函数,参数在js里是弱类型,不需要指明类型.多个参数用逗号隔开 var mySum = a+b; console.log(mySum); //可打印出运算结果 } myfun1(1,3); //调用要给实参 function myfun2(a,b){ var mySum = a+b; return mySum; //可返回数据,比java少了返回值类型的定义 没返回值则不用加return } var myNum = myFun2(1,3); //接收返回值,可自己定义一个变量 console.log(myNum); //匿名函数的写法,不用加函数名 var myFun2 = function(a,b){ return a-b; } console.log(myFun2(3,1)); //2
鼠标点击 onclick事件:
function myTest(){ console.log("按钮被点击了"); } .mydiv{ width:100px; height:100px; border:1px solid black; }
鼠标悬浮onmouseover事件:
function changeColor(){ console.log("鼠标经过"); console.log(document.getElementById("mydiv")); //通过id找元素 //找元素对象,再确定对象属性,再从样式属性诸多属性里找到要修改的属性,再把值改变。 document.getElementById("mydiv").style.backgroundColor = "lightcoral"; //修改元素背景颜色 } function changeColor2(){ document.getElementById("mydiv").style.backgroundColor = "white"; } .mydiv{ width:100px; height:100px; border:1px solid black; }
参数内容相同可简化:
//这两个函数只有参数不同,怎么简化 /* function changeColor(){ document.getElementById("mydiv").style.backgroundColor = "lightcoral"; } function changeColor2(){ document.getElementById("mydiv").style.backgroundColor = "white"; } */ function changeColor(mycolor){ document.getElementById("mydiv").style.backgroundColor = mycolor; } function changeColor2(mycolor){ document.getElementById("mydiv").style.backgroundColor = mycolor; } .mydiv{ width:100px; height:100px; border:1px solid black; }
当效果变化的元素和触发事件的元素是同一个元素,可简化代码:
function myTest(){ console.log("被点了"); } function changeColor(mycolor,myobj){ myobj.style.backgroundColor = mycolor; } function changeColor2(mycolor,myobj){ myobj.style.backgroundColor = mycolor; } .mydiv{ width:100px; height:100px; border:1px solid black; }
点击一个元素,使另一个元素触发效果,还是用id去写:
function myTest(){ console.log("被点了"); document.getElementById("mydiv").style.backgroundColor="green"; //点击按钮使块元素变绿 } function changeColor(mycolor,myobj){ myobj.style.backgroundColor = mycolor; } function changeColor2(mycolor,myobj){ myobj.style.backgroundColor = mycolor; } .mydiv{ width:100px; height:100px; border:1px solid black; }
onfocus获取焦点事件:
function changeTextColor(){ document.getElementById("mytext").style.color = "blue"; //获取焦点时,文本框内字体颜色变蓝 } function changeTextColor2(){ document.getElementById("mytext").style.color = "black"; //失去焦点时,文本框内字体颜色变黑 } function changeTextValue(){ //document.getElementById("mytext2").value = "abc123"; 获取焦点时,文本框内默认值改变 var nowVal = document.getElementById("mytext2").value; //读取默认值 console.log(nowVal); } //对元素的通用操作,读和写 //写操作:元素.属性="xxx" //读操作:var xxx = 元素.属性
onchange内容改变事件:
function getNowValue(myobj){ //文本框里的内容改变,会将改变后的内容打印输出到控制台 console.log(myobj.value); } function getSelectVal(){ //select标签虽然没有value,但内部已经做到转换,找到的是被选中的option的value console.log(document.getElementById("mysel").value); //当选项改变时,会将对应的value值输出到控制台 } 北京 上海 深圳
也可以改变下拉列表的选项使div块发生改变:
function changeDivBGC(){ var selColor = document.getElementById("clsel").value; document.getElementById("mydiv").style.backgroundColor = selColor; } .mydiv{ width:100px; height:100px; border:1px solid black; } 蓝色 红色 绿色
页面载入onload事件(此事件可用script标签放到最下面替换):
// document.getElementById("mytext").value = "abc123"; 会报错,不是函数,函数调用才执行。这里从上到下加载, //加载到此处,元素还没生成,也就找不到元素,也就不能给默认值。 //解决方案一:生成元素后再执行这句话 //解决方案二:使用onload事件,页面加载结束,直接写在body里,此时script写在哪都行,但要配函数。 /* 解决方案二:对应函数 function myInit(){ document.getElementById("mytext").value = "abc123"; } */ <!-- 解决方案二: 整个body加载结束后会触发onload事件 --> <!-- 解决方案一:(推荐用此方案,更简单) document.getElementById("mytext").value = "abc123"; -->
onload也可用元素绑定事件去写:
//onload的另一种写法,叫元素绑定事件。这种写法也可以先找到元素,用document.getElementById("mytext").onload,后面一样 //元素绑定事件只能用匿名函数 window.onload = function(){ document.getElementById("mytext").value = "abc123"; }
innerHTML属性:
我的标题
//操作元素的通用方法:找到元素,再点元素的属性。比如改文本框,按钮的值 //对双标签里的内容,用什么属性合适? 用innerHTML,代表双标签里的内容 document.getElementById("mytitle").innerHTML = "new title";
键盘按键 onkeyup事件:
//看一下按键盘结束后文本框的值 function getTextVal(){ console.log(document.getElementById("mytext").value); } //keyCode键盘(识别)码 //该函数效果:每次按键会在控制台输出该按键对应的键盘码 function getTextVal(event){ console.log(event.keyCode); }
案例:手机号输入效验:
//js里,正则必须写在两个斜杠中间 var myreg = /^1(3|4|5|7|8)\d{9}$/; function checkText(){ var num1 = document.getElementById("mytext").value; //每次按键盘都会获得当前值 console.log(myreg.test(num1)); //用正则表达式效验输入是否正确,true则正确,false则错误 //想要给用户看,而不是在控制台看.显示的位置应该在文本框后面.正确提示信息为绿色,错误为红色。 if(myreg.test(num1)){ document.getElementById("checkspan").innerHTML = "格式正确"; document.getElementById("checkspan").style.color = "green"; }else{ document.getElementById("checkspan").innerHTML = "格式错误"; document.getElementById("checkspan").style.color = "red"; } }
网上的效果,正确给个对勾图片,错误给个叉叉图片:
/* 调一个图片对齐方式 */ img{ vertical-align:middle; /* 和文本框居中对齐 */ display:none; /* 不操作不显示图片 */ } var myreg = /^1(3|4|5|7|8)\d{9}$/; function checkText(){ if(myreg.test(document.getElementById("mytext").value)){ document.getElementById("myimg").style.display = "inline"; /* 操作显示图片 */ document.getElementById("myimg").src = "./对勾.png"; }else{ document.getElementById("myimg").style.display = "inline"; document.getElementById("myimg").src = "./false.png"; } }
表单提交 onsubmit事件:
img{ vertical-align:middle; display:none; }
var myreg = /^1(3|4|5|7|8)\d{9}$/; function checkText(){ var flag = false; if(myreg.test(document.getElementById("mytext").value)){ document.getElementById("myimg").style.display = "inline"; document.getElementById("myimg").src = "./对勾.png"; flag = true; }else{ document.getElementById("myimg").style.display = "inline"; document.getElementById("myimg").src = "./false.png"; flag = false; } return flag; } function checkMail(){ return true; } function mySubmit(){ //效验其它所有结果,所有结果都为true才返回true return checkText()&&checkMail(); }
BOM浏览器对象模型:
windows对象:
console.log(window.document); //用document可在控制台看到完整的代码 //document属于window对象,windows可省略不写 //以下全部过时,了解: //alert("警告框"); //prompt("请输入"); //confirm("确定离开么 还有xx分钟就可以领取大奖")
History对象:
//浏览器历史记录的按钮实际上就是前进和后退按钮, function myBack(){ //history.back(); 加载上一个浏览的文档(浏览器里的后退) //history.forward(); 加载下一个浏览过的文档(浏览器里的前进) history.go(0); //刷新页面,相当于在第0个历史记录里跳转 }
Location对象:
function myHREF(){ //页面跳转 location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=123&fenlei=256&rsv_pq=b3903db40004d883&rsv_t=26dfCMNmJN8OLu8M%2F6R0rmWsUMQJPAWUKGi369qTEIZJP7hLs1UlUXlvnmI&rqlang=cn&rsv_enter=0&rsv_dl=tb&rsv_btype=i&inputT=1073&rsv_sug4=1297" } //浏览器的刷新按钮通过location对象调用reload属性 function myRefresh(){ location.reload(); //刷新当前页面 }
Document对象:
div1 div2 span1
鹅鹅鹅
曲项向天歌
拔毛浮绿水
红掌拨清波
//document对象属于windows对象,代表当前文档 document.title="mypage"; //操作title标签(页面左上角的标题) console.log(document.getElementById("mytext")); //通过id找到唯一的一个元素 console.log(document.getElementsByTagName("div")); //通过标签名查找元素 console.log(document.getElementsByName("hobby")); // 通过name属性查找元素 console.log(document.getElementsByClassName("mycls")); //通过class的值查找元素 console.log(document.getElementById("mydiv").getElementsByTagName("p")); //在某个元素中查找元素 //让文本框1,2,3的颜色改变 通过元素属性筛选元素 var eles = document.getElementById("aimdiv").getElementsByTagName("input"); //找到5个input标签 for(var i = 0;i<eles.length;i++){ if(eles[i].type=="text"){ //判断type是否为text,是则变为红色 eles[i].style.color="red"; } }
Window对象常用方法:
//打开新窗口open。传入参数:1.打开窗口的地址 2.窗口名字 //3.一些可选项,比如窗口大小,所在位置,是否要滚动条,工具栏等 后两个参数选填,第一个必填 /* function myOpen(){ window.open("2history对象.html","",""); } */ //关闭窗口,没有参数。谁调用,就关谁(windows对象调用的,windows对象代表当前窗口) /* function myClose(){ window.close(); } */ //关闭新窗口,不是当前窗口,只要获得新窗口对象,就可关闭。 //新窗口对象通过open的返回值获取 //函数内定义的变量只能在自己函数中生效,应用全局变量 //注:全局只针对当前页面生效 var newWin; function myOpen(){ newWin = window.open("2history对象.html","",""); } function myClose(){ newWin.close(); //此时关闭的是新窗口 }
定时函数:
//两个定时函数: 1.setInterval(fun,time)定时重复不断地执行 clearInterval 停止 //两个参数,1.要执行的函数对象 2.间隔多长时间去执行,是毫秒数 //2.setTimeout(fun,time)定时执行一次 clearTimeout 停止 function myLog(){ console.log("1"); } setInterval("myLog()",1000); //页面加载结束后触发该定时函数,该定时函数每隔一秒执行一次myLog()函数。第一种写法,引号里加函数名加括号 //setInterval(myLog,1000); 第二种写法,不推荐 /* setInterval(function(){ 第三种写法,用匿名函数 console.log("1"); } ,1000); */ //通常定时函数通过按钮触发,故写法上会套在一起 function myStart(){ setInterval(function(){ console.log("1"); },1000);//但要注意,按钮点完之后马上禁用,不然定时重复不断地执行。
function myStart(myObj){ myObj.disabled = true; //按钮禁用 setInterval(function(){ console.log("1"); },1000);
//setTimeout用法和setInterval一样 setTimeout(function(){ console.log(3); },1000); var taskid; function myStop(){ clearInterval(taskid); //参数是Interval的id,其id从开启的返回值获得。同样提升作用域 //clearTimeout() 是停掉setTimeout定时,参数是Timeout的id } function myStart(myObj){ myObj.disabled = true; taskid = setInterval(function(){ console.log("2"); },1000); }
案例:页面定时跳转
案例:图片隐藏
案例:随机数
案例:生成界面
文档对象模型(dom树结构):
获取元素节点:
我的标签1 我的标签2 我的标签3 console.log(document.getElementById("mydiv")); //通过id获取元素 console.log(document.getElementsByTagName("div")); //通过标签名获取元素 console.log(document.getElementsByClassName("mydiv")); //通过class属性获取元素
根据节点层次关系获取节点(属性不加括号):
我的标签1 我的标签2 我的标签3 console.log(document.getElementsByClassName("mydiv")[0].parentNode); //第一个class属性为mydiv的节点的父节点。 console.log(document.getElementById("aimdiv").childNodes); //返回子节点集合(注:div标签间会有一些空白,属于文本节点) console.log(document.getElementById("aimdiv").lastElementChild); //获取最后一个元素子节点 console.log(document.getElementById("aimdiv").lastChild); //获取最后一个子节点 console.log(document.getElementById("mydiv").previousElementSibling); //获取上一个元素节点
节点属性操作:
//之前的对元素属性的操作方法: //document.getElementById("mytext").value = "123"; //使用方法的方式 getAttribute() 获取属性 setAttribute() 设置属性值 document.getElementById("mytext").setAttribute("value","123456"); document.getElementById("mytext").getAttribute("value"); //取值只需传入属性名
文本节点操作:
我的标签1 我的标签2 我的标签3 //.innerHTML 可解析html标签 //.innerText 不能解析html标签,纯文本 //document.getElementById("mydiv").innerHTML = "test
"; 可带标签,将文本替换 //(我的标签2被修改为test,并增加了标签h1的效果) document.getElementById("mydiv").innerText = "test
"; //将"我的标签2"替换为" test
"
Dom动态操作相关方法:
-
function addEle(){ //功能:点击添加元素按钮,在无序列表中增加一条新闻 //添加新元素流程:1.创建元素createElement 2.把元素填入页面中appendChild,参数是新创建的元素 /* var newEle = document.createElement("li"); 1.创建元素 newEle.innerHTML="男足(没有)夺冠"; */ //3.写文本,用innerHTML属性 //document.getElementById("myul").appendChild(newEle); 2.把元素填入页面中appendChild,参数是新创建的元素,但此时只多出一个点,没有文本 //想把新添加的新闻放到女足新闻前面,用insertBefore //document.getElementById("myul").insertBefore(newEle,document.getElementById("myli")); //将女足新闻做成按钮,新添加的新闻也做成按钮:(多了一层嵌套效果) var newEle = document.createElement("input"); //1.创建input标签 newEle.setAttribute("type","button"); //6.input标签通过type属性决定各种类型(也可newEle.type = "button"); newEle.value="男足(没有)夺冠"; //2.写标签内容 var newli = document.createElement("li"); //3.创建li元素 newli.appendChild(newEle); //4.将input放在li里 document.getElementById("myul").appendChild(newli); //5.将准备好的li整个放到ul里 } function addEle2(){ //cloneNode(bol) 克隆方法,参数为布尔值。bol决定子元素是否一起复制。若为false,则指复制了列表的图标。 //不写布尔值,默认false var newEle = document.getElementById("myli").cloneNode(true); document.getElementById("myul").appendChild(newEle); } function delEle(){ //removeChild删除节点 //通过元素结构 找到需要删除的子节点 //删除最后一个 document.getElementById("myul").removeChild(document.getElementById("myul").lastElementChild); }
dom动态操作简单的方法:
-
/* 添加或者替换时 把元素当文本操作 删除时 使用动态dom的删除方式 */ function addEle(){ document.getElementById("myul").innerHTML += ' '; } function delEle(){ document.getElementById("myul").removeChild(document.getElementById("myul").lastElementChild); }
Dom操作表格相关方法:
用户信息表 编号 姓名 年龄 1 小明 25 2 小白 25 3 小光 29
function addNewRow(){ /*把table描述成二维数组 rows 行 cells 单元格 insertRow() insertCell() 参数都是索引 */ console.log(document.getElementById("mytable").rows[3].cells[1].innerHTML); //4行2列----小光 //var newTR = document.getElementById("mytable").insertRow(0); 第1行添加 //var newTR = document.getElementById("mytable").insertRow(4); 最后一行添加 //但再想在最后一行添加要改索引,不方便,可用document.getElementById("mytable").rows.length。 var newTR = document.getElementById("mytable").insertRow(document.getElementById("mytable").rows.length); //列一般定死,不会再扩 var newTd1 = newTR.insertCell(0); var newTd2 = newTR.insertCell(1); var newTd3 = newTR.insertCell(2); newTd1.innerHTML="test"; newTd2.innerHTML="test"; newTd3.innerHTML="test"; }
Dom操作表格简单方法:
用户信息表 编号 姓名 年龄 1 小明 25 2 小白 25 3 小光 29
function addNewRow(){ var myCode = document.getElementById("myCode").value; var myName = document.getElementById("myName").value; var myAge = document.getElementById("myAge").value; document.getElementById("mytbody").innerHTML+='' +''+myCode+' ' +''+myName+' ' +''+myAge+' ' +' ' } function delRow(){ //删除最后一行 //document.getElementById("mytable").rows.length-1 数组长度-1 正好是最后一条数据的idx document.getElementById("mytable").deleteRow(document.getElementById("mytable").rows.length-1); }
Js常用对象:
String:
var myStr = "abc123efcg"; //indexOf() console.log(myStr.indexOf("c")); //2 //lastIndexOf() 若找不到返回-1 console.log(myStr.lastIndexOf("ca")); //-1 //substring() 截取 两个参数:起,止的索引,包头不包尾 console.log(myStr.substring(2,4)); //c1 //substr() 两个参数:起,个数 console.log(myStr.substr(2,4)); //c123 //replace() 将第一个参数替换为第二个参数 console.log(myStr.replace("ef","oo")); //abc123oocg //split()分割 通常用在有格式的字符串 var myStr2 = "id=5;name=jack;age=15"; var kvs = myStr2.split(";"); console.log(kvs); //Array(3) 0: "id=5" 1: "name=jack" 2: "age=15" //将name=jack的值取出 for(var i = 0;i<kvs.length;i++){ var kandv = kvs[i].split("="); //console.log(kandv[0]+'---'+kandv[1]); id---5 name---jack age---15 if(kandv[0]=="name"){ console.log(kandv[1]); } }
Math:
var myNum = 10.1; console.log(Math.ceil(myNum)); //11 ceil()向上取整 console.log(Math.floor(10.9)); //10 floor()向下取整 console.log(Math.round(10.4)); //10 round() 四舍五入 console.log(Math.abs(-10)); //10 绝对值 // 产生1-10间的整数,含1和10 console.log(Math.floor(Math.random()*10)+1); //Math.random() 0-1间的随机小数(包头不包尾)
Date:
/* 日期对象,在js里较简单.没有格式化,没有日期转换 传入常用日期格式字符串,主要有两种 1.2022-12-12 12:12:12 2.2022/12/12 12:12:12 */ var nowTime = new Date(); //获取当前时间 console.log(nowTime); var myDate = new Date("2022/12/12 12:12:12"); //需要获取年月日时分秒,传入常用日期格式字符串 console.log(myDate);
Array对象:
var myarr = new Array(5); //获取数组对象,可传参,参数为长度 var myarr2 = [1,"2",true,new Date(),[1,2,3]]; //也是定义数组, console.log(myarr2.length); // 5 数组常用的属性,就这一个 //数组常用的方法: //console.log(myarr2.join("_")); 将内容用‘-’拼成字符串 //1_2_true_Thu Mar 31 2022 16:16:13 GMT+0800 (中国标准时间)_1,2,3 //sort()排序 /* var myarr3 = [4,1,7,6,9]; myarr3.sort(function(a,b){ //需要传入排序规则,降序排列 return b-a; }) */ /* myarr3.push(2); 尾部添加元素 myarr3.unshift(3) 头部添加元素 myarr3.pop(); 尾部删除元素 myarr3.shift(); 头部删除元素 */ //替换元素 splice (索引 ,几个,...(替换成xxx)) 第三个参数为可变参数 var myarr3 = [4,1,7,6,9]; myarr3.splice(1,2,"a","b"); //第1个索引开始,替换两个,替换成ab console.log(myarr3); //[4,a,b,6,9]