Javascript
一.helloworld
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部标签使用-->
<!--<script>-->
<!-- alert("helloworld！");-->
<!--</script>-->
<!--外部标签使用-->
<script src="test.js"></script>
</head>
<body>
</body>
</html>
二.语法入门
// 定义变量 var name=1; // 条件控制 if(2>1){ alert(true) } /* *多行注释 */
在浏览器控制台打印变量
console.log(name)；
三.数据类型
数值，文本，图形，音频，视频。。。
1）字符串
正常字符串使用单引号或双引号包裹；转义字符
多行字符串：反引号
var msg=`你好 文化is 和等方式尽快 `
模板字符串${}`：必须使用反引号
var name="dengwenxiong"; var msg=`大家好，我是${name}`
字符串长度
str.length
字符串不可变
截取字符串substring，半闭半开
str.substring(1,3)
2）Number
js不区分小数和整数
NaN//not a Number Infinity//表示无限大
3）比较运算符
== //等于，类型不一样，值一样也会判断为true ===//绝对等于，类型一样值一样才为true
NaN===NaN，为false，NaN与所有的数值都不相等，包括他自己；只能通过isNaN(NaN)确定
浮点数运算存在精度问题；
null表示为空；
undefined表示未定义；
4）数组
js中的数组的数值可以不是相同类型的对象
var arr=[1,2,4,null,"abc",true];
取数组下标如果越界了就会undefined；
长度:数组大小可以变化，赋值过小元素会丢失
arr.length;
slice()：截取数组的一部分，返回一个新数组，类似substring()
push()：压入到尾部；
pop()：弹出尾部元素
unshift()：压入到头部
shift()：弹出头部元素
sort()：排序
reverse()：元素反转
concat()：合并数组，返回一个新数组
join()：打印拼接数组，使用特定的字符串连接
5）对象：若干个键值对,所有的键都是字符串，值是任意对象
var person={ name:"dengwenxiong", age:13 }
动态的删减属性:使用delete
delete person.name
动态添加属性：直接给新属性赋值
person.sex=" boy"
判断属性是否在对象中：使用in
"name" in person
判断一个属性是否是对象自身拥有的：使用hasOwnProerty()
person.hasOwnProperty("age")
四.严格检查模式
//使用严格检查模式，不许写在JavaScript的第一行 'use strict' //局部变量建议使用let定义 i=1;
五.数组循环
1.使用forEach
var arr=[1,2,3,4,5]; arr.forEach(function (value){ console.log(value) })
2.使用for in
var arr=[1,2,3,4,5]; //index是索引 for(index in arr){ console.log(arr[index]) }
3.使用for of
var arr=[1,2,3,4,5]; for(a of arr){ console.log(a) }
六.Map和Set
var map=new Map([['tom',100],['Aisa',200]]); var score=map.get('tom');//获取 map.set("Ali",300);//新增或修改
map.delete('tom') console.log(score);//删除
遍历map也使用for of
set：无序不重复的集合
var set=new Set([1,1,1,1,3,5]); set.add(9);//增加 set.delete(1)//删除 console.log(set.has(3));//检查是否有3 console.log(set);
遍历set也使用for of
七.函数
1）定义
方式一：
function abs(x){ if(x>=0){ return x; }else{ return -x; } }
一旦执行return代表函数结束，返回结果
如果没有执行return，函数执行完也会返回结果，结果就是undefined
方式二
var abs=function(x){ if(x>=0){ return x; }else{ return -x; } }
假设不存在参数，规避？
function abs(x){ if(typeof x !="number"){ throw 'Not a Number' } if(x>=0){ return x; }else{ return -x; } }
arguments代表传递进来的所有参数，是一个数组（可以用于隐藏参数）
rest获取除了已定义参数之外的所有参数
function abs(x,...rest){ if(typeof x !="number"){ throw 'Not a Number' } console.log(rest); if(x>=0){ return x; }else{ return -x; } }
rest参数只能写在最后面，并用...标识
2）变量作用域
内部函数可以访问外部函数的成员；反之不行。
js的执行引擎会自动提升变量的声明，但不会提升变量的赋值
默认所有的全局变量都会自动绑定在window对象下
var x="hhh"; alert(x); window.alert(window.x);//效果一样
alert()函数本身也是window对象；
JavaScript实际只有一个全局作用域window；任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果全局作用域都没有找到，就会报错RefrenceError；
由于所有的全局变量都会绑定到window上，如果使用不同的js文件，使用了相同的全局变量就会冲突；解决：
var MyApp={}; MyApp.name="dengwenxiong"; MyApp.add=function(a,b){ return a+b; }
把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突问题
3）let
let 关键字，解决了局部作用域冲突问题
function aaa(){ for (let i=0;i<100;i++){ console.log(i) ; } console.log(i+1);//这里使用了let之后就会报错，如果是var，则会输出101； }
4）const
const关键字，常量
const PI=3.14; console.log(PI); PI=1;//报错，只读变量
5）方法
定义：在对象里面定义函数
var person={ name:"dengwenxiong"; birth:1998; age:function(){ var now=new Date().getFullYear(); return now-this.birth; } }
属性调用：person.name;
方法调用：person.age();
this默认指向调用它的方法
使用apply可以指定this的指向
function getAge(){ var now=new Date().getFullYear(); return now-this.birth; } var person={ name:"dengwenxiong", birth:1998, age:getAge }
getAge.apply(person,[])
八.内部对象
1）Date
var now=new Date(); now.getFullYear();//年 now.getMonth();//月 0-11 代表月 now.getDate();//日 now.getDay();//星期几 now.getHours();//时 now.getMinutes();//分 now.getSeconds();//秒 now.getTime();//时间戳 全世界统一，1970 1.1 00:00:00 console.log(now Date(时间戳))//将时间戳转为时间 now.toLoaclString();//转换为文本
2）JSON
格式：
对象都用{}
数组都用[]
所有的键值对都用key：value
var person={ name:"dengwenxiong", age:18, sex:"boy" } //将对象转换为Json字符串 var JsonString=JSON.stringify(person); console.log(JsonString); //将Json字符串转换为对象 var obj=JSON.parse(JsonString); console.log(obj);
JSON与JS对象的区别
var obj={a:'helloA',b:'helloB'};//对象 var json='{"a":"helloA","b":"helloB"}';//json,本身就是字符串
九.面向对象编程
1）原型继承
var Student={ name:"student", sex:"boy", run:function(){ console.log(this.name +" is running"); } }; var xiaoming={ name:"xiaoming" }; xiaoming.__proto__=Student;
2）class继承
//定义一个学生类 class Student{ //构造器 constructor(name){ this.name=name; } //增加方法 hello(){ alert('hello'); } } var xiaoming=new Student("xiaoming");
继承
class littlestudent extends Student{}
十.操作BOM对象
BOM：浏览器对象模型
window：代表浏览器窗口
navigator：封装了浏览器的信息
navigator.appName "Netscape" navigator.appVersion "5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36" navigator.userAgent "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.131 Safari/537.36" navigator.platform "Win32"
screen：代表屏幕尺寸
location：代表当前页面的URL信息
location.host "www.baidu.com" location.href "https://www.baidu.com/?tn=78040160_14_pg&ch=16" location.protocol "https:" location.reload()//刷新网页 location.assign("https://www.bilibili.com/")
document:代表当前的页面，HTML DOM文档树
document,cookie//获取网页的cookie
history：
history.back()//后退 history.forward()//前进
十一.操作DOM对象
DOM文档对象模型
浏览器网页就是DOM树形结构
- 更新：更新DOM节点
- 遍历：得到DOM节点
- 删除：删除DOM节点
- 添加：添加新的DOM节点
获取节点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="father">
<h1>我是谁</h1>
<p id="p1"></p>
<p class="p2"></p>
</div>
<script>
//标签选择器
var h1=document.getElementsByTagName('h1');
//Id选择器
var p1=document.getElementById('p1');
//类名选择器
var p2=document.getElementsByClassName('p2');
var father=document.getElementById('father');
//father.children可获得子节点
</script>
</body>
</html>
更新节点：
father.innerText="hhhh"修改文本值 father.innerHTML="<strong>123</strong>"可以解析HTML文本标签
father.style.color="red"更改样式
删除节点：
先获取父节点，再通过父节点删除自己
father.removeChild(p1);
删除节点，children是动态变化的
插入节点：
追加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="p1">我是哈哈哈</p>
<div id="d1">
</div>
<script>
var p1=document.getElementById("p1");
var d1=document.getElementById("d1");
d1.appendChild(p1);
</script>
</body>
</html>
创建节点并插入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
</div>
<script>
var newp=document.createElement('p');
newp.id='p1';//等价于 newp.setAttribute("id","p1")
newp.innerText="你好啊";
var d1=document.getElementById("d1");
d1.appendChild(newp);
</script>
</body>
</html>
十二.操作表单
获取表单的信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<span>用户名：</span><input type="text" id="username"/>
<span>性别：</span>男<input type="radio" name="sex" value="man" id="boy"/>
女<input type="radio" value="woman" name="sex" id="girl"/>
</div>
<script>
var input_text=document.getElementById("username");
//得到输入框的值input_text.value
var boy_radio=document.getElementById("boy");
var girl_radio=document.getElementById("girl");
//判断是否选中，返回（true或false）boy_radio.checked;
</script>
</body>
</html>
十三.JQuery
公式：$(selector).action()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <a href="" id="test-jquery">你点我试试</a> <script> $("#test-jquery").click(function(){ alert("Hello!"); }) </script> </body> </html>
选择器
$('p').click()//标签选择器
$('#id1').click()//id选择器
$('.class1').click()//class选择器
事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #divMove{ height:800px; width:800px; background-color:red; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <!--获取鼠标当前坐标--> mouse:<span id="mouseMove"></span> <div id="divMove"> </div> <script> //当网页元素加载完毕后，响应事件 $(function(){ $('#divMove').mousemove(function(e){ $('#mouseMove').text('x:'+e.pageX+'y'+e.pageY) }) }); </script> </body> </html>
操作DOM
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <ul id="test-ul"> <li name="js">Javascript</li> <li class="python">python</li> </ul> <script> $('#test-ul li[name=js]').text();//获取值 $('#test-ul li[name=js]').text("12334");//设置值 $('#test-ul').html()//获取值 $('#test-ul').html("<strong>hhh</strong>")//设置值,会覆盖 </script> </body> </html>
CSS操作
$('#test-ul').css({"color":"red","font-size":"80px"})
元素的显示和隐藏：本质是disoplay：none；
$('#test-ul li[name=js]').show();//显示
$('#test-ul .python').hide();//隐藏