文章目录
Javascript
主要用途:用在浏览器当中,也可以作为后台开发语言(node js)
语法:类似于java 简称js
1.基本数据类型
- Number 数字类型(整数,小数) 1 -3 3.3
- String 字符串类型 “字符串1” “字符串2”
- Boolean 布尔类型 true false
- Null 表示空值
- Undefined 未定义(声明了是var变量,但是没有赋值的时候)
2.变量赋值
所有变量都是var (var可以存储数字。字符串,布尔…)
var 是弱类型语言
var i=10;
var string="hello world";
console.log(i);
10
console.log(string);
hello world
可以利用浏览器提供的console 对象进行调试输出
命令:console.log(内容);
3.基本运算
- 没有除0异常,除零会出现正负无穷大(Infinity)
console.log(i/0);
Infinity
- 如果进行了非法的数学运算,结果是NaN(not a Number) 包括字符串转换类型失败时,结果也是NaN
console.log(string-i);
NaN
- js中的 == 比较的是值(不同类型的值会转换后比较)
if(1=='1'){
console.log(true);
}else{
console.log(false);
}
true
所以要保证值相等也要保证数据类型相等
if(1==='1'){
console.log(true);
}else{
console.log(false);
}
false
1 == '1'
结果是 true
如果既要保证值相等,也要保证类型相等
1 === '1'
- 可以条件判断中,使用各种类型的值
对于数字类型 0 代表false,非0代表true
对于字符串 “” 代表false,非空串代表 true
null,undefined代表false
var i=0;
if(i){
console.log(false);
}else{
console.log(true);
}
答案 是true
4.js中没有块作用域
for(var i=0;i<10;i++){
console.log(i);
}
console.log(i+1);
答案是:
0
1
2
3
4
5
6
7
8
9
11
5.复杂类型
1)Object对象类型
*定义对象
{属性名:属性值,属性名:属性值...}
var obj={"name":"张三","age":18};
可以简化:{name:"张三",age:18};
可以动态添加:obj.sex="男";
修改属性:obj.age=20;
删除属性:delete obj.age;
2)Array数组类型
定义数组
[值1,值2,值3...值n]
var array=[1,2,3,4,5];
访问数组下标为4的元素:console.log(array[4]);
遍历数组
for(var i=0;i<array.length;i++){
console.log(array[i]);
}
修改元素:array[4]=7;
向尾部加入元素:array[5]=6;
array[9]=40;
向尾部添加元素: .push(元素)
array.push(10);
从尾部删除元素: .pop()
array.pop();
从中间的某个下表删除元素 splice(下标,个数)
array.splice(2,2);//从下标为2开始,删除两个元素
拼接数组内的所有元素
array.join("*");//结果就是1*2*3*4*5
3)Function函数类型
语法
function 函数名(参数列表){
函数体
return 返回结果
}
java 中的函数方法:
public static int add(int a,int b){
return a+b;
}
js中的函数方法:
function add(a,b){
return a+b;
}
console.log(add(5,7));
12
函数的参数是可变的,形参和实参的个数可以不一致
Eg: 调用add(7,2) ===>9
调用 add(1,2,3) ===>3//相当于第三个参数没用上
调用 add(5) ===>NaN//b参数没有赋值,是undefined结果是NaN
获取到所有实际参数:arguments
全局变量和局部变量
函数内定义的var变量才是局部变量,函数外声明的var都是全局变量
var t=8;
function Demo(){
var t=2;//局部的变量a,与全局的a互不冲突
console.log(t);
}
数组遍历&匿名函数
i值的是数组内的第i个元素
var arr=[1,2,3,4,5,6];
arr.forEach(function test1(i){
console.log(i);
});
箭头函数
类似于java中的lambda表达式 它的箭头是=>
arr.forEach((i)=>console.log(i));
数组元素排序
无参数的sort方法把数组内的元素当做字符串排序
var array = [4,1,3,2,5,11];
array.sort();
结果是:(6) [1, 11, 2, 3, 4, 5]
conmpartor函数
array.sort(function comparator(a,b){
//返回0 表示a=b 返回负数表示 a<b 返回正数表示a>b
if(a>b){
return 1;
}else if(a<b){
return -1;
}else{
return 0;
}
//或者直接return a-b;
});
结果是:(6) [1, 2, 3, 4, 5, 11]
3)Data日期类型
var date=new Date();
console.log(date);
//返回结果是:Fri Jan 04 2019 12:38:58 GMT+0800 (中国标准时间)
console.log(date.getFullYear());//2019 年
console.log(date.getMonth());//0 月
console.log(date.getDate());//4 日
console.log(date.getHours());//12 时
console.log(date.getMinutes());//38 分
console.log(date.getTime());//1546576738806 毫秒值
4)正则类型
定义正则表达式
var pattern=/正则表达式/;
匹配数字[0-9] \d
匹配所有英文字符 [a-zA-Z]
匹配单词字符 [a-zA-Z0-9_] \w
匹配任意字符 .匹配起始 ^ 匹配结束字符 $
匹配次数{m,n} 最少出现m次,最多出现n次
{m, }最少出现m次,没有上限
{0,}0次到多次 *
{1, }1次到多次 +
{0,1}0到1次?
Eg:
(1)密码位数,最少3位,最多10位,可以是任意英文字符和数字
var pattern=/^[a-zA-Z0-9]{3-10}$/;
(2)手机号码校验,必须是138或者139开头的
var pattern=/^13[89]{8}$/;
(3)邮件地址的正则验证
后缀可以是.net .com .cn
var pattern=/^\w+@\w+\.(com|net|org)(\.(cn|en))?$/;
字符串
连接字符串
var a="hello ";
var b="world ";
a+b;//方法1
a.concat(b);//方法2
搜索某个字符
var a="hello ";
a.indexOf("l");//字符首次出现的位置索引
a.indexOf("ll");
根据指定字符切分数组
var str = "a,b,c,d,e";
str.split(",");//根据,来切分字符串成数组:(5) ["a", "b", "c", "d", "e"]
找子串
var str="qweytyuiiuoy";
str.substr(2,2);//参数1是起始下标,参数2是长度
str.substring(2,4);//参数1是起始下标,参数2是结束下标+1
替换字符串
var str="tttttttttttttttttt";
str.replace("t","s");//只替换匹配到的第一个字符
str.replace(/a/g,"s");//global(全局的) 替换所有遇到的
var str1="tttrttttrtttttytt";
str1,replace(/ttt/g,"c");//将全局的ttt 替换成c
//去掉标签
var str2="<p>uuuuu</p>
str2.replace(/<p>/,"").replace(/<\/p>/,"");//替换两次
str2.replace(/(<p>|<\/p>)/g,"");//替换一次
//分组替换
$1 表示第一个分组
$2 表示第二个分组
var str = "<p>aap>aaa</p>";
str.replace(/(<p>)(.+)(<\/p>)/g,"$1");
str.replace(/(<p>)(.+)(<\/p>)/g,"$2");
6 js操作html标签
1.找到页面元素
先给标签一个id属性,然后根据id的值查找
document(文档对象)
|-html
|-head
|-body
|-p
//根据id值查找页面标签
document.getElementById("id值");
//根据标签名称查找
document.getElementByTagName("标签名");
//根据选择器查找页面元素(选择器可以是 #id .class 元素,...)
document.querySelectorAll("选择器");
2.改动标签属性
先找到标签元素,把标签元素看做一个对象,用 对象.属性
例如:
找到 img对象.src
找到 input对象.value
3.改动标签内容
内容
标签对象.innerText 标签对象.innerHTML 例如:给内容赋值时 bbbbb 此时 innerText会把这段html代码按照普通文本的方式显示 innerHTML会把这些html先按照html语法进行解析,解析后显示4.添加事件
鼠标点击事件
4.1 方法1
找到标签.事件属性 = function() {}
onclick 鼠标单击事件
onmouseover 鼠标移入事件
onkeydown 按键按下事件
…
document.getElementById("img1").onclick = function (){
console.log("鼠标单击发生了");
document.getElementById("img1").src = "2.jpg";
};
4.2 方法2
<script>
function fun1() {
document.getElementById("img1").src = "2.jpg";
}
</script>
<img src="1.jpg" onclick="fun1()">
4.3 定时器方法
setTimeout(函数, 延时毫秒值);
var i = 0;
function func2() {
setTimeout(function(){
func2();
console.log("ok:" + i);
i++;
} , 5000);
}
func2()
4.4 常见事件
ondblclick 鼠标双击
onchange value取值发生改变时(主要指表单标签)
onmouseover 鼠标移入
onmouseout 鼠标移出
onfocus 获取焦点
onblur 失去焦点
onkeydown 按键按下
onkeyup 按键松开