三、Javascript笔记

韦重阳

2024-04-24 帮助1人

一、概念和用法

1.4.1window.alert("hello");

1.4.2document.write("hello");

1.4.3使用innerHTML写入到html元素

1.4.4console.log写入到控制台

3.parseInt(string,radix)

2.document.getElementById()

3.document.getElementsByClassName()

4.document.getElementsByTagName()

5.document.getElementsByName()

一、概念和用法

1.1 概念

JavaScript 是脚本语言，是一种解释性脚本语言（代码不进行预编译）

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易入门。

1.2 作用

1 、为网页添加各式各样的动态功能 ,

2 、为用户提供更流畅美观的浏览效果。

通常 JavaScript 脚本是通过嵌入在 HTML 中来实现自身的功能的。

1.3用法

1.3.1html中的任意位置

可以在head，可以在body，没有硬性要求，但要写在<script>里

1.3.2外部JS文件中

在html中用script引用，src是目录

<script type="text/javascript" src="js/js1.js"></script>

1.3.3标签属性中
<a href="Javascript:alert("")">登录</a>

1.4显示数据的方式

1.4.1window.alert("hello");

会在弹窗中显示hello

1.4.2document.write("hello");

将hello写到html文档中。即在网页页面显示出来

1.4.3使用innerHTML写入到html元素

从div1中输出

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
<script>
document.getElementById("div1").innerHTML="hello world"
</script>

学新通

1.4.4console.log写入到控制台

二、基本语法

2.1注释

单行注释以//开头
多行注释以/*开始以/*结束

//我是单行注释
/*
* 我
* 是
* 多行注释
*/

2.2变量

和java不同的是，变量全部以var声明

var teacher;
teacher = "张三";
var x;
x = 5;
var y = 6;

命名规则：

1.必须以字母或$和_开头
2.区分大小写
3.不能用关键字保留字

2.3语句

分支

循环

for (var i=0;i<5;i ) {
document.write(names[i]);
}

2.4数据类型

1.字符串String

var String = "英雄联盟";

2数字Number

可以用科学计数法e书写

var x = 6;
var y = 6e8;//6000000
var z = 6e2;//0.02

3.布尔Boolean

var isRight = true;

4.空Null

var friend = null;

5.未定义Undefined

四种情况会undefined

1.变量声明且未赋值

var obj;

2.对象不存在属性时

var obj;
alert(obj.name);

3.函数需要实参，但是调用时没有传值，形参是undefined
4.函数调用没有返回值或者return后没有数据，接收函数返回的变量是undefined

6独一无二的值Symbol

2.5动态数据类型

var num = 6;//num现在是number类型
num = "hello";//num现在是String类型

2.6运算符

算数运算符： - * / % 、、 --

赋值运算符： = 、 = 、 -= 、 *= 、 /= 、 %=

字符串的连接符：

逻辑运算符： && || ！

条件运算符：？：

比较运算符： == 、！ = 、 > 、 < 、 >= 、 <=

特别的

比较运算
===	绝对等于（值和类型均相等为true）
!==	不绝对等于（值和类型有一个不相等，或两个都不相等为true）

2.7对象

1.String

//长度
<script>
var you = "你不是\'单身狗\'?"
console.log(you.length);
console.log(you)
</script>

学新通 q其中\是转义字符，不算字符数，总长度为9

其他属性和java差不多

2.Array

声明数组

<script>
//第一种
var names = new Array();
names[0]="张三";
names[1]="李四";
names[2]="王五";
names[3]="赵六";
names[4]="孙七";
for (var i=0;i<5;i ) {
document.write(names[i]);
}
//第二种
var students=new Array("小一","小二","小三");
//第三种
var school=["高中","小学"];
</script>

3.Date

var date1 = new Date(); //当前日期
var date2 = new Date(milliseconds);//从1970年1月1日到所需时间的毫秒
var date3 = new Date(dateString); //符合日期格式的字符串
var date4 = new Date(year, month, day,
hours, minutes, seconds,
milliseconds);//年月日时分秒毫秒
//月份取值0-11

常用方法

方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31) 。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6) 。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23) 。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59) 。
getMonth()	从 Date 对象返回月份 (0 ~ 11) 。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59) 。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31) 。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setHours()	设置 Date 对象中的小时 (0 ~ 23) 。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59) 。
setMonth()	设置 Date 对象中月份 (0 ~ 11)

4.Math

1.Math.PI;返回圆周率

2.Math.random();返回0-1的随机值

3.Math.max(12,34,-90.9);返回最大值

4.Math.min(12,34,-90,9);返回最小值

2.8函数

1.isNaN(param);

是数字返回false，不是返回true,NaN 意思是not a number不是数字

2.parseFloat(String)

解析字符串，如果首位是数字则对字符串进行解析，返回数字类型

parseFloat（“”10年”）；//10
parseFloat（“”1222 1212”）；//1222

3.parseInt(string,radix)

解析字符串返回整数，radix设置进制

没有设置进制时：
如果 string 以 "0x" 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。
如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。
如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。

字符串中只会返回第一组数字（1022 121）1022
开头结尾可以是空格

2.9自定义函数

function 函数名（参数）{}

function num(num1,num2){
console.log(num1 num2);

}

2.10匿名函数

var fun1=function(){
console.log("fun1");
}
var fun2=function(a,b){
console.log("fun2");
}
var fun3=function(a,b){
return a b;
}
fun1();
fun2(1,2);
var num2=fun3(1,2);
console.log(num2);

学新通

2.11作用域

局部变量，函数中的变量是局部变量，只能在此函数中用

全局变量，函数外声明的变量，可以被所有脚本调用

生命周期，生命周期从被声明开始，局部变量函数运行后被删除，全局变量页面关闭后被删除

2.12自定义对象

//定义对象
var student={
name:"张三",
age:18,
run:function(){
console.log("张三");
}
};
//访问属性
var name6=student.name;
var age=student["age"];
console.log(name6);console.log(age);
//调用方法
student.run();

2.13window对象

1.常用属性

学新通

2.常用方法

alert警告弹窗
confirm确认框
prompt提示用户输入

<script>
//window对象常用的弹框方法
//1、基本弹框
window.alert("只有一个确定按钮的对话框");
//2、对话框：有确定和取消两个看你，点击确定返回true，点击取消返回false
var res=window.confirm("确认要关闭吗？");
if(res){
alert("点击了确定按钮");
}
else{
alert("点击取消按钮");
}
//3、输入框：prompt(提示信息，默认值)
var age=prompt("请输入年龄：",19);
alert("输入的年龄信息是：" age);
</script>

open打开新窗口
close关闭窗口

<a href="javascript:window.open('https://www.百度.com')">打开百度</a>
<a href="javascript:window.open('index.html')">打开-index</a>
<a href="javascript:window.close()">关闭当前页面</a>

setTimeout（“方法名”，毫秒）指定毫秒数后调用函数
clearTimeout取消上面设定
setInterval“方法名”，毫秒）指定周期（单位毫秒）调用函数
clearInterval取消上面设定

定时器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//定时器
function showTime(){
var time = new Date();
var year=time.getFullYear();
var month=time.getMonth();
var day=time.getDate();
var hour=time.getHours();
var minute = time.getMinutes();
var second = time.getSeconds();
document.getElementById("today").innerHTML
=year "年" month "月" day "日，" hour "时" minute "分" second "秒";
}
window.setInterval("showTime()",1000);
</script>
</head>
<body>
<div id="today"></div>
</body>
</html>

学新通

3.history

浏览器历史，

history.back() - 与在浏览器点击后退按钮相同

history.forward() - 与在浏览器中点击向前按钮相同

history.go(1/-1)-- 参数为 1 ：等同于 history.forward() ，参数为 -1 ，等同于 history.back()

<a href="javascript:window.history.forward()">前进</a>
<a href="javascript:window.history.back()">后退</a>
<a href="javascript:window.history.go(1)">前进go</a>
<a href="javascript:window.history.go(-1)">后退go</a>

和浏览器左上的功能一致

4.location对象

window.location 对象用于获得当前页面的地址 (URL) ，并把浏览器重定向到新的页面。

replace(url) 转向到 url网页地址
reload() 重新载入当前网址，如同按下刷新按钮

<a href="javascript:alert(window.location.href)">获取当前页面的URL地址</a>
<a href="javascript:window.location.reload()">刷新</a><br />
<a href="javascript:window.location.replace('index.html')">跳转到index</a><br />
<a href="javascript:location.replace('https://www.百度.com')">跳转到百度</a><br />

2.14事件

学新通

onsubmit：点击了注册按钮时

onfocus：将鼠标焦点点击到元素时触发，比如为了输入文字将焦点确定在文本框中时

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function fun1(){
alert('内容发生了变化');
}
function fun2(){
alert('触发了点击事件');
}
function fun3(){
alert('键盘按下');
}
</script>
</head>
<body>
<select id="month" onchange="fun1()">
<option>1月份</option>
<option>2月份</option>
</select>
<input type="button" onclick="fun2()" value="button"/>
<input type="text" onkeydown="fun3()" />
</body>
</html>

2.15document

1.document对象

当浏览器载入 HTML 文档, 它就会成为 Document 对象。

2.document.getElementById()

根据id获得所有该id的第一个对象的引用

<head>
<meta charset="UTF-8">
<title></title>
<script>
function fun1(){
var pp=document.getElementById("pp");
console.log(pp)
}
</script>
</head>
<body>
<p id="pp">ppp</p>
</body>

学新通

3.document.getElementsByClassName()

返回拥有相同class类名称元素的集合

<head>
<meta charset="UTF-8">
<title></title>
<script>
function fun1(){
var us=document.getElementsByClassName("us");
for(var i=0;i<us.length;i ){
console.log(us[i]);
}
}
</script>
</head>
<body>
<p id="pp" class="us">ppp</p>
<ul class="us">
<li>ffdsfds</li>
<li>ds</li>
<li>das</li>
<li>dsa</li>
</ul>
</body>

4.document.getElementsByTagName()

返回拥有相同<标签>名的对象集合

5.document.getElementsByName()

返回拥有相同name的对象集合

6.修改属性

document.getElementById(id).innerHTML=新的 HTML。
方式1：document.getElementById(id).attribute=新属性值 //修改属性
方式2：document.getElementById(id).setAttribute(属性名，属性值);
document.getElementById(id).style.property //修改css
document.getElementById("myli").style.color="blue";

PS ：

绝对不要在文档 (DOM) 加载完成之后使用 document.write() 。这会覆盖该文档。

7.添加节点，插入元素

<head>
<meta charset="UTF-8">
<title></title>
<script>
function creatNewP(){
var newEP=document.createElement("p");//创建新元素节点
var text=document.createTextNode("appendChild插入");//新建文本节点
newEP.appendChild(text);//将文本节点添加到元素节点
var div=document.getElementById("div1");//获取要插入的元素
div.appendChild(newEP);//将新的元素p插入到节点
}
function creatNewP2(){
var newEP=document.createElement("p");//创建新元素节点
var text=document.createTextNode("insertBefore插入");//新建文本节点
newEP.appendChild(text);//将文本节点添加到元素节点
var div=document.getElementById("div1");//获取要插入的元素
var p=document.getElementById("p1");
div.insertBefore(newEP,p);//将新的元素p插入到节点
}
</script>
</head>
<body>
<div id="div1" >
<button onclick="creatNewP()">1</button>
<button onclick="creatNewP2()">2</button>
<p id="p1">第一</p>
</div>
</body>

学新通

8.删除元素，替换元素

function replaceE(){
var newEP=document.createElement("p");//创建新元素节点
var text=document.createTextNode("替换");//新建文本节点
newEP.appendChild(text);//将文本节点添加到元素节点
var div=document.getElementById("div1");//获取元素
var p=document.getElementById("p1");
div.replaceChild(newEP,p);//替换成新元素
}
function deleteE1(){
var div=document.getElementById("div1");//获取元素
var p=document.getElementById("p1");
div.removeChild(p);//通过父元素删除其中的p
}
function deleteE2(){
var p=document.getElementById("p1");
p.parentNode.removeChild(p);//找到父元素然后删除
}

2.16正则表达式

1.语法

语法： var reg=new RegExp(/正则表达式主体/,修饰符(可选));
或更简单的方法 var reg=/正则表达式主体/修饰符(可选);
案例： var reg=new RegExp(/kkk/i);
var reg = /kkk/i; //此处定义了一个一个正则表达式。
kkk 是一个正则表达式主体 (用于检索)。
i 是一个修饰符 (搜索不区分大小写)。

修饰符

学新通

查找某个范围内的字符

学新通

特殊含义

学新通

更多查看正则表达式手册

2.经典案例

<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位数字地址码，8位数字出生年份日期码，3位数字顺序码，1 位数字校验码（可为x）。
* [1-9]\d{5} 前六位地区，非0打头
* (18|19|([23]\d))\d{2}
* 出身年份，覆盖范围为 1800-3999 年
* ((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>

3.全选全不选

<head>
<meta charset="UTF-8">
<title></title>
<style>
td{
text-align: center;
}
th{
text-align: center;
}
</style>
<script>
//点击全选，小选项跟着改变
function myAll(){
var all=document.getElementById("all");
var oneList=document.getElementsByName("one");
for(var i=0;i<oneList.length;i ){
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){
all.checked=false;
return;
}
all.checked=true;
}
}
</script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0" width="300px" height="160" >
<tr>
<th>全选<input id="all" type="checkbox" onclick="myAll()"/></th>
<th>序号</th>
<th>名称</th>
<th>单价</th>
</tr>
<tr><
<td><input name="one" type="checkbox" onclick="myOne()"/></td>
<td>1</td>
<td>小熊饼干</td>
<td>￥12</td>
</tr>
<tr><
<td><input name="one" type="checkbox" onclick="myOne()"/></td>
<td>1</td>
<td>小熊饼干</td>
<td>￥12</td>
</tr>
<tr><
<td><input name="one" type="checkbox" onclick="myOne()"/></td>
<td>1</td>
<td>小熊饼干</td>
<td>￥12</td>
</tr>
</table>
</body>

学新通

4.动态增加删除表格的一行

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
td{
text-align: center;
}
th{
text-align: center;
}
</style>
<script>
//遍历表格
function bianli(){
var tab=document.getElementById("tab1");
var rowArr= tab.rows;
for(var i=0;i<rowArr.length;i ){
var row = rowArr[i];
var tdArr = row.cells;
var str="";
for(var j=0;j<tdArr.length;j ){
var tdd = tdArr[j];
str =tdd.innerHTML "..." tdd.cellIndex "======";
}
console.log("行的下标" row.rowIndex "，列：" str);
}
}
function addRow(){
var tab=document.getElementById("tab1");
var newRow=tab.insertRow();
var newTd1=newRow.insertCell();
var newTd2=newRow.insertCell();
var newTd3=newRow.insertCell();
var newTd4=newRow.insertCell();
newTd1.innerHTML="1";
}
function delRow(btn){
var tab=document.getElementById("tab1");
var trIndex=btn.parentNode.parentNode.rowIndex;
tab.deleteRow(trIndex);
}
</script>
</head>
<body>
<button type="button" onclick="bianli()">遍历</button>
<button type="button" onclick="addRow()">添加一行</button>
<table id="tab1" border="1" cellpadding="0" cellspacing="0" width="300px" height="160" >
<tr>
<th>序号</th>
<th>名称</th>
<th>单价</th>
<th>删除</th>
</tr>
<tr><
<td>1</td>
<td>小熊饼干</td>
<td>￥12</td>
<<td><button onclick="delRow(this)">删除</button></td>
</tr>
<td>1</td>
<td>小熊饼干</td>
<td>￥12</td>
<td><button onclick="delRow(this)">删除</button></td>
</tr>
<td>1</td>
<td>小熊饼干</td>
<td>￥12</td>
<td><button onclick="delRow(this)">删除</button></td>
</tr>
</table>
</body>
</html>

5.选择省，显示对应市（省市级联）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<select onchange="changeCity(this.value)">
<option>请选择省份</option>
<option value="0">北京</option>
<option value="1">浙江</option>
<option value="2">河北</option>
<option value="3">广东</option>
</select>
<select id="city"></select>
</head>
<body>
</body>
</html>
<script>
var cityList=new Array();
cityList[0] = new Array("朝阳区", "海淀区", "东城区", "西城区");
cityList[1] = new Array("杭州市", "嘉兴市", "宁波市", "绍兴市");
cityList[2] = new Array("石家庄市", "唐山市", "承德市", "张家口市");
cityList[3] = new Array("广州市", "惠州市", "深圳市", "茂名市");
function changeCity(val){
var city=document.getElementById("city");
city.options.length=0;
var arr=cityList[val];
for(var i=0;i<arr.length;i ){
var option = document.createElement("option");
option.innerHTML=arr[i];
option.value=arr[i];
city.appendChild(option);
}
}
</script>

这篇好文章是转载于：学新通技术网

三、Javascript笔记

一、概念和用法

1.1 概念

1.2 作用

1.3用法

1.4显示数据的方式

1.4.1window.alert("hello");

1.4.2document.write("hello");

1.4.3使用innerHTML写入到html元素

1.4.4console.log写入到控制台

二、基本语法

2.1注释

2.2变量

2.3语句

2.4数据类型

1.字符串String

2数字Number

3.布尔Boolean

4.空Null

5.未定义Undefined

6独一无二的值Symbol

2.5动态数据类型

2.6运算符

2.7对象

1.String

2.Array

3.Date

4.Math

2.8函数

1.isNaN(param);

2.parseFloat(String)

3.parseInt(string,radix)

2.9自定义函数

2.10匿名函数

2.11作用域

2.12自定义对象

2.13window对象

1.常用属性

2.常用方法

定时器

3.history

4.location对象

2.14事件

2.15document

1.document对象

2.document.getElementById()

3.document.getElementsByClassName()

4.document.getElementsByTagName()

5.document.getElementsByName()

6.修改属性

7.添加节点，插入元素

8.删除元素，替换元素

2.16正则表达式

1.语法

2.经典案例

3.全选全不选

4.动态增加删除表格的一行

5.选择省，显示对应市（省市级联）

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐