js基础

js引入

方式一: 可以放在head标签内,body标签内,html标签内
  <script>
        alert('警告!未满18周岁的禁止入内')
    </script>
方式二: 以外部文件的形式引入;
   <script src="js.js"></script>                                   

注释

// 这里是单行注释
/*
这是多行注释
*/

结束符

以分号结束,跟缩进没关系;

js语言

js语言跟python一样是动态类型的数据语言,不需要定义数据类型

 

基本数据类型

数值类型 number

var a=10;
undefined
a
10
var b =1.2;
undefined
b
1.2
var c=123e5;
undefined
c
12300000
typeof c #查看数据类型
"number"

字符串数据类型 string

var a ='alex';
var b='dsb';
var c=a+b;
c
"alexdsb"

数据类型的转换

1.字符串转数字
var a ='123'
undefined
var b =parseInt(a);
undefined
b
123
2.var a = '123abc'
undefined
var b = parseInt(a);
undefined
b
123
3.var a = 'abc123';
undefined
var b = parseInt(a);
b
NaN
4.var a = '123.45'
undefined
var b = parseFloat(a);
undefined
b
123.45
typeof b
"number"

字符串的方法|属性

.length
var a='helloworld'
undefined
a.length
10
​
​
.trim()|.trimleft() 去掉左空白 |.trimright() 去掉右空白
var a = '   hhh   ';
a.trim();
"hhh"
​
​
.charAt(n) n类似索引从0开始,超过最大值返回'空字符串'
var a = 'helloworld';
undefined
a.charAt(5);
"w"
a.charAt(20);
""
.concat() 字符串的拼接,跟+号作用相同
//在这里有效率问题: 如果字符比较少用+号效率高,如果字符比较多用join 效率比较高
var a ='abc';
undefined
var b ='bcd';
undefined
var c =a.concat(b);
undefined
​
.indexOf() 查看数据的索引,超出范围返回-1;
示例:
var a = 'helloworld'
a.indexOf('h');
0
​
​
.indexOf(sub,start)
示例:
var a = 'helloworld';
undefined
a.indexOf('l',3);
3
​
​
.slice(start,end) 切片 包前不包尾
示例:
"helloworld"
a.slice(2,4)
"ll"
​
​
.toUpperCase()
示例:
a.toUpperCase();
"HELLOWORLD"
​
​
a.toLowerCase();
示例:
"helloworld"
​
.split() 第一个返回值表示分割数量,第二个表示分割后数据
示例:
a.split('o');
(3) ["hell", "w", "rld"]
​

布尔值

var a = false;
var b = true;
''(空字符串) 0 null undefinded NaN(不是一个数字) 都是false

null和undefined;

null 表示值是空,一般用于清空一个变量
undefined 未定义 表示声明一个变量但是没有赋值

复杂数据类型或引用数据类型

数组 python中的列表

var a = [11,22,33]; //用方括号赋值
var b = new Array([11,22,33]); 用new Array 来赋值

数组常用方法和属性

1.索引取值
var a =[11,22,33]
a[1]
2.切片取值
3.  a.length 属性(没带括号)
4   a.push('acd') 相当于append()
5.  a.pop() 相当于pop() 返回最后一个元素
6.  a.unshift('abc') 头部插入
7.  a.shift('abc') 头部删除
8.  a.slice(start,end)
9.  a.reverse() //在原函数上倒转180
10  a.join('+') // 在数组a拼接+号组成字符串 eg:a.join('+');"11+22+33"
11  a.concat(数组b) //相当于python extend()
12  a.sort() //根据首字母ascii值大小进行排序
//想要按照数值从小到大排序 冒泡排序
function SortNumber(a,b){
    //a-b>0 a,b互换位置
    return a-b
}
a.sort(SortNumber)
//想要按照数值从大到小排序
function SortNumber(a,b){
    return b-a
    // b-a>0 a,b互换位置
}
a.sort(SortNumber)
13   a.splice(从那个位置开始删,删除几个数,有没有替换的值)
示例:
a.splice(1,2,'aa','bb','cc');
(2) [22, 11]
(5) [33, "aa", "bb", "cc", 7]

JSON

//序列化字符串
var a = 'helloworld';
var b = JSON.stringify(a);
//反序列化字符串
var c = JSON.parse(b);

正则

//正则测试
var reg = /^[a-zA-Z][0-9A-Za-z]{5,11}$/
reg.test('hello0');
//match 匹配符合正则条件的值
var s = 'helloworld';
s.match(/o/); //只匹配第一个o;
s.match(/o/g);//g表示全局,匹配到两个o
//search 匹配符合正则条件的索引
s.search(/o/);
s.search(/o/g); //这两种方法都是返回索引4
//split 分割
s.split(/o/);
//replace  替换
s.replace(/o/,'替换'); //结果:"hell替换world"
s.replace(/o/g,'替换');//结果:s.replace(/o/g,'替换');
s.replace(/o/gi,'替换');//i表示大小写都替换

 

事件

onclick

方式一:
<div id="div1" onclick="f1();"></div>
<script>
    function f1() {
        var a = document.getElementById('div1');
        a.style.backgroundColor = 'black';
    }
</script>
简写版:
<div id="div1" onclick="f1(this);"></div>
<script>
    function f1(ths) {
        ths.style.backgroundColor = 'black';
    }
</script>

方式二:
 <div id="div2"></div>
 var d = document.getElementById('div2');
    d.onclick = function () {
        d.style.backgroundColor ='red';
    }

onfocus

 d.onfocus = function () {
        var a = document.getElementById('div1');
        a.style.backgroundColor = 'deeppink';
    }

onblur

d.onblur = function () {
        var a = document.getElementById('div1');
        a.style.backgroundColor = 'red';
    }

onchange 多用于select标签

var d1= document.getElementById('city');
    d1.onchange = function () {
    //this.options select标签的所有option
    //this.selectedindex 选中的option的索引
        console.log(this.options[this.selectedIndex].innerText +'日德舒服')

data = {'河北省':['廊坊','保定'],'北京':['朝阳区','海淀区'],'山东':['威海市',
'烟台市']}