JavaScript的基本使用和介绍
2021/6/19 12:26:54
本文主要是介绍JavaScript的基本使用和介绍，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
ui框架 ant-design 阿里巴巴出品
什么是JavaScript
是一个前端的行为 是一种流行的脚本语言
点击网页按钮会改变的一种行为
altert( ) 在页面上弹窗 console.log( ) 输出在页面上
数据类型
字符串： 正常字符串使用 单引号/或者双引号包裹
\ \n \t \u4e2d \u#### Unicode字符 \x41 AscII 字符
大小写转换
//方法 //小写转成大写STUDENT student.toUpperCase() //转成小写 student student.tuLowerCase()
substring
[) student.subString(1)//从第一个字符春截取到最后一个字符串 student.substring(1,3) //[1,3)
数组
Array 可以包含任数据类型 var arr = [1,2,3,4]
数组的大小可变化 如果复制过小，数据会丢失
indexOf() 通过元素下标索引 arr.indexIf（2） ====》1
slice() 截取 Array 的一部分 ， 类似于String中的substring
push()、pop() 尾部
push：压入到尾部 pop 弹出尾部的一个元素
unshift（）、shift（）头部
push：压入到头部 pop 弹出头部的一个元素
排序 sort（）
元素反转reverse()
concat() 拼接数组的元素 但是并没有取代原先的元素组的元素 而是新生成了一个拼接的数组
注意事项：并没有修改数组 ，只是返回一个新的数组
连接符： join 打印拼接数组 ，使用特定的字符串连接
多维数组 第一个元素1是0,0 2 是0，1 3 是 1,0 4 是1,1
对象
若干个键值对 定义对象名
var 对象名{
属性名：属性值;
属性名：属性值;
属性名：属性值;
}
//定义一个person对象，他有四个属性
var person = {
name:"mojiejun",
age:3;
email:"2496776788@qq.com",
socre；100
}
=最后一个属性不加逗号==
js对象， { …} 键值对描述属性： xxx：xxx
定义对象不会报错 ，undefined Person.gsdfg undifned
动态的删减属性 通过delete删除属性
动态添加 直接给新的属性添加值就可以
判断属性值是否在这个对象中 xxx in xxx （这个包括继承了toString的东西 ）
判断一个属性是否是这个对象自身拥有的hasOwnProperty() toString()继承的方法
流程控制
if判断 while 、for循环 、
forEach循环
for…in num 是索引下标 index才是下标的值 for…in 的循环话语 age 才是数组 num是循环的这个数字 for …in 遍历下标
for … of 遍历他的值打印
Map 和Set集合==<ES6的新特性>==
Map 通过他的键获得他的值（通过key 获得value） 增加(map.set(key,value))、删除（Map.delete(key)） 通过一个就可以删除
Set 无序不重复的集合 （set.add（2））添加、( set.delete(1) )删除、(console.log( set.has(3) ))是否包含某个元素
Iterator 迭代器
遍历数组
遍历Map
遍历Set
什么是对象序列化？
对象序列化是指将对象的状态转换为字符串； 序列化(Serialization)是将对象的状态信息转换为可以存储或传输的形式的过程
为什么会有对象序列化？
当这句代码运行时，对象obj的内容会存储在一块内存中，而obj本身存储的只是这块内存的地址的映射而已。简单的说，对象obj就是我们的程序在电脑通电时在内存中维护的一种东西，如果我们程序停止了或者电脑断电了，对象obj将不复存在。那么如何把对象obj的内容保存在磁盘上呢（也就是说在没电时继续保留着）？这时就需要把对象obj序列化，也就是说把obj的内容转换成一个字符串的形式，然后再保存在磁盘上。另外，我们又怎么通过HTTP协议把对象obj的内容发送到客户端呢？没错，还是需要先把对象obj序列化，然后客户端根据接收到的字符串再反序列化（也就是将字符串还原为对象）解析出相应的对象。这也正是”百度百科—序列化“中描述的两个作用——存储、传输。
内部对象：
Date 日期
JSON
什么是json：（JavaScript Notation ）是一种轻量级的数据交换格式
简介和清晰的结构层次是的JSON 成为理想的的数据交换语言
易于人阅读和编写，同时也易于机器解析和生成，并有效的提升网络传输效率
格式： 对象用{ } 数组用 [ ] 所有的键值对用key ：value
JSON和JS对象转化
var obj = { a:"hallo",b:"hallob"}
var json = '{"a": "hallo", "b":"hellob"}'
BSON 用于芒果DB
Ajax
原生的js写法，xhr异步请求
jQuery 封装好的方法$("#name").ajax("")
axios 请求
面向对象编程
什么是面向对象：
类 ：模板
对象：具体的实例
原型：
xiaoming.proto = student 原型对象
class继承
1、定义一个类，属性，方法
本质：查看对象原型 __ proto __ =Student
原型链Object：
prototype 在JavaScript 中，每一个函数都有一个prototype属性，整数型指向函数的原型对象
构造函数和原型和实例的关系：
每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的构造函数指针，而实例都包含一个指向对象的内部指针，那么假如我们让原型对象等于另一个类型的实例，结果会怎么样？显然，此时的原型对象将包含一个指向另一个圆形的指针，相应的，另一个原型中也包含一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实例和原型的链条，这就是基本原型链的概念
操作BOM对象
BOM 浏览器对象模型
IE 6~12 Chrome（谷歌） Safari（苹果） FireFox（火狐 普遍Linux上） Opera(欧朋) 这些都是内核 其他的市三方
window window.alert(1) //浏览器的内宽高 window.innerHeight window.innerWidth //浏览器的外宽高 window.outerHeight window.outerWidth
window 代表 浏览器窗口
Navigator
Navigator 封装了浏览器的信息
navigator.appName "Netscape" navigator.appVersion "浏览器的版本和内核信息" navigator.platform "win32"
screen
代表屏幕尺寸
screen.width 1920px screen.height 1080px
location 代表当前页面的URL信息
document （内容 dom）
document.cookie 获取客户端的本地信息（前端获得的方式 ）
劫持cookie原理
<script>aa.js</script> <!-- 而已人员；获取你的cookie信息上传到他的服务器-->
服务器端可以设置cookie：httpOnly
session（后端获取的方式）
history history.back（）//后退 history.forward（）//前进
操作DOM对象
动态操作一棵树
浏览器网页就是一个Dom树形结构
更新：更新Dom节点
遍历dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新节点
要操作一个Dom节点 ，就必须要获得这个Dom节点
获得Dom节点
更新DOM节点
操作文本
id1.innerText=’456’ 修改文本的值
id1.innerHTML=‘< strong >123</ strong>’ 可以解析HTML文本标签
操作JS
id1.style.color=‘red’//属性使用 字符串 包裹 id1.style.fontSize='20px' //驼峰命名问题 id1.style.fontSize='200px' id1.style.padding='50px'
删除节点
删除节点的步骤：先获取父节点，在通过父节点删除自己
<div id="father">
<h1 > 标题一</h1>
<p id="p1"> p1</p>
<p class="p2">p2</p>
</div>
<srcript>
var self = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild(self)
//删除是一个动态的过程
father.removeChild（father.child[0]）
father.removeChild（father.child[1]）
father.removeChild（father.child[2]）
</srcript>
删除节点的时候，children是时刻变化的，删除节点的时候后一个节点会往前移动 ，所以会存在[2]这个点不存在 会发生变化
插入节点 （不会覆盖原来的）
获得某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素，但是这个dom节点已经存在了，就会覆盖，不可取
追加
<!DOCTYPE html>
<html>
<head>
<mata chaset="utf-8"></mata>
<titel>Title</titel>
</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.getElmentById('js');
var list = document.getElementById('list');
list.appendChild(js);//追加
</script>
</body>
</html>
通过js创建新的标签，实现插入
<script>
var newP = document.creatElement('p')//创建一个新的p标签
newP.id = 'newP' //等价于newP.setAttribute('id','newP')
newP.style.backgroundColor='red';
newP.innerText='hello,javaScript';
<!--追加到list后面-->
list.appendChild(newP)
//创建一个标签节点 通过这个属性，可以设置任意的值
var myScript = document.creatElement('script');
myScript.setAttribute('type','text/javascript')
//创建一个style标签
var myStyle = document.creatElement('stlyle');//创建了一个空style标签
myStyle.setAttribute('type','text/css');
//在这里写文本 在body里面添加背景颜色
myStyle.innerHTML='body{background-color:chartreuse;}';//设置标签内容
//把这个颜色放到head里面 就会显示出颜色
document.getElementByTagName('head')[0].appendChild(myStyle);
//0代表的0才是head
</script>
插入前面
<!DOCTYPE html>
<html>
<head>
<mata chaset="utf-8"></mata>
<titel>Title</titel>
</head>
<body>
<div id="js">
<p id="se">JavaSE </p>
<p id="ee">JavaEE </p>
<p id="me">JavaME </p>
</div>
<script>
var ee = document.getElmentById('ee');
var js = document.getElementById('js');
//节点 要包含的节点.inserBefore（newNode，targetNode）
list.inserBefore(js,ee);
ee.inserBefore(js);//追加在最前面
</script>
</body>
</html>
操作表单
表单是什么 form、DOM树
文本框 text、下拉框select、单选框radio、多选框checkbox、隐藏框hidden、密码框password…
表单的目的：提交信息
获得要提交的信息
<!DOCTYPE html>
<html>
<head>
<mata chaset="utf-8"></mata>
<titel>Title</titel>
</head>
<body>
<form action="post">
<p>
<span>用户名:</span><input type="text" id="username">
</p>
<p>
<span>性别:</span>
<input type="radio" name="sex" value="boy">男
<input tyoe="radio" name="sex" value="girl">女
</p>
<input type="submit">
</form>
<script>
var input_text = document.getElementById('username');
var boy_raido = document.getElementById('boy');
var boy_radio = document.getElementById('girl');
//得到输入框的值
input.text.value
//修改输入框的值
input.text.value='123'
//获取所有的input标签
document.getElementsTagName('input');
//对于单选框 多选框等等固定的值 boy_radio.value只能却到当前的值
boy_radio_checked；//查看返回的结果，是否为true 如果为true 则是被选中 反之
girl_radio_checked = true; //赋值
</script>
</body>
</html>
提交表单 。 md5加密密码
<!DOCTYPE html>
<html>
<head>
<mata chaset="utf-8"></mata>
<titel>Title</titel>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!-- 表单绑定提交事件 οnsubmit= 绑定一个提交检测的函数，true false 将这个结果返回给表单 使用onsubmit 接受-->
<form action="#" method="post" onsubmit=" return btn()">
<p>
<span>用户名:</span><input type="text" id="username" required name="username">
</p>
<p>
<span>密码:</span><input type="password" id="input-password">
</p>
<input type="hidden" id="md5-password" name="password">
<!--绑定事件 onclick被点击-->
<button tye="submit" onclick="btn()">提交</button>
</form>
<script>
function btn(){
var uname = document.getElementById('username');
var md5pwd = document.getElementById('md5-password');
// MD5 算法
// console.log(uname.value);
// console.log(pwd.value)
// pwd.value = md5(pwd.value);也能看到 不可取 安全性不够高
md5pwd.value = md5(pwd.value);
//使得表单不可提交过去 return true 可以提交校验表单内容，true 就是可以通过提交 false阻止提交
return false;
}
</script>
</body>
</html>
密码直接在前端被隐藏加密 拦截加密
jQuery
JavaScript 和 jQuery库 （里面存在大量的javaScript函数）
获取jQuery
cdn引入
<!DOCTYPE html>
<html Lang="en">
<head>
<mata charset="utf-8">
<title>Title</title>
<!--cnd导入项目 在线的-->
<script src="https://cdn.bootcss.com/Jquery/3.4.1/core.js"></script>
</head>
<body>
<a href="test-jquery">点我</a>
<script>
var id = document.getElementById('id');
//选择器就是css选择器
$("#test-jquery").click(function(){
})
</script>
</body>
</html>
公式：$(selector).action()
选择器
<!DOCTYPE html>
<html Lang="en">
<head>
<mata charset="utf-8">
<title>Title</title>
<!--cnd导入项目 在线的-->
<script src="https://cdn.bootcss.com/Jquery/3.4.1/core.js"></script>
</head>
<body>
<script>
//原生js，选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jQuery css中的选择器他全部都能用
$('p').click()//标签选择器
$('#id1').click();//id选择器
$('.class1').click()//class 选择器
</script>
</body>
</html>
文档工具站
jQuery 事件
mousedown( ) 鼠标按下
mouseenter( )
mouseleave( ) 鼠标离开
mousemove( ) 鼠标移动
mouseout( )
mouseover( ) 鼠标点击结束
mouseup( ) 鼠标弹起
<!DOCTYPE html>
<html Lang="en">
<head>
<mata charset="utf-8">
<title>Title</title>
<!--cnd导入项目 在线的-->
<script src="https://cdn.bootcss.com/Jquery/3.4.1/core.js"></script>
<style>
#divMove{
width:500px;
height:500px;
border:1px solid red;
}
</style>
</head>
<body>
<!--要求：获取鼠标当前的一个坐标-->
mouse：<span id="mouseMove"></span>
<div>
在这里移动鼠标试试
</div>
<script>
//当网页元素加载完毕之后 ，相应事件
$(function(){
$('#divMove').mousemove(function(e){
$('#mouseMove').text("x:"+e.pageX + "y:"+e.pageY);
})
});
</script>
</body>
</head>
</html>
jQuery操作DOM元素
节点文本操作
<!DOCTYPE html>
<html Lang="en">
<head>
<mata charset="utf-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/Jquery/3.4.1/core.js"></script>
</head>
<body>
<ul>
<li class="js">JavaScript</li>
<li name="Python">Python</li>
</ul>
<script>
$('#test-ul li[name=Python]').text();//获得值
$('#test-ul li[name=Python]').text('设置值')// 设置值
$('#test-ul').html() //获得值
$('#test-ul').html('<strong>123</strong>') //设置值
</script>
</body>
</html>
css操作
$('#test-ul li[name=python]').css({"color","red"});
元素的现实和隐藏 ：本质display ：none
$('#test-ul li[name=python]').show() //显示
$('#test-ul li[name-python]').hide()//隐藏
title>Title
- JavaScript
- Python
```
css操作
$('#test-ul li[name=python]').css({"color","red"});
元素的现实和隐藏 ：本质display ：none
$('#test-ul li[name=python]').show() //显示
$('#test-ul li[name-python]').hide()//隐藏
Ajax
这篇关于JavaScript的基本使用和介绍的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-14后台交互资料入门指南
- 2024-11-14如何轻松创建项目环境：新手入门教程
- 2024-11-14如何抽离公共代码：初级开发者指南
- 2024-11-14Python编程入门指南
- 2024-11-14Python编程入门：如何获取参数
- 2024-11-14JWT 用户校验：简单教程与实践
- 2024-11-14Pre-commit 自动化测试入门指南
- 2024-11-14Python编程基础
- 2024-11-14Server Action入门教程：轻松掌握服务器操作
- 2024-11-14Server Component入门教程：轻松搭建服务器组件
