JavaScript笔记

ils+

已于 2023-09-11 10:51:18 修改

阅读量177

点赞数

分类专栏：前端文章标签： javascript 前端

于 2023-03-06 10:57:19 首次发布

本文链接：https://blog.csdn.net/m0_73493077/article/details/129357274

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript

‘use strict’ 严格检查模式，必须写在js第一行

引入

<!--html中-->
<body>
    <script type="text/javascript">
    	alert('world');
    </script>
    <input type="button" onclick="javascript:" >
</body>
<!--外部引入-->
<head>
    <script src="js/test.js"></script>
</head>

变量作用域

//全局变量，函数体内生效，函数内没有找到会向外查找
var a = 5,
	b = 10,
    

//全局对象,所有全局变量绑定在window上
window.a

//唯一全局变量，把属性、方法放到自定义空间中，降低全局命名冲突
var Test = {};
Test.a = 1;
Test.add = function(a,b){
    return a+b;
}

//局部变量，大括号内使用
let b = 6

//常量，只读变量
const c = 7;

基本语法

//流程控制 同java
//if、switch、for、while、break、continue

//网页输出
document.write(a);

//控制台输出
console.log(a);
console.info(a);

数据类型

typeof a

number
- 不区分小数和整数
- NAN：不是一个数字，与所有数值都不相等，not a number
- Infinity：无限大
- 浮点数存在精度问题，(1/3) === (1-2/3) false
- Math.avs((1/3) === (1-2/3) )<0.00000000001 true
string
- ‘abc’
- “abc”
- 转义：\ '：单引号 \n：换行 \t：tab
- ``：长字符串，可多行
- “hello ${world}”
boolean
undefined
- 不等于null
object

转换：parseInt(）

运算符

算数运算符
- – ++ + - * / %
赋值运算符
- += -= =
比较运算符
- < > >= <= != ?
- === //值一样，类型一样
- !== //不等值或不等型
逻辑运算符
- && || !
位运算符
- << //二进制数左移，空余补0，乘2
- .>> //二进制数右移，空余补0，除以2
- & //与，二进制数对位相与
- | //或，二进制数对位相或
- ^ //异或，二进制数对位相异或

数组

长度可变：arr.length=10;

创建方式

//创建
let arr = new Array(5);

let arr = new Array("01","02","03");

let arr = new Array("a","b","c");

var arr = [01,02,03];

//赋值
arr[0] = "a";

//输出
console.info(arr); 

//forEach遍历，ES5.1
arr.forEach(
    function(i){
        document.write(i);
    }
);
//for of
for(var i of arr){
    console.info(i);
}

二维数组

//创建
var arr = new Array(5);
for(var i = 0; i < arr.length; i++){
    arr[i] = new Array(3);
}
var arr = [[0,0],[1,1],[2,2]];

arr[0][0] = "a";

//遍历
//1.for循环嵌套
for(var j = 0; j < arr.length; j++){
    for(var k = 0; k < arr[j].length; k++){
        console.log(arr[j][k]);
	}
}
//2.for in
for(var i in arr){
    console.info(arr[i]);
}
//3.forEach
arr.forEach(
	function(i){
        console.info(arr[i]);
    }
);

数组方法

方法 arr.
length	数组长度
join(str)	返回以str分隔的字符串
toString()	返回以逗号分隔的字符串
concat(arr[],arr[])	返回合并后的数组
reverse()	返回反向数组
sort()	排序，默认字母顺序
sort(mysort)	排序，小→大
indexOf(str)	返回字符的索引
slice(start,end)	获取子数组
splice(start,delete,str,…)	原数组添加并删除，返回删除的值
find(myfind)	返回符合条件的第一个元素
filter(myfind)	返回符合条件的所有元素

栈操作 arr.
push(str,…)	末端入栈，数组末尾插入值
pop()	最后一个值出栈，删除并返回最后一个值
unshift(str,…)	首端入栈，数组开头插入值
shift()	第一个值出栈，删除并返回第一个值

函数

function mysort(a,b){
    return a-b;
}
function myfind(a){
    return a>10;
}

集合

map

//创建
var map = new Map([['张三',15],['李四',20]]);
//通过key获取值
var age = map.get('张三');
//添加值
map.set('Tom',18);
//删除
map.delete('张三');
//遍历iterator，ES6
for(let kev of map){
    console.log(kev);
}

set

无序不重复集合

//创建
var set = new Set([1,2,3,4,5,1]);
//添加
set.add(6);
//删除
set.delete(1);
//是否包含
set.has(2);
//遍历
for(let kev of set){
    console.log(kev);
}

函数

系统函数

parselnt

//字符串转换数字
var num = parselnt("30");

parseFloat、

//字符串转换浮点数
var num = parseFloat("3.14");

isNaN

/*是否为数字，is not a number*/
var b = isNaN(20)	//f

eval

//执行字符串内容
var num = eval("2*2")	//4

自定义函数

不支持函数重载

//方式一
function myfunction(a,b){
    return a-b;
}
//方式二
var myfunction = function(a,b){
    return a+b;
}

//调用
myfunction(1,2);

//手动抛出异常
throw 'not a number';

argument

//代表函数传进来的所有参数，是一个数组
function myf(){
    for(let i = 0; i < argument.length; i++){
    console.log(argument[i]);
	}
}
myf("1","2","...");

rest

//获取已定义参数之后的所有参数。ES6
function myfunction(a,b,...rest){
    return a-b;
}

apply

/*控制this指向*/
function getAge(){
    var now = new Date().getFullYear();
    return now-this.birth;
}
var person = {
    name: "张三",
    birth: 2000,
    age: getAge
}
getAge.apply(person,[]);	//指向person，参数为空

面向对象

对象

//创建
var person = {
    name: "张三",
    birth: 2000,
    tags: [01,02,03]
    age: function(){
        var now = new Date().getFullYear();
        return now-this.birth;
    }
}

var stutent = new Object();

//使用
person.name;
person.age();

//删除属性值、添加属性
delete person.name;
stutent.name = "张三";

//判断属性是否在对象中
'age' in person;

//判断属性是否自身拥有
person.hasOwnProperty('age');

原型对象

var person = {
    eat: function(){
        console.log(this.name + 'eat...');
    }
};

var student = {
    name: "张三"
};

//原型对象
student.__proto__ = person;

student.eat();

//
function Student(name){
    this.name = name;
}
//给student新增一个方法
Student.prototype.hello = function(){
    alert('hello')
};

Class

class继承，ES6

//定义一个类
class Person{
    //构造器
    constructor(name){
        this.name = name;
    }
    //方法
    hello(){
        alert('person')
    }
}

//继承
class Student extends Person{
    //构造器
    constructor(name,grade){
        super(name);
        this.grade = grade;
    }
    
    myGrade(){
        alert('student')
    }
}

//使用
var tom = new Person("Tom");
tom.hello();

var tim = new Student("Tim",6);
tim.hello();
tim.myGrade();

原型链

继承

事件

状态事件

onload：文档装载完毕
onunload：推出文档
onchange：值发生变化
onfocus：获得焦点
onblur：失去焦点
onsubmit：标点提交

键盘事件

onkeypress：按过键盘
onkeydown：键盘按下
onkeyup：键盘弹起

鼠标事件

onclick：单击

ondblclick：双击

onmousedown：鼠标按下

onmouseup：鼠标弹起

onmouseover：鼠标移入

onmouseout：鼠标移出

使用

window.onload = function(){
    var btn = document.getElementById("btn");
    btn.onclick() = function(){
        alert("点击事件");
    }
}

阻止冒泡事件

function f(event){
    event.cancelBubble = true;
}

常用对象

String

方法 str.
length	字符串长度
toLowerCase()	转换为小写
toUpperCase()	转换为大写
charAt(index)	返回索引所在字符
charCodeAt(index)	返回索引所在字符的unicode
indexOf(str,index)	返回字符的索引，从index开始
lastIndexOf()	反向查找，返回字符的索引
match()	返回匹配到字符串
search()	返回字符串首字母的索引
substr(start,length)	截取
substring(start,end)	截取，前闭后开
slice(start,end)	同上，可写负值
replace(old,new)	替换第一个字符
split(str)	返回以str分割成的字符串数组
concat(str)	字符串连接

Date

用于操作日期和时间

var now = new Date();	//返回当前时间

now.getFullYear();	//年 
now.getMonth();		//月	0~11*
now.getDate();		//日 1~31
now.getDay();		//星期 0~6*
now.getHours();		//时 0~23
now.getMinutes();	//分 0~59
now.getSeconds();	//秒 0~59
now.getTime();		//时间戳

//转换
var now = new Date(1578106175991);	//时间戳转换为时间

//本地时间
now.toLocaleString()
now.toLocaleDateString()
now.toLocaleTimeString()

//GMT时区
now.toGMTString()

//时间转字符串
now.toDateString()
now.toTimeString()

Math

用于执行常用的数学任务，它包含了若干个数字常量和函数

//小数向上舍入
Math.ceil()

//小数向下舍入
Math.floor()

//小数四舍五入
Math.round()

//随机数，同java
Math.random()

json

json是一种轻量级的数据交换格式

易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率

对象：{}
数组：[]
键值对：key : value

var user = {
    name: "张三",
    age: 5
}

//转化为json字符串
var jsonUser = JSON.Stringify(user);

//json转化为对象
var user = JSON.parse('{"name":"张三","age":5}')

Bom

浏览器对象模型 browser object model

window
- history
- location
- document
  - form
  - …

window

代表浏览器窗口

window.innerHeight
window.innerWidth
window.outerHeight
window.outerWidth
window.location = "url";	//跳转页面

//window. 可省略
//警告弹窗
alert("hello");

//提示框，返回输入内容
var str = prompt("提示","默认值");

//确认框，返回true、false
var b = confirm();

//打开一个新的浏览器窗口，加载给定 URL 所指定的文档
open('url')

//关闭浏览器窗口
close()

//在指定的毫秒数后调用函数或计算表达式
var myTime = setTimeout('函数',3000)
//停止
clearTimeout('myTime')
//按照指定的周期（以毫秒计）来调用函数或表达式
var myTime = setInterval('函数',1000)
//停止
clearInterval('myTime')

history

浏览器的历史记录

history.back()		//后退
history.forward()	//前进
history.go(-1)		//-1后退、1前进

location

当前页面的url信息

location.host		//设置或返回主机名和当前URL的端口号
location.hostname	//设置或返回当前URL的主机名
location.href		//设置或返回完整的URL

//刷新网页
location.reload()

//定位到指定网址
location.assign('url')

//替换当前网址，不能返回
location.replace('url')

document

当前页面

document.referrer	//返回前一页url
document.URL		//返回当前页url
document.title		//返回标题
document.cookie		//返回cookie

//向文档写文本、HTML表达式或JavaScript代码
document.write()

//返回指定id的第一个对象的引用
var i = document.getElementById('id')
i.value			//属性：值
i.innerHTML		//属性：html文本

//返回指定名称的对象的集合
document.getElementsByName()

//返回指定标签名的对象的集合
document.getElementsByTagName()

//返回指定类名的对象的集合
document.getElementsByClassName()

//返回带有指定css选择器对象（数组）
document.querySelector("css选择器")
document.querySelectorAll("css选择器")

navigator

封装了浏览器信息

navigator.appName
navigator.appVersion
navigator.userAgent
navigatorplatform

screen

屏幕尺寸

screen.width
screen.heigth
screen.availWidth
screen.availHeigth

Dom

文档对象模型 document object model

节点关系

<div id='d'>
	<p>1</p>
	<p>2</p>
    <p>3</p>
</div>

<script>
    let d = document.getElementsById('d');

    //返回当前节点的父节点、子结点
    d.parentNode
    d.childNode
    //返回第一个子节点、最后一个子节点
    d.firstChild
    d.lastChild
    //返回下一个节点、上一个节点
    d.nextSibling
    d.previousSibling

    //返回元素节点（不包含回车）
    d.parentElement
    d.children
    d.firstElementChild
    d.lastElementChild
    d.nextElementSibling
    d.previousElementSibling

</script>

创建节点

//创建元素对象
var img = document.createElement("标签名称");

//设置属性、属性赋值、删除属性、获取属性
img.setAttribute("属性名","属性值");
img.width = "200";
img.removeAtttribute("属性名");
img.getAttribute("属性名");

添加节点

document.getElementById('div').

//追加a
appendChild(a)
//b前加a
insertBefore(a,b)
//a替换old
replaceChild(a,old)

更新节点

会产生覆盖

//获取（设置）值
d.getAttribute('属性名')
d.getAttribute('属性值','属性名')
//更新文本
 d.innerText = '123'
 d.innerHTML = '<h1>123<h1>'
//操作CSS
 d.style.color = 'red'
 d.style.fontSize = '20px'
 d.style.padding = '10px'

删除节点

先获取父节点，再通过父节点删除自己

var s = document.getElementsById('id');
var f = self.parentElement; 

f.removeChild(p1);
f.removeChild(f.children[0]);

表格操作

表格对象
- 属性：
  - rows 获取表格中多有的行对象
- 方法：
  - insertRow(“插入行的位置索引”)
  - deleteRow(“行的位置索引”)
行对象
- 属性：
  - cells 所有一行中所有的单元格对象
  - rowIndex 获取行的位置索引
- 方法：
  - insertCell(“位置”)
  - deleteCell(“位置”)
单元格对象
- 属性：
  - innerHTML
  - align
  - className
  - cellIndex

属性

var tab_obj = document.getElementById("tab");

//表格行数
var rows = tab_obj.rows;
rows.length;

方法

tableRow、tableCell

//插入行，传入索引位置（0起始）
var row_obj = tab_obj.insertRow(rows.length);
//插入单元格
row_obj.insertCell(0).innerHTML = "张三";
row_obj.insertCell(1).innerHTML = "20";

//更新单元格内容
var cells = rows[1].cells;
cells[0].innerHTML = "李四";
cells[1].innerHTML = "19";

//删除单元格，传入索引位置（0起始）
row_obj.deleteCell(0)
//删除行，传入索引位置（0起始）
tab_obj.deleteRow(1)

表单验证

<from action="">
    <p>
        用户名：<input type="text" name="username" id="username"><br/>
        密码：<input type="password" name="password" id="pwd">
    </p>
</from>
<script>
	var input_text = document.getElementById('username');
    //修改输入框的值
    input_text.value = '123';
</script>

jQuery

工具类，jQuery库javascript函数

导入：

<script src="jquery-3.6.0.js" type="text/javascript"></script>

使用：$(选择器).事件(函数)

jquery对象和js对象互转

//jquery→js
jquery对象[0]
jquery对象.get(0)

//js→jquery
$(js对象)

选择器

//基础选择器
$("同css选择器").事件

//li标签的第一个元素
$("li:first")
//li标签的最后一个元素
$("li:last")
//li标签的偶数元素（0开始）
$("li:even").test()
//li标签的奇数元素
$("li:odd")

//li标签索引为2的元素（0开始）
$("li:eq(2)")
//li标签索引大于2的元素
$("li:gt(2)")
//li标签索引小于2的元素
$("li:lt(2)")
//li标签索引不为2的元素
$("li:not(:eq(2))")

//div标签中为空的元素（回车也算）
$("div:empty")

//获取隐藏p标签的内容
$("p:hidden").html()

//属性选择器
$("[name]").val("admin")
$("[name=uname]").val()
/*等于=、包含*=、开头^=、结尾$=*/

//所有input元素
$("input")
//input标签下text（password）属性元素
$("input:text")
$("input:password")

//已选择的元素
$("select:option:selected")
$("input:checkbox:checked")
$("[name=hobby]:checked")

//子元素选择
$("ul li:nth-child(2)")
$("ul li:first-child")

//被选中的多选框
$(["type=checkbox]:checked")

//this是js对象不能使用jquery函数
this
$(this).val()

效果

//隐藏、显示、显示/隐藏（毫秒，函数）
hide(1000)
show(2000,function(){})
toggle(3000);

//淡入、淡出、切换（毫秒，函数）
fadeIn(1000);
fadeOut(2000,function(){});
fadeToggle(3000);

//滑动
sildeUp()
sildeDown()
sildeToggle()

//动画
animate({
    left: '50px',
    opacity: '0.5',
    height: '100px',
    width: '100px'
})

事件

状态事件

//onload
$(function(){
    
})

//失去焦点
blur()
//获得焦点
focus()
//改变
change()

鼠标事件

//点击
click()
//双击
dblclick()
//悬停
mouseover()
//离开
mouseout()

键盘事件

操作

dom操作

//设置或返回文本、超文本、值
text("123")
html()
val()

//结尾添加
append("<a href='http://www.baidu.com'>百度</a>")
//开头添加
prepend()
//被选元素之后添加
after()
//被选元素之前添加
before()

//删除被选元素和子元素（删除指定内容）
remove("tr")
//删除被选元素子元素
empty()

css

css("color","black").css("background-color","blue")
//添加、删除样式表
addClass("mycss")
removeClass("mycss")

.mycss{
    color: pink
}

属性

//设置、获取attribute，src、href、width...
attr("src","/img/1.jpg")
attr("src")

//设置、获取property1.6+，checked、selected、disabled...
prop("checked","true")
prop("checked")

遍历

$("ul li").first()

$("ul li").last()

$("div").children()

$("span").parent()
$("span").parents()

next()
nextAll()

prev()
prevAll()

//遍历
$.each(list,function(index,element){
    
})

遍历表格数据

<table style="border-collapse: collapse;">
  <tr">
      <td>测试1</td>
      <td>测试2</td>
      <td>操作</td>
  </tr>
  <tbody id="tableData"></tbody>
</table>

$("#tableData").html("");
for (const obj of data.rows) {
    let tbody = $("#tableData").get(0);
    let row = tbody.insertRow();
    row.innerHTML = "<td style='display: none'>" + obj.id + "</td>"
    	+ "<td>" + obj.test1 + "</td>"
        + "<td>" + obj.test2 + "</td>"
        + "<td><a href='javascript:void(0);' class='delete'>删除</a></td>"
}