js的声明学习:
1.在head标签中使用script标签进行js代码域的声明
--------------------------------------------------------------------------------
<script type="text/javascript">
alert("这是我的第一个JS")
</script>
--------------------------------------------------------------------------------
作用:
声明js代码域
特点:
js的代码只会作用于当前网页
2.在head标签中使用script标签引入外部声明好的js文件
<script type="text/javascript(相对路径)" src="js/my.js" charset="UTF-8" </script>
作用:引入外部声明好的js文件
特点:实现js代码的重复使用,避免代码的冗余。
注意:
因为js在HTML文档中是一门独立的语言,可以声音在文档中的任意位置
一般情况下声明在head标签中。
js的变量学习:
1.js中的所有变量声明只有用var关键字。
var a=123;
var A=1234;
var a1=3.1415926;
var a2="js";
var a3='k';
var a4=true;
var a5=new Date();
注意:
1.js的变量名是严格区分大小写的
2.js中的字符串可以使用双引号也可以使用单引号
3.js中可以声明同名变量,不会报错,后面的会将前面的声明覆盖。(重要)
var a=123;
var a="js的学习";
alert(a);
2.js中的数据类型:
数据类型判断关键字:typeof
数据类型:
number:数字类型;
String:字符串类型
boolean:
object;对象类型
null:
空对象赋值,主要是和undefined进行区分
undefined;变量声明不赋值的情况下,默认值是undefined。
注意:
var d;
alert(d);
alert(typeof c);
在js中尽量的给声明的变量赋初始值;
js的运算符学习:
js中的特殊关系运算符:
等值运算符==
先判断类型,类型一致,则直接比较。
类型不一致,则先使用Number()进行强转后在进行比较。
等同运算符:===
先判断类型,类型一致则在比较内容,内容一致则返回true,内容不一致则返回false。
类型不一致直接返回false
注意:
null和undefined在做==判断时候返回true
js的数组学习:
1.数组的声明
var arr=new Array();//声明一个空数组对象
var arr=new Array(length);//声明一个指定长度的数组
var arr=[元素];//声明数组(最常用);
注意:js中的数组声明不用指定长度,JS的数组长度是不固定的,会随着元素的数量改变而改变
2.数组的赋值和取值
数组可以的存储任意类型的数据
数组名[角标]=值;//角标可以是任意的正整数或者是0
数组的取出
数组名[角标];//返回当前角标对应存储的值
如果角标不存在返回undefined;
3.数组的length属性
作用1:数组名.length//返回当前数组的长度。
作用2:数组名.length=新值//动态的改变数组的长度
注意:
length>原有长度,则使用空进行填充
length<原有长度,则从后面进行截取,最后的数据会被删除
4.数组的遍历
普通for循环遍历
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}
for---in:
for(var i in arr){
alert(i);//获取的是角标
}
5.数组的常用操作
1.数组的合并:arr.concat(b,c);
2.数组指定间隔符转换字符串: var b=arr.join("-");
3.数组移除最后一个元素并返回:var ele=arr.pop();
4.数组的追加,返回新的长度:var ln=arr.push("lol");//追加的元素可以是一个数组,但是会作为一个角标存在。
5.数组移除第一个元素:var ele=arr.shift();
6.数组在开始位置插入指定元素:var a=arr.unshift("又是周五啦");
7.数组删除指定位置的元素,并可以在后面添加新的元素:var arr1=arr.splice(1,3,"a");
js的函数学习:
作用:功能代码块的封装。减少代码的冗余。
1.函数的声明:
方式一:function 函数名("形参1:","形参2",.....){函数体};
方式二:var 函数名=new Function("形参1","形参2"....."函数执行体");
注意:此声明表明在JS中函数是作为对象存在的
方式三:var 变量名=function(形参名1,形参名2,...........){函数执行体}
2.函数的参数
JS中得函数在调用时,形参可以不赋值,不会报错
JS中的函数在调用时,形参赋值可以不全部赋值,不会报错,但实参会依次进行赋值。
3.函数的返回值
在JS中如果函数有返回值则直接返回,没有返回值默认返回undefined
4.函数的执行符
在JS中函数的执行符值()
没有小括号则函数名其实就是一个变量
加上小括号则函数会被执行
5.函数作为实参传递
在JS中函数是可以作为实参进行传递的
function testobj(a){
alert(a());
}
var testParam=function(){
alert("我是函数参数");
}
testobj(testParam());
注意:
JS的代码声明区域和执行区域是一起的,都是在JS代码中的代码域中
js中的类学习:
1.类的声明
function 类名(形参1,形参2..........){
this.属性名1=形参1;
this.属性名2=形参2;
......
this.属性名=函数对象
}
代码实例:
--------------------------------------------------------------------------------
function Person(name,age){
this.name=name;
this.age=age;
this.test=function(a){
return a;
}
}
--------------------------------------------------------------------------------
2.类的使用
var 对象名=new 类名(实参1,实参2.........);
例如:var p1=new Person("张三",32);
3.类的“继承”:prototype关键字
通过prototype实现了不同对象之间的数据共享。
作用1:实现了某个类的所有字对象的方法区对象的共享,节省内存。
4.js创建自定义对象
对象的作用:用来存储整体的数据
原因:很多时候我们没有办法预先知道一个对象应该有哪些属性,所以只能临时的创建一个对象来自定义属性存储数据。来保证数据的完整性。
应用:
Ajax中会使用
使用:
1.创建自定义对象
var 对象名=new Object();
对象名.属性名1=属性值1;
对象名.属性名2=属性值2;
对象名.属性名3=属性值3;
...........
var 对象名={};
对象名.属性名1=属性值1;
对象名.属性名2=属性值2;
对象名.属性名3=属性值3;
..........
2.一般用来存储数据,不会再定义对象中存储函数对象。
3.JS中的对象属性和内容是可以自定义的扩充的,不是依赖类的声明的,类只是对象公共部分的一种声明,是为了节省代码的冗余的。
js中常用的方法和对象学习:
String对象;
Data对象;
使用:var 变量名=new Date();
getYear():返回1900年起算距今的年份数
getFullYear():返回当前的年份
getMonth();获取当前的月份数(注意:要+1);
getDate();返回当前的日期;
getDay();返回星期数,注意星期日返回0;
Math对象;
Math.函数名
random()
round()
ceil()
floor()
随机数字:
Math.floor(Math.random()*9000+1000) //产生一个四位数的随机数。
Globa对象;
eval();
isNaN();
parseInt();
parseFloat();
(使用时查看手册使用即可)
js中事件机制学习:
js中的事件机制1:
解释:当我们的行为动作满足了一定的条件后,会触发;某类事物的执行
作用:主要是结合js的函数来使用
内容:
1.单双击事件
单击:onclick
双击:ondblclick
2.鼠标事件
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
3.键盘事件
onkeydown 某个键盘的键被按下
onkeyup 某个键盘的键被松开
4.焦点事件
onfocus 获取焦点事件
onblur 失去焦点事件
5.页面加载事件
onload 当页面加载成功后触发
注意:
js中添加事件的第一种方式:
在Html上直接使用事件属性进行添加,属性值为所监听的执行函数。
js中的事件只有在当前HTML元素上有效
一个HTML中可以添加多个不同的事件
一个事件可以监听触发多个函数的执行,但是不同的函数要使用分号间隔
js中的事件机制2:
1.给合适的HTML标签添加合适的事件
onchange--------------select下拉框
onload-------------------body标签
单双击---------------------用户会进行点击动作的HTML元素
鼠标事件------------------用户会进行鼠标操作的元素
键盘事件------------------用户会进行键盘操作的HTML元素
2.给HTML元素添加多个事件时,注意事件之间的冲突。
例如:单双击事件
当事件的触发条件包含相同部分的时候,会产生事件之间的冲突
3.事件的阻断
当事件所监听的函数的将返回值返回给事件时:
false:则会阻断当前事假所在的HTML标签的功能
true:则继续执行当前事件所在的HTML标签的功能
(常用于提交表单时)
4.超链接调用JS函数
<a href="javascript:函数名()">调用JS函数</a>
Windows对象学习:
BOM浏览器对象模型:是规范浏览器对JS语言的支持(JS调用浏览器本身的功能)
BOM的具体实现是windows对象
windows对象使用学习:
1.windows对象不用new,直接进行使用即可,类似Math的使用方式,windows关键字可以省略不写。
2.框体方法
alert:警告框 提示一个警告信息,没有返回值
comfirm:确认框 提示用户选择一项操作(确认/取消)
点击确认返回true
点击取消返回false
prompt:提示框,提示用某个信息的录入或者说收集
点击确定,返回当前用户录入的数据,默认返回空字符串
点击取消,返回null
3.定时和间隔执行方法
setTimeout:指定的时间后执行指定的函数
参数1:函数对象
参数2:时间,单位毫秒
返回值:返回当前定时器的id
setInterval:每隔指定的时间执行指定的函数
参数1:函数对象
参数2:时间,单位毫秒
返回值:返回当前间隔器的id
clearTimeout:用来停止指定的定时器
参数:定时器的id
clearInterval:用来停止指定的间隔器
参数:间隔器的id
4.子窗口方法
windows.open("子页面的资源(相对路径)","打开方式","配置");
示例:
window.open("son.html","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400,left=300px,top=400px");
注意:
关闭子页面的方法Windows.close();但是此方法只能关闭open方法打开的子页面。
5.子页面调用父页面的函数
Window.opener.父页面的函数
JS的window对象的常用属性
地址栏属性:location
window.location.href="新的资源路径(相对路径/URL)"
window.location.reload() 重新加载页面资源
历史记录属性
window.history.forward() 页面资源前进,历史记录的前进
window.history.back() 页面资源后退,历史记录后退
window,history.go(index) 跳转到指定的历史记录资源
注意:window,history.go(0) 相当于刷新
屏幕属性
window.srceen.width;//获取屏幕的宽度分辨率
window.srceen.height;//获取屏幕的高度分辨率
浏览器配置属性
window.navigator.userAgent
主体面板属性(document)
document对象学习:
1.document对象的概念
浏览器对外提供的支持JS的用来操作HTML文档的一个对象,此对象封存的HTML文档的所有信息。
2.使用document
获取HTML元素对象
直接获取方式:
通过id document.getElementById("id名");
通过name属性值 document.getElementsByName("属性名");
通过标签名 document.getElementsByTagName("标签名");
通过class属性值 document.getElementsByClassName("class名");
间接获取方式:
父子关系
子父关系
兄弟关系
操作HTML元素对象的属性
获取元素对象
操作元素对象
获取:
元素对象名.属性名//返回当前属性的属性值----------------固有
元素对象名.getAtteribute("属性名");//返回自定义属性的值-------自定义
修改:
元素对象名.属性名=属性值--------------------------固有
元素对象名.setAtteribute("属性名");//修改自定义属性的值---------自定义
注意:
尽量的不要去修改元素的id值和name属性值。
使用自定义方法获取固有属性内容,value的值获取的是默认值,不能够获取到实时的用户数据
操作HTML元素对象的内容和样式
操作元素内容
获取
元素对象名.innerHTML//返回当前元素对象的所有内容,包括HTML标签
元素对象名.innerText//返回当前元素对象的文本内容,不包括HTML标签
修改
元素对象名.innerHTML="新的值"//会将原有的内容覆盖,并HTML标签解析
元素对象名.innerHTML=元素对象名.innerHTML+"新的值"//追加效果
元素对象名.innerText="新的值"//会将原有内容覆盖,但HTML标签不会被解析,会作为普通文本显示
操作元素样式
获取元素对象
通过style属性
元素对象名.style.样式名="样式值";//添加或修改
元素名象名.style.样式名=""//删除样式
注意:
以上操作,操作的是HTML的style属性声明中的样式。而不是其他CSS代码域中的样式。
通过className
元素对象名.className="新的值"//添加类选择器样式或者修改类选择器样式
元素对象名.className=""//删除类样式
操作HTML的文档结构
增加节点
删除节点
第一种方式:
使用innerHTML
div.innerHTML=div.innerHTML+"内容"//增加节点
div.innerHTML=""//删除所有节点
父节点.removeChild(子节点对象)//删除指定的子节点
代码示例:
--------------------------------------------------------------------------------
function testAdd(){
//获取元素对象
var showdiv=document.getElementById("showdiv");
//给div追加上传按钮
showdiv.innerHTML=showdiv.innerHTML+"<div><input type='file' value='' />
<input type='button' value='删除' onclick='delInp(this)'/></div>";
}
function delInp(btn){
//获取父级div
var showdiv=document.getElementById("showdiv");
//获取要删除的子div
var cdiv=btn.parentNode;
父div删除子div
showdiv.removeChild(cdiv);
}
--------------------------------------------------------------------------------
第二种方式:
获取元素对象
var obj=document.createElement("标签名");
元素对象名.appendChild(obj);
代码示例:
--------------------------------------------------------------------------------
<script type="text/javascript">
function testOper2(){
//获取元素对象
var showdiv=document.getElementById("showdiv");
//创建input元素对象
var inp=document.createElement("input");
inp.type="file";
//创建按钮元素对象
var btn=document.createElement("input");
btn.type="button";
btn.value="删除";
btn.onclick=function(){
showdiv.removeChild(inp);
showdiv.removeChild(btn);
showdiv.removeChild(br);
}
//创建换行符
var br=document.createElement("br");
//将创建好的元素对象存放到div中
showdiv.appendChild(inp);
showdiv.appendChild(btn);
showdiv.appendChild(br);
}
</script>
--------------------------------------------------------------------------------
document操作Form元素
js操作Form:
获取form表单对象
使用id:var fm=document.getElementById("fm");
使用name属性:var frm=document.frm;
获取form下的所有表单元素对象的集合
fm.elements
form表单的常用方法
表单对象.submit();//表单提交数据(很重要)
表单对象.reset();//表单重置
form的属性操作;
表单对象名.action="新的值";//动态的改变数据的提交路径
表单对象名.method="新的值";//动态的改变提交的方式
js表单元素的通用属性
只读模式:
readonly="readonly"//不可以更改,但数据可以提交
关闭模式:
disabled="disabled"//不可以进行任何的操作,数据不会提交
代码示例:
--------------------------------------------------------------------------------
<script type="text/javascript">
function testFrom(){
//使用id获取form表对象
var fm=document.getElementById("fm");
//使用from表单的name属性值来取值
var frm=document.frm;
//获取from表单元素对象集合
alert(frm.elements);
}
</script>
--------------------------------------------------------------------------------
js操作多选框、单选框
被选中状态下载JS中checked属性值为true,未选中的状态为false;
js操作下拉框:
被选择的option对象在Js中selected属性值为true,未选中未false
代码示例:
--------------------------------------------------------------------------------
<html>
<head>
<title>操作表单元素</title>
<meta charset="UTF-8"/>
<script type="text/javascript">
//多选框操作
function test1(){
//获取所有的多选元素对象数组
var favs=document.getElementsByName("fav");
//遍历数组
for(var i=0;i<favs.length;i++){
if(favs[i].checked){
alert(favs[i].value);
}
}
}
//全选
function test2(){
var favs=document.getElementsByName("fav");
for(var i=0;i<favs.length;i++){
favs[i].checked=true;
}
}
//反选
function test3(){
var favs=document.getElementsByName("fav");
for(var i=0;i<favs.length;i++){
favs[i].checked=(!favs[i].checked);
}
}
function test4(){
//获取下拉框
var sel=document.getElementById("address");
//获取option对象的集合
var os=sel.options;
for(var i=0;i<os.length;i++){
if(os[i].selected){
alert(os[i].text);
}
}
}
</script>
</head>
<body>
<h3>操作表单元素</h3>
<hr />
<input type="checkbox" name="fav" id="fav" value="1" />最美的期待<br />
<input type="checkbox" name="fav" id="fav" value="2" />老男孩<br />
<input type="checkbox" name="fav" id="fav" value="3" />远走高飞<br />
<input type="checkbox" name="fav" id="fav" value="4" />当<br />
<input type="checkbox" name="fav" id="fav" value="5" />怀念青春<br />
<input type="checkbox" name="fav" id="fav" value="6" />我相信<br />
<input type="button" name="" id="" value="播放" onclick="test1()"/>
<input type="button" name="" id="" value="全选" onclick="test2()"/>
<input type="button" name="" id="" value="反选" onclick="test3()"/>
<hr />
<select name="" id="address" onchange="test4()">
<option value="0">--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">郑州</option>
</select>
</body>
</html>
--------------------------------------------------------------------------------
document操作表格
1.删除行:
行对象.rowIndex//返回对象的角标
表格对象。deleteRow(要删除行对象的角标)
表格所有操作的代码示例:
--------------------------------------------------------------------------------
<html>
<head>
<title>table操作</title>
<meta charset="UTF-8"/>
<style type="text/css">
#ta{
margin: auto;
}
#ta tr{
height: 35px;
}
</style>
<script type="text/javascript">
//删除行
function del(btn){
//获取table对象
var ta=document.getElementById("ta");
//获取要删除的行对象
var tr=btn.parentNode.parentNode;
//删除行
ta.deleteRow(tr.rowIndex);
}
//更新数据
function update(btn){
var tr=btn.parentNode.parentNode;
var cell=tr.cells[4];
if(!isNaN(Number(cell.innerHTML))){
cell.innerHTML="<input type='text' value='"+cell.innerHTML+"' onblur='update2(this)'/>";
}
}
//当焦点离开后数据不能变更
function update2(btn){
var tr=btn.parentNode.parentNode;
var cell=tr.cells[4];
cell.innerHTML=btn.value;
}
//批量删除
function chooseDel(){
//获取表格对象、
var ta=document.getElementById("ta");
var chks=document.getElementsByName("chk");
for(var i=1;i<chks.length;i++){
if(chks[i].checked){
ta.deleteRow(i);
i--;
}
}
//获取要删除的行号
//开始删除
}
//添加行
function add(){
var ta=document.getElementById("ta");
var row=ta.insertRow(1);
var cell0=row.insertCell(0);
cell0.innerHTML="<input type='checkbox' name='chk' id='chk' />";
var cell1=row.insertCell(1);
cell1.innerHTML="c语言";
var cell2=row.insertCell(2);
cell2.innerHTML="王先生";
var cell3=row.insertCell(3);
cell3.innerHTML="33.23";
var cell4=row.insertCell(4);
cell4.innerHTML="5";
var cell5=row.insertCell(5);
cell5.align="center";
cell5.innerHTML="<input type='button' value='修改数量' onclick='update(this)'/><input type='button' value='删除' onclick='del(this)'/>";
}
//全选
function selectAll(){
var chks=document.getElementsByName("chk");
var f=chks[0].checked;
for(var i=1;i<chks.length;i++){
chks[i].checked=f;
}
}
///复制行
function copyRow(){
//获取表格对象
var ta=document.getElementById("ta");
//获取选择行对象
var chks=document.getElementsByName("chk");
for(var i=1;i<chks.length;i++){
if(chks[i].checked){
var tr=ta.insertRow(ta.rows.length);
//复制行
tr.innerHTML=ta.rows[i].innerHTML;
}
}
}
//隔行变色
function colors(){
//获取所有行对象数组
var trs=document.getElementById("ta").rows;
for(var i=0;i<trs.length;i++){
if(i%2==0){
trs[i].style.backgroundColor="green";
}
}
}
</script>
</head>
<body>
<h3 align="center">操作表格学习</h3>
<div align="center">
<input type="button" name="" id="" value="删除" onclick="chooseDel()"/>
<input type="button" name="" id="" value="添加" onclick="add()"/>
<input type="button" name="" id="" value="复制行" onclick="copyRow()"/>
<input type="button" name="" id="" value="隔行变色" onclick="colors()"/>
</div>
<hr />
<table border="1px" id="ta">
<tr style="text-align: center;font-weight: bold;">
<td width="50px" align="left"><input type="checkbox" name="chk" id="chk" value="" onclick="selectAll()"/></td>
<td width="200px">书名</td>
<td width="100px">作者</td>
<td width="100px">价格</td>
<td width="200px">数量</td>
<td width="200px">操作</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="chk" value="0" /></td>
<td>java从入门到放弃</td>
<td>wollo</td>
<td>43.50</td>
<td>3</td>
<td align="center">
<input type="button" name="" id="" value="修改数量" onclick="update(this)"/>
<input type="button" name="" id="" value="删除" onclick="del(this)"/>
</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="chk" value="1" /></td>
<td>javaScript入门</td>
<td>灰灰</td>
<td>77.60</td>
<td>2</td>
<td align="center">
<input type="button" name="" id="" value="修改数量" onclick="update(this)"/>
<input type="button" name="" id="" value="删除" onclick="del(this)"/>
</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="chk" value="2" /></td>
<td>Spring入门</td>
<td>老王</td>
<td>78.88</td>
<td>3</td>
<td align="center">
<input type="button" name="" id="" value="修改数量" onclick="update(this)"/>
<input type="button" name="" id="" value="删除" onclick="del(this)"/>
</td>
</tr>
</table>
</body>
</html>
--------------------------------------------------------------------------------
document对象实现form表单校验
formset不同的页面在一个页面展示div是将一个区块的内容分成不同的区块进行展示