0
点赞
收藏
分享

微信扫一扫

三、Javascript简单了解(笔记)

小桥流水2016 2022-03-23 阅读 58

一、概念和用法

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.baidu.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.baidu.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>

举报

相关推荐

0 条评论