所有的笔记都在代码里
第二版笔记:[JS验证码刷新]
实现验证码的局部刷新
<form method="post" name="login" action="">
验 证 码：<input type="text" name="code" class="text code" /> <img src="code.php" id="code" />
</form>
方法一：使用JavaScrip的伪类实现
<img src="code.php" id="code" onclick="javascript:this.src='code.php?tm='+Math.random()" />
方法二：引入外部文件
在html文件的<head></head>之间引入外部文件
<script type="text/javascript" src="js/code.js"></script>
//外部文件code.js设置局部刷新函数
function code () {
var code = document.getElementByIdx_x_x('code');
code.onclick = function () {
this.src='code.php?tm='+Math.random();
};
};
另外，如果是想在验证码旁边加上一内容，然后点击该内容验证码刷新的话，可以用下列方法
<form method="post" name="login" action="">
验 证 码：<input type="text" name="code" class="text code" /> <img src="code.php" id="code" />
<span id="update">点击刷新验证码</span>
</form>
方法一：使用JavaScrip的伪类实现
<img src="code.php" id="code"/><span id="update" onclick="javascript:code.src='code.php?tm='+Math.random()"></span>
方法二：引入外部文件
在html文件的<head></head>之间引入外部文件
<script type="text/javascript" src="js/code.js"></script>
//外部文件code.js设置局部刷新函数
function code () {
var code = document.getElementByIdx_x_x('code');
var update = document.getElementByIdx_x_x('update');
update.onclick = function () {
code.src='code.php?tm='+Math.random();
};
};
第一版笔记:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//document.write("我的文件")
//window.alert("我是警告框");
//向控制天打印
//console.info("我向控制天打印东西了!")
/**
* js的函数里边都是全局变量,通用的.
*
* js代码,没有中断功能的代码加载,会继续执行其他代码,就像是alert()
* 存在中断功能,下边的代码就不会执行.
*/
//定义的变量在函数里面,作用域是函数里面
var b = 100;
function fun(){
a = 3;
b = 3;
}
//fun();
//alert(a)
//alert(b);
//infinity最大值
//alert(4/0)
//字符串切换+""或者-0
/* alert(3+4+5)
alert(3+4+"5")
alert("3"+4+5)
alert(5-"3"+4)
alert(5-"3"-4)
alert("5"+trur)
alert()
alert()
alert( )*/
/*******/
/**
* ==,比较的是结果
* ===, 比较的是结果和类型
*/
//
//js出入多个参数,所有传入的实参都是默认保存在arguments数组中
//定义函数
function add(a,b){
return a+b;
}
//隐式声明变量
var a = function add1(a){
return a;
}
//alert(a(100));
//打印的是function代码,代码间的赋值
var a1 =a;
//alert(a1)
//直接调用隐式的函数没有任何显示
//alert(add1("大家好"))
var re =add(3,4);
//typeof判断类型,默认值NAN(非数)
//alert(typeof re);
//alert(typeof add("a","b"));
//document.write("大家好")
function a02(){
for(var k = 0; k < arguments.length; k++){
// document.write(arguments[k]);
// document.write("<h2>大家好</h2>");
//alert(arguments[k])
}
}
a02(1,2,3);
//创建对象语法:var 对象 = {属性名:属性值,属性名:属性值,...}
var stu = {id:1,name:"李锦涛",sex:"man"};
//添加属性
stu.age = 22;
stu.birthday = new Date();
//访问属性
//alert(stu.name);
//alert(stu["name"]);
//给对象中的属性添加方法
stu.setName = function(name){
// return stu.name;
return this.name=name;
}
stu.getName = function(){
return this.name;
}
//alert(stu["getName"]());
// alert(stu.getName())
//后面不加()就是调用所赋的值
//alert(stu["getName"]);
//判断的属性是方法
//alert(typeof stu.getName);
//遍历对象的属性和值,不能pro."id"
stu.setName("李锦涛");
for(pro in stu){
//判断属性和方法
// alert(typeof stu[pro]);
if(typeof stu[pro] == "function"){
// alert(pro+":"+stu[pro]()+"我是方法")
}else {
// alert(pro+":"+stu[pro]+"我是属性")
}
}
//js的数组,取的时候用角标取
var arr = [1,true,"hehe",new Date(),{id:1,name:"li"},function(){return "123";},[1,2,3]];
for(var i = 0;i<arr.length;i++){
document.writeln(arr[i]);
}
var arr1 = [10,1,8,4];
//默认按照字符串排序
// arr1.sort();
// 自定义排序规则
arr1.sort(function(a,b){return a-b;});
for(var i = 0; i<arr1.length; i++){
document.writeln(arr1[i])
}
//常用的js命令:
//1,刷新当前页面
//window.location.reload();
//2,
</script>
</head>
<body>
</body>
</html>
第二版笔记:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div01{
width: 200px;
height: 200px;
border: solid 1px orange;
}
#font01{
color: red;
background: blue;
}
.className{
font-size: 50px;
}
</style>
<script type="text/javascript">
/* JS有7种数据类型: 三种基本类型(数字,字符,boolean),两种引用数据类型(对象,数组),两种特殊类型(undefined,null).
JS有6种原始类型:数字,字符,boolean,undefined,null,symbol(符号类型)
1,undefined,默认值:undefined.(没有赋初始值)
2,object,默认值:null.
3,类型转换或者程序执行得不到结果就会返回NaN
4,number, Infinity(无穷大,前边加-就是负无穷)
JS是弱语言,
*/
function add(){
document.write("<form>姓名:<input id='d5'name='name' value='123' οnblur='remove()'/><font id='d8' color='red'>*</font><br/>年龄:<input id='d6'name='age'/><br/>email:<input id='d7'name='email'/><br/><input type='submit'value='登录'/></form>");
}
add();
var a = document.getElementById("d5");
//监视input框,失去焦点检测是否有内容,有移除属性.
function remove(){
if(a.value != ""){
if(document.getElementById("d8")){
document.getElementById("d8").remove();
//alert("mei")
}
}else{
}
}
/**
* 内部事件会扩散到外边,event.cancelBubble 会取消事务的扩散
*/
function fun01(){
alert("外")
}
function fun02(event){
alert("外")
event.cancelBubble = true;
}
/* 改变便签的默认行为 */
/* 1, SAX解析(Simple API for XML)逐行扫描文档,一遍扫描解析.相比于DOM,SAX可以再解析文档的任意 时刻停止解析,是一种速度快,效率高的方法
优点: 解析可以立即开始,速度快,没有内存压力
缺点: 不能对节点做修改
适用: 读取XML文件
*/
/* 2, DOM,将所有的标签进行存储,将每一个标签对象分装成对象,有可能是标签节点对象,或者是文本节点对象,解析方式:DOM解析器在解析XML文档时,会把这个文档中的所有元素,按照其出现的层次关系,解析成一个个Node对象(节点)
优点: 把XML文件在内存中构建属性界都,可以遍历和修改节点.
缺点:如果文件比较大,内存有压力,解析的时间会比较长.
使用: 修改XML数据*/
/* 3, DOM4J比DOM更大更灵活.性能比较,sun公司的jaxm也在用DOM4J.目前许多开源项目中大量使用DOM4J, Hibernate也是用是用DOM4J来读取XML配置文件.
优点: 灵活性高,易用性和功能性强大,性能优异
缺点: 复杂的API,移植性差.
*/
/* 4, JDOM,是处理xml的纯java API.使用具体类而不是接口,JDOM具有树的遍历,又有SAX的java规则,JDOM与DOM主要有两个方面的不同,首先,JDOM仅使用具体类而不使用接口,这在某些方面简化了API,但是也限制了灵活性.第二,API大量使用了Collectin类,简化了哪些已经熟悉这些类的java开发者的使用.
JDOM自身不包含解析器。它通常使用SAX2解析器来解析和验证输入XML文档（尽管它还可以将以前构造的DOM表示作为输入）。它包含一些转换器以将JDOM表示输出成SAX2事件流、DOM模型或XML文本文档。JDOM是在Apache许可证变体下发布的开放源码。[不是太理解这段话]
优点: 1,是基于树的处理xml的java API把树加载到内存中.
2,没有向下兼容的限制,所以比DOM简单
3,速度快
4,具有SAX的java规则
缺点: 1,不能处理大于内存的文档.
2,JDOM表示XML文档逻辑模型,不能保证每个字节真正变换.
3,针对实例文档不提供DTD与模式的任何实际模型
4,不支持与DOM中相应的遍历包
*/
function dian(){
//获取id
var tag = document.getElementById("he");
//获取标签的内容
//alert(tag.innerHTML);
//tag.innerHTML("就不弹你怎么了!");//??
}
/* 获取当前文档中的:id值,name,class值,标签 */
function fun03(){
var a = document.getElementById("age");
a.value = a.value-0+1;
//加判断达到多少弹窗
}
function fun04(){
//获取所有的h1标签,是一个数组
var a = document.getElementsByTagName("h1");
var b = document.getElementsByName("age");
//获取所有的复选框
var c = document.getElementsByName("checkbox");
c[1].checked = true;
}
/* 更改样式,可以引用css中的样式,获取的标签.ClassName(定义的样式名) css中: .样式名{ ... } */
/* window.confirm("确认删除!"),返回的是boolean值,和alert()一样是弹出对话框,不一样的是alert只是提示 */
/* JS的事件机制:
1,单机事件: onclick.
2,双击事件: ondbclick.
3,鼠标移动事件:
1,鼠标悬停事件:onmouseover[在鼠标在HTML元素之上时触发]
2,鼠标移动事件:onmouseout[鼠标移出某个元素触发]
4,键盘事件:
1,键盘按下事件:onkeydown
2,键盘弹起事件:onkeyup
5,焦点事件:
1,获取焦点:onfocus
2,失去焦点:onblur
6,值改变事件:
1,专门给select标签使用:
onchange事件 当下拉框的值改变触发
7,页面加载事件:
1,专门给body标签使用
onload 当页面加载成功后触发
*/
/* 自定义类的作用,直接可以将提交的数据作为对象进行传输.
----->提交数据的时候建议用对象传入后台.
*/
/* JS中的常用对象
1,String对象,操作字符
2,Date对象
3,Math对象
4,Global对象
*/
//String对象
function testString(){
//创建字符对象
var str = "fasegasd";
//1,大小写转换
// alert(str.toUpperCase());
//alert(str.toLowerCase())
//2,首字母转大写,先字符串截取
//1,返回一个从指定位置开始的指定长度的字符串
// alert(str.substr(2,6))
//2,返回一个从指定位置到指定位置的字符串
// alert(str.substring(2,6))
//首字母大写
// alert(str.substr(0,1).toUpperCase()+str.substring(1,str.length));
//3,查找字符位置
//1,indexOf 返回指定字符第一次出现的位置
//lastOf 返回指定字符最后一次出现的位置
}
testString();
//Date对象,JS获取的时间是客户端的
function testDate(){
var date = new Date();
//alert(date)
//获取年份数,返回1900年距离今天的年份数
// alert(date.getYear())
//获取当前的年
// alert(date.getFullYear());
// alert(date.getMonth());
// alert(date.getDate());
//alert(date.getHours())
// alert(date.getMinutes())
// alert(date.getSeconds())
//获取星期数
//alert(date.getDay())
}
//Math对象
function testMath(){
//alert(Math.random());
//round四舍五入
//ceil()向上取舍
//floor向下取舍
}
//Global对象,将字符串解析成js代码执行
function testGlobal(){
eval("var a = 123;")
//alert(a);
//isNaN判断是数字返回false,"纯数字"也会返回false
//alert(isNaN(a))
//以整数开头的数字取出来,
//parseInt();用法差不多的parseFloat()
}
testGlobal();
testMath();
testDate();
/* BOM浏览器模型是一种协议规范,规范了浏览器对JS这门语言的支持,协议的具体实现就是windons对象. */
/* --window对象的常用属性和方法-- */
//1, 框体方法学习
function testAlert(){
//提示警告信息,
// alert("我是警告框")
//返回的是true和false
//confirm("我是确认框!")
//提示框,没有值:确认返回什么都不显示,取消返回null
var str = prompt("请输入昵称:");
alert(str)
}
//2, 定时器
var id;
var ids;
function testSetTimeOut(){
//1, 定时执行
// id = window.setTimeout(function(){
// alert("定时刷新....")
// },3000);
//2, 间隔执行,连续的
// ids = window.setInterval(function(){
// alert("我是间隔执行")
// },3000);
//3,停止当前定时方法
}
//通过定时器的id进行获取具体的定时器进行清除定时器.
//停止当前定时方法
function testClearTimeOut(){
// window.clearTimeout(id)
}
//停止间隔定时的方法
function testClearInterval1(){
// window.clearInterval(ids)
}
testSetTimeOut();
/* 3,子窗口方法和子页面调用父页面的函数 */
//子页面方法
function testOpen(){
//打开空白页面
window.open();
//新开一个小窗口,也已用来做登录
window.open('作业02.html', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
}
/* 1.1.1 倒计时功能,点击打开子页面,开始计时,时间到小窗口关闭 */
function testTime(){
window.setInterval(function(){
var span = document.getElementById("timeSpan");
//倒计时
span.innerHTML = span.innerHTML-1;
//时间到后执行事件,自己设置
if(span.innerHTML == 0){
// testOpen()
}
},1000);
}
/* 1,1.2 子框调用父页面的函数 */
function testAlerts(){
alert("我被子框调用了");
}
/* 1.2.1 地址栏属性 */
function testLocation(){
//1, 当前页面跳转新的资源,相对路径和绝对路径都可以
window.location.href = "http://www.baidu.com";
//2, 重新加载资源
window.location.reload();
//3, 历史记录属性,前进和后退,
window.history.forward();
window.history.back();
//以当前位置为基准,前进和后退,负数就是后退,0相当于刷新
window.history.go(-3);
//4,获取当前浏览器的屏幕占比
window.screen.width;
window.screen.height;
//5, 浏览器配置信息
window.navigator.userAgent;
}
/* 2.1.1 概念: 1,document对象就浏览器对JS语言操作HTML文档的对象,document封存了当前浏览器的HTML文档的信息,HTML是一种树形结构,document对象是属于window对象一部分.
2,JS修改的是加载到浏览器中的HTML的数据*/
/* 2.2.1 获取HTML对象 */
function testGetEleById(){
//直接获取
//id获取对象,返回:[object HTMLInputElement]
var toid = document.getElementById("toid");
//name获取的是数组,[object NodeList]
var toname = document.getElementsByName("toname");
//获取标签的对象,是数组,返回:[object HTMLCollection]
var input = document.getElementsByTagName("input");
//class获取对象,返回:[object HTMLCollection]
var common = document.getElementsByClassName("common")
//间接的获取方式:
// [通过直接获取,获取单个标签,再通过间接获取];,获取的是标签体
//获取父节点,返回:[object HTMLBodyElement]
var toidpn = toid.parentNode;
//获取子节点,返回:[object NodeList]
var toidcn = toid.childNodes;
//获取第一个孩子节点,返回null,对象
var toidfc = toid.firstChild;
//获取最后一个孩子节点,返回:对象
var toidlc = toid.lastChild;
//获取下一个标签, 返回:[object Text]
var toidns = toid.nextSibling;
//获取上一个对象,返回:[object Text]
var toidps = toid.previousSibling;
/* 获取元素的属性&给属性赋值 */
//1, 可以动态的获取input框中的value值
//2, 获取class比较特殊
//3, 同样也可以修改属性值或者添加属性
//4, 一般是给属性添加事件
//添加自定义属性,直接同"."就可以了,获取的话用getAttribute,否则找不到.
toid.setAttribute("abc","666")
document.write(toid.class="123");
document.write(toid.aaa="555");
document.write(toid.name+":"+toid.className+":"+toid.type+":"+toid.id+":"+toid.onclick+":"+toid.getAttribute("abc")+":"+toid.class+":"+toid.aaa)
}
/* 3.1.1 操作元素和样式,必须是HTML加载完毕才可以获取[注意] */
function testElementStyle(){
var div01 = document.getElementById("div01");
//1, 获取当前div中的标签和内容
alert(div01.innerHTML);
//2, 值获取文本
alert(div01.innerText);
}
function testadd(){
//获取div里边的元素
var a = document.getElementById("div01");
//在里面的标签后边添加元素
alert(a.innerHTML)
// a.innerHTML = a.innerHTML+"<h1>怎么了!</h1>";
}
/* 3.1.2 修改样式,通过修改属性值来修改文本样式,标签样式,便签样式的显示就近原则. */
function teststyle(){
var a = document.getElementById("font01");
//1, css里,标签里的都可以有修改,如果两个同时存在,可以修改,但是取消样式就不可用,首先显示便签的样式,如果用js取消样式会显示style标签中的样式.
a.style.color = "";
//2, 通过标签找到class,然后通过class找到style标签中的class标签选择器,进行样式的修改.
a.className="";//只不过是修改了class的名字,让css没有检索到而已.可以通过选用其他的类选择器进行样式的转换
}
/* 4.1.1 JS操作元素的文档结构,1,增加节点;2,删除节点. */
function testADD(){
//文件上传,增加节点的时候就不需要id了,因为复制出来的都是重复的
var showid = document.getElementById("showid");
showid.innerHTML = showid.innerHTML+"<div id='waidiv'><input type='file' value='继续上传'><input type='button' value='删除' onclick = 'testRemove(this)' /></div>"
}
function testRemove(btn){
var waidiv = document.getElementById("showid");
//获取父节点
var a = btn.parentNode;
//删除子节点.用父标签删除子标签
waidiv.removeChild(a);
}
//删除所有的div
function testRemoveAll(){
var waidiv = document.getElementById("showid");
waidiv.innerHTML = "";
}
//4.1.2 创建div,input,button,br,进行嵌套,创建元素,删除元素
function testOper1(){
//获取元素对象
var showdiv = document.getElementById("showid");
//创建input元素
var input = document.createElement("input");
//设置属性
input.type = "file";
var button = document.createElement("input");
button.type = "button";
button.value = "删除";
//删除就是,只删除子元素就可以了
button.onclick = function(){
showdiv.removeChild(input);
showdiv.removeChild(button);
showdiv.removeChild(br);
}
//创建换行符
var br = document.createElement("br");
///将创建的元素对象存放到div中.
showdiv.appendChild(input);
showdiv.appendChild(button);
showdiv.appendChild(br);
}
/* 5.1.1 JS对form表单的操作 */
function testFrom(){
var fm = document.getElementById("fm");
// alert(fm)
//使用form表单的name属性值进行获取
var frm = document.frm;
//两个用法一抹一样
// alert(frm === fm)
/* 1,表单中有多个元素的时候,用Element直接获取表单元素 */
// alert(frm.elements.length);
//2, 通过JS做表单提交
//frm.submit();
//3, 重置按钮
// fm.reset();
//4,动态的改变数据的提交路径
fm.action="http://www.baidu.com";
}
/* 5.2.1 多选框,[加功能:检测多选框汇总是否为全部选中,按钮变为全不选,部分选中按钮变为反选,全不选中按钮变为全选] */
function testCheckBox(){
//获取所有多选checkbox多选框集合
var check = document.getElementsByName("check1");
for(var i = 0; i<check.length;i++){
//全选,全不选,反选
if(check[i].checked){
check[i].checked = false;
}else{
check[i].checked = true;
}
}
}
/* 5.3.1 下拉列表框 */
function testAddress(){
var address = document.getElementById("address");
//1, onchange事件获取值
// alert(address.value);
var ads = address.options;
for(var i = 0; i<ads.length;i++){
//判断当前选择的框
if(ads[i].selected){
alert(ads[i].value+ads[i].text)
}
}
}
</script>
</head>
<!-- 知识补充:NodeList和Conllection的区别,两个都一样,粗通的厂商最初的规范不同,最后为了,整合,两个都是用哪个,没有区别,底层都是用数组进行存储的 -->
<!-- 1.1页面加载完成开始出发事件 -->
<!-- <body οnlοad="testTime()"> -->
<body>
<hr >
<h4>5.3.1</h4>
<select name="" id="address" onchange="testAddress()">
<option value="0">--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
<hr >
<h4>5.2.1</h4>
<input type="checkbox" name="check1">青花瓷<br />
<input type="checkbox" name="check1">日不落<br />
<input type="checkbox" name="check1">黄昏<br />
<input type="checkbox" name="check1">郎朗晴空<br />
<input type="checkbox" name="check1">犯错<br />
<input type="button" value="全选,反选,全不选" onclick="testCheckBox();">
<h4>5.1.1</h4>
<input type="button" value="测试操作form" onclick="testFrom();">
<form action="#" method="get" id="fm" name="frm">
姓名:<input type="text" name="name" value="我是只读" readonly="false"/><br />
年龄:<input type="password" name="pwd" /><br />
<input type="submit" value="提交" />
</form>
<hr >
<b>4.1.1</b>
<input type="button" value="创建元素的方式添加元素" onclick="testOper1();" name="">
<input type="button" value="删除所有的" onclick="testRemoveAll();" name="">
<input type="button" value="添加上传" onclick="testADD();" name="">
<div id="showid">
<input type="file" value="继续上传"><input type="button" value="删除" />
</div>
<<hr >
<button onclick="teststyle()">点击我修改样式</button>
<fon class = "className" id="font01" style="color: blue; background: red;">来修改我的样式吧!</fon>
<hr />
<a id="testadd" onclick="testadd()">点击我追加标签</a>
<a onclick="testElementStyle()">点击我获取div中的信息</a>
<div id="div01">
<b>大家好我叫李锦涛</b>
<b>大家好我叫李锦涛</b>
</div>
<hr />
<h4>2.2.1</h4>
<div id="showdiv">
<input class="common" id="showdivid01" type="button" name="toname" value="id获取对象" onclick="testGetEleById();" />
<input class="common" type="button" id="showdivid01" name="toname" value="name获取对象" onclick="testGetEleById();" />
</div>
<hr />
<h4>2.2.1</h4>
<input class="common" type="button" name="toname" value="id获取对象" onclick="testGetEleById();" />
<input class="common" type="button" id="toid" name="toname" value="name获取对象" onclick="testGetEleById();" abc= "000" />
<hr />
<b>1.1 这是我的计时器,时间到准备跳转,开始倒计时<span id="timeSpan" style="color: red;font-size: 60px;">5</span></b>
<hr />
<input type="button" name="a01" value="子页面" onclick="testOpen();" />
<input type="button" name="a01" value="停止间隔定时的方法" onclick="testClearInterval1();" />
<input type="button" name="a01" value="停止当前定时方法" onclick="testClearTimeOut();" />
<input type="button" name="a01" value="测试框体" onclick="testAlert();" />
<form>
名字:<input type="text" name="name" class = "aa" /><br />
年龄:<input type="text" name="age" class = "aa" /><br />
<input type="submit" value="登录" />
</form>
1:<input type="checkbox" name="checkbox" />
2:<input type="checkbox" name="checkbox" />
3:<input type="checkbox" name="checkbox" />
<input type="button" onclick="fun04()" value="点我选" />
<!-- 点击按钮数字增加 -->
<input type="text" name="age" id="age" />
<input type="button" value="增加" onclick="fun03()" />
<h1 id="he">有种弹我啊</h1>
<input type="button" value="点我啊" onclick="dian()" />
<!-- 用js该改变标签的默认行为,true跳转,场景:可以用在分页中 -->
<h1><a href="http://www.baidu.com" onclick="return true">百度</a></h1>
<!-- 中断表单提交, 可以再提交按钮中断,可以再表单上中断 -->
<form method="post" action="http://www.baidu.com" >
<input type="text" value="1243"/>
<input type="submit" value="提交" onclick="return false"/>
</form>
<div id="d1" style="height: 300px; width: 300px; background-color: red;" onclick="fun01()"><div id="d2" style="height: 100px; width: 100px; background-color: green; " onclick="fun02(event)"></div><button id="d3">放大</button><button id="d4">缩小</button></div>
<!-- 表单中后边加一个红色的 -->
</body>
</html>
401
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
