JavaScript

简介: JavaScript基础概要:包括数据类型的`=`, `==`, `===`和`use strict`;数组操作如`length`, `indexOf`, `slice`, `push`, `pop`, `unshift`, `shift`和`sort`;Map和Set的使用,如`get`, `set`, `delete`及遍历;函数的abs, rest参数,作用域,let, const和方法;内部对象如Date和JSON;BOM操作如window, screen和location;DOM操作涉及节点获取

@[toc]

JavaScript

一、数据类型

1.=赋值
2.==等于 
3.===绝对等于(一般在JavaScript中使用这个)
4.use strict 严格检查模式(用于检查代码的严谨性)必须写在第一行
5.substring(1) 从第一个截取到最后一个
AI 代码解读

二、数组

1.var arr=[1,2,4,5]
2.获取数组的长度arr.length
3.indexOf 通过元素获取下标索引
4.slice(4) 截取arry数组中4以后的数据。
5.push()压入数据到尾部
6.pop()弹出尾部的数据
7.unshift()压入到头部数据
8.shift()弹出头部数据
9.sort()元素排序
AI 代码解读

三、Map和Set集合

3.1.Map
var map=new Map(["admin",10],['tom',12]);
map.get('admin') //通过key值获取到values的值
map.set('jack',45); //添加值
map.delete('tom')  //删除key值

2.Set 
无序不重复的集合
var set =new Set([1,2,1]) 
set.add() //添加
set.delete() //删除
set.has() //判断是否包含某一个元素

for infor of的区别
for(var x in set){
   
console.log(x); //打印下标
}
for(var x of set){
   
console.log(x); //打印具体的值
}
AI 代码解读

四、函数

1.绝对值函数
function abs(x){
   
 return x;
}
arguments 代表传递进来的所有参数是一个数组。
2.rest 参数获取定义之外的参数,并且写在最后面用...标识。
例如
function abs(x,y,...rest){
   
 return x;
}
3.在JavaScript中定义的var变量是有作用域的。
在函数体里面定义的变量在函数体外是无法使用的。
内部函数可以访问外部的成员。
4.let
解决局部作用域冲突的问题
例如
function  bbb(){
   
 for(let i=0;i<10;i++){
   
  console.log(i);
 }
 console.log(i);
}
let 让i只能在函数中打印出i的值,如果是var则在函数体以外也是可以打印出i的值。
一般都使用let定义局部变量
5.count 
用于定义一个常量。
6.方法
方法就是函数放在对象里面。对象包含:属性和方法
var sss={
   
 name:'admin',
 age:12,
 aaa:function(){
   
   //方法
}
}
//获取属性
sss.name
//方法
sss.age()
7.apply
用于方法的指向。通过apply的指向我们可以调用不同的方法
例如
function aaa(){
   
 console.log("你哈");
}
aaa.apply(对象名,传入的参数);
AI 代码解读

五、内部对象

1.Date
 var now= new Date()  //获取当前时间
    now.getFullYear() //年
    now.getMonth() //月
    now.getDate() //日
    now.getDay() //星期
    now.getHours() //时
    now.getMinutes() //分
    now.getSeconds() //秒

    now.getTime() //时间戳
    now.toDateString() 

2.Json
对象:{
   }
数组:[]
键值对:key:values
json与对象之间的转化
例如
var user{
   
 nane:'damin',
 age:12
}
对象转化为Json
   JSON.stringify(user);
Json转化为对象
   JSON.parse()
AI 代码解读

六、BOM操作

1.window 代表全局属性可以获取窗口的属性
2.screen 获取屏幕的属性
3.location 代表当前的url信息
AI 代码解读

七 DOM的操作

1.获取Dom节点
<div id="father">
    <h1>标题</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
  var h1=document.getElementsByTagName("h1");
  var p1=document.getElementById('p1');
  var p2=document.getElementsByClassName('p2');
  var father=document.getElementById('father');
  var  children=father.children; //获取父节点的子节点
  father.firstChild;
</script>

2.更新Dom节点
<div id="a1">
</div>
<script>
  var a1=document.getElementById('a1');
    a1.innerText='123' //插入文本
    a1.innerHTML='<h1>456</h1>' //插入代码
    a1.style.color='red';
</script>
3.删除Dom节点
<div id="father">
    <h1>标题</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
  var p1=document.getElementById('p1');
 var father= p1.parentElement //获取父节点的元素
    father.removeChild(p1); //通过父节点删除子节点
</script>
4.插入Dom节点

## 已存在标签的添加

<p id="p1">p1</p>
<div id="list">
   <p id="p2">p2</p>
    <p id="p3">p3</p>
</div>
<script>
   var p1=document.getElementById('p1') //获取p1节点
    var list=document.getElementById('list')
    list.appendChild(p1); //将p1追加到了list中
</script>

## 创建节点
 var newp=document.createElement('p'); //创建一个标签
    newp.id='newp';
    newp.innerText='hello'; //标签赋值
    list.appendChild(newp); //标签追加
//万能方法
var script=document.createElement('script');
 script.setAttribute('type','text/javascript')
AI 代码解读

八、表单

1.获取表单的值
<div>
      <span>username</span><input type="text" name="username" id="username"/>
      <span>sex</span>
      <input type="radio" value="boy" id="boy"/>男
      <input type="radio" value="boy" id="girl">女
  </div>
<script type="text/javascript">
    var username=document.getElementById('username');
    username.value;
    username.value='123456';

    var boy=document.getElementById('boy');
    var girl=document.getElementById('girl');

    if(boy.checked){
   
        console.log(boy.value);
    }{
   
        console.log(girl.value);
    }
</script>
2.表单md5加密
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.min.js"></script>
</head>
<body>
  <div>
      <span>username</span><input type="text" name="username" id="username"/>
      <span>sex</span><input type="password" name="pass" id="password"/>
      <input type="hidden" id="pwd" name="password">
      <button type="submit" onclick="aaa()">submit</button>
  </div>
<script type="text/javascript">
   function aaa() {
   
       var username=document.getElementById('username');
       var password=document.getElementById('pwd');
       password.value=md5(pass.value);
   }
</script>
AI 代码解读

九、总结

==工欲善其事,必先利其器。==

目录
相关文章
响应式设计与移动端适配技巧:打造无缝用户体验
【7月更文挑战第29天】响应式设计与移动端适配是提升网站和应用用户体验的关键环节。通过遵循响应式设计的核心原则,并结合一系列移动端适配技巧,我们可以打造出既美观又实用的跨平台应用,满足不同用户的多样化需求。随着技术的不断进步和用户需求的日益复杂,持续学习和实践这些技巧将是我们作为开发者的重要任务。
力扣LeetCode初级算法(存在重复元素)
力扣LeetCode初级算法(存在重复元素)
104 0
力扣LeetCode初级算法(存在重复元素)
typescript85-class组件类型
typescript85-class组件类型
107 0
typescript85-class组件类型
2016年1月问答活跃达人发奖品喽,大家快来领奖!
2015年12月21日-2016年1月20日期间最活跃的问题回复达人,请看到名字的专家与我们联系,有礼品送出呦!
2537 1
《软件工程方法与实践》—— 1.6 小结
软件是计算机系统中与硬件相对应的另一部分,是一系列程序、数据及其相关文档的集合。软件具有复杂性、一致性、退化性、易变性、移植性和高成本等特征。软件工程是由于软件危机的出现而被提出的,其主旨是以工程化的思想进行软件的开发与维护,目的是高效率地生产出高质量的软件。
1811 0
kde
|
18天前
|
Docker镜像加速指南:手把手教你配置国内镜像源
配置国内镜像源可大幅提升 Docker 拉取速度,解决访问 Docker Hub 缓慢问题。本文详解 Linux、Docker Desktop 配置方法,并提供测速对比与常见问题解答,附最新可用镜像源列表,助力高效开发部署。
kde
10341 82
Windows安装Claude Code
Claude Code 是 Anthropic 推出的代码助手,支持在 Windows 通过 WSL(Windows Subsystem for Linux)运行。本文介绍如何在 Windows 系统中启用 WSL、安装 Ubuntu 子系统、配置 Python 与 Node.js 环境,并最终安装和运行 Claude Code。内容涵盖 WSL 设置、开发工具安装、依赖配置及常见问题解决方法,助你顺利在本地环境中使用 Claude Code 提升编码效率。
711 2
Windows安装Claude Code
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问