1、一些杂项
2、数据类型
2.1、字符串
1、单引号或双引号
var s1 = "cnm";
var s2 = 'cnm';
2、转义字符\
中文Unicode、Ascll、空格以及字符串里打出符号
3、多行字符串
使用`(键盘Esc下面)包裹字符串,打印出来的字符就可以多行显示
var msg = `
hello
world
`
4、模板字符串
也是使用`包裹,其内的字符串要拼接可以直接使用${}包裹。
var s1 = {
name = "xiaowang",
age = 16
};
var msg = `小王的年龄是${s1.age}`;
5、字符串长度
var s1 = "student";
console.log(s1.length);
6、字符串可变性
字符串赋值后就不能再修改了。
7、大小写转化
toUpperCase()//小写转大写
toLowpperCase()//大写转小写
console.log(s1.toUpperCase());
console.log(s1.toLowperCase());
8、通过元素获得下标
console.log(s1.indexOf('t'));
9、字符串截取
substring()
console.log(s1.substring(3));//从第三的下标开始截取
console.log(s1.substring(1,3);//从第一个的下标到第三个下标
2.2、数组
js的数组可以包含任意的数据类型,可变
1、长度
过长多余部分为empty,打印结果为undefined。过少会丢失
2、通过元素获得下标
var arr = [1,3,6];
arr.indexOf(2);
得到的是6。而"1"与1是不同的。
3、截取数组
slice()
arr.slice(1,3);
4、添加删除元素
push pop
var arr = [1,5,"a"];
arr.push("ad","ww");
push中的元素将添加进arr尾部。
pop,弹出尾部的一个元素。
unshift中的元素将添加进arr头部。
shift,弹出头部的一个元素。
5、排序
sort()
var arr = ["B","C","A"];
arr.sort();
得到[“A”,“B”,“C”]
6、元素反转
reverse()
反过来打印。
7、concat()
在原数组后加上新元素。但是不改变原数组。
8、连接符join()
使用括号内的符号打印数组。
9、多维数组
var arr = [[1,2],[3,4],["5","6"]];
2.3、对象
键:值
所有键都是字符串,调用要用引号,值是任意对象
var TL = {
name:"Su",
age:20,
email:"99999@qq.com",
school:WYU = {
name:"五邑大学",
age:50,
address:"Jiangmen"
}
1、调用
使用一个已定义的对象中未定义的属性不会报错。
一种是直接用.调用属性
console.log(person.name);
一种是只知道名字的用[]
var mingzi = "name";
console.log(person[mingzi]);
2、动态增删
delete person.name;
直接把person对象delete。
var person = {
name:"cnm",
age:14
}
person.email = 123456@qq.com
直接给新属性赋值就行。
3、判断一个属性是否这个对象自身拥有的
hasOwnProperty
2.4、流程控制
诸如if while for这类的
但是他们的要有一个范围或者说用size,而不是直接输出全部。
1、foreach
不能中断循环,不改变原来的,无返回值undefine
2、for…in
遍历的是数组的索引(即键名),总是得到对象的key或数组、字符串的下标
3、for…of
遍历的是数组元素值,总是得到对象的value或数组、字符串的值
(想让对象也可以使用for…of循环的话可以用Object.keys()获取对象的键值再使用)
2.5、Map()和Set()
1、Map()
一种像组合的东西
var m = new Map([['jack',100],['tom',85],['john',59]]);
var name = m.get('tom');
console.log(name);
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q9bknQA1-1655094916005)(C:\Users\特仑苏\AppData\Roaming\Typora\typora-user-images\image-20220320204943360.png)]
输出结果是85,和tom一组的,但是get85不能得到tom
使用set来增加或者修改,delete来删除
2、Set()
无序不重复的集合。当有多个重复的值时只保存一个。
var s = new Set([3,2,1,1,1,1]);
Set()内的值可以增删,使用add和delete,而has可以用于判断内部是否存在某个值
3、函数
3.1、定义函数
定义一个绝对值函数
定义方法1
function a(x){
if(x>=0)
return x;
else
return -x;
}
当运行到return的时候,代表函数结束,返回结果。
如果没有执行return,函数执行完会返回undefined。
定义方法2
var a = function(x){
if(x>=0)
return x;
else
return -x;
}
function(x){…}看作一个匿名函数,但是可以把结果赋值给a,通过a就可以调用函数。
3.2、arguments和rest
arguments就是一个js自己给的对象。代表的是函数传入的所有参数,都存在它里面。还有一些牛叉的功能,比如它的callee属性,可以输出调用的函数的代码
rest就是指省略号。它写在函数里代表着省略号后的参数,输出rest就是输出省略号存的参数。
4、变量
1、在函数里面声明(for的可以)的不能在外部调用。但是外部声明的可以被函数调用(包括嵌套的外面的函数)
2、变量名相同没有问题,只要在函数内就是独立的。
function(){
var i = 2;
i++;
}
function(){
var i = 's',
z = 'b';
return i+z
}
3、变量在js里面默认先声明,再按照代码顺序进行赋值。
//规范定义放在头部,便于代码维护
function(){
var x = 1,
y = 2,
z,i,a;
z = 3;
}
4、js只有一个全局作用域window。例如alert是window.alert=old_alert绑定住了。如果我们给window.alert绑定了别的东西,那么使用alert方法就会变成别的东西。
window.alert = function q(){};
alert(www);//没用,因为被重新定义了。
window.alert = old_alert();
5、由于全局变量都会绑定到我们的window上面。为了减少冲突,我们可以自己定义一个空间。
//唯一全局变量
var Sun = {};
//定义全局变量
Sun.name = "sun";
Sun.add = function(a,b){
return a+b;
}
6、局部变量的定义尽量都使用let,这样就不会导致作用域冲突。而常量就使用const。
5、方法
函数放到对象里面就是方法,打印函数和方法都要加上括号
1、方法的定义
var Sun = {
name:2,
birth:2002,
age:function(){
var now = new Date().getFullYear();
return now-this.birth;
}
}
也可以在外部定义,再调用到对象内,但调用时不能带上括号,只需要函数名。通过Sun.age()打印。
function getage(){
var now = new Date().getFullYear();
return now-this.birth;
}
var Sun = {
name:2,
birth:2002,
age:getage
}
这个如果直接调用getage(),那么他的this.birth就是window这个对象的birth。因为this是无法指向的,默认指向调用他的对象。
可以用apply绑定方法,指定某对象。
6、JSON
var user = {
name: "Lihua",
age:4,
sex:"男"
}
//对象转化为json赋给jsonuser对象{"name":"Lihua","age":4,"sex":"男"}
var jsonuser = JSON.stringify(user);
//json字符串转化为对象,调用一个JSON对象或者直接按格式输入
var obj1 = JSON.parse(jsonuser);
var obj2 = JSON.parse('{"name":"Lihua","age":4,"sex":"男"}');
7、面向对象
用__proto__来找一个原型
var Student = {
age:14,
sport:function(){
console.log(this.name+"run.....")
}
}
var xiaoming = {
name:"小明",
favorite:"加塞"
}
xiaoming:__proto__ = Student;
打印xiaoming.sport就会输出小明run…,因为Student相当于xiaoming的父类。
class Student{
constructor(name){
this.name = name;
alert("mmp");
}
cnm(){
console.log("cnm");
alert("cnm");
}
}
class xiaoxuesheng extends Student{
constructor(name,age){
super(name);
this.age = age;
}
}
var xiaoming = new xiaoxuesheng("晓明",12);
8、DOM
是自上而下的,如果要获取DOM,就要在前面的HTML先定义了,一般来说重要的js才放在开头,剩下的都写在后面。
通过DOM返回的都是对象。
8.1、获取DOM对象
<body>
<div id="Dad">
<h1 id="hhh">h111111111111111111111111111</h1>
<p class="pp">p111111111111111111111111</p>
</div>
<a href="&" id="cnm">a</a>
<script>
var k1 = document.getElementById('hhh');
var z = document.getElementsByClassName('pp');
var m = document.getElementById('cnm')
</script>
</body>
8.2、更新DOM节点
<body>
<div id="Dad">
<h1 id="hhh">h111111111111111111111111111</h1>
<p class="pp">p111111111111111111111111</p>
</div>
<a href="&" id="cnm">a</a>
<script>
var k1 = document.getElementById('hhh');
</script>
1、操作文本
k1.innerText = '122';//修改文本的值
k1.innerHTML = '<strong>222</strong>';//可解析的HTML文本
2、操作css
k1.style.color = 'yellow';
k1.style.fontsize = '30px';
8.3、删除DOM节点
要先获得父对象,再通过父亲来调用删除节点。有的是数组有的是单独的,要区分。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cgV3CfIV-1655094916005)(C:\Users\特仑苏\AppData\Roaming\Typora\typora-user-images\image-20220402201619342.png)]
<body>
<div id="Dad">
<h1 id="hhh">h111111111111111111111111111</h1>
<p class="pp">p111111111111111111111111</p>
<a href="&" id="cnm">a</a>
</div>
<p class="pp">sdads</p>
<script>
var k1 = document.getElementById('hhh');
var z = document.getElementsByTagName('p');
var m = document.getElementById('cnm')
var father = z[0].parentElement;//获得父节点
father.removeChild('k1');//删除子节点叫做k1的
</script>
</body>
8.4、新建DOM对象
var myStyle = document.creatElement('style');//创造一个叫style的标签
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = '#cnm{background-color:black}';
document.getElementsByTagName('head')[0].appendChild(myStyle);
//把myStyle这个标签放到head的第一个孩子里
**setAttribute()**设置当前DOM元素的type属性
**insertBefore()**是在前面插入某节点(肯定是提前命名好的啦。)
8.5、一些小区别
var getbody = document.getElementsByTagName("body");
//这个是得到DOM对象
var onebody = document.body;
//这个是得到body,就像在控制台console一样
var onlybody = document.documentElement;
//得到整个HTML结构,同上的形式
9、操作表单
9.1、获得表单的值与设置
依旧和上面所说的一样,也是定义取得DOM对象,然后进行读值.value等等。相应的,也可以进行赋值。
form action="#" method="post">
<p>
<span>密码:</span><input type="password" id="input-pwd">
</p>
</form>
<scriot>
var pwd = document.getElementById('input-pwd');
pwd.value;//得到密码框的值
pwd.value='121221'//修改值
</scriot>
9.2、表单提交与加密
<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js"></script>
//引入md5
在form中设置好method是post,安全性提高,因为默认的是get方式,可以在url处查询到。
<form action="#" method="post">
<p>
<span>用户名:</span><input id="username" type="text" name="username" >
</p>
<p>
<span>密码:</span><input type="password" id="input-pwd">
//设置一个表面上输入的框框,但是不设置name,这样就不能被截获。
</p>
<input type="hidden" id="md5-pwd" name="md5pwd">
//在这里设置一个隐藏的md5密码框,通过它的DOM对象来获得表面上密码框的md5加密后的值
<button type="submit" onclick="aaa()">提交</button>
//使用onclick来获得点击监视,当点击的时候执行aaa()函数
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js"></script>
<script>
function aaa() {
var md5pwd = document.getElementById('md5-pwd');
var pwd = document.getElementById('input-pwd');
md5pwd.value=md5(pwd.value);
console.log(md5);
console.log('2');
}
</script>
10、jQuery
使用 符 号 指 代 。 使 用 方 法 为 符号指代。使用方法为 符号指代。使用方法为(选择器).action()
例如
$('#pwd').click(function(){
alert('Hello jQuery')
});
$('.pp').mousemove(function(e){
alert('cnm');
})
10.1、jQuery事件
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
#divmove{
height: 600px;
width: 600px;
border: 1px solid black;
}
</style>
<body>
mousezz:<span id="mouse"></span>
<div id = "divmove">
移动鼠标试逝
</div>
<script>
$(document).ready(function (){
$('#divmove').mousemove(function (e){
$('#mouse').text('x:'+e.pageX+'y:'+e.pageY)
})
});
</script>
</body>