文章目录
1. 概述
JavaScript是一门世界上最流行的脚本语言，10天被一位大牛设计出来。
2. 快速入门
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script>-->
<!-- alert("hello");-->
<!-- //内部标签-->
<!-- </script>-->
<!--script标签必须成对出现-->
<script src="js.js"></script>
</head>
<body>
<!--这里也可以存放js-->
</body>
</html>
基本语法，大部分和java差不多。
数据类型：
js不区分小数和整数，只有number
123
1.12e3
1120
-99
NaN // not a number
Infinity // 无限大
= // 赋值
== // 判断(类型不一样，值一样，也会判断为true)1=="1"
=== // 绝对等于(类型一样，值一样)
最好不要用==比较。NaN == NaN->false，与所有数值不相等，包括自己，只能通过isNaN(NaN);
null 空 undefine 未定义
//保证代码可读性使用上面这种方式
var arr = [1,2,3,null,"abc",true];
new arr(1,2,3,null,"abc",true)
//当下标越界时会输出undefine
//数组用方括号，对象用大括号
var person = {
name:"kk",
age:3,
tags:[1,2,3,true]
}
//取值 person.name --> "kk"
3. 严格检查模式
// i = 1;//不会报错，默认是全局变量，因此会出问题。
//预防js的随意性导致产生一些问题，必须写在第一行
'use strict';
let i = 1;//局部变量建议使用let定义
4. 数据类型
4.1 字符串
// 字符串不可被修改
// 多行字符串编写,使用反引号(tab上面)
let str = `
abc
123
你好
`;
// 字符串拼接
let msg = "111,${str}";
// 字符串长度 属性
str.length;
// 转换大小写 方法
str.toUpperCase();
str.toLowerCase();
// 截取字符串 前闭后开
str.substring(1,3);
4.2 数组
可包含任意的数据类型
let arr = [3,4,"abc"]
arr.length;
// 数组大小可变，扩充的部分为undefined
arr.indexOf(2)//通过元素获得下标索引
arr.slice(3);//截取数组的一部分，返回一个新数组.3-末尾
arr.push();// 压入数组尾部
arr.pop();// 弹出数组尾部一个元素
arr.unshift();// 压入数组头部
arr.shift();// 弹出数组头部一个元素
arr.sort();
arr.reverse();// 反转
arr.contact([1,2]);//->[3,4,"abc",1,2],但并不改变arr，是返回一个新数组
arr.join("-") //->"3-4-abc-1-2",拼接
4.3 对象
若干个键值对
var 对象名 = {
name: value,
name: value,
name: value //最后一行不要加逗号
//方法
name: function(){
}
};
// 对象名.name --> value
// 对象名.name() 调用方法要带括号
// 赋值 对象名.name = newvalue
// 使用不存在的对象属性，不会报错，会输出undefined
//动态删减和添加属性
delete 对象名.name
对象名.newname = newvalue
//name(键)均为字符串
//判断属性值是否存在
"name" in 对象名 //-->true/false
4.4 Map和Set
Map:
let map = new Map([['tom',100],['jerry',100]]);
console.log(map.get('tom'));
map.set("1",1);
map.delete('tom');
Set: 无序不重复集合
let set = new Set([3,1,1,1]); //->[3,1]
set.has(3);//true
set.add(2);
set.delete(1);
遍历:
for(let x of arr/map/set) console.log(x);//for-in打印下标
5. 函数
// 定义方式1
function abs(x){return x>=0 ? x : -x;}
abs();// 不传参数，会返回NaN
function abs(x){
if(typeof x != 'number') throw 'not a number';
return x>=0 ? x : -x;
}
// 定义方式2
var abs = function(x){return x>=0 ? x : -x;}
abs(-10);
abs(-10,1,2,3,4);// 10
// arguments是js免费赠送的关键字
// 代表传递进来的所有参数，是一个数组
// ES6新特性 rest代表除了已经定义的参数之外的所以参数，也是数组
// function(x,...rest){}
6. 内部对象
6.1 Date
let now = new Date();
now.getFullYear();
now.getMonth(); // 0-11月
now.getDate(); // 日
now.getDay(); // 周几
now.getHours();
now.getMinutes();
now.getSeconds();
now.getTime(); // 时间戳 全世界统一
console.log(new Date(now.getTime())); // 时间戳转为时间
6.2 Json
- 是一种轻量级的数据交换格式。
- 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
- 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在JS中一切皆为对象，任何js支持的类型都可以用JSON表示
- 对象都用{}
- 数组都用[]
- 所有键值对都是key:value，key必须是字符串
JSON和JS对象的转换
let user = {
name: "kk",
age: 3,
sex: '男'
}
//对象转化为json字符串
let json = JSON.stringify(user);// "{"name":"kk","age":3,"sex":"男"}"
//json字符串转化为对象
let obj = JSON.parse('{"name":"kk","age":3,"sex":"男"}');
7. 面向对象
什么是面向对象
Java、c#、c++面向对象： 类—模板 对象—具体实例
在JS中有些区别。
原型：(原型链)
class继承：(ES6引入) 本质仍是原型
class Student{
//构造器
constructor(name) {
this.name = name;
}
hello(){
alert("hello");
}
}
let kk = new Student("kk");
//继承
class Primary extends Student {
constructor(name,grade) {
super(name);
this.grade = grade;
}
myGrade(){
alert("学生");
}
}
8. 操作BOM对象 (重点)
BOM: 浏览器对象模型
window: 代表浏览器窗口
window.alert(1)
window.innerHeight
window.innerWidth
window.outerHeight
window.outerWidth
......
Navigator: 封装了浏览器的信息
navigator.appName
navigator.appVersion
navigator.userAgent
navigator.platform
.......
大多数时候不会使用此对象，因为会被人为修改
Screen: 代表屏幕信息
screen.width
screen.height
location(重要): 代表当前页面URL信息
host: "www.runoob.com"
href: "https://www.runoob.com/java/java-stringbuffer.html"
protocol: "https:" // 协议
reload: ƒ reload() // 重新加载页面 location.reload()
// 设置新的地址 访问当前页面就会跳到新的网址里
assign: ƒ assign() // location.assign("网址")
document: 代表当前网页 HTML DOM文档树
document.title
//修改
document.title = " "
//获取cookie
document.cookie
可获取具体的文档节点
<dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>
<script>
let dl = document.getElementById('app');
</script>
history: 代表浏览器历史记录
history.back // 后退
history.forward // 前进
9. 操作DOM对象(重点)
DOM：文档对象模型
浏览器网页就是一个Dom树形结构
- 更新Dom节点
- 遍历得到Dom节点
- 删除一个Dom节点
- 添加一个新的Dom节点
9.1 获得DOM节点
<div id="father">
<h1>标题</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
'use strict';
let h1 = document.getElementsByTagName('h1');//返回的是数组
let p1 = document.getElementById('p1');
let p2 = document.getElementsByClassName('p2');
let father = document.getElementById('father');
let children = father.children; //获取父节点下的所有子节点。father.firstchild
</script>
9.2 更新节点
<div id="father">
<p id="p1">p1</p>
</div>
<script>
'use strict';
let p1 = document.getElementById('p1');
let father = document.getElementById('father');
//操作文本
p1.innerText = '123';// 修改文本
father.innerHTML = '<strong>456</strong>';//可解析HTML标签
//操作css
p1.style.color = 'red';// 属性用字符串
...
</script>
9.3 删除节点
步骤：先获取自己的父节点，在通过父节点删除自己
<div id="father">
<p id="p1">p1</p>
</div>
<script>
'use strict';
let p1 = document.getElementById('p1');
//let father = document.getElementById('father');
let father = p1.fatherElement;
father.removeChild(p1);
//另一种删除方式 动态删除，因此只删除第一个标签索引一直为0
father.removeChild(father.children[0]);
</script>
9.4 插入节点
<p id="one">111</p>
<div id="father">
<p id="p1">p1</p>
<p id="p2">p2</p>
</div>
<script>
'use strict';
let p = document.getElementById('one'),
list = document.getElementById('father');
list.appendChild(p);// 追加 将外面的p标签直接移入到div里面
// 创建新标签
let newP = document.createElement('p');
newP.id = 'newP';
newP.innerText = '123';
list.appendChild(newP);
// 添加属性的另一种方式
let myScript = document.creatElement('script');
myScript.setAttribute('type','text/javascript');
</script>
10. 操作表单(验证)
-
文本框 text
-
下拉框 select
-
单选框 radio
-
多选框 checkbox
-
隐藏域 hidden
-
密码框 password
…
获得和修改表单的值
<form action="post">
<p>
<span>用户名：</span><input type="text" id="username">
</p>
<p>
<span>性别</span>
<input type="radio" name="sex" value="men" id="boy">男
<input type="radio" name="sex" value="women" id="girl">女
</p>
</form>
<script>
//得到输入框的值
let input = document.getElementById('username');
//修改输入框的值
input.value = '123';
// 对于多选、单选、下拉框
let boy = document.getElementById('boy');
boy.checked;// true为选中
boy.checked = true;// 赋值
</script>
11. jQuery
<head>
<meta charset="UTF-8">
<title>Title</title>
//cdn
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<!--
公式：$(selector).action()
-->
<a href="" id="test">点击</a>
<script>
// let id = document.getElementById('test');
// id.click(function (){});
//选择器就是CSS的选择器
$('#test').click(function (){
alert('hello');
});
</script>
</body>
11.1 选择器
jQuery 工具站：工具站
$('p').click();// 标签选择器
$('#id').click();// id选择器
$('.class').click();// 类选择器
//css选择器都能用,查上面网站即可
11.2 jQuery事件
鼠标事件
mouse: <span id="mouseMove"></span>
<div id="divMove">
移动鼠标
</div>
<script>
//当网页元素加载完毕之后，响应事件
$(function (){ //表示网页已加载
$('#divMove').mousemove(function (e){
$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
})
});
</script>
其余事件仍可以在工具站中找 工具站
11.3 操作DOM
<ul id="test">
<li class="js">JS</li>
<li class="java">Java</li>
</ul>
<script>
//text()、html()...没有参数是获取值，有参数是设置值
$('#test li[class=js]').text(); //"JS"
$('#test').html();// <li class="js">JS</li> <li class="java">Java</li>
</script>
CSS操作:
$('#test li[class=js]').css('color','red');
元素显示和隐藏：本质display：none
$('#test li[class=js]').show();
$('#test li[class=js]').hide();
1510
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
