1.引入的外部脚本中不能包含script标签。
2.JavaScript显示数据的三种方式：
(1)alert()：弹框输出
(2)document.write()：浏览器页面输出
(3)innerHTML写入到html元素
3.变量命名规则：
(1)由字母、数字和下划线构成，但不能以数字开头。
(2)变量名称对大小写敏感，且不能使用关键字命名，建议驼峰法命名。
4.数据类型为undefined的几种情况
- 变量声明但没有赋值。
var obj; alert(obj);//obj值为undefined - 获取对象中不存在的属性。
var obj; alert(obj.name);//报错信息: "Uncaught TypeError: Cannot read property 'name' of undefined" -
函数需要实参，但是调用时没有传值，形参是undefined;
-
函数调用没有返回值或者return后没有数据，接收函数返回的变量是undefined
function printNum(num){ alert(num); } var result=printNum();//调用函数未传递参数，执行函数的时候num的值是undefined alert(result); //result的值也是undefined，因为printNum()没有返回值
5.比较运算符的区别：
- 相等运算符(==)：只判断值是否相等，而不考虑数据类型是否相同。
- 严格相等运算符(===)：只有当值和数据类型都相同时才返回true。
6.JavaScript中的对象
- String字符串对象–长度属性(.length)
var str="我喜欢看NBA,最喜欢的球员是\'小学生\'库里"; //注意:字符串中出现的\'是一个字符，转义为一个单引号 console.log(str); //获取字符串的长度:，切记:所有转移符号的长度都算一个，即\'长度为1 console.log("字符串的长度="+str.length);//22 - Array数组对象–长度属性(.length)
var nameArr=["宝玉","黛玉","湘云"]; var len=nameArr.length; //获取数组的长度，因为是属性所以不是length() - Date对象
- Math对象
//常用属性 var pi=Math.PI;//返回圆周率 //常用方法 var num=Math.random();// 返回 0 ~ 1 之间的随机数。 var max=Math.max(12,34,-90,9);//返回 n个数值中的最大值。 var min=Math.min(12,34,-90,9);//返回 n个数值中的最小值。
7.JavaScript中的常用全局函数
- isNaN(param)：是数值的返回false，不是数值返回true
- parseFloat(String)：可解析一个字符串，并返回一个浮点数。该函数指定字符串中的首个字符是否是数字（开头和结尾的空格是允许的）。如果是，则对字符串进行解析，直到到达数字的末端为止（若字符串中有多个数字被空格分隔开，则只返回第一个数字），然后以数字返回该数字，而不是作为字符串。如果不是，则返回NaN。
console.log(parseFloat("66"));//66 console.log(parseFloat("199.99"));//199.99 console.log(parseFloat("1024 2048 4096"));//1024 console.log(parseFloat(" 128 "));//128 console.log(parseFloat("10年"));//10 console.log(parseFloat("今天是8号"));//NaN -
parseInt(string,radix)：可解析一个字符串，并返回一个整数。string必需，radix为基数 可选。
-
如果 string 以 “0x” 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进 制或十六进制的数字。如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。
8.JavaScript的自定义函数
使用function关键字定义函数
function 自定义函数名称(参数列表){
//函数体
}
注意:1、函数的形参直接写参数名称，不需要声明类型，即不需要写var.
2、函数的返回取决于函数体中是否有return关键字，即不是每一个函数都有返回值。
9.变量的声明周期：
JavaScript 变量的生命期从它们被声明的时候开始。
局部变量会在函数运行以后被删除，全局变量会在页面关闭后被删除。
10.JavaScript Window–浏览器对象模型(BOM)
BOM(Browser Object Model):使得JavaScript有了跟浏览器对话的能力。
window对象：
Window 对象表示浏览器中打开的窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。全局函数是 window 对象的方法。
history属性：
window.history 对象包含浏览器的历史。
window.history对象在编写时可不使用 window 这个前缀。
//history.forward() - 与在浏览器中点击向前按钮相同
<a href="javascript:window.history.forward()">前进</a>
//history.back() - 与在浏览器点击后退按钮相同
<a href="javascript:window.history.back()">后退</a>
/*
*history.go(1/-1)
*参数为1:等同于 history.forward()，
*参数为-1，等同于 history.back()
*/
<a href="javascript:window.history.go(1)">前进go</a>
<a href="javascript:window.history.go(-1)">后退go</a>
location属性:
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
//href 当前窗口正在浏览的网页地址
<a href="javascript:alert(window.location.href)">获取当前页面的URL地址</a>
//reload() 重新载入当前网址，如同按下刷新按钮
<a href="javascript:window.location.reload()">刷新</a><br />
//replace(url) 转向到url网页地址
<a href="javascript:window.location.replace('index.html')">跳转到index</a><br />
//window.location 对象在编写时可不使用 window 这个前缀。
<a href="javascript:location.replace('https://www.baidu.com')">跳转到百度</a><br />
弹框案例：
<script>
//window对象常用的弹框方法
//1、基本弹框
window.alert("只有一个确定按钮的对话框");
//2、对话框:有确定和取消两个看你，点击确定返回true，点击取消返回false
//res可以接收用户点击的返回值，从而进行后续的if判断
var res=window.confirm("确认要关闭吗?");
if(res){
alert("点击了确定按钮");
}else{
alert("点击取消按钮");
}
//3、输入框:prompt(提示信息，默认值)
var age=prompt("请输入年龄:",19);
alert("输入的年龄信息是:"+age);
</script>
代码案例：
<script>
function fun1(){
alert('选择的内容发生了变化');
}
function fun2(){
alert("触发了单击事件");
}
function fun3() {
document.getElementById("btn").innerHTML="鼠标移动到按钮上了";
}
function fun4() {
document.getElementById("btn").innerHTML="点击我试试";
}
function fun5() {
alert("键盘按下了");
}
function fun6() {
alert("获取到了焦点");
}
function fun7() {
alert("input失去了焦点");
}
function myLoad(){
alert("页面加载完毕");
}
</script>
<body onload="myLoad()">
<input id="userName" onkeydown="fun5()" onfocus="fun6()" onblur="fun7()"/>
<input id="password" type="password" />
<button id="btn" type="button" onclick="fun2()"
onmouseover="fun3()" onmouseout="fun4()">点击我试试</button>
<select id="month" onchange="fun1()">
<option>1月份</option>
<option>2月份</option>
</select>
</body>
11.JavaScript之DOM模型(文档对象模型)
DOM:Document Object Model,文档对象模型。
当网页被加载时，浏览器会创建页面的文档对象模型。
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML：
- JavaScript 能够改变页面中的所有 HTML
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
document对象
当浏览器载入 HTML 文档, 它就会成为 Document 对象。
Document 对象是 HTML 文档的根节点，Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示: Document 对象是 Window 对象的一部分，可通过 window.document 对其进行访问。
document对象常用方法
除了通过Id进行查找返回的是一个对象，其他返回的都是对象集合。
以上查找元素的方法都必须等到页面加载完毕以后才能使用，否则获取不到相应的元素。
代码案例：
<script>
function myLoad(){
//页面加载完毕之后再去获取页面上的元素，否则获取不到
//根据ID 获取元素，只能获取到唯一元素(如果有重名的ID元素，获取到的是第一个元素)
var div=document.getElementById("myDiv");
console.log(div);
//根据指定的类名称获取元素，返回集合
var list=document.getElementsByClassName("demo");
console.log("根据类样式的名称获取到的元素的集合长度是:"+list.length);
for(var i=0;i<list.length;i++){
console.log(list[i]);
}
//根据指定HTML标签名称获取元素，返回集合
var list2=document.getElementsByTagName("li");
console.log("根据标签的名称获取到的元素的集合长度是:"+list2.length);
for(var i=0;i<list2.length;i++){
console.log(list2[i]);
}
//根据指定HTML元素的name属性获取元素，返回集合
var list3=document.getElementsByName("myli");
console.log("根据标签的名称属性获取到的元素的集合长度是:"+list3.length);
for(var i=0;i<list3.length;i++){
console.log(list3[i]);
}
}
</script>
<body onload="myLoad()">
<p class="demo"></p>
<div id="myDiv" class="demo">
div
</div>
<ul class="demo">
<li>li11111111111</li>
<li name="myli">li11111111111</li>
<li>li11111111111</li>
<li name="myli">li11111111111</li>
</ul>
</body>
修改 HTML 内容和属性
修改 HTML 内容：
最简单的方法是使用 innerHTML 属性。
//修改 HTML 元素的内容的语法:
document.getElementById(id).innerHTML= HTML。
PS: 绝对不要在文档(DOM)加载完成之后使用 document.write()，这会覆盖该文档。
修改 HTML 属性：
//修改 HTML 元素属性的语法:
//方式1:
document.getElementById(id).attribute=新属性值;
//方式2:
document.getElementById(id).setAttribute(属性名，属性值);
<div id="mydiv">div</div>
var mydiv=document.getElementById("mydiv");
mydiv.innerHTML="新的div内容";
document.getElementById("myimg").src="x1.jpg";
<h1 style="color: green;" id="myh1">hello world</h1>
var h1=document.getElementById("myh1");
h1.setAttribute("class","bg");//设置属性
console.log(h1.getAttribute("class"));//获取属性class
console.log(h1.getAttribute("style"));//获取属性style
修改 HTML 元素的css：
修改 HTML 元素css的语法:document.getElementById(id).style.property=新样式
document.getElementById("myli").style.color="blue";
document.getElementById("myli").style.fontFamily="微软雅黑";
document.getElementById("myli").style.fontSize="24px";
创建新的 HTML 元素：
要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加内容。
<button type="button" onclick="createNewP()">动态添加一个元素-- appendChild</button>
<button type="button" onclick="createNewP2()">动态添加一个元素-- insertBefore</button>
<div id="div1">
<p id="p1">这是段落1</p>
<p id="p2">这是段落2</p>
</div>
<script>
function createNewP(){
var newElementP=document.createElement("p");//创建一个新的段落元素
var text=document.createTextNode("这是我新创建的段落");//新创建的文本节点
//将文本的节点添加到新创建的元素中
newElementP.appendChild(text);
//获取一个页面已经存在的元素
var div=document.getElementById("div1");
//添加新创建的元素p到已经存在的元素div中
div.appendChild(newElementP);
}
function createNewP2(){
var newElementP=document.createElement("p");//创建一个新的段落元素
var text=document.createTextNode("这是我新创建的段落p2");//新创建的文本节点
//将文本的节点添加到新创建的元素中
newElementP.appendChild(text);
//获取一个页面已经存在的元素
var div=document.getElementById("div1");
var p1=document.getElementById("p1");
//添加新创建的元素p到已经存在的元素div中,指定插入到段落P1前面
div.insertBefore(newElementP,p1);
}
</script>
替换 HTML 元素
-replaceChild()方法，总共两个参数：前一个参数是新的元素，后一个参数是旧的元素。
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<button type="button" onclick="changeElemnt()">替换p1</button>
<script>
function changeElemnt(){
var newElementP=document.createElement("p");//创建一个新的段落元素
var text=document.createTextNode("这是我新创建的段落p");//新创建的文本节点
//将文本的节点添加到新创建的元素中
newElementP.appendChild(text);
//获取要被替换的元素p1及其父元素div
var div=document.getElementById("div1");
var p1=document.getElementById("p1");
//将div中的元素p1替换为新创建的元素
div.replaceChild(newElementP,p1);
}
</script>
删除HTML元素
-removeChild()方法，父元素调用该方法删除其内部的子元素，方法的实参为子元素。
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<button type="button" onclick="deleteElement()">删除p1-方式1</button>
<button type="button" onclick="deleteElement2()">删除p1-方式2</button>
<script>
function deleteElement(){
var div=document.getElementById("div1");
var p1=document.getElementById("p1");
//从父元素div中删除子元素p1
div.removeChild(p1);
}
function deleteElement2(){
var p1=document.getElementById("p1");
//p1.parentNode:作用就是获取要删除元素p1的父元素div
p1.parentNode.removeChild(p1);
}
</script>
12.表单验证
表单验证的意义：
- 降低服务器压力
拦截不合格的数据，避免直接提交到服务器，可以显著降低服务器开销。 - 提升用户体验
早期的互联网，表单项都是非常多的，注册一个账号，经常需要填写20+个字段。而其中有一个填写不正确就要等待几十秒时间。如果有了表单验证，反馈是实时的，而且脚本还能把你定位到填写错误的具体字段。
表单验证常用事件与属性：
表单经常需要做一些非空验证、长度验证、合法性验证等。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script>
function validateName(){
//所有的表单项元素都value属性
var name=document.getElementById("userName").value;
var msg=document.getElementById("nameMsg");
if(name==null || name ==""){
msg.innerHTML="用户名不能为空!";
msg.style.color="red";
return false;
} else if(name.length<6){
msg.innerHTML="用户名长度必须为大于6的!";
msg.style.color="red";
return false;
}
msg.innerHTML="用户名可用";
msg.style.color="green";
return true;
}
function validatePwd(){
var password1=document.getElementById("password1").value;
var msg=document.getElementById("pwdMsg1");
if(password1==null || password1 ==""){
msg.innerHTML="密码不能为空!";
msg.style.color="red";
return false;
} else if(password1.length<8){
msg.innerHTML="密码的长度必须为大于8的!";
msg.style.color="red";
return false;
}
msg.innerHTML="密码合法";
msg.style.color="green";
return true;
}
function confirmPwd(){
var pwd1=document.getElementById("password1").value;
var pwd2=document.getElementById("password2").value;
var msg=document.getElementById("pwdMsg2");
if(pwd1!=pwd2){
msg.innerHTML="两次输入的密码不一致!";
msg.style.color="red";
return false;
}
msg.innerHTML="两次输入的密码一致";
msg.style.color="green";
return true;
}
function validateGender(){
var gender=document.getElementById("gender").value;
if(gender==-1){
alert("性别为必选项!");
return false;
}
return true;
}
function register(){
return validateName()&&validatePwd()&&confirmPwd()&&validateGender();
}
</script>
</head>
<body>
<h1>英雄会注册</h1>
<form action="提交.html" method="get" onsubmit="return register()">
*用户名:<input type="text" id="userName" placeholder="请输入用户名" onblur="validateName()" />
<span id="nameMsg">用户名长度至少6位</span><br />
*密码:<input type="password" id="password1" placeholder="请输入密码" onblur="validatePwd()"/>
<span id="pwdMsg1">密码长度至少8位</span><br />
*确认密码:<input type="password" id="password2" placeholder="请确认密码" onblur="confirmPwd()" />
<span id="pwdMsg2">确认密码与密码一致</span><br />
*性别:<select id="gender">
<option value="-1">请选择性别</option>
<option value="0">女</option>
<option value="1">男</option>
</select><br /><br />
<button type="submit">注册</button>
<button type="reset">重置</button>
</form>
</body>
</html>
13.JavaScript的 RegExp 对象
RegExp:是正则表达式(regular expression)的简写。
正则表达式(英语:Regular Expression，在代码中常简写为regex、regexp或RE)使用单个字符串来 描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换。
var reg=new RegExp(/正则表达式主体/,修饰符(可选));
//或更简单的方法
var reg=/正则表达式主体/修饰符(可选);
//案例:
var reg=new RegExp(/kaikeba/i);
var reg = /kaikeba/i; //此处定义了一个一个正则表达式。 kaikeba 是一个正则表达式主体 (用于检索)。
//i 是一个修饰符 (搜索不区分大小写)。
正则表达式的方法test(str)
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
var reg = /budingCode/i;
var res=reg.test("欢迎关注budingCode");
console.log(res);//true
var reg = /^[a-zA-Z]+[\u4e00-\u9fa5]*[0-9]$/;
var str="a公司拼音为9";
var res=reg.test(str); console.log(res);//true
console.log(reg.test("a你好239"));//false
常用的正则表达式校验案例
<script>
/*检查输入的身份证号是否正确*/
function checkCard(str) {
/*15位数身份证正则表达式:
* 编码规则顺序从左至右依次为6位数字地址码，6位数字出生年份后两位及日期，3位数字顺序
[1-9]\d{5} 前六位地区，非0打头
\d{2} 出生年份后两位00-99
((0[1-9])|(10|11|12)) 01-12月
(([0-2][1-9])|10|20|30|31) 01-31天
\d{3} 顺序码三位，没有校验码
*/
var arg1 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$/;
if (arg1.length == 15 && !arg1.test(arg1)) {
return false;
}
/*18位数身份证正则表达式:
* 编码规则顺序从左至右依次为6位数字地址码，6位数字出生年份后两位及日期，3位数字顺序
[1-9]\d{5} 前六位地区，非0打头
(18|19|([23]\d))\d{2} 出生年份后两位00-99
((0[1-9])|(10|11|12)) 01-12月
(([0-2][1-9])|10|20|30|31) 01-31天
\d{3}[0-9Xx] 顺序码三位，+ 一位校验码
*/
var arg2 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
if (arg2.length == 18 && !arg2.test(sfzhmcode)){
return false;
}
return true;
}
/*是否是小数*/
function isDecimal(strValue) {
var objRegExp = /^\d+\.\d+$/;
return objRegExp.test(strValue);
}
/*校验是否中文名称组成 */
function ischina(str) {
var reg = /^[\u4E00-\u9FA5]{2,4}$/;
return reg.test(str);
}
/*校验是否全由8位数字组成 */
function isNum(str) {
var reg = /^[0-9]{8}$/;
return reg.test(str);
}
/*校验电话码格式 :座机和手机*/
function isTelCode(str) {
var reg = /^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/;
return reg.test(str);
}
/*校验手机号*/
function isPhoneNum(str) {
//如果你要精确验证手机号码，那个你可以使用第一个正则。这是根据电信，移动，联通目前发行的号码来的。验证比较精确。
var reg = /^1[3|4|5|7|8][0-9]{9}$/;
// 如果因为现有的号码不能满足市场需求，电信服务商会增大号码范围。所以一般情况下我们 只要验证手机号码为11位，且以1开头。
var reg = /^^1[0-9]{10}$$/;
return reg.test(str);
}
/*校验邮件地址是否合法 */
function IsEmail(str) {
var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
return reg.test(str);
}
/*检查输入的URL地址是否正确 */
function checkURL(str) {
if(str.match(/http(s)?:\/\/[\w.]+[\w\/]*[\w.]*\??[\w=&\+\%]*/i) == null)
return false;
} else {
return true;
}
}
</script>
13.JavaScript案例：
（1）全选/全不选按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <title>全选</title> <script>
function myAll(){
var all=document.getElementById("all");
var oneList=document.getElementsByName("one");
for(var i=0;i<oneList.length;i++){
//把每一个的check状态都保持跟多选一致
oneList[i].checked=all.checked;
}
}
function myOne(){
var all=document.getElementById("all");
var oneList=document.getElementsByName("one");
for(var i=0;i<oneList.length;i++){
if(oneList[i].checked==false){
//只要有一个没选，全选按钮就为false
all.checked=false;
return;
}
}
//每一个都选了，全选按钮就为true
all.checked=true;
}
</script>
</head>
<body>
<table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%" height="180px">
<tr>
<th>全选<input id="all" type="checkbox" onclick="myAll()"/>
</th> <th>序号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>总计</th> </tr>
</tr>
<tr>
<td><input name="one" type="checkbox" onclick="myOne()"/></td>
<td>1</td>
<td>小熊饼干1</td>
<td>¥125</td>
<td>1</td>
<td>¥125</td>
</tr>
<tr>
<td><input name="one" type="checkbox" onclick="myOne()"/></td>
<td>1</td>
<td>小熊饼干2</td>
<td>¥125</td>
<td>1</td>
<td>¥125</td>
</tr>
<tr>
<td><input name="one" type="checkbox" onclick="myOne()"/></td>
<td>1</td>
<td>小熊饼干3</td>
<td>¥125</td>
<td>1</td>
<td>¥125</td>
</tr>
</table>
</body>
</html>
384
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
