JS
引入
<script>
alert("hello!");
</script>
<script src="../JS/test01.js"> </script>基本语法
大致定义
'use strict' //开启严格检查模式
var num=1; //定义
let nu=2; //定义
alert(num); //弹窗
console.log(num); //计算内容字符串
var str1="abc";
var str2="def";
var str3=`${str1}${str2}`; //合并字符串
console.log(str3);
console.log(str3.toUpperCase()); //变为大写
console.log(str3.toLowerCase()); //变为小写
console.log(str3.indexOf('c')); //查询第几个出现
console.log(str3.substring(1,3)); //截取字符数组
var a=[1,2,3,4,5];
a[1]=1; //更改查询
a.length=10; //更改长度
a.indexOf(3); //查询出现下标
a.slice(1,3); //类似substr截取
a.push(1,2); //push值
a.pop(); //pop值
a.unshift(1,2); //头部推入
a.shift(); //弹出头部元素
a.sort(); //排序
a.reverse(); //反转
a.concat([1,2,3]); //连接数组
a.join('-'); //特定字符连接对象
var person = {
name:"scv",
age:3,
tag:[1,2,3]
} //定义对象
delete person.name; //删除对象属性
person.sex="male"; //直接添加属性
person.hasOwnProperty('age'); //查询流程控制
//同c||java，多一个forEach
a.forEach(function (value){
console.log(value);
})Map&Set
let map = new Map([['a',100],['b',90],['c',80]]); //定义map
map.get('a'); //获取值
map.set('d',70); //插入
map.delete('c'); //删除值
map.has('a'); //查询
let set = new Set([1,2,3,3]); //定义set
set.add(4); //加入值
set.delete(3); //删除值
set.has(3); //查询
for(var x of map){
console.log(x);
} //遍历map||set函数
函数的定义都定义在开头，默认所有的全局变量绑定到windows上。
//---------------------1--------------------
function name(x){
return x;
}
//---------------------2--------------------
var name = function(x){
return x;
}
//抛出异常
function abs(x){
//JS特性
if(arguments.length>1) {
throw "存在多个参数！";
}
if(typeof x!=='number'){
throw "Not a number!";
}
else return x>0?x:-x;
}
//rest获取除了已经定义参数之外的所有参数
function f(a,b,...rest){
console.log(a);
console.log(b);
//利用rest抓取后面的参数
console.log(rest);
}
//避免绑定windows的冲突，改变绑定
//把代码放入自己定义的唯一空间中，降低冲突问题
var test={};
test.name="hhh";
test.add=function (a,b){
return a+b;
}方法
//------------------1-------------------
var dyd={
name:'dyd',
birth:2020,
age:function (){
let now=new Date().getFullYear();
return now.this.birth;
}
}
//------------------2-------------------
function get(){
let now=new Date().getFullYear();
return now-this.birth;
}
let dyd={
name:'dyd',
birth:2020,
age: get
}
get.apply(dyd,[]); //this指向dyd，第二个是没有参数Date
let now = new Date();
now.getFullYear();
now.getMonth();
now.getHours();
now.getSeconds();
now.getTime();
now.toLocaleString()JSON
轻量级数据交换格式，提高网络交换速率。
任何的JS类型都可以转化为JSON来表示（对象：{}，数组：[]，键值：key:value），转化为字符串；
let user={
name:"ttt",
"age":3
}
var str=JSON.stringify(user); //对象转化为json字符串
var obj=JSON.parse(str); //字符串转化为对象对象继承
引入一个原型链，意思是不断继承最终可以看到是object延申出来的，但是仍然是一个环。
obj1.__proto__=obj2; //obj1继承obj2class student{
constructor(name) {
this.name = name;
}
hello(){
alert("hello");
}
}
class pupil extends student{
constructor(name,grade) {
super(name);
this.grade=grade;
}
hello() {
alert("hello!");
}
}
let xm=new student('xm');
let xh=new pupil('xh');BOM对象
浏览器对象模型。
windows:
window.alert(); //弹窗
window.innerWidth(); //内部宽度
window.innerHeight(); //内部高度
window.outerWidth(); //外部宽度
window.outerHeight(); //外部高度navigator:
//获取一些浏览器的系统配置
navigator.appName
navigator.appVersion
navigator.userAgent
navigator.platformlocation:
screen.width //屏幕宽度
screen.height //屏幕高度
location //查看url消息（重点）
location.reload(); //刷新
location.assign("url"); //定位到新地址document:
document.title[="title"] //文档数获取title
document.getElementById('id_name'); //获取节点
document.cookie; //获取cookiehistory:
history.forward() //前进
history.back(); //后退DOM对象
浏览器网页就是一个DOM节点，更新，遍历，删除，添加。
//取得三个节点
var h1=document.getElementsByTagName('h1');
var p1=document.getElementById('p1');
var p2=document.getElementsByClassName('p2');
var f1=document.getElementById('fa');
var childrens=f1.children; //获取父节点下的子节点
childrens[index]; //获取第几个节点更新：
let id1=document.getElementById('id1');
id1.innerText='name'; //更新文字
id1.innerHTML='<strong>213</strong>'; //插入html文本
id1.style.color='red'; //更改style删除：
let father=document.getElementById('fa');
father.removeChild(p1); //通过父节点删除子节点
let p1=document.getElementById('p1');
let father=p1.parentElement; //获取父元素
father.removeChild(father.children[0]); //删除多个节点的时候child在变化创建插入：
<p id="test">22222</p>
<div id="fa">
<h1>11111</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
let test=document.getElementById('test');
let fa=document.getElementById('fa');
let p1=document.getElementById('p1');
fa.appendChild(test); //追加：把test移入fa中
let newp=document.createElement('p'); //创建新的p
newp.setAttribute('id','newp'); //设置id为newp
newp.id='newp'; //赋值
newp.innerText="333";
fa.appendChild(newp); //末尾插入
fa.insertBefore(test,p1); //父节点插入一个新的节点在p1前面
fa.replaceChild(test,p1); //替换当前节点
let mystyle=document.createElement('style');
mystyle.setAttribute('type','text/css');
mystyle.innerHTML="body{background-color:red;}";
document.getElementsByTagName('head')[0].appendChild(mystyle);
</script>表单信息
<form action="post">
<span>user_name:</span> <input type="text" id="username">
<p>
<span>sex:</span>
<input type="radio" name="sex" value="male" id="boy"> 男
<input type="radio" name="sex" value="female" id="girl"> 女
</p>
</form>
<script>
var input_test=document.getElementById('username');
var boy=document.getElementById('boy');
var girl=document.getElementById('girl');
input_test.value; //获取输入的值
input_test.value='123'; //修改输入的值
boy.value; //返回默认值
boy.checked; //查看是否被选中false||true
</script><input type="hidden" id="md5_pwd" name="password"> //加一个hidden属性来隐藏密码
function f(){
let user_name=document.getElementById('username');
let password=document.getElementById('password');
let md5_pwd=document.getElementById('md5_pwd');
md5_pwd.value=md5(password.value);
console.log(user_name.value);
console.log(password.value);
console.log(md5_pwd.value);
return false;
}jQuery
存在大量的JS代码，是一个库。
获取cdn jQuery(jQuery cdn加速 (jq22.com))
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
//$(selector).action()，公式
$('#test').click(function (){
alert('hello!');
});
$('p').click(); //标签选择器
$('#id').click(); //id选择器
$('class').click(); //类选择器事件
$('p').onmousemove; //按下鼠标
$('p').onmousedown; //移动鼠标操作DOM
$().text();
$().html();
$().css();
