Diary23-全网最全的Javascript合集

1.什么是Javascript

  • Javascript是一门世界上最流行的脚本语言

  • 一个合格的后端人员,必须要精通Javascript

2.快速入门

2.1引入Javascript

2.1.1内部标签
<!--script标签内,写Javascript--><script>alert('hello world');</script>
2.1.2外部引入
<!--外部引入--><script src="HelloWorld.js"></script>

2.2基本语法

<script>var num=1;alert(num);
</script>

2.3数据类型

  • 数值

  • 字符串

  • 布尔值

  • 逻辑运算

  • 比较运算符(这个和Java不太一样)

1.=
2.==   等于(类型不一样,值一样,也会判断为true)
3.===  绝对等于(类型一样,值一样,才会判断为true,Javascript中推荐使用这个)
​
注意:
1.NaN===NaN,这个与所有的数值都不相等,包括自己
2.只能通过isNaN(NaN)来判断这个数是否是NaN
  • 浮点数问题

  • null和undefined(这个和Java不太一样)

1.null  空
2.undefined  未定义
  • 数组(Java的数组必须是相同类型的对象,Js中不需要这样,可以是不同类型的对象)

var arr=[1,2,3,'hello',null,true]
//取数组下标:如果越界了,就会报undefined
  • 对象(对象是大括号,数组是中括号)

每个属性之间使用逗号隔开,最后一个不需要添加

3.数据类型

3.1字符串

  • 正常字符串使用单引号、双引号进行包裹

  • 注意转义字符

1.\n
2.\t
3.\u4e2d   \u####   Unicode字符
4.\x41              Ascll字符
  • 多行字符串编写

//tab上面,Esc的下面var msg=`helloworld你好`
  • 模板字符串

let name="sxc";
let age=22;
let msg='${name}最帅'
  • 字符串长度

str.length
  • 字符串不可变

  • 大小写转换

//这里是方法,不是属性
student.toUpperCase()
student.toLowerCase()
  • 查找字符串中字母所在位置

student.indexOF('u')
  • 字符串的截取

student.substring()

3.2数组

Array可以包含任意的数据类型

var arr=[1,2,3,'hello',null,true]
  • 长度

arr.length
注意:加入给arr.length赋值,数组大小会发生变化,如果赋值过小,元素就会丢失
  • 下标索引

arr.indexOf()
  • slice():截取Array的一部分,返回一个新数组,类似于String中的substring

  • push和pop/unshift和shift

1.push:加入到尾部
2.pop:弹出尾部的一个元素
3.unshift:加入到头部
4.shift:弹出头部的一个元素
  • 排序sort()

  • 元素反转reverse()

  • concat()

注意:concat()并没有修改数组,只是会返回一个新的数组
  • 连接符join:打印拼接数组,使用特定的字符串连接

  • 多维数组

3.3对象

  • 对象赋值

var person{name:sxc,age:22,score:100
}
  • 使用一个不存在的对象不会报错(undefined)

  • 动态的删减属性,通过delete删除对象的属性

  • 动态的添加,直接给新的属性添加值即可

  • 判断属性是否在这个对象中

'age' in person
  • 判断一个属性是否是这个对象自身拥有的hasOwnProperty()

person.hasOwnProperty('age')
true

3.4流程控制

  • if判断

if(){}else if(){}else{}
  • while循环/do while循环

while(){}
​
do{}while()
  • for循环

for(let i=0;i<100;i++){}
  • forEach循环

age.forEach(function(value))
  • for...in

//for(var index in object){for(var num in age){if(age.hasOwnProperty(num)){console.log("存在")console.log(age[num])}}
}

3.5 Map和Set

Map:

var map=new Map([['tom',100],['jack',90],['Rose',80]]);
var name=map.get('tom');
map.set('admin',123456);

Set:无序不重复的集合

set.add(2);
set.delete(1);
console.log(set.has(3));

3.6 Iterator

使用Iterator来遍历迭代Map,Set

  • 遍历数组

//通过for of/for in 下标
var arr=[3,4,5]
for (var x of arr){console.log(x)
}
  • 遍历map

var map=new Map([['tom',100],['jack',90],['Rose',80]]);
for (var x of map){console.log(x)
}
  • 遍历set

var set=new set([5,6,7])
for (let x of set){console.log(x)
}

4.函数

4.1定义函数

定义方式一

function abs(x){if(x>=0){return x;}else{return -x;}
}

定义方式二

var abs=function(x){if(x>=0){return x;}else{return -x;}
}

arguments参数:可以拿到传递进来的所有参数

var abs = function(x){console.log("x=>"+x);
​for (var i = 0; i<arguments.length; i++){console.log(arguments[i]);}
​if(x>=0){return x;}else{return -x;}
​
}

rest:获取除了已经定义的参数之外的所有参数,rest参数必须放在最后面,用...标识

function aaa(a,b, ... rest) {console.log("a=>"+a);console.log("b=>"+b);console.log(rest);
}

4.2变量的作用域

在JavaScript中,var定义变量实际是有作用域的

  • 假设在函数体中声明,则在函数体外不可以使用

  • 假设在JavaScript中函数查找变量从自身函数开始~,由“内”向“外”查找.假设外部存在这个同名的函数变量,则内部函数会屏蔽外部函数的变量。

  • 养成规范:所有的变量定义都放在函数的头部,不要乱放,便于代码维护

局部作用域:用let去定义局部作用域的变量

function aaa(){for (let i=0;i<100;i++){comsole.log(i)}comsole.log(i+1);
}

全局作用域:JavaScript实际只有一个全局作用域,任何变量(函数页可以视为变量),假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,就会报错

var x = 'xxx';
​
window.alert(x);
​
var old_alert = window.alert;
​
//old_alert(x);
​
window.alert = function () {
​
};
// 发现 alert()失效了
window.alert(123);
​
//恢复
window.alert = old_alert;
window.alert(456);

常量const

const PI=3.14;
console.log(PI);

4.3方法

定义方法

方法就是把函数放在对象里面,对象只有两个东西:属性和方法

var sunshen = {name:'sxc’,bitrh: 2000,//方法age: function () {// 今年 - 出生的年var now = new Date().getFullYear();return now-this.bitrh;}
}
​
//属性
sunshen.name
//方法,一定要带()
sunshen.age ()

apply:在JS中可以控制this指向

function getAge() {
// 今年 - 出生的年
var now = new Date().getFullYear();
return now-this.bitrh;
​
}
​
var sunshen = {
name:'sxc',
bitrh: 2000,
age: getAge
​
};
​
// sunshen. age() ok
​
getAge.apply(sunshen,[]);// this,指向了 sunshen,参数为空

5.内部对象

5.1 Date

var now = new Date(); //Sat Jan 04 2020 10:47:06 GMT+0800(中国标准时间)
now.getFullYear();//年
now.getMonth();//月     0~11代表月
now.getDate(); // 日
now.getDay();// 星期几
now.getHours();//时
now.getMinutes();// 分
now.getSeconds(); // 秒
​
now.getTime();// 时间戳 全世界统一 1970 1.1 0:00:00 毫秒数
​
console.log(new Date(1578106175991))//时间戳转为时间

转换

now = new Date(1578106175991)
Sat Jan 04 2020 10:49:35 GMT+0800(中国标准时间)
now.toLocalestring //注意,调用是一个方式,不是一个属性!
f toLocalestring() { [native code] }
now. toLocalestring()
"2020/1/4 上午10:49:35"
now. toGMTString()
"Sat, 04 Jan 2020 02:49:35 GMT"

5.2 JSON

在JavaScript一切皆为对象、任何js支持的类型都可以用JSON来表示;number,string ...

格式:

  • 对象都用{}

  • 数组都用[]

  • 所有的键值对 都是用 key:value

JSON字符串和JS对象的转化

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
​
<script>var person={name:"sxc",age:"22",sex:"男"}//对象转化为json字符串  {"name":"sxc","age":"22","sex":"男"}var jsonperson=JSON.stringify(person);
​//json字符串转化为对象参数为json字符串var obj=JSON.parse('{"name":"sxc","age":"22","sex":"男"}');
</script>
​
</body>
</html>

JSON与JS对象的区别

var obj = {a: 'hello',b:'hellob'};
var json = '{"a": "hello","b":"hellob"}'

6.面向对象编程

class继承

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
​
<script>class Student{constructor(name) {this.name=name;}
​hello(){alert('hello')}}
​var sxc=new Student("sxc");
</script>
​
​
</body>
</html>

7.操作BOM对象(重点)

window:代表浏览器窗口

window.alert(1)
undefined
window. innerHeight
258
window. innerwidth
919
window.outerHeight
994
window. outerwidth
919

screen:代表屏幕尺寸

screen.width
1920px
screen.height
1080px

location(重要):代表当前页面的URL信息

host:"www.baidu.com"
href:"https://www.baidu.com/"
protocol:"https:"
reload:f reload() // 刷新网页
// 设置新的地址
location.assign('https://blog. kuangstudy.com/')

document:代表当前页面

document.title
“百度一下,你就知道”

获取具体的文档树节点

<d1 id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</d1>
​
<script>
var dl = document. getElementById('app');
</script>

获取cookie

document.cookie
'_xsrf=2|8c7b1902|458eb5a7fa1c45676be1cfe9e19cb67e|1700048275'

history

history.back() //后退
history.forward()//前进

8.操作DOM对象(重点)

核心

浏览器的网页就是一个DOM的树形结构

  • 更新:更新DOM节点

  • 遍历dom节点:得到DOM节点

  • 删除:删除一个DOM节点

  • 添加:添加一个新的节点

    要操作一个DOM节点,就必须要先获得这个DOM节点

获取DOM节点

//对应 css 选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByclassName('p2');
var father = document.getElementById('father');
​
var childrens= father.children; //获取父节点下的所有子节点
// father.firstchild
// father. lastchild

这是原生代码,之后尽量用jQuery()

更新节点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
​
<div id="id1">
​
</div>
​
<script>var id1=document.getElementById('id1')
</script>
​
</body>
</html>

操作文本

  • id1. innerText='456' 修改文本的值

  • id1.innerHTML='sxc'

操作JS

id1.style.color = 'yellow';
id1.style.fontsize='20px';
id1.style.padding = '2em'

删除节点

删除节点步骤:先获取父节点,在通过父节点删除自己

<div id="father"><h1>标题一</h1><p id="p1">p1</p><p class="p2">p2</p>
</div>
<script>var self = document.getElementById('p1');var father = p1.parentElement;father.removechild(self)
</script>

插入节点

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
​
<p id="js">JavaScript</p>
<div id="list"><p id="se">JavaSE</p><p id="ee">JavaEE</p><p id="me">JavaME</p>
</div>
​
<script>var js=document.getElementById('js');var list=document.getElementById('list');list.appendChild(js);//追加到后面
</script>
​
</body>
</html>

创建一个新的标签,实现插入

<script>
​
var js = document.getElementById('js');//已经存在的节点
var list = document.getElementById('list');
//通过JS 创建一个新的节点
var newP = document.createElement('p');// 创建一个p标签
newP.id = 'newP';
newP. innerText = 'Hello, Kuangshen';
// 创建一个标签节点
var myscript = document.createElement('script');
myscript.setAttribute('type','text/javascript');
​
//可以创建一个Style标签
var myStyle= document.createElement('style');//创建了一个空style标签
myStyle.setAttribute('type', 'text/css');
myStyle.innerHTML='body{background-color: chartreuse;}';//设置标签内容
​
document.getElementsByTagName('head')[0].appendchild(mystyle)
​
</script>

insert

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
// 要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);

9.操作表单(验证)

获取要提交的信息

<form action="post"><p>
​<span>用户名 :< /span> <input type="text" id="username">
​</p>
​<!-- 多选框的值,就是定义好的value -- ><p>
​<span>性别 :< /span><input type="radio" name="sex" value="man" id="boy">男<input type="radio" name="sex" value="women" id="girl">女
​</p>
</form>
​
<script>var input_text = document.getElementById('username');var boy_radio = document.getElementById('boy');var girl_radio = document.getElementById('girl');
​// 得到输入框的值input_text.value// 修改输入框的值input_text. value = '123'
​// 对于单选框,多选框等等固定的值,boy_radio.value只能取到当前的值boy_radio.checked; //查看返回的结果,是否为true,如果为true,则被选中~girl_radio.checked = true; //赋值
​
</script>

提交表单

<!--
​
表单绑定提交事件
οnsubmit= 绑定一个提交检测的函数,true, false
将这个结果返回给表单,使用 onsubmit 接收!
οnsubmit="return aaa()"
-->
​
<form action="https://www.baidu.com/" method="post" οnsubmit="return I
aaa ()">
​<p><span>用户名 :< /span> <input type="text" id="username"name="username"></p><p><span>密码 :< /span> <input type="password" id="input-password"></p>
​<input type="hidden" id="md5-password" name="password">
​<!-- 绑定事件 onclick 被点击 -- ><button type="submit">提交</button>
</form>
​
<script>
function aaa() {alert(1);var uname = document.getElementById('username');var pwd = document.getElementById('input-password');var md5pwd = document.getElementById('md5-password');
​md5pwd.value = md5(pwd.value);// 可以校验判断表单内容,true就是通过提交,false,阻止提交return true;}
</script>

10.jQuery

<! DOCTYPE html>
<html lang="en">
<head>
<meta charset=['UTF-8">
<title>Title</title>
<!-- cdn引入 -- >
<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
</head>
<body>
​
</body>
</htm1>
<! DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--< script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script> -- >
<script src="lib/jquery-3.4.1.js"></script>
</head>
<body>
​
<a href="" id="test-jquery">点我</a>
​
script>
​
//选择器就是css的选贼器
$('#test-jquery'). click(function () {
alert('hello, jQuery');
})
</script>
​
</body>
</html>

选择器

//原生js,选择器少,麻烦不好记
//标签
document.getElementsByTagName ();
//id
document.getElementById();
//类
document.getElementsByclassName ();
​
//jQuery css 中的选择器它全部都能用!
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click() //class选择器

文档工具站:jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm

事件

<!-- 要求:获取鼠标当前的一个坐标 -- >
mouse : <span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
<div>
​
script>//当网页元素加载完毕之后,响应事件$(function () {$('#divMove') .mousemove(function (e) {$('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)})});
​
</script>

操作DOM

节点文本操作

$('#test-ul li[name=python]').text();//获得值
$('#test-ul li[name=python]').text('设置值’);//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//设置值

css的操作

$ ('#test-ul li [name=python]'). css("color", "red")

元素的显示和隐藏

$('#test-ul li [name=python]').show()
$('#test-ul li [name=python]').hide()

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/219178.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学习通【劳动通论】2023章节练习题

社会主义核心价值观24个字是&#xff1a;富强、民主、文明、和谐&#xff0c;自由、平等、公正、法治&#xff0c;爱国、敬业、诚信、友善。 1、“富强、民主、文明、和谐”&#xff0c;是我国社会主义现代化国家的建设目标&#xff0c;也是从价值目标层面对社会主义核心价值观…

探索云测试的方法:优化软件质量的新趋势

随着云计算技术的不断发展&#xff0c;云测试成为提高软件质量和效率的关键方法之一。本文将介绍一些云测试的方法&#xff0c;以帮助团队更好地应对不同的测试需求和挑战。 1. 云测试环境搭建 传统测试中&#xff0c;搭建测试环境可能需要大量的时间和资源。云测试通过提供可扩…

环境搭建及源码运行_java环境搭建_mysql安装

1、介绍 MySQL是一个关系型数据库管理系统&#xff0c;由瑞典MySQL AB 公司开发&#xff0c;属于 Oracle旗下产品。MySQL是最流行的关系型数据库管理系统之一 1、源码中涉及到的表&#xff1a;mysql 表&#xff1a;订单、意见反馈、用户基础信息、商品、购物车等表 2、订单属于…

linux高级管理——访问MYSQL数据库

一、认识数据库系统&#xff1a; MySQL数据库系统也是一个典型的C/S(客户端/服务器&#xff09;架构的应用&#xff0c;要访问MySQL数据库需要使用专门的客户端软件。在Linux系统中&#xff0c;最简单、易用的MySQL客户端软件是其自带的mysql命令工具。 1&#xff0e;登录到My…

如何想成为嵌入式工程师?(这些东西您必须知道)

嵌入式的发展怎么样&#xff1f; 嵌入式系统领域一直在迅速发展&#xff0c;伴随着物联网、智能设备、汽车电子、医疗设备等应用的不断增加&#xff0c;对嵌入式技术的需求也在不断扩大。因此&#xff0c;嵌入式领域仍然是一个充满机会的领域&#xff0c;为专业人士提供…

〖大前端 - 基础入门三大核心之JS篇(53)〗- 构造函数与类

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费&#xff0c;如需要项目实战或者是体系化资源&#xff0c;文末名片加V&#xff01;作者&#xff1a;哈哥撩编程&#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作&#xff0c;目前在公司…

VMware安装ContOS 7 提示“客户机操作系统已禁用 CPU。请关闭或重置虚拟机。”

目录 实验环境报错截图报错原因猜测&#xff08;根据实验现象&#xff09;解决办法如下 实验环境 Vmware Workstation 17.5 CentOS7 镜像版本&#xff1a;2207-02版本 注意&#xff1a;2009版本并无该错误 报错截图 报错原因猜测&#xff08;根据实验现象&#xff09; CentO…

​platform --- 获取底层平台的标识数据​

源代码&#xff1a; Lib/platform.py 备注 特定平台按字母顺序排列&#xff0c;Linux 包括在 Unix 小节之中。 跨平台 platform.architecture(executablesys.executable, bits, linkage) 查询给定的可执行文件&#xff08;默认为 Python 解释器二进制码文件&#xff09;来获…

用AI画个女朋友回家过年,1行Python代码,免费实现

#这才是真功夫# 大家好&#xff0c;这里是程序员晚枫&#xff0c;全网同名。 马上过年了&#xff0c;还是单身的举个爪&#xff01; 今年GPT系列的产品非常火爆&#xff0c;今天给大家分享一下&#xff0c;如何免费用AI代码画1个女朋友。&#x1f447; 直接上代码 大家学习 或 …

Centos7防火墙及端口开启

1、防火墙 1.1、查看防火墙是否开启 systemctl status firewalld 1.2、开启防火墙 firewall-cmd --list-ports 1.3、重启防火墙 firewall-cmd --reload 2、端口 2.1、查看所有已开启的端口号 firewall-cmd --list-ports 2.2、手动开启端口 启动防火墙后&#xff0c;默认没有开…

【云原生kubernets】Ingress 功能与应用

一、Ingress 介绍 1.1.Ingress产生原因&#xff1a; 当我们使用Service的时候&#xff0c;Service对集群之外暴露服务的主要方式有两种&#xff1a;NotePort和LoadBalancer&#xff0c;但是这两种方式&#xff0c;都有一定的缺点&#xff1a; &#xff08;1&#xff09;Node…

【初阶C++】入门(超详解)

C入门 前言1. C关键字(C98)2. 命名空间2.1 命名空间定义2.2 命名空间使用2.3嵌套命名空间 3. C输入&输出4. 缺省参数4.1 缺省参数概念4.2 缺省参数分类 5. 函数重载5.1 函数重载概念5.2 C支持函数重载的原理--名字修饰(name Mangling) 6. 引用6.1 引用概念6.2 引用特性6.3 …

C++初阶(十五)Stack和Queue

文章目录 一、Stack的模拟实现二、Queue的模拟实现三、容器适配器1、什么是容器适配器2、STL标准库中stack和queue的底层结构3、 deque的简单介绍(了解)1、deque的原理介绍2、deque的缺陷 4、为什么选择deque作为stack和queue的底层默认容器 一、Stack的模拟实现 #include<…

Web server failed to start. Port 8888 was already in use.

端口占用 强制终止占用端口的进程 获取占用端口的进程ID&#xff08;PID&#xff09;&#xff1a;在终端或命令提示符中运行以下命令以查找占用端口的进程ID&#xff1a; ①在 Unix/Linux/Mac 上&#xff1a;lsof -i :8888 ②在 Windows 上&#xff1a;netstat -ano | findstr …

JS基础中VO和AO的关系

JS基础中VO和AO的关系 AO(Active Object)VO(Variable Object)AO和VO的关系 AO(Active Object) AO(ActiveObject)是函数的活动对象&#xff0c;它是在函数执行时创建的一个对象&#xff0c;用于存储函数内部的变量和函数声明。 VO(Variable Object) VO(VariableObject)是变量对象…

Cocoa Mac音频模块关键步骤总结

1. .driver 插件 #include <CoreAudio/AudioServerPlugIn.h> 头文件 static AudioServerPlugInDriverInterface gAudioServerPlugInDriverInterface 静态函数struct&#xff0c; 返回一系列回调的函数指针 //开始io&#xff0c;代表有对象链接进来了&#xff0c;如果是…

java实现局域网内视频投屏播放(四)投屏实现

代码链接​​​​​​​​​​​​​​​​​​​​​ 设备发现 上一篇文章说过&#xff0c;设备的发现有两种情况&#xff0c;主动和被动&#xff0c;下面我们来用java实现这两种模式 主动发现 构建一个UDP请求发送到239.255.255.250:1900获取设备信息&#xff0c;UDP包的…

【价值几十万的仿抖音直播电商系统源码共享】

当下&#xff0c;传统的图文电商模式已经走向没落&#xff0c;以抖音为首的直播电商模式备受用户追捧&#xff0c;它具有实时直播和强互动的特点&#xff0c;是传统电商所不具备的优势。而且&#xff0c;当前正是直播电商的红利期&#xff0c;很多主播和品牌商都通过直播电商业…

C语言经典错误总结(二)

一.运算符优先级问题 该问题对于大多数C语言程序员都是存在的&#xff0c;原因当然就是无法准确找到表达式计算顺序。 看例题&#xff1a; 假如我们有两个整数a &#xff0c;b&#xff0c;现在我们要求整数c是一个八位整数&#xff0c;使其前4位与a相同&#xff0c;后4位与b…

【java】保留前N月数据文件,定期删除数据

数据越积越多&#xff0c;过于冗余&#xff1b;数据库定期删除指定时间前的数据&#xff1b;文件生成的删除指定时间前端文件 SFTP文件定期删除 java sftp 定时清理指定文件中固定时间 依赖 <!-- ftp文件上传/下载Jar包 --> <dependency><groupId>com.jc…