文章目录
javaScript
js基本概念：
概念：javascript是一种运行在浏览器的脚本语言，简称js
js的作用主要体现在下列三个方面：
1、在客户端继续表单数据验证，保证提交到服务器的数据是有效合法的
2、通过js可以实现一些网页特效
3、通过js可以发送ajax请求
没有js以前：
有了js以后：
js在哪编写：
js本身可以出现在网页中的任何位置，但一般根据需求，主要在两个地方
1、如果需要先执行js，就一般写在<head>中用<script>标记包含
<head>
<script>
alert("弹出消息...")
</script>
</head>
2、如果需要先加载页面，再执行js，那么就把js写在body的尾部
<body>
<script>
alert("弹出消息...")
</script>
</body>
js的分类：
1、行内js
/*行内js代码写在标签内部，它的功能仅对当前标签有效*/
<input type="button" value="anniu" onclick="alert("ok")">
2、内部js
/*内部js写在网页<head>标签中，对当前页面的所有标签都有效*/
<script>
funtion show(){//函数，相当于方法
alert("消息框")
}
</script>
<input type="button" value="anniu" onclick="show()">
3、引入js
/*将js写在一个单独的js文件中，对所有引入js文件的网页都有效*/
js文件-----------------------------------------*------
funtion show(){//函数，相当于方法
alert("消息框")
}
-----------------------------------------------------
引入js： <script src="script.js"></script>
调用js：<input type="button" value="anniu" onclick="show()">
js的语法：
1、常用方法：
alert("heelo")-------------------------------弹出消息框
console.log("内容")--------------------------控制台输出语句
document.write("内容")----------------------将内容输出打印在浏览器中
2、在js中定义变量：
推荐使用let声明变量
1、val
2、let
3、const
-----------------------------------------------------------
1、js中定义变量时，没有数据类型，统一用val声明，在赋值时才确定数据类型
2、js中变量在复制以后可以改变变量数据类型
3、let与val的用法一样,但let的语法更为严谨
4、const声明的是一个常量，必须声明时赋值，，并且值不允许改变
---声明变量val：
val msg;/*在赋值时才能确定数据类型*/
msg="jack";
alert(msg);
msg=1234;/*可以改变数据类型*/
alert(msg)
---声明变量let：
let msg="jack";
alert(msg);
msg=1234;
alert(msg);
---声明变量const:
const msg="1234";/*有点像java中的final*/
js中基本数据类型：
1、number--------数值类型，不论整数、小数都是number类型
2、string--------字符串类型，不区分单双引号
3、boolean-------布尔类型
4、null----------空类型
5、undefined-----如果变量定义以后没有初始化就是这种类型
/*所有数据类型都是小写*/
Math.ceil(25.5);//26----------------向上取整
模板类型
let name="刘文君";
let str=`我叫${name},来自中国`;
模板里面可以直接插入要拼接的字符串，简化了用 + 号
js函数：
typeof---------------判断当前数据类型
let s=123;
let msg=typeof(变量);
js运算符：
1、赋值运算符 =
2、比较运算符 > >= < >= == === !=
==：它在比较时，如果检测到两个数据类型一致，会先转换类型再比较
===：它在比较时，如果检测到两个数据类型不一致，直接返回fasle，不会转换
3、算数运算符 + - * % /
%:
4、一元运算符 ++ --
5、逻辑运算符 || &&
6、二元运算符 表达式?结果1:结果2
表达式的用法，几乎与java中一模一样，只有一些小区别：
区别1：js中比较两个字符串的值直接用==比较
区别2：js中两个整数相处(5/2=2.5)结果是一个小数，它可以等到小数类型结果
js循环结结构：
1、while
2、for
3、do...while
用法跟语法与java中一模一样，只是声明变量时，需要用val或let声明
js逻辑判断结构：
1、if
2、if...else
3、if...elseif...else
4、嵌套if
5、switch
用法跟语法与java中一模一样，只是声明变量时，需要用val或let声明
js中的对象：
1、数组对象
作用：用于存储一组数据（即使类型不同也可以存储)
1、数组的创建
/*先声明数组再赋值*/
let arrs =new Array();-----声明数组，不用声明数组长度
arrs[0]=123;-----通过下标向数组中存放数据
arrs.push(456);----向数组的尾部追加数据
/*创建数组直接赋值*/
let arrs=["jack","andi","chris"];
var msg=arrs.join();/*拼接字符串*/
alert(msg);
2、数组的重要方法与属性
1、length-----------获得数组长度
val msg=arrs.length
2、push()-----------向数组尾部添加数据
arrs.push("aaaa")
3、reverse()--------反转数组的数据（反向排列）
arrs.reverse();
4、join()-----------用于将数组中的数据拼接成一个字符串
let msg=arrs.join();
3、数组的遍历：
let arrs = [ 111,222,333,444,555];
1、传统的for循环：
for(let i=0;i<arrs.length;i++){
console.log(arrs[i]);
}
2、for循环增强
for(let k in arrs){//取到数组中每个数据的下标
console.log(arrs[k]);
}
3、使用lambda
arrs.forEach(k=>conslose.log(k));/*js中lambda是用=>表示*/
2、日期对象~Date
作用：执行与日期相关的操作
1、日期对象的创建
let date = new Date();
2、日期对象的重要方法
let year=date.getFullYear();----获得年份
let month=date.getMonth()+1;----获得月份(0-11)
let day=date.getDate();----获得天
let week=date.getDay();----获得星期几
let hour=date.getHours();----获得小时
let minutes=date.getMinutes();----获得分钟
let second=date.getSeconds();----获得秒
拼接字符串方法1：
let msg=year+"年"+month+"月"+day+"日"
拼接字符串方法2：
let msg=`${year}年${month}月${day}日`;
3、实现网页中时间的跳动
1、在body中创建div
<div id="mydiv"></div>
2、创建函数
<script>
//调用函数------编写一个定时函数interval
setInterval("show()",1000);
function show(){
let date = new Date();
//这样获取的日期只会显示一位数，使用padStart(2,'0')方法
//将会判断当前值的长度不够两位就会自动补0上去
let year=date.getFullYear();----获得年份
let month=(date.getMonth()+1).toString().padStart(2,'0');----获得月份(0-11)
let day=date.getDate().toString().padStart(2,'0');----获得天
let hour=date.getHours().toString().padStart(2,'0');----获得小时
let minutes=date.getMinutes().toString().padStart(2,'0');----获得分钟
let second=date.getSeconds().toString().padStart(2,'0');----获得秒
let msg=year+"年"+month+"月"+day+"日";
var mydiv=document.getElementByid("mydiv");---根据id获取到div
mydiv.innerHTML=msg;--------------将msg写到div里
}
<script>
3、数学对象
作用：用来执行一组与数学运算的有关操作
Math.PI----------------------------获取圆周率
Math.floor(12.34)------------------强制取整
Math.random()----------------------产生一个介于0-1之间的随机数
lat val=Math.floor(Math.random()*10);----获得一个0-10之间的整数
4、BOM对象
BOM对象：Browser Object Model(浏览器对象)，它由三部分构成
1、window：它表示整个浏览器窗口
2、location：它表示地址栏（本身也是window的一部分）
3、history：它表示历史窗口（也是window的一部分）
1、window的重要方法
/*windows对象的所有方法，*/
window.alert("弹出消息");----------普通弹框
confirm("确认消息")-----------------带确认的消息框
//let flag=confirm("你确定吗?")；---确定返回true
close();---------------------------关闭当前窗口
//if(confirm("你确定要关闭窗口吗")){
// close();
//}
open()------------------------------打开新窗口，在新窗口显示指定内容
1、open("http://www.sina.com.cn");-------在新窗口打开新浪网页
2、open("new.html");---------------------在新窗口打开指定页面
3、open("1.jpg");-------------------------在新窗口中显示图片
setTimeout("函数名()",毫秒数);----------------延迟多少秒后调用一次函数
江汉区水塔街道江汉路步行街109号肯德基对面荟悦酒店3楼前台
//只会调用一次
function show(){
alert(123);
let t=setTimeout("show()",1000);-----递归调用，达到与计时器同样效果
}
setInterval("函数名()",毫秒数);---------------每间隔多少秒后调用一次
//重复调用
clearTimeout("被延时器赋值的变量名");----------清除延时器
//let v=setTimeout("show()",1000);设置延时器并赋值给变量v
//clearTimeout(v);清除延时器
clearinterval("被计时器赋值的变量名")----------清除计时器
//let a=setInterval("show()",1000);设置延时器并赋值给变量v
//clearInterval(a);清除延时器
disabled----------------该属性用于让控件禁止使用
控件.disabled=true;//禁用控件
2、Location的重要方法
URL：称为统一资源定位符
location.href="xxx.com"----------修改地址栏的地址，跳转到指定的页面
location.reload();----------------刷新页面
3、history的重要方法
前提条件：页面一定要发生跳转，历史按钮才有用
history.forward();------------------------前进，进入到下一个页面
//history.go(1);
history.back();---------------------------后退，返回到上一个页面
//history.go(-1);
4、常用的事件
onclick()----------鼠标点击事件，会马上触发
onchange()---------当值发生改变时会触发的事件
5、Dom对象
Dom:Document Object Model(文档对象模型)
作用：获取页面上的元素（组件）
1、dom对象的重要方法
1、根据元素id名，获取一个控件
let obj=documtion.getElementById("id名称");
//如果有多个相同的id名称，只会取得第一个
2、根据元素的name名称，获取一组控件（一个元素也是一个数组）
let names=documtion.getElementsByName("name名称");
//names是一个数组
alert(names[0].value);//通过下标取到元素值
3、根据类样式名称，获得一组元素（一个元素也是一个数组）
let msgs=documtion.getElementsByClassName("类样式名称");
//msgs也是一个数组
for(let i=0;i<msg.length;i++){
alert(msg[i].value);
}
4、根据元素的标签类型，获得一组元素（一个元素也是一个数组）
let tags=documtion.getElementsByTagName("标签名称");
//tags也是一个数组
for(let i=0;i<tags.length;i++){
let msg=div[i].innerHTML;
alert(msg);
}
2、表单中的输入控件赋值与取值
value:只用于给输入控件取值、赋值
let obj=docunment.getElementById("msg");
obj.value="值";--------给表单中的输入控件赋值
let value=msg.value;---获取文本框控件的值
//默认情况下，从页面取到的所有值都是string类型，如果js中要进行算术运算，应该先转换类型
let val=paresInt("字符串");
//readonly只能读，不能改
//disabled一样的效果，不能改变
//vaue本身属于控件中的内容，即使输入新的内容之前的内容也不会消失
//placeholder它是输入控件为空时的提示信息，当输入新的内容，提供信息会消失
3、给容器组件赋值、取值
1、给容器组件赋值
组件.innerText=值;
组件.innerHTML=值;
//innerTHML=<input="txt" value="文本框">会转换成标签显示
区别：使用innerTxet给容器组件赋值时，不会解析字符串的内容，所有内容都会显示出来
innerTHML给容器赋值时，会解析字符串的内容，如果包含标签代码，系统转换对应的标签
2、获取容器的值
let msg=组件.innerText;
let msg=组件.innerHTML;
实际应用中，innerHTML使用更多
4、通过DOM对象设置样式
在js中直接设置样式的语法
DOM对象.style.样式名称="";
div.style.color="red";
如果样式名称中有横线，则去掉横线，将横线的后首字母大写
mydiv.style.fontSize="50"px;//设置字体大小
mydiv.style.paddingLeft="20"px;//设置内边距
5、设置指定类样式
设置类样式的语法：
dom对象.className="类样式名称";
function show(){
//获取对象
let div=docunment.getElementById("mydiv");
//设置指定类样式
mydiv.className="myclass";
}
6、DOM对象关联事件
事件：指在控件上出发的特定操作
1、直接在控件上响应事件
<input type="button" value="事件1" onclick="alert（直接响应）">
2、事件发生时，调用指定函数
<input type="button" value="事件2" onclick="show()">
3、给控件动态关联事件
<input type="button" value="事件3" id="btn">
<script>
//获得DOM对象
let btn=docunment.getElementById("btn");
//关联事件
btn.onclike=function(){
alert("按钮被点击了...")
}
</script>
js函数（是否带参）
格式如下：
1、带一个参数的函数
function 函数名（无参名称）{
}
要求：
1、在js中可以不用声明数据类型，只有在传递参数，才能确定形参的数据类型
2、如果参数是数值类型，可以直接传递，如果是字符串类型，需要在两边加上''
2、带返回值的函数
function 函数名（）{
return 数据类型；
}
注意：在js不论函数有没有返回，都不用在函数名称前声明返回类型，直接返回即可
js中的常见事件
*点击相关的事件
1、onclick---------------鼠标单击事件
2、ondblclick------------鼠标单击事件
*鼠标相关的事件
1、onmouseover-------------鼠标悬停事件
2、onmouseout--------------鼠标离开事件
3、onmousemove-------------鼠标移动事件（在指定区域鼠标移动一次触发一次）
*按键相关的事件
1、onkeydown-------------键被按下事件（先触发事件，后显示内容）
<input type="text" oneKeydown="return one()">
<script>
//设置输入框中只允许输入数字
function one(){
//获得当前按下键的ASCII 0--48 9--57
var code=event.KeyCode;
if(code<48 || code>57){
return false;
}else{
return true;
}
}
</script>
2、onKeyup-------------键弹起来的事件（先显示内容，再触发事件）
3、onKeypress----------键按下并且弹起后的事件
*值改变事件
1、onchange------------内容发生改变改变时（失去焦点时判断内容是否改变）
*焦点事件
1、onblur--------------失去焦点时触发
2、onfocus-------------获得焦点时触发
//控件.focus();让控件获得焦点
//控件.select();选中控件所有内容
*表单提交事件
1、onsumbit()----------表单提交事件（先处理提交事件，再执行页面跳转）
*窗口滚动条事件
1、window.onscroll------------滚动条滚动事件
2、document.socumentElement.scrollTop--滚动高度
3、xxx.style.display="black"---显示
4、xxx.style.display="none"----隐藏
js字符串对象
属性与方法
/*js不区分单双引号*/
属性：
1、length-------------------获取字符串长度
方法：
2、trim()-------------------去掉字符串两边的空格
3、toUpperCase---------------将小写转换大写
4、toLowerCase()-------------将大写转换小写
5、substr(开始下标，几个长度)------------------截取字符串
//指定下标指定长度开始截取
6、substring(开始下标，结束下标)---------------截取字符串
//指定下标开始，指定结束（包含开始，不包含结束）
7、msg.charAt(0)------------------------获取指定字符
8、msg.replace("world","世界")---------替换字符串
9、indexof--------------------获得字符串第一次出现的位置
10、lastIndexof--------------获得最后一次出现的位置
11、split---------------------分割字符串
js的正则表达式
js正则表达式格式要求：
1、以 /^开始
2、以 $/结束（不能带引号）
let regex=/^ jack $/; //内容必须是jack
let flag=regex.test("字符串");
\d-----------代表任意的一个数值
\d{3}--------代表任意的3个数值
\d{3,5}-------代表任意的3~5个数值
[0-9]--------代表任意的1个数值
[3-5]--------代表3-5之间的1个数值
(3|5|9)------代表从3,5,9中选择一个数值
\w-----------代表任意的一个数值或字母
[a-z]-------代表一个小写字母
[A-Z]-------代表一个大写字母
[a-zA-Z]-----不区分大小写
[a-z]{3,5}代表任意数值的3到5个数值
\D-------代表不是一个数值
\W-------代表既不是字母也不是数值
+----------出现1~多次
*----------出现0~多次
?----------出现0~1次
.-----------通配任意的一个符号，但不能为空
\.----------只是表示小数点
1（3|5|6|7|8|9）\d{9}----------手机号
\d{17}(\d|x)-------------------身份证
\w+@{2}\.(com.cn)--------------邮箱
^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$ ----邮箱
/^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/----手机
js表单验证
用户名不为空
//用户名验证
let userState = false;//验证状态
let userverify = function () {
//验证用户名
let username = $userName.val().trim();
if (username.length === 0) {
$(".spanusername").text('用户名不能为空');
} else {
$(".spanusername").text('');
userState = true;
}
}
//失去焦点触发
$userName.on('blur', userverify);
邮箱
//邮箱验证
let emailState = false;//验证状态
let emailverify = function () {
//验证
let emailValue = $useremail.val().trim();
if (/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/.test(emailValue)) {
emailState = true;
$(".spanuseremail").text('');
} else {
$(".spanuseremail").text('邮箱格式错误！');
emailState = true;
}
}
//失去焦点触发
$useremail.on('blur', emailverify);
手机
//电话验证
let phoneState = false;//验证状态
let phoneverify = function () {
let phoneValue = $userphone.val().trim();
if (/^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/.test(phoneValue)) {
phoneState = true;
$(".spanuserphone").text('');
} else {
$(".spanuserphone").text('手机格式错误！');
phoneState = true;
}
}
//失去焦点触发
$userphone.on('blur', phoneverify);
t(emailValue)) {
emailState = true;
$(“.spanuseremail”).text(‘’);
} else {
$(“.spanuseremail”).text(‘邮箱格式错误！’);
emailState = true;
}
}
//失去焦点触发
$useremail.on(‘blur’, emailverify);
#### 手机
```js
//电话验证
let phoneState = false;//验证状态
let phoneverify = function () {
let phoneValue = $userphone.val().trim();
if (/^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/.test(phoneValue)) {
phoneState = true;
$(".spanuserphone").text('');
} else {
$(".spanuserphone").text('手机格式错误！');
phoneState = true;
}
}
//失去焦点触发
$userphone.on('blur', phoneverify);
260
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
