这篇博客深入介绍了JavaScript的基础知识，包括引入JS方式、变量定义、运算符、基本数据类型及数字和字符串操作。此外，还详细讲解了DOM操作，如获取元素、事件监听和日期处理。文中还涵盖了数组、正则表达式、JSON以及常用的Math对象方法。通过对这些概念和方法的理解，读者可以更好地掌握JavaScript编程。
JavaScript
1、简介
- JavaScript是脚本语言
- JavaScript是可插入网页的编程语言
- JavaScript是一种轻量级的编程语言
- JavaScript是一种弱类型的语言
JavaScript分为ECMAScript、Dom、BOM
2、基础
2.1 引入js方式
-
使用 <script src="script.js"> </script> 的方式引入外部js文件 -
<script> ...... </script> 直接书写js内容
2.2 js注释
-
单行注释
使用//来注释其后面的内容。 -
多行注释
/* 被注释的内容 */
2.3 js变量
js是弱类型语言，同一个变量可以存放不同类型的值。
变量的命名规则：
1、不能是系统关键字和保留字。
2、第一个字符必须是字母、下划线（_）或美元符号（$）
3、余下的字符可以是下划线、美元符号或任何字母或数字字符
var 变量名;//定义变量，不赋值
var 变量名1，变量名2;//同时定义多个变量
var a1="hellow",h2="world"；//同时给多个变量赋值
var n1 = 123;
2.4 js运算符
== 值相等
=== 值和类型都相等
var i=123;
var s="123";
if i==s{
console.log("i和s数值相等")
}else{
console.log("数据类型不相等")
}
2.5 js 基本数据类型
- underfined：如果一个变量没有赋值，那么它就是这个类型
- null：表示给变量赋值为null
- boolean：true/false
- number
- string
2.6 数字
-
isNaN(object) 判断变量是否可以转换为数字，NaN 非数字值。
可以转化为数字，返回false，不可以转化为数字，返回true -
toString(radix) 把数字转换为指定进制的字符串，radix 0-36 默认为10
-
toFixed(num) 把数字转换为字符串
-
parseInt(string) 将字符串转化为整数(十进制)
-
parseFloat(string) 将字符串转化为浮点数
2.7 字符串
var str1 = “abc”;
var str2 = String(str);
var str3 = new String(str);
-
str.length 属性length 计算字符串的长度
-
charAt(index) 返回指定位置的字符
-
indexOf(searchValue[,fromIndex]) 返回某个指定的字符串值在字符串中首次出现的位置。
-
lastIndexOf(searchValue[,fromIndex]) 从后向前检索。
-
slice(start,end) 提取字符串的某个部分，并以新的字符串返回被提取的部分。从0开始，包前不包后。如果是负数从字符串的尾部开始算起。end可以省略。
-
substr(start,length) 在字符串中抽取从 start 下标开始的指定数目的字符。
-
split(separator) 将字符串按照指定的字符串(separator)拆分成一个数组
-
replace(oldStr/regexp,newStr) 将指定的字符串替换成新的字符串
-
toLowerCase() 把字符串转换为小写。
-
toUpperCase() 把字符串转换为大写。
2.8 js方法
function 方法名(参数){
方法体
return
}
2.9 js日期
var date = new Date();
getFullYear() 返回四位数的年
getMonth() 返回月 0-11
getDate() 返回日
getDay() 返回星期几
getHours() 返回小时 0-23
getMinutes() 返回分钟 0-59
getSeconds() 返回秒数 0-59
getMilliseconds() 返回0-999 毫秒
getTime() 返回1970 年 1 月 1 日至今的毫秒数
setFullYear(year,month,day)
setMonth(month,day)
setDate(day)
setHours(hour,min,sec,millisec)
setMinutes(min,sec,millisec)
setSeconds(sec,millisec)
setMilliseconds(millisec)
setTime(millisec)
2.10 js数组
数组 Array
var arr1 = new Array();
var arr2 = new Array(e0, e1, ..., en);
var arr3 = [e0, e1,e2, ..., en];
属性length，返回数组中元素的数量
concat(arrayX,arrayX,......,arrayX) 用于连接两个或多个数组
参数可以是具体的值，也可以是数组对象，可以是任意多个。
join(separator) 方法用于把数组中的所有元素放入一个字符串，separate分隔符
pop() 方法用于删除并返回数组的最后一个元素
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度
indexOf(element)获取元素在数组中的索引值，如果为-1，则表示该元素不存在
reverse() 方法用于颠倒数组中元素的顺序
slice(start,end）可从已有的数组中返回选定的元素
sort(sortby)方法用于对数组的元素进行排序。
sortby为一个函数
function(a,b){
return a-b;
}
a-b输出从小到大排序，b-a输出从大到小排序
//数组去重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组去重</title>
</head>
<body>
<script>
var a =[3,2,5,4,54,613,3,5,54,1321,54];
var b = [];
for (var i=0;i<a.length;i++){
//indexOf(e) 如果不存在，返回-1
if (b.indexOf(a[i])==-1){
b.push(a[i]);
}
}
console.log(b);
</script>
</body>
</html>
2.11 Math对象方法
abs(x) 返回数的绝对值
ceil(x) 对一个数向上取整
floor(x) 对一个数向下取整
max(x,x,......,x) 返回最大值
min(x,x,......,x) 返回最小值
pow(x,y) 返回x的y次幂
random() 返回0-1之间的随机数
round(x) 对一个数四舍五入取整
20-50之间的随机数
Math.random()*(50-20)+20
2.12 json数据
var json1 = {name:"jack",age:28,sex:"男"};
var json2 = [{name:"jack",age:28,sex:"男"},
{name:"scott",age:23,sex:"男"},
{name:"rose",age:18,sex:"女"}
];
获取value：
json1.name // "jack"
json1.age // 28
json2[0].name // "jack"
json2[1].name // "scott"
json2[1].sex // "男"
//添加数据
json1["weight"]=80;
//删除数据
delete json1["age"];
//将json字符串转化为json对象 JSON.parse(str)
var jsonstr = '{"name":"jack","age":28,"sex":"男"}';
var json1 = JSON.parse(jsonstr);
console.log(json1);
//将JSON对象转化为字符串 JSON.stringify(json)
var str = JSON.stringify(json1)
console.log(str);
2.13 正则表达式
//正则表达式
var result = /^(180|136|156)\\d{8}/i.test("1211325");
console.log(result);
var result1 = /[a-z]{3}[0-9]{3}/i.test("asd656");
console.log(result1);
var str="adb232sad232as66c1ascas323";
str=str.replace(/[a-z]{3}/g,"***");
console.log(str);
/g （全文查找）
/i （忽略大小写）
/m （多行查找）
3、DOM
tag 标签
element 元素
node 节点
3.1、Document
Document对象方法：
getElementById() 通过id获取Element对象，单个对象
getElementsByName() 通过标签name属性获取对象,结果为集合
getElementsByTagName() 通过标签名（TagName:div/a/span等）获取Element，结果为集合
getElementsByClassName() 通过标签class属性获取对象,结果为集合
3.2、Element
Element 属性：
children —返回元素的所有子节点
firstElementChild —返回元素的首个子节点
lastElementChild —返回元素的最后一个子节点
nextElementSibling —返回同级元素的下一个节点
previousElementSibling —返回同级元素的前一个元素
parentElement —返回元素的父节点
innerHTML —获取或设置元素的内容
outerHTML —获取或设置元素的内容（包含元素本身）
innerText —获取或设置元素的文本
value —获取或设置表单元素的文本
获取属性：
Element中的属性操作：
getAttribute(attr)
获取元素的属性值
setAttribute(attr,value)
设置元素的属性值
hasAttribute(attr)
判断元素有无该属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取属性</title>
</head>
<body>
<div id="box" name="sex" class="student">
<a id="tb" href="http://www.baidu.com"></a>
</div>
<script>
//获取标签元素 getAttribute
var box =document.getElementById("box");
var tb =document.getElementById("tb");
console.log(box.getAttribute("name"));
console.log(box.getAttribute("class"));
console.log(tb.getAttribute("href"));
//设置属性元素
box.setAttribute("name","gender");
console.log(box.getAttribute("name"));
//判断标签是否有该属性
console.log(box.hasAttribute("id"));
</script>
</body>
</html>
3.3、事件
鼠标事件
onclick —用户单击鼠标左键时触发
ondblclick —用户双击鼠标左键时触发
oncontextmenu —用户单击鼠标右键时触发
onmouseenter —当鼠标指针移动到元素上时
onmouseleave —当鼠标指针移出元素时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<style>
#box{
height: 500px;
width: 500px;
background: yellow;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="box" onclick="changeColor()">
学不死就往死学
</div>
<script>
var box =document.getElementById("box");
//设置监听事件方法一
function changeColor(){
box.style.background="pink";
}
//设置事件监听方法二：
box.ondblclick=function (){
box.style.textAlign="center";
box.innerText +="to be number one";
}
box.onmousedown=function (){
box.style.background="red";
}
</script>
</body>
</html>
键盘事件
onkeydown — 获得keyCode 键盘按键被按下
onkeyup — 获得keyCode 键盘按键被松开
onkeypress — 获取charCode值 键盘按键被按下并松开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>和谐骂人的话</title>
</head>
<body>
<input id="inputBox">
<script>
var mags = ["cnm","nm","zz","sb","nc"];
var inputBox = document.getElementById("inputBox");
//给inputBox添加onkeyup
inputBox.onkeyup=function (){
//1.获取当前输入的文字
var val=this.value;
//2.获取铭感词会在文章中的索引，用*代替
for (var i=0;i<mags.length;i++){
var mg=mags[i];
var idx = val.indexOf(mg);
if (idx!=-1){
//存在敏感词汇
val = val.replace(mg,getStars(mg.length));
this.value=val;
}
}
//获取指定个数的*
function getStars(len){
var star=" ";
for (var i=0;i<len;i++){
star +="*";
}
return star;
}
}
</script>
</body>
</html>
表单事件
onfocus —元素获取焦点时
onblur —元素失去焦点时
onsubmit —表单提交时触发
onchange—下拉列表的值改变时
onselect —用户选取文本时触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单事件</title>
</head>
<body>
<input id="inputBox"/>
<lable id="tip"></lable>
<script>
var tip=document.getElementById("tip");
var user=["老公","男神","欧巴","宝贝"];
var inputBox = document.getElementById("inputBox");
inputBox.value="请输入用户名";
inputBox.style.color="gray";
inputBox.onfocus=function (){
this.value="";
inputBox.style.color="black";
}
inputBox.onblur=function (){
var name = inputBox.value;
if (name=""){
inputBox.value="请输入用户名";
inputBox.style.color="gray";
}else {
if (user.indexOf(name)!=-1){
tip.innerHTML="该名称可用";
tip.style.color="green";
}else{
tip.innerHTML="该名称已存在";
tip.style.color="red";
}
}
}
</script>
</body>
</html>
扫一扫
227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
