前端开发网页设计(四)：JavaScript(JS)学习(2)
源码下载 https://pan.baidu.com/s/1Gtmh5LESCFyAjVNSuEb9BQ 提取码：q5zz
- JavaScript学习
- 9.JS的函数学习
- 10.JS的类和对象
- 11.JS的自定义对象
- 12.JS的常用对象和方法
- 13.JS的事件机制
- 14.JS的Window对象
- 15.JS的Document对象
9.JS的函数学习
<html>
<head>
<title>js的函数学习title>
<meta charset="UTF-8"/>
<script type="text/javascript">
//1、声明函数
//方式一:
function test1(a1,a2)
{
alert("函数声明一");
}
//方式二:
var test2=new Function("a1","a2","alert('函数声明二'+a1)");
//方式三:
var test3=function(a1,a2){
alert("我是函数声明三");
}
//调用声明的函数
//test2(1,2);
//2、函数的参数
function testParam(a1,a2,a3){
alert(a1);
alert("函数的形参学习");
}
//testParam(1,2);
//3、函数的返回值
var testReturn=function(){
alert("函数的返回值学习");
//return "js";
}
alert(testReturn());
script>
head>
<body>
<h3>js的函数学习h3>
body>
html>
<html>
<head>
<title>js的函数学习二title>
<meta charset="UTF-8"/>
<script type="text/javascript">
//1、函数的执行符
var test1=function(){
alert("函数的执行符学习");
return "js";
}
//alert(test1());
//2、函数作为实参进行传递
function testobj(a){
alert(a());
}
var testParam=function(){
alert("我是函数参数");
}
testobj(testParam());
//3、开发中经常用的传递方式
function testObj2(fn){//testObj2函数在被调用的时候，实参必须是一个函数对象。
fn();
}s
testObj2(function(){
alert("开发");
})
script>
head>
<body>
<h3>js的函数学习二h3>
body>
html>
10.JS的类和对象
<html>
<head>
<meta charset="UTF-8">
<title>js中的类和对象学习title>
<meta charset="UTF-8"/>
<script type="text/javascript">
//1、类的声明--person
function Person(name,age){
Person.prototype=new User();
this.name=name;
this.age=age;
this.fav="唱歌";
}
function User(uname,pwd){
this.uname=uname;
this.pwd=pwd;
}
//使用prototype
//Person.prototype.test=function(){alert("嘿嘿")};
//实现了JS中类似于java的继承
Person.prototype=new User();
User.prototype.testU=function(){alert("我是user")};
//User.prototype.student=new Student();
//2、使用类
var p1=new Person("张三",32);
// p1.address="北京市";
// alert(p1.address);
// alert(p1.name);
var p2=new Person("李四",23);
// alert(p2.name);
//alert(p1.test===p2.test);//false;
alert(p1.test===p2.test);
p1.testU();
script>
head>
<body>
body>
html>
11.JS的自定义对象
<html>
<head>
<meta charset="UTF-8">
<title>js的自定义对象title>
<meta charset="UTF-8"/>
<script type="text/javascript">
//1、创建自定义对象
var obj=new Object();
obj.name="张三";
obj.age=23;
obj.test=function(){
alert("我是obj");
}
script>
head>
<body>
body>
html>
12.JS的常用对象和方法
<html>
<head>
<title>js的常用对象和方法title>
<meta charset="UTF-8"/>
<script type="text/javascript">
//1、String对象学习
var str=new String("abcdefg");//声明String对象存储字符串
var str2="MNP";//简写形式
//alert(str);
//字符串大小写的转换
//alert(str.toUpperCase());//将字符串转换为大写
//alert(str2.toLowerCase());//将字符串转换为小写
//字符串的切割
// var s="哈哈,嘿嘿,呵呵";
// var s1=s.split(",");//按照指定的字符切割字符串，返回数组。
// alert(s1.length);
//字符串的截取
// var s="abcdef";
// alert(s.substr(1,3));//从指定的开始位置截取指定长度的子字符串
// alert(s.substring(1,3));//从指定的开始位置和指定的结束位置截取子字符串，含头不含尾。
//查找子字符串第一次出现的角标
// var s="abcdefg";
// alert(s.indexOf("dd"));//返回指定子字符串第一次出现的角标，没有则返回-1;
//2、Date对象
//1、创建Date对象
var d=new Date();
//alert(d);
//获取当前年份
// alert(d.getYear());//返回的是1900年开始距今的年分数
// alert(d.getFullYear());//返回的是当前的年份
// alert(d.getMonth()+1);//返回的当前月份的角标值，需要+1
// alert(d.getDate());//返回的是当前的日期数
// alert(d.getDay());//返回的是当前的星期数，但是周天会返回值为0;
// alert(d.getHours());//返回当前时间的小时数
// alert(d.getMinutes());//返回当前时间的分钟数
// alert(d.getSeconds());//返回当前时间的秒数
//alert(d.getHours()+":"+d.getMinutes()+":"+d.getSeconds());
//3、Math对象学习
//1、Math在使用的时候不能new，使用Math.方法名调用即可。
//创建随机数字
// alert("Math.random():"+Math.random());//返回0-1之间的随机数字，含0不含1。
// alert(1000+Math.random()*9000);
//向下取整
// alert(Math.floor(1000+Math.random()*9000));
//向上取整
// alert(Math.ceil("12.34"));
//四舍五入
// alert(Math.round(12.12));
// alert(Math.round(12.65));
//数值比较:求取最小值，求取最大值
// alert(Math.min(12,13,5,78));//获取最小值
// alert(Math.max(12,3,4,56));//获取最大值
//4、Global对象学习
//1、改对象从不直接使用并且不能new，也是就直接写方法名调用即可。
//使用eval将字符串转换为可执行的js代码
var str="var a=123";
eval(str);
alert(a);
//使用isNaN判断是否值NaN
alert(isNaN("123"));
//获取字符中的浮点数
alert(parseFloat("12.34a34a"));
script>
head>
<body>
body>
html>
13.JS的事件机制
<html>
<head>
<title>js的事件机制学习1title>
<meta charset="UTF-8"/>
<script type="text/javascript">
/*声明js函数*/
//单击事件
function testOnclick(){
alert("我是单击");
}
//测试双击
function testOndblclick(){
alert("我是双击");
}
//鼠标事件
function testOnmouseover(){
alert("我是鼠标悬停事件");
}
function testOnmousemove(){
alert("我被移动了");
}
function testOnmouseout(){
alert("我被移出了");
}
//键盘事件
function testOnkeyup(){
alert("我是键盘弹起事件");
}
function testOnkeydown(){
alert("我是键盘按下事件");
}
//焦点事件
function testOnfocus(){
document.getElementById("showdiv").innerHTML="哈哈";
alert("我是获取焦点事件");
}
function testOnblur(){
alert("我是失去焦点事件");
}
//页面加载
function testOnload(){
alert("我是页面加载事件");
}
//测试
function test(){
alert("测试一个事件的多个函数执行");
}
script>
<style type="text/css">
#showdiv{
width: 300px;
height: 300px;
border: solid 1px;
}
style>
head>
<body onload="testOnload()">
<h3>js的事件机制学习1h3>
<hr />
<input type="button" name="" id="" value="测试单击" onclick="testOnclick();test();" />
<input type="button" name="" id="" value="测试双击" ondblclick="testOndblclick();" />
<hr />
<br /><br />
<div id="showdiv" onmouseover="testOnmouseover();" onmousemove="testOnmousemove()" onmouseout="testOnmouseout()">
div>
<hr />
键盘事件学习： <br />
键盘弹起事件：<input type="text" name="" id="" value="" onkeyup="testOnkeyup();"/><br /><br />
键盘下压事件： <input type="text" name="" id="" value="" onkeydown="testOnkeydown()"/>
<hr />
焦点事件学习：<br />
获取焦点： <input type="text" name="" id="" value="" onfocus="testOnfocus();"/><br /><br />
失去焦点： <input type="text" name="" id="" value="" onblur="testOnblur();"/>
body>
html>
<html>
<head>
<title>js的事件机制二title>
<meta charset="UTF-8"/>
<script type="text/javascript">
//值改变事件
function testOnchange(){
alert("我被改变了");
}
//单击事件
function testOnclick(){
alert("今天天气真好，不冷不热，贼适合学习");
}
//双击事件
function testOndblclick(){
alert("老师说的对");
}
//事件的阻断
function testA(){
alert("事件的阻断");
return true;
}
//超链接调用js函数
function testHref(){
alert("我是超链接调用");
}
script>
head>
<body>
<h3>js的事件机制二h3>
<hr />
值改变事件: <input type="text" name="" id="" value="" onchange="testOnchange();"/>
<br /><br />
<select name="" id="" onchange="testOnchange();">
<option value="">北京option>
<option value="">上海option>
<option value="">广州option>
select>
<hr />
事件的冲突：<br />
<input type="button" name="" id="" value="事件的冲突" onclick="testOnclick()" ondblclick="testOndblclick()"/>
<hr />
事件的阻断：<br />
<a href="http://www.baidu.com" target="_blank" onclick="return testA()">百度一下a>
<hr />
超链接调用js函数:
<a href="javascript:testHref()">调用js函数a>
body>
html>
14.JS的Window对象
<html>
<head>
<title>window对象学习title>
<meta charset="UTF-8"/>
<script type="text/javascript">
//框体方法学习：
//警告框
function testAlert(){
var a=window.alert("我是警告框");
alert(a);
}
//确认框
function testConfirm(){
var flag=window.confirm("你确定要删除吗?");
alert(flag);
}
//提示框
function testPrompt(){
var str=window.prompt("请输入昵称：");
alert(str);
}
/*----------------------------------------------------------------------------------------------*/
var idi;
var ids
//定时执行
function testSetTimeout(){
idi=window.setTimeout(function(){
alert("我是定时执行");
},3000);
}
//间隔执行
function testSetInterval(){
ids=window.setInterval(function(){
alert("我是间隔执行");
},2000);
}
//停止当前的定时方法
function testClearTimeout(){
window.clearTimeout(idi);
}
function testClearInterval(){
window.clearInterval(ids);
}
script>
head>
<body>
<h3>window对象学习h3>
<hr />
<input type="button" name="" id="" value="测试警告框" onclick="testAlert();" />
<input type="button" name="" id="" value="测试确认框" onclick="testConfirm()" />
<input type="button" name="" id="" value="测试提示框" onclick="testPrompt()"/>
<hr />
<input type="button" name="" id="" value="测试setTimeout--定时执行" onclick="testSetTimeout()"/>
<input type="button" name="" id="" value="测试setInterval--间隔执行" onclick="testSetInterval()"/>
<input type="button" name="" id="" value="测试clearTimeout--停止指定的定时器" onclick="testClearTimeout()" />
<input type="button" name="" id="" value="测试clearInterval--停止指定的间隔器" onclick="testClearInterval()" />
body>
html>
<html>
<head>
<title>js的window对象学习2title>
<meta charset="UTF-8"/>
<script type="text/javascript">
//1、子页面方法
function testOpen(){
window.open('son.html','newwindow','height=400, width=600, top=100px,left=320px, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=no, status=yes');
}
//2、子页面调用父页面的函数
function testFather(){
alert("父页面");
}
/*----------------------------------------------------------------------------*/
//1、地址栏属性学习--location
function testLocation(){
window.location.href="http://www.baidu.com";
}
function testLocation2(){
window.location.reload();
}
//2、历史记录属性
function testHistory(){
window.history.forward();
}
function testHistory2(){
window.history.go(0);
}
//3、屏幕属性学习
function testScreen(){
var x=window.screen.width;
var y=window.screen.height;
alert(x+":"+y)
}
//4、浏览器配置属性
function testNa(){
alert(window.navigator.userAgent);
}
script>
head>
<body>
<h3>js的window对象学习2h3>
<hr />
<input type="button" name="" id="" value="测试open" onclick="testOpen()"/>
<hr />
<input type="button" name="" id="" value="测试地址栏属性--location--跳转资源" onclick="testLocation()" />
<input type="button" name="" id="" value="测试地址栏属性--location--重新加载资源" onclick="testLocation2()" />
<br /><br />
<input type="button" name="" id="" value="测试历史记录属性--history-前进" onclick="testHistory();"/>
<input type="button" name="" id="" value="测试历史记录属性--history-go" onclick="testHistory2();"/>
<br /><br />
<input type="button" name="" id="" value="测试屏幕属性--screen" onclick="testScreen()" />
<input type="button" name="" id="" value="测试浏览器配置属性--navigator" onclick="testNa()" />
body>
html>
15.JS的Document对象
JS的document对象
<html>
<head>
<meta charset="UTF-8">
<title>document对象学习title>
<script type="text/javascript">
//document获取元素对象
//直接方式
//id方式
function testGetEleById(){
var inp=window.document.getElementById("uname");
alert(inp);
}
//name方式
function testGetEleByName(){
var favs=document.getElementsByName("fav");
alert(favs);
}
//标签名
function testGetEleByTagName(){
var inps=document.getElementsByTagName("input");
alert(inps);
}
//class属性
function testGetEleByClassName(){
var inps=document.getElementsByClassName("common");
alert(inps.length);
}
//间接获取方式
//父子关系
function testParent(){
//获取父级元素对象
var showdiv=document.getElementById("showdiv");
//获取所有的子元素对象数组
var childs=showdiv.childNodes;
alert(childs.length);
}
//子父关系
function testChild(){
//获取子元素对象
var inp=document.getElementById("inp");
var div=inp.parentNode;
alert(div);
}
//兄弟关系
function testBrother(){
var inp=document.getElementById("inp");
var preEle= inp.previousSibling;//弟获取兄
var nextEle=inp.nextSibling;//兄获取弟
alert(preEle+":::"+nextEle);
}
script>
<style type="text/css">
.common{}
#showdiv{
border: solid 2px orange;
width: 300px;
height: 300px;
}
style>
head>
<body>
<h3>document对象的概念和获取元素对象学习h3>
直接获取方式学习：<br />
<input type="button" name="" id="" value="测试获取HTML元素对象--id" onclick="testGetEleById()" />
<input type="button" name="" id="" value="测试获取HTML元素对象---name" onclick="testGetEleByName()" />
<input type="button" name="" id="" value="测试获取HTML元素对象---TagName" onclick="testGetEleByTagName()" />
<input type="button" name="" id="" value="测试获取HTML元素对象---className" onclick="testGetEleByClassName()" />
<hr />
用户名：<input type="text" name="uname" id="uname" value="" /><br /><br />
<input type="checkbox" name="fav" id="fav" value="" class="common"/>唱歌
<input type="checkbox" name="fav" id="fav" value="" class="common"/>跳舞
<input type="checkbox" name="fav" id="fav" value="" />睡觉
<input type="checkbox" name="fav" id="fav" value="" />打游戏
<hr />
间接获取方式学习：<br />
<input type="button" name="" id="" value="测试父子关系" onclick="testParent()"/>
<input type="button" name="" id="" value="测试子父关系" onclick="testChild()"/>
<input type="button" name="" id="" value="测试兄弟关系" onclick="testBrother()"/>
<hr />
<div id="showdiv">
<input type="" name="" id="" value="" /><input type="" name="" id="inp" value="" />
<input type="" name="" id="" value="" />
<input type="" name="" id="" value="" />
<input type="" name="" id="" value="" />
<input type="" name="" id="" value="" />
div>
body>
html>
JS(document)操作HTML的元素属性
<html>
<head>
<title>js操作HTML的元素属性title>
<meta charset="UTF-8"/>
<script type="text/javascript">
//声明函数---固有属性
//获取属性值
function testField(){
//获取元素对象
var inp=document.getElementById("uname");
//获取元素属性值
alert(inp.type+":"+inp.name+":"+inp.id+":"+inp.value);
}
//修改元素属性值
function testField2(){
//获取元素对象
var inp=document.getElementById("uname");
//修改元素属性
inp.value="哈哈";
inp.type="button";
}
//声明函数---自定义属性
//获取
function testOwnField(){
//获取元素对象
var inp=document.getElementById("uname");
//获取自定义属性的值
alert(inp.getAttribute("abc"));
}
//修改
function testOwnField2(){
//获取元素对象
var inp=document.getElementById("uname");
//修改自定义属性的值
inp.setAttribute("abc","呵呵");
}
//使用自定义方式操作固有属性
function testOper(){
//获取元素对象
var inp=document.getElementById("uname");
//操作对象属性
alert(inp.getAttribute("type"));
alert(inp.getAttribute("value"));
}
script>
head>
<body>
<h3>js操作HTML的元素属性h3>
<input type="button" name="" id="" value="测试获取元素属性--固有" onclick="testField()" />
<input type="button" name="" id="" value="测试修改元素属性--固有" onclick="testField2()" />
<input type="button" name="" id="" value="测试获取元素属性--自定义" onclick="testOwnField()" />
<input type="button" name="" id="" value="测试修改元素属性--自定义" onclick="testOwnField2()" />
<input type="button" name="" id="" value="测试操作元素自定义操作固有属性" onclick="testOper()" />
<hr />
用户名 : <input type="text" name="uname" id="uname" value="" abc="嘿嘿"/>
body>
html>
**JS(document)操作元素的内容和样式**
<html>
<head>
<title>js操作元素内容学习title>
<meta charset="UTF-8"/>
<style type="text/css">
#div01{
width: 200px;
height: 200px;
border: solid 1px orange;
}
style>
<script type="text/javascript">
//获取元素内容
function getContext(){
//获取元素对象
var div=document.getElementById("div01");
//获取元素内容
alert(div.innerHTML);
alert(div.innerText);
}
//修改元素内容
function updateContext(){
//获取元素对象
var div=document.getElementById("div01");
//修改元素对象内容
div.innerHTML="你先上，皇军给你殿后，八嘎";
}
function updateContext2(){
//获取元素对象
var div=document.getElementById("div01");
//修改元素对象内容
div.innerText="你先上，皇军给你殿后，八嘎";
}
script>
head>
<body>
<h3>js操作元素内容学习h3>
<input type="button" name="" id="" value="测试获取元素内容---innerHTML&innerText" onclick="getContext()"/>
<input type="button" name="" id="" value="测试修改元素内容--innerHTML" onclick="updateContext()"/>
<input type="button" name="" id="" value="测试修改元素内容--innerText" onclick="updateContext2()"/>
<hr />
<div id="div01">
<b>皇军，前面有八路的干活。b>
<b>皇军，前面有八路的干活。b>
div>
body>
html>
<html>
<head>
<title>js操作元素的样式title>
<meta charset="UTF-8"/>
<style type="text/css">
#showdiv{
width: 200px;
height: 200px;
border: solid 1px;
}
.common{
width: 200px;
height: 200px;
border: solid 1px;
}
.common2{
width: 200px;
height: 200px;
border: solid 1px;
background-color: aqua;
}
style>
<script type="text/javascript">
//js操作元素样式
//js给元素操作样式---style
function testOperCss(){
//获取元素对象
var showdiv=document.getElementById("showdiv");
//添加元素样式
showdiv.style.backgroundColor="#FFA500";
//js修改元素样式
showdiv.style.border="solid 2px red";
//js删除样式
showdiv.style.border="";
}
//js操作样式--className
function testOperCss2(){
//获取元素对象
var div01=document.getElementById("div01");
//获取
alert(div01.className);
//添加或者修改
div01.className="common2";
//删除
div01.className="";
}
script>
head>
<body>
<h3>js操作元素的样式h3>
<input type="button" name="" id="" value="测试操作元素样式--style" onclick="testOperCss()" />
<input type="button" name="" id="" value="测试操作元素样式--className" onclick="testOperCss2()" />
<hr />
<div id="showdiv" style="border: solid 2px blue;">
div>
<div id="div01" class="common">
div>
body>
html>
JS(document)操作元素的文档结构(1)
<html>
<head>
<title>js操作元素的文档结构title>
<meta charset="UTF-8"/>
<script type="text/javascript">
function testAdd(){
//获取元素对象
var showdiv=document.getElementById("showdiv");
//给div追加上传按钮
showdiv.innerHTML=showdiv.innerHTML+"";
}
function delInp(btn){
//获取父级div
var showdiv=document.getElementById("showdiv");
//获取要删除的子div
var cdiv=btn.parentNode;
//父div删除子div
showdiv.removeChild(cdiv);
}
script>
head>
<body>
<h3>js操作元素的文档结构h3>
<input type="button" name="" id="" value="继续上传" onclick="testAdd()"/>
<hr />
<div id="showdiv">
div>
body>
html>
**JS(document)操作元素的文档结构(2)**
<html>
<head>
<meta charset="UTF-8">
<title>js操作文档结构2title>
<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>
head>
<body>
<h3>js操作文档结构2h3>
<input type="button" name="" id="" value="继续上传" onclick="testOper2()"/>
<hr />
<div id="showdiv">
div>
body>
html>
JS(document)操作form表单
<html>
<head>
<title>js操作form表单title>
<meta charset="UTF-8"/>
<script type="text/javascript">
//
function testForm(){
//获取form表对象
var fm=document.getElementById("fm");
//alert(fm);
//使用form表单的name属性值来获取
var frm=document.frm;
//alert(frm===fm);
//获取form表单元素对象集合
//alert(fm.elements.length);
//form表单的常用方法
//fm.submit();很重要
fm.reset();
//form的属性操作
fm.action="http://www.baidu.com/s";
}
script>
head>
<body>
<h3>js操作form表单h3>
<input type="button" name="" id="" value="测试操作form" onclick="testForm()" />
<hr />
<form action="#" method="get" id="fm" name="frm">
<b>用户名：b><input type="text" name="uname" id="uname" value="" readonly="readonly"/><br /><br />
密码： <input type="password" name="pwd" id="pwd" value="" disabled="disabled"/><br /><br />
<input type="submit" name="" id="" value="登录" />
form>
body>
html>
JS(document)操作form表单元素
<html>
<head>
<title>操作表单元素title>
<meta charset="UTF-8"/>
<script type="text/javascript">
//多选框操作
function testCheckBox(){
//获取所有的多选元素对象数组
var favs=document.getElementsByName("fav");
//遍历数组
for(var i=0;i<favs.length;i++){
if(favs[i].checked){
alert(favs[i].value+":"+favs[i].checked);
}
}
}
//全选
function testCheckBox2(){
var favs=document.getElementsByName("fav");
for(var i=0;i<favs.length;i++){
favs[i].checked=true;
}
}
//反选
function testCheckBox3(){
var favs=document.getElementsByName("fav");
for(var i=0;i<favs.length;i++){
favs[i].checked=!favs[i].checked;
}
}
//操作下拉框
function testSel(){
//获取下拉框对象
var sel=document.getElementById("address");
//alert(sel.value);
//获取option对象集合
var os=sel.options;
for(var i=0;i<os.length;i++){
if(os[i].selected){
alert(os[i].value+":"+os[i].text);
}
}
}
script>
head>
<body>
<h3>操作表单元素h3>
<hr />
<b>操作多选框b><br /><br />
<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" />see you again<br />
<input type="checkbox" name="fav" id="fav" value="6" />fade<br /><br /><br />
<input type="button" name="" id="" value="播放" onclick="testCheckBox()"/>
<input type="button" name="" id="" value="全选" onclick="testCheckBox2()"/>
<input type="button" name="" id="" value="反选" onclick="testCheckBox3()"/>
<hr />
<select name="" id="address" onchange="testSel()">
<option value="0">--请选择--option>
<option value="1" >北京option>
<option value="2">上海option>
<option value="3">广州option>
select>
body>
html>