JS(JavaScript)
2024-04-23 01:35:41
1、JS快速入门
1.1、引入JavaScript
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!-- script 标签内，写JavaScript 代码-->
<!-- <script>-->
<!-- alert('hello,world');-->
<!-- </script>-->
<!-- 外部引入-->
<!-- 注意： script标签必须成对出现--><script src="js/qj.js"></script>
<!--不用显示定义type,也默认就是javascript--><script type="text/javascript"></script>
</head>
<body>
<!--这里也可以存放-->
</body>
</html>
1.2、基本语法入门
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- JavaScript严格区分大小写！--><script>// 1. 定义变量 变量类型 变量名 = 变量值；var score = 71;// alert(num);// 2.条件控制if (score>60 && score<70){alert("60~70")}else if (score>70 && score<80){alert("70~80")}else{alert("other")}//console.log(score) 在浏览器的控制台打印变量！ System.out.println();/** asdfsa*/</script>
</head>
<body>
</body>
</html>
1.3、数据类型
number
js不区分小数和整数，Number
NaN // not a number
Infinity // 表示无限大let a = `nmber s, asdiajlsdfj, asdflaj` //``多行字符串
比较运算符
=
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果为 true）
须知：
- NaN===NaN，这个与所有的数值都不相等，包括自己
- 只能通过 isNaN(NaN) 来判断这个数是否是 NaN
数组
java 的数值必须是相同类型的对象，JS中不需要这样！
<script>//保证代码的可读性，尽量使用 []var arr = [1,2,3,4,5,'hello',null,true];new Array(1,12,1,2,3,4,'hello');</script>
map 和 Set
<script>'use strict';// let i = 1;// ES6 letvar map = new Map([['tom',100],['jack',90],['haha',80]]);var name = map.get('tom')map.set('admin',123455);console.log(name);set.add(2); //添加set.delete(1); console.log(set.has(3)); // 是否包含某个元素</script>
对象
对象是大括号，数组是中括号
每个属性之间使用逗号隔开，最后一个不需要添加
<script>//Person person = new Person(1,2,3,4,5);var person = {name: "blm",age: 3,tags: ['js','java','web','...']}</script>
1.4、严格检查格式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!--前提： IDEA 需要设置支持 ES6 语法‘use strict' ; 严格检查模式，预防JavaScript的随意性导致产生的一些问题必须写在JavaScript的第一行！let 局部变量var 全局变量
--><script>'use strict';let i = 1;</script>
</head>
<body>
</body>
</html>
1.5、iterator
ES6
遍历数组
// 通过 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],["haha",80]]);
for (let x of map){console.log(x)
}
遍历set
var set = new Set([5,6,7]);
for (let x of set){console.log(x)
}
2、函数及面向对象
apply
在JS中可以控制 this 指向！
<script>function getAge() {var now = new Date().getFullYear();return now-this.birth;}var kuangshen = {name: 'qinjiang',birth: 2000,age: getAge()};getAge().apply(kuangshen,[]); // this, 指向了 kuangshen， 参数为空</script>
标准对象
typeof 123
'number'
typeof '123'
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'
2.1、Data
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title></head>
<body><script>var now = new Date(); //Thu Apr 14 2022 22:34:25 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(1649947358321)) // 时间戳转为时间
</script></body>
</html>
2.2、JSON
在JavaScript 一切皆为对象、任何JS支持的类型都可以用JSON来表示；number,string…
格式：
- 对象都用{}
- 数组都用[]
- 所有的键值对 都是用 key:value
JSON 字符串和 JS 对象的转化
var user = {name: "qinjiang",age: 3,sex: '男'}//对象转化为JSON字符串 {"name":"qinjiang","age":3,"sex":"男"}var jsonUser = JSON.stringify(user);//JSON 字符串转化为对象 参数为 JSON 字符串var obj = JSON.parse('{"name":"qinjiang","age":3,"sex":"男"}');
3、面向对象编程
原型
var Student = {name: "qinjiang",age: 3,run: function () {console.log(this.name + "run....");}};var xiaoming = {name: "xiaoming"};xiaoming.__proto__ = Student;var Bird = {fly: function () {console.log(this.name + "fly....");}};// 小明的原型 是 Studentxiaoming.__proto__ = Bird;
3.1、操作BOM对象（重点）
浏览器介绍
BOM： 浏览器对象模型
window
window 代表 浏览器窗口
window.alert(1)
undefined
window.innerHeight
524
window.innerWidth
136
window.outerHeight
664
window.outerWidth
1060
Navigator
Navigator,封装了浏览器的信息
navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36 Edg/100.0.1185.39'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36 Edg/100.0.1185.39'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36 Edg/100.0.1185.39'
screen
代表屏幕尺寸
screen.width
1920
screen.height
1080
location (重要)
location 代表当前页面的URL信息
host: "www.baidu.com"
href: "https://www.baidu.com/?tn=15007414_pg"
protocol: "https:"
reload: ƒ reload() // 刷新网页
// 设置新的地址
location.assign('https://www.kuangstudy.com/')
document
document 代表当前的页面， HTML DOM 文档树
document.title
'百度一下，你就知道'
document.title='BLM'
'BLM'
获取具体的文档树节点
<dl id="app"><dt>java</dt><dd>javaSE</dd><dd>JavaEE</dd>
</dl><script>var dl = document.getElementById('app');
</script>
获取 cookie
document.cookie
'BIDUPSID=C3517486F9D5C386C2E3B70370DB74F8; PSTM=1632839215; BAIDUID=C3517486F9D5C386351802540B493283:FG=1; COOKIE_SESSION=11614_1_2_3_13_9_1_0_1_2_0_0_697_0_0_5_1646536251_1646547866_1646547861%7C9%2310018595_3_1646547861%7C2; BD_UPN=12314753; BAIDUID_BFESS=736E3B357BD74734DEEE99D84930FF89:FG=1; BDRCVFR[OEHfjv-pq1f]=K7PavkeTFPTUAN8ULuEQhPEUi4WU6; BD_HOME=1; H_PS_PSSID=; BA_HECTOR=8024a12g050k2l80vb1h5kts20r'
history
history 代表浏览器的历史记录
history.back() // 后退
history.forward() // 前进
3.2、操作DOM对象（重点）
DOM ： 文档对象模型
核心
浏览器网页就是一个DOM树形结构!
- 更新: 更新DOM节点
- 遍历DOM节点: 得到DOM节点
- 删除: 删除一个DOmain节点
- 添加: 添加一个新的节点
要操作一个DOM节点,就必须要先获得这个DOM节点
获得DOM节点
<script>// 对应 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
</script>
更新节点
<div id="id1"></div><script>var id1 = document.getElementById('id1')
</script>
- id1.innerText=‘123’ 修改文本的值
- id1.innerHTML=‘123’ 可以解析HTML文本标签
操作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.getElementsByTagName('p1');var father = p1.parentElement;father.removeChild(self)//删除是一个动态的过程father.removeChild(father.children[0])father.removeChild(father.children[1])father.removeChild(father.children[2])
</script>
注意： 删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意！
插入节点
我们获得了某个Dom节点，假设这个 Dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个 DOM节点已经存在元素了，我们就不能这么 干了！会产生覆盖
追加
<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>
创建一个新的标签，实现插入
<script>var js = document.getElementById('js'); //已经存在的节点var list = document.getElementById('list');//通过JS 创建一个新的节点var newP = document.createElement('p'); // 创建一个p标签newP.id = 'newP';newP.innerText = 'Hellow,kuangshen';// 创建一个标签节点（通过就这个属性，可以设置任意的值）var myScript = document.createElement('script');myScript.setAttribute('type','Text/javascipt')list.appendChild(js); //追加
</script>
3.3、 操作表单（验证）
表单是什么 form DOM 树
- 文本框 text
- 下拉框
- 单选框 radio
- 多选框 checkbox
- 隐藏域 hidden
- 密码框 password
- …
表单的目的：提交信息
获得要提交的信息
<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="woman" id="girl"> 女</p></form><script>var input_text = document.getElementById('username');var boy_radio = document.getElementById('boy');var giral_radio = document.getElementById('girl');// 得到输入框的值input_text.value// 修改输入框的值input_text.value = '123'// 对于单选框，多选框等等固定的值， boy_radio.value 只能取到当前的值boy_radio.checked; // 查看返回的结果，是否为true ， 如果为true, 则被选中boy_radio.checked=true; // 赋值
</script>
提交表单
<form action="https://www.baidu.com" method="post" onsubmit="return aaa()"><p><span>用户名： </span> <input type="text" id="username" name="username"></p><p><span>密码： </span> <input type="password" id="password" name="input-password"></p><input type="hidden" id="md5-password" name="password"><!-- 绑定事件 onclick 被点击--><button type="submit" onclick="aaa()">提交</button>
</form><script>function aaa(){var uname = document.getElementById('username');var pwd = document.getElementById('input-password');var md5pwd = document.getElementById('md5-password');// console.log(uname.value());// console.log(pwd.value);// //MD5 算法// pwd.value = md5(pwd.value);// console.log(pwd.value);md5pwd.value = md5(pwd.value);// 可以校验判断表单内容，true 就是通过提交，false, 阻止提交return true;}</script>
##4、 JQuery
JavaScript
jQuery库，里面存在大量的JavaScript函数
获取jQuery
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>--><script src="lib/jQuery.js"></script>
</head>
<body><a href="" id="test-jquery">点我</a><script>//选择器就是CSS的选择器$('#test-jquery').click(function () {alert('hello,jQuery');})// 公式： $(selector).action()
</script></body>
</html>
选择器
<script>//原生JS ， 选择器少，麻烦不好记// 标签document.getElementsByTagName();// iddocument.getElementById();// classdocument.getElementsByClassName();// jQuery CSS 中的选择器它全部都能用！$('p').click();//标签选择器$('#id1').click();//id选择器$('.class').click();//class选择器</script>
事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="lib/jQuery.js"></script><style>#divMove{width: 500px;height: 500px;border: 1px solid red;}</style>
</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>
小技巧
1.如果巩固JS （看jQuery源码，看游戏源码）
2.巩固HTML、CSS（扒网站，全部down下来，然后对应修改看效果）
JS(JavaScript)相关推荐
- 阿提拉公司 java_Atitit 文件上传 架构设计 实现机制 解决方案 实践java php c#.net js javascript c++ python...
Atitit 文件上传 架构设计 实现机制 解决方案 实践 java php c#.net js javascript c++ python 1 . 上传的几点要求 2 1 .1. 本地预览 2 1 ...
- atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97
atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97 1. 实现html5化界面的要解决的策略1 1.1. Js交互1 1.2. 动态参 ...
- java swing调用H5_atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97...
atitit.js javascript 调用c# java php后台语言api html5交互的原理与总结p97 1.实现html5化界面的要解决的策略 1.1.Js交互 Firefox与Chro ...
- [js]JavaScript Number.toPrecision() 函数详解
[js]JavaScript Number.toPrecision() 函数详解 JavaScript: numberObject.toPrecision( [ precision ] ) 如果没有提 ...
- Atitit. 数据约束 校验 原理理论与 架构设计 理念模式java php c#.net js javascript mysql oracle...
Atitit. 数据约束 校验 原理理论与 架构设计 理念模式java php c#.net js javascript mysql oracle 1. 主键1 2. uniq index2 3. ...
- java 返回js,Javascript返回上一页
1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.for ...
- Eclipse去除js(JavaScript)验证错误
这篇文章主要是对Eclipse去除js(JavaScript)验证错误进行了介绍.在Eclipse中,js文件常常会报错.可以通过如下几个步骤解决 第一步: 去除eclipse的JS验证: 将wind ...
- 常用js(javascript)函数
常用js(javascript)函数 1.常规函数 javascript常规函数包括以下9个函数: (1)alert函数:显示一个警告对话框,包括一个OK按钮. (2)confirm函数:显示一个确认 ...
- 模仿微信朋友圈 图片浏览 js javascript 支持图片预览，滑动切换，双指缩放，图片缓存
模仿微信朋友圈 图片浏览 js javascript 支持图片预览,滑动切换,双指缩放,图片缓存 2017年08月10日 12:11:38 阅读数:2311 previewImage-mobile 仿 ...
- 原生JS javascript解除绑定事件 JS删除绑定事件
原生JS javascript解除绑定事件 JS删除绑定事件 一.直接删除法 1.适用于直接绑定的事件,如: <h1 id="h1" onclick="_click ...
最新文章
- 【RocketMQ工作原理】消息的清理
- 设计模式之一：单例模式
- linux luks源码,下载源代码编译安装
- 【更新】Essential Studio for ASP.NET MVC更新至2018 v4（四）
- SparkSQL之关联mysql和hive查询
- WebKit 内核源码分析 (五)
- JS — 数组去重（4种方法）
- 计算机领域国际会议分类及排名
- 如何通过eclipse查看、阅读hadoop2.4源码
- 超市系统服务器,超市收银系统 服务器 配置
- 系统蓝屏日志DMP文件分析工具WinDbg及教程
- Linux中 查看mysql配置文件位置
- 希赛软考学习包，助您快通过软考考试
- IE白屏修复，vue 兼容IE
- PS教程淘宝美工平面设计入门自学课 photoshop软件零基础视频大全
- python 简单图片识别
- android 生物识别_将生物识别提示与cryptoobject一起使用
- 在自己电脑上调试微信公众号后台程序：附工具
- 逆序整数求和C语言,c语言 数字逆序相加
- 计算机科学期刊是b类吗,《计算机科学》体例格式