1.Array对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Array对象</title>
<!--js中定义数组对象
注意事项：
1）在js中定义数组，不用担心数组角标越界的问题，自动扩容
2）在js中，数组是可以定义任何数据类型的
-->
<script>
//方式1：指定数组长度
var arr=new Array(3);
//1.1不指定长度
var arr=new Array();
//1.2指定具体的元素内容
var arr=new Array(true,'a',"hello",30);
//方式2：简写方式
var arr=[true,'a',"hello",30];
//需要给数组中的元素进行赋值
arr[0]=10;
arr[1]=20;
arr[2]=true;
arr[3]=30;
for(var i=0;i<arr.length;i++){
document.write(arr[i]+" ");
}
/**
* 两个方法：
* join（str）：通过指定字符串，将数组中的内容用该字符串拼接，返回一个字符出串的值
* reverse（）：将数组中的内容进行反转
*
* 需求：Array对象中添加一个search(array,target)
* 在array数组中查找target元素的位置
* 添加max(array)---获取最大值
*/
//定义一个数组
var array=["java","php","python","hadoop","c++"];
var str1=arr.join("-");
document.write(str1);
//这是打印一个水平线
document.write("<hr />");
//反转
var str2=arr.reverse();
document.write(str2);
</script>
</head>
<body>
</body>
</html>
2.js中的自定义对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js的自定义对象</title>
<script>
/**
* js中的自定义对象：4种
* 1）有参方式：类似于java中的有参构造
*
* 举例：定义Peron对象
* function对象（形参）{
* 追加属性；
* 追加方法；
* }
* 创建对象
* var 对象名=new 对象（实际参数）;
*/
//方式1：定义一个Person对象
// function Person(name,age){//this代表Person对象
// //追加属性
// this.name=name;
// this.age=age;
// //追加方法
// this.say=function(){
// alert("调用了say功能");
// }
// }
//
// //创建对象
// var p=new Person("eric",20);
// //输出属性
// document.write(p.name+"<br />");
// document.write(p.age+"<br />");
// //调用方法
// p.say();
//方式2：无参的方式--类似于java中的无参构造
/*
function Person(){
}
//首先需要创建一个对象
var p=new Person();
//追加属性
p.name="张三";
p.age=17;
//追加方法
p.say=function(){
alert("调用了张三的say功能");
}
*/
//方式3：创建一个obejct对象--在js中Object对象代表所有的对象包括我们的内置对象，是一个模板对象
/*
var p=new Object();
//追加属性
p.name="张三";
p.age=17;
//追加方法
p.say=function(){
alert("调用了张三的say功能");
}
*/
//方式4：字面量的方式，类似于json格式
//[面试]json解析中有几种方式：
//（1）第三方的jar包：Gson
//（2)FastJson
//（3）Json原生的方法
//
// {
// "key1":"value1",
// "key2":"value2",
// "key3":"value3",
//
// }
//创建对象
var p={
//追加的属性
"name":"王五",
"age":"25",
//追加的方法
"say":function(){
alert("调用了王五 的say功能");
}
};
</script>
</head>
<body>
</body>
</html>
3.wiindow对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Window对象</title>
<script>
/**
* window对象中常用的方法
* open("url","打开方式","打开新窗口的宽高以及设置工具栏的显示")
* url：打开资源地址或者资源文件
* setInterval("任务",毫秒值)--每经过多少毫秒值重复执行了
* setTimeout("任务"，毫秒值)--经过多少秒之后执行一次任务
* 取消定时器
* clearInterval(timerId);
* clearTimeout(timerId);
* 弹框方法：
* alter()
* confirm():确认对话框
* prompt():消息对话框和输入框
*
*
*/
function testOpen(){
//打开一个窗口，执行open方法
window.open("04_原型.html","_blank","width:400px;height=400px")
}
function testInterval(){
taskId=window.setInterval("testOpen()",3000);//重复执行
}
function testTimeout(){
taskId=window.setTimeout("testOpen()",3000);//只执行一次
}
//取消定时任务
function testClearInterval(){
window.clearInterval(taskId);
}
function testClearTimeout(){
window.clearInterval(taskId);
}
</script>
</head>
<body>
<input type="button" value="open" "testOpen()" />
<br />
<input type="button" value="interval" "testInterval()" />
<br />
<input type="button" value="timeout" "testTimeout()" />
<br />
<input type="button" value="timeout" "testTimeout()" />
</body>
</html>
4.location对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>location对象</title>
<script>
/**
* location对象
* href：改变当前url的地址，实现跳转
* reload():重新刷新当前页面
*/
function testHref(){
window.location.href="05_BOM之Windows对象.html";
}
//servlet --->jsp--->MVC
//reload:重新刷新页面
function load(){
window.location.reload();
}
</script>
</head>
<body>
<input type="button" value="调转" "testHref()" />
</body>
</html>
5.history对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>history对象</title>
<script>
/**
* forward():载入下一个url
* back():载入上一个url
*go(整数)：装入url代替上面两个方法
*/
function testForward(){
//跳转到目标页面
window.history.forward();//--->可以直接被替换掉为window.history.go(1)前进/window.history.go(-1)后退
}
</script>
</head>
<body>
<a href="02_js的自定义对象.html">跳转</a>
<br />
<input type="button" value="前进" "testForward()" />
</body>
</html>
6.js事件编程
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js事件编程</title>
<!--
事件编程的三要素：
1）事件源
2）编写监听器
3）注册监听器
js编程的分类：
点击相关事件：
单击点击事件：onclick
双击点击事件:ondbclick
和焦点相关事件
聚焦事件：onfocus
失去焦点事件：onblur
选项卡发生变化的事件：
onchange事件 举例：省市联动
和鼠标相关的事件
鼠标经过：onmouseover
鼠标移除：onmouseout
当body中的内容加载完毕：页载入事件：onload事件
onkeyup：按键抬起事件
onleydown：用户按下键盘时触发什么事件
-->
</head>
<body>
<input type="button" value="点我试试" "testCilck()"/>
<input type="button" value="多点两下" "testDbCilck()"/>
<br />
用户名：<input type="text" id="username" "testBlur()" "testFocus()" value="请输入4-14位的数字或字母" size="20"/><span id="username_tip"></span>
<br />
籍贯：
<select "change()" id="jiguan">
<option value="请选择">请选择</option>
<option value="陕西省">陕西省</option>
<option value="重庆市">重庆市</option>
<option value="湖南省">湖南省</option>
</select>
城市：
<select id="city">
</select>
<br />
<div id="div1">这是div内容</div>
</body>
<script>
function testCilck(){
alter("我点了");
}
function testDbClick(){
alert("多点两下");
}
function testFocus(){
//确定事件：获取焦点事件
//操作文本输入框，获取该输入框的对象
var input=document.getElementById("username");
//设置属性
input.value="";
}
function testBlur(){
//获取文本输入框的内容
document.getElementById("username").value;
//通过id获取span标签对象
var span = document.getElementById("username_tip");
if(username!="eric"){
//设置span标签的innerHtml属性
span.innerHTML="用户可用".fontcolor("green");
}else{
span.innerHTML="用户名不可用".fontcolor("red");
}
}
function change(){
//通过id="jiguan"获取select标签对象
//通过select获取选中的内容
document.getElementById("jiguan").value;
//alter(jiguan)
//获取id="city"所在的select标签对象
var city=document.getElementById("city");
//判断如果选中的jiguan是陕西省
if(jiguan=="陕西省"){
var arr=["西安市","咸阳市","宝鸡市"];
for(var i=0;i<arr.length;i++){
//设置城市所在的select对象的innerHTML属性
//<option value="">arr[i]</option>
city.innerHTML+="<option value='"+arr[i]+"'>"+arr[i]+"</option>";
}
}
}
</script>
</html>
7.DOM编程
DOM简介：
8.通过document的集合属性获取标签对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通过document的集合属性获取标签对象</title>
</head>
<body>
<form>
<a href="#">超链接</a><img="" />
<img src="" />
</form>
<form>
<a href="#"></a>
<img src="" />
</form>
</body>
<script>
/**
* all：返回当前页面中所有标签对象集合
*/
</script>
</html>
9.通过查询节点关系来获取标签对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通过查询节点关系来获取标签对象</title>
<!--
作者：offline
时间：2019-04-04
/**
* 节点关系：
* 1）parentNode：父节点
* 2）childNodes：当前的所有子节点
* 3）firstChild：最后一个节点
* 5）兄弟节点：sibling
* nextSibling：下一个兄弟节点
* previousSibling：上一个兄弟节点
*
* 在节点关系：childNodes，firstChilde，lastChilde,有一个节点的类nodeType
* 查看节点类型：
* 空格换行： 3 #text
* 标签对象： 1
* html注释： 8 #comment
*/
-->
</head>
<body>
<!--这个form对象就是父节点-->
<from>
<a href="#"></a><input type="text" /><input type="button" />
</from>
<form>
<a href="#"><img src=""/></a><input type="button" />
</form>
</body>
<script>
//需求1：需要获取第一个a标签对象----返回的是一个数组通过返回的下标进行获取
var aNode = document.links[0];
alert(aNode.nodeName);
//需求2：获取它的父节点对象
var formNode=aNode.parentNode;
alert(formNode.nodeName);
//需求3：需要获取当前第一个form标签对象的所有子节点对象
var nodeList=formNode.childNodes;
alert(nodeList.length);
for(var i=0;i<nodeList.length;i++){
if(nodeList[i].nodeType==1){
document.write(nodeList[i].nodeName+",节点类型是："+nodeList[i].nodeType+"<br/>");
}
}
//需求4：通过formNode获取第一个子节点对象
var firstNode=formNode.firstChild;
alert(firstNode.nodeName);
//需求5：通过formNode获取最后一个子节点对象
var lastNode=formNode.lastChild;
alert(lastNode.nodeName);
//获取第二个a标签对象
var aNode=document.links[1];
alert(aNode.nodeName);
//获取aNode的下一个兄弟节点
var next=aNode.nextSibling;
alert(next.nodeName);
//获取aNode的上一个兄弟节点
var previous=next.previousSibling;
alert(previous.nodeName);
</script>
</html>
10.通过document方法获取标签对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通过document方法获取标签对象</title>
<script>
/**
* 通过document方法获取标签对象
* 1）getElementById（"id属性值"）;返回的是某个标签对象//id一定要唯一
* 2）getElementsByName("name属性值");返回的是标签对象集合
* 3）getElementsByTagName("标签名称");返回的是一个集合
*/
function init(){
//获取input标签对象
//var username=document.getElementById("user_name").value;
//方法2：通过name属性
var username=document.getElementsByName("username")[0].value;
alert(username);
}
</script>
</head>
<body "init()">
用户名：<input type="text" name="username" "init()" id="user_name"/>
</body>
</html>
11.定时弹出广告
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时弹出广告</title>
<script>
/**
* 广告开始隐藏
* 经过3秒后，弹出广告
* 再经过5秒之后，隐藏广告
*/
//显示广告
function showAdv(){
//获取要操作的元素对象
var img=document.getElementById("img1");
//显示
img.style.display="block";
//再通过5秒后来隐藏广告
window.setTimeout("hideAdv()",5000);
}
//隐藏广告
function hidAdv(){
//获取要操作的元素对象
var img=document.getElementById("img1");
//隐藏
img.style.display="none";//隐藏掉
}
//页面载入事件
function init(){
//经过3秒显示广告
window.setTimeout("showAdv()",3000);
}
</script>
</head>
<body>
<img src="" />
</body>
</html>
12.切换图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>切换图片</title>
<script>
function changeImag(){
//要获取操作的img标签对象
var img=document.getElementById("imag1");
//更改图片src属性
img.c="img/图片2";
}
</script>
</head>
<body>
<input type="button" value="切换图片" "changeImag()" />
<img src="img/图片2" id="img1" />
</body>
</html>
13.图片自动轮播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片自动轮播</title>
<script>
/**
* 页面加载事件：为了执行定时器,setInterval();
*/
var index=0;
function changeImg(){
//获取img标签对象
var img=document.getElementById("img1");
//更改src属性
//img.src="img/2.jpg";
//img.src="img/"+curIndex+".ipg";
var curIndex=index%3+1;
img.src="img/"+curIndex+".jpg";
index=index+1;
}
function init(){
//开启一个定时任务
window.setInterval("changeImg()",3000);
}
</script>
</head>
<body "init()"><!--页面加载事件-->
<img src="img/1.jpg" width="100%" id="img1/>
</body>
</html>
14.document操作标签对象的其他方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document操作标签对象的其他方法 </title>
<script>
/**
* 文档对象：document
* 和添加元素对象相关的方法：
* createElement("标签元素名称");
* 举例：创建<input/>document.createElement("input")；
* setAttribute("属性名称","属性值");
* 举例：元素对象.setAttribute("type","button");
* <input type="button"/>
* 和插入元素相关的方法：
* appendChild(指定元素对象);在父节点中调用
* insertBefore(新元素对象，指定元素对象);
* 在指定对象的前面插入这个新对象
* 和删除相关的方法：
* removeChilde(子节点对象)
*
*/
function addButton(){
//创建一个input标签对象
var input = document.createElement("input");
//给当前input对象中添加属性
input.setAttribute("type","button");
input.setAttribute("value","新按钮");
//获取父节点对象:body
var bodyNode=document.getElementsByTagName("body")[0];
bodyNode.appendChild(input);
//获取id="btn"所在标签对象
bodyNode.insertBefore(input);
}
function delButton(){
//获取父节点对象
ar bodyNode=document.getElementsByTagName("body")[0];
var last=bodyNode.lastChild;
bodyNode.removeChild(last);
}
</script>
</head>
<body>
<input type="button" value="添加" "addButton()"/>
<input type="button" value="删除" "delButton()"/>
<input type="button" id="btn" value="按钮" />
</body>
</html>
15.js正则表达式----对于正则表达式我们能看懂语法就可以了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js正则表达式</title>
<!--
数量词：----这个一定要知道
x?:出现0次或1次
x+:出现1次或多次
x*:出现0次或多次
x{n}:x字符恰好出现n次
x{n,m}:x字符出现至少n次，但是不超过m次
定义正则格式：
var reg=/ 正则表达式/;
test():用户输入的内容是否和当前规定的正则匹配
----如果匹配，返回true，否则返回false
js中一种弱类型语言，所以只要我们的字符串内容和正则匹配就会成功
如果想让js的正则规则严谨：就加上边界匹配符号
^:以什么开头
$:以什么结束--------/[^a-zA-Z0-9]{2}$/
-->
<script>
var str="12abc";
//定义一个正则
var reg=/[a-zA-Z0-9]{2}/;
if(reg.test(str)){
alert("条件成立");
}else{
alert("条件不成立");
}
</script>
</head>
<body>
</body>
</html>
16.js的表单验证——重点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js的表单验证</title>
<!--
对于表单的验证是非常重要的：需要掌握（但是注意正则规则我们能看懂就可以了）
定义正则规则：
用户名：4-14位的数字或者字母组成
密码：6-16位的数字或者字母组成
确认密码和密码一致
邮箱的规则：
数字或者字母@数字或者字母（.cn/.com.cn/.com/...）
-->
<script>
//校验用户名
function checkUserName(){
//获取用户名的内容
var username=document.getElementById("username").value;
//定义正则规则：用户名：4-14位的数字或者字母组成
var reg=/^[a-zA-Z-0-9]{4-14}$/;
//获取id="name_span"的span标签对象
var nameSpan=document.getElementById("name_span").value;
//判断用户名的内容和正则匹配
if(reg.test(username)){
//成功：
//设置nameSpan的innerHTML属性
nameSpan.innerHTML="当前用户名可用".fontcolor("green");
return true;
}else{
nameSpan.innerHTML="当前用户名不可用".fontcolor("red");
return false;
}
}
//校验密码输入框
function checkPwd(){
//获取密码内容
document.getElementById("pwd").value;
//密码：6-16位的数字或者字母组成
var reg=/^[a-zA-Z-0-9]{6-16}$/
//获取id="pwd_span"标签对象
var pwdSpan=document.getElementById("pwd_span").value;
//开始检验
if(reg.test(pwd)){
pwdSpan.innerHTML="当前密码可用".fontcolor("green");
return true;
}else{
pwdSpan.innerHTML="当前密码不可用".fontcolor("red");
return false;
}
}
//确认密码框
function checkRePwd(){
//获取密码内容
var pwd=document.getElementById("pwd").value;
//id="repwd"密码框内容
var rePwd=document.getElementById("repwd").value;
//id="repwd_span"
var rePwdSpan=document.getElementById("repwd_span").value;
if(pwd.valueOf(rePwd)){
rePwdSpan.innerHTML="两次输入的密码一致".fontcolor("greenyellow");
return true;
}else{
rePwdSpan.innerHTML="两次输入的密码不一致".fontcolor("red");
return false;
}
}
//邮箱校验
function checkEmail(){
//获取邮箱内容
var email=document.getElementById("email").value;
//数字或者字母@数字或者字母（.cn/.com.cn/.com/...）
var reg=/^[a-zA-Z0-9+@[a-zA-Z0-9]]+(\.[a-zA-Z]{2,3}){1,2}$/;
//获取id="email_span"的span标签对象
var emailSpan=document.getElementById("email_span");
if(reg.test(email)){
emailSpan.innerHTML="当前邮箱格式可用".fontcolor("greenyellow");
return true;
}else{
emailSpan.innerHTML="当前邮箱格式不可用".fontcolor("red");
return false;
}
}
//最后需要去校验全部的表单，如果都通过，才能提交成功，否则失败
function checkAll(){
if(checkUserName()&&checkRePwd()&&checkEmail()&&checkPwd()){
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<!--
onsubmit:表单提交是否能成功：true表示成功、false表示失败
-->
<form action="backend.html" method="post" "checkAll()">
用 户 名： <input type="text" id="username" "checkUserName()"/><span id="name_span"></span>
<br />
密 码： <input type="password" id="pwd" "checkRePwd()"/><span id="pwd_span"></span>
<br />
确认密码：<input type="password" id="repwd" "checkRePwd()"/><span id="repwd_span"></span>
<br />
邮箱：<input type="text" id="email" /><span id="email_span" "checkEmail()"></span>
<br />
<input type="submit" value="注册" />
</form>
</body>
</html>
17.初识jq
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>初识jq</title>
<!--
作者：offline
时间：2019-04-04
1.Jqquery其实就是js的封装，封装js的代码库
作用：write less,do more
2.Jquery的开发步骤：
1）导入js库
2）页面加载
-->
<script>
function load(){
alert("load 111");
}
function load(){
alert("load 222");
}
//Jq的方式
//方式1：
jQuery(document).ready(function(){
alert("jQuery(document).ready(function()");)
});
//方式2：
$(document).ready(function(){
alert("jQuery(document).ready(function()");)
});
//方式3：
$(function(){
alert("jQuery(document).ready(function()")
});
</script>
</head>
<body>
</body>
</html>
对于JavaScript我们只要能掌握上面的这些点就可以了，有的需要重点掌握、有的能弄懂就可以了
扫一扫
392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
