HTML
小白白成长记
这个作者很懒,什么都没留下…
展开
-
简单的表单验证写法
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> /* 1、用户名不能为空 2、用户名必须在6-14位之间 3、用户名只能有数字和字母组成,不能有其它符号(正则表达式) 4、密码和确认密码一致 5、统一失去焦点验原创 2020-12-21 13:28:12 · 553 阅读 · 0 评论 -
JSON使用拼接html的方式,设置table和tbody
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> //假设从java传过来一个json格式的字符串 var ff="{\"total\":3,\"students\":[{\"name\":\"张三\",\"age\":20},{\"n原创 2020-12-20 18:59:11 · 477 阅读 · 1 评论 -
使用eval函数将字符串转换为JSON对象
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> var f="{\"name\":\"lisi\",\"age\":20}"; window.eval("var stu ="+f) console.log(stu.name+",原创 2020-12-20 18:09:29 · 291 阅读 · 0 评论 -
JSON遍历多个元素集合
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> var students={ "total":3, "data":[{"name":"yy","age":20},{"name":"zz","age":20},{"name":原创 2020-12-20 18:01:31 · 410 阅读 · 0 评论 -
JSON对象的创建和访问属性
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> //创建JSON对象 var emp={ "empno":7369, "ename":"smith", "sal":800 } //访问对象的属性原创 2020-12-20 17:29:29 · 316 阅读 · 0 评论 -
HTML窗口的前进和后退
<html> <head> <meta charset="utf-8"> <title></title> </head> <!-- 前进和后退 --> <body> <a href="历史记录1.html">历史记录1</a> <input type="button" id="" value="前进" onclick="window.history.go(1)原创 2020-12-20 16:58:52 · 414 阅读 · 0 评论 -
JS弹出确认框的方法
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> function say(){ window.alert("hello") } function del(){ //删除前提示用户确认 //返回值是一个布尔原创 2020-12-20 16:32:40 · 1011 阅读 · 0 评论 -
JS动态显示时钟
<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #timediv{ width: 200px; height: 200px; } </style> </head> <body> <script type="text/javascript"&g原创 2020-12-19 21:50:06 · 221 阅读 · 2 评论 -
JS复选框的全选和取消全选
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript" charset="utf-8"> window.onload = function(){ //给id为chk绑定click var chke = document.getElem原创 2020-12-19 21:15:37 · 230 阅读 · 1 评论 -
JS数组创建及常用方法
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript" charset="utf-8"> var a =[];//创建一个长度为0的数组 var b =[1,"aaa",1.2,5]//类型不一样 b.length;//有length属性原创 2020-12-19 16:37:30 · 109 阅读 · 1 评论 -
JS捕捉回车键和ESC
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> window.onload = function(x){ //给id节点绑定keydown事件 document.getElementById("name").onkeydow原创 2020-12-19 16:06:20 · 862 阅读 · 2 评论 -
JS绑定加载完毕事件
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> //页面加载完毕会执行下面的代码 window.onload = function(){ console.log("加载完毕") } </script>原创 2020-12-19 15:24:07 · 334 阅读 · 1 评论 -
JS注册绑定事件
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="button" id="btn1" value="hello" onclick=""/> <script type="text/javascript"> //注册事件 var hbtn =document.原创 2020-12-19 15:23:04 · 130 阅读 · 1 评论 -
JS获取id节点修改属性和元素
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="button" id="btn" value="按钮" /> <script type="text/javascript"> /* 根据id获得元素/节点属性 内置的隐藏对象:document代表整个H原创 2020-12-19 15:03:43 · 1411 阅读 · 1 评论 -
JS什么是回调函数
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 这种注册事件的方式就是第一种方式:在标签中使用“事件句柄”,在事件句柄后面编写JS代码 当这个事件句柄对应的事件发生之后,“注册”在事件句柄当中的这个代码被监听器调用。 onclick鼠标单击事件句柄,只有当鼠标单击事件发生之后,注册在onclick后原创 2020-12-19 14:48:49 · 365 阅读 · 1 评论 -
JS中常用事件测试
<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #md{ background-color: blue; width: 300px; height: 200px; } </style> </head> <body onload="co原创 2020-12-19 14:36:43 · 171 阅读 · 1 评论 -
null,NaN,undefined的区别。“==”和“===”的区别
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> /* 1、"=="和"==="的区别 “==”等同运算符,只比较值是否相等 “===”全等运算符,既比较值,也比较数据类型是否相等 null属于原始数据类型,typeo原创 2020-12-18 19:23:52 · 780 阅读 · 1 评论 -
object类型prototype动态扩展属性和方法
object类型 1、在JS中内置了一个类型objec,可以将object看作所有对象的超类和基类 2、在JS中默认定义的类型,没有特殊的说明的话,默认继承object 3、object类型中的通用属性和方法 属性 prototype属性和constructor属性 方法 toLocaleString和toString和value prototype可以动态的给对象扩展属性和方法<html> <head> <meta charset原创 2020-12-18 19:04:25 · 607 阅读 · 0 评论 -
JS定义一个类
在JS中定义类的方式有两种 第一种 function 类名(形式参数列表){ this.属性名=参数; this.方法名=function(){ } } 第二种 类名= function(形式参数列表){ this.属性名=参数; this.方法名=function(形式参数列表){ } }<html> <head> <meta charset="utf-8"> <ti原创 2020-12-18 19:03:05 · 4703 阅读 · 1 评论 -
JS中String的常用属性和方法
string类型 属于原始类型(基本数据类型) 如何定义字符串 1、var s =“字符串”(这样属于基本数据类型) 2、var s = new String(“字符串”)(这样属于object类型) 在js中不管是原始类型的字符串,还是object类型的字符串,他们的类和方法都是通用的 常用的属性和方法 常用属性 length,获取字符串长度 常用方法 charAt 获取指定的下标位置的字符 concat 连接字..原创 2020-12-18 17:38:32 · 211 阅读 · 1 评论 -
JS数据类型
<script type="text/javascript"> function sum(x,y){ if(typeof x="number" && typeof y="number"){ return a+b; } //程序执行到这说明x和y不都是数字 alert("请输入数字") } </script> <input type="button"...原创 2020-12-17 22:03:23 · 59 阅读 · 0 评论 -
关于JS中的全局变量的小知识
<!-- 局部变量 在函数体中声明的变量,叫做局部变量 局部变量在函数被调用的时候分配空间,函数执行结束之后,内存释放 --> <!--js遵循就近原则 变量声明了没有手动赋值,系统默认赋值undefined 变量没有声明直接访问,会报错 如果声明的时候没有用var关键字,则这个变量不管在哪里声明,都是全局变量,这个 变量必须手动赋值,不能采用系统默认值。 在js中的函数是不能重载的,也不存在重载机制 如果出现同名函数之..原创 2020-12-17 21:42:22 · 232 阅读 · 0 评论 -
JS函数定义及规范
js中的函数 语法格式 第一种 function 函数名(形式参数列表){ 函数体 } 返回值类型不需要指定,可以返回任何类型的数据 函数必须调用才会执行 script的标签中,网页打开的时候遵循自上而下的原则 在js中的函数是不能重载的,也不存在重载机制 如果出现同名函数之前的函数消失 第二种 函数名=function(a,b){ 函数体; } 函数必须手动调才会执行 在js中函数声明的优先级比较高,打开网页的..原创 2020-12-17 21:40:15 · 1038 阅读 · 0 评论 -
JS定义变量的方式
声明 var 变量名; var i; 定义 变量名= 值; i=100; 一行上可以定义多个变量吗 var a, b,c=300; 定义三个变量 a b c,并且c赋值300,其中a和b没用赋值,系统默认赋值undefined undefinedd在js中是一个具体的值。 重点 js语言是一种弱语言,没有编译阶段,直到浏览器打开解释执行 在js中声明的时候不需要指定变量的数据类型。程序在运行的过程中,赋什么值,变量就是什么类型..原创 2020-12-17 21:36:13 · 380 阅读 · 0 评论 -
HTML嵌入JS的三种方式
第一种句柄事件 onclick怎么使用js代码弹窗 在js中有一个内置的BOM对象,可以直接使用,全部小写:window window对象有一个函数 alert,这个函数专门用来弹出对话框 js中的字符串可以使用双引号也可以使用单引号 可以使用分号结尾也可以不用<body> <input type="button" value="hello1" onclick="window.alert('hello world')"/> </bo原创 2020-12-17 21:33:38 · 2313 阅读 · 0 评论 -
cursor鼠标光标设置
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #baidu{ cursor: pointer; } </style> </head> <body> <div id="div1"> <原创 2020-12-16 20:16:50 · 388 阅读 · 0 评论 -
通过样式对div的定位
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #div1{ /* */ background-color: red; border: solid 1px black; width: 200px; height: 200p原创 2020-12-16 20:15:22 · 109 阅读 · 0 评论 -
图片浮动效果
<!DOCTYPE html><html> <!-- 文字环绕图片效果 --> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img{ /* 图片浮动的位置 */ float: left; } </style> </head> <body原创 2020-12-16 20:14:05 · 935 阅读 · 0 评论 -
通过内外补丁对div进行定位
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <!-- 通过内外补丁进行div的定位 --> <style type="text/css"> #mydiv{ width: 300px; height: 300px; background-color: aliceblue; border: solid 1px blue;原创 2020-12-16 20:12:58 · 88 阅读 · 0 评论 -
hover鼠标的悬停效果
设置鼠标的悬停效果!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* hover专门设置标悬停效果 */ span:hover{ color: aliceblue; font-size: 20px; } </style> <原创 2020-12-16 20:11:29 · 11203 阅读 · 0 评论 -
html嵌入css的三种方式
1、什么是css 叠层样式表语言 css是html的化妆品 css嵌入的三种方式 第一种:内联定义 语法格式 <标签 style="样式名:样式值;样式名:样式值;"></标签> 任何一个html标签都可以指定style属性 第二种:定义内部块样式对象 <style type="text/css" > css的选择器包括: 1、标签选择器 2、id选择器 3、class选择器 语法格式 选择器{ 样原创 2020-12-16 17:13:15 · 230 阅读 · 0 评论 -
table,div,span,id的用处
1、div和span都是图层 2、table表格的缺点:不灵活,div和span布局更加的灵活 3、每一个div和span左上角的顶点都有x和y轴,可以通过xy轴定位图层在网页中的位置 4、现代化的网页多数采用的是div和span布局 5、div和span的区别 div默认情况下占用一行 span不独自占一行HTML中的id属性1、在HTML的任何一个节点上都有id属性2、在同一个网页中id属性是不能重复的3、id代表这个节点4、可以通过javascript对节点的增删.原创 2020-12-12 19:51:27 · 443 阅读 · 0 评论 -
file控件、隐藏域、readonly和disable
file控件 <form action="http://www.baidu.com" > <!-- 文件选择按钮 --> 文件:<input type="file" /> <br> <!-- 上传按钮 --> <input type="submit" value="上传文件"/> </form>隐藏域,不希望用户看到的内容,但是希望这个数据将这个数据提交过去 -hidden 隐藏原创 2020-12-12 19:29:29 · 560 阅读 · 0 评论 -
表单、超链接的用法
1、什么是表单有什么用?发送请求,并且携带数据给服务器。表单和超链接有什么共同的特征,就是都可以向服务器发送请求只不过超链接是用户直接点击发送的请求,不能填写数据。而用户点击表单提交的时候,不但可以发送请求,而且请求中还可以携带数据。表单最主要的作用是:收集用户信息表单对应的单词是:form2、怎么定义一个表单对象表单项1:表单项2:一个网页上可以有多个表单对象3、form标签中的action属性,这属性和href相同,需要填写url。submit 提交表单的按钮。所有能提交表原创 2020-12-12 18:13:19 · 1768 阅读 · 1 评论 -
认识HTML属性标签
<!DOCTYPE html><!--根--><html lang="en"><!--头--> <head> <meta charset="UTF-8"> <title>标签</title> </head><!--网页体--><body><!-- 空格--><!--<原创 2020-12-11 17:58:20 · 73 阅读 · 0 评论