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) 从第一个截取到最后一个

二、数组

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()元素排序

三、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 in和for of的区别
for(var x in set){
   
console.log(x); //打印下标
}
for(var x of set){
   
console.log(x); //打印具体的值
}

四、函数

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(对象名,传入的参数)

五、内部对象

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()

六、BOM操作

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

七 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')

八、表单

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>

九、总结

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

目录
相关文章
|
6月前
|
网络协议 开发工具 git
解决 git 报错 “fatal: unable to access ‘https://github.com/.../.git‘: Recv failure Connection was rese
在使用 Git/Git小乌龟 进行代码管理的过程中,经常会遇到各种各样的问题,其中之一就是在执行 git clone 或 git pull 等操作时出现 “fatal: unable to access ‘https://github.com/…/.git’: Recv failure Connection was reset” 的报错。这个问题通常是由网络连接问题或代理设置不正确导致的。在我的个人使用经验中,我亲自尝试了四种方法,它们都能够有效地解决这个报错。个人比较推荐方法二。
3643 0
|
算法 安全 程序员
【C++14 新特性 透明操作符】透视C++14透明操作符Functors:深入理解与实践
【C++14 新特性 透明操作符】透视C++14透明操作符Functors:深入理解与实践
361 3
|
8天前
|
云安全 监控 安全
|
13天前
|
机器学习/深度学习 人工智能 自然语言处理
Z-Image:冲击体验上限的下一代图像生成模型
通义实验室推出全新文生图模型Z-Image,以6B参数实现“快、稳、轻、准”突破。Turbo版本仅需8步亚秒级生成,支持16GB显存设备,中英双语理解与文字渲染尤为出色,真实感和美学表现媲美国际顶尖模型,被誉为“最值得关注的开源生图模型之一”。
1391 8
|
6天前
|
人工智能 安全 前端开发
AgentScope Java v1.0 发布,让 Java 开发者轻松构建企业级 Agentic 应用
AgentScope 重磅发布 Java 版本,拥抱企业开发主流技术栈。
449 12
|
19天前
|
人工智能 Java API
Java 正式进入 Agentic AI 时代:Spring AI Alibaba 1.1 发布背后的技术演进
Spring AI Alibaba 1.1 正式发布,提供极简方式构建企业级AI智能体。基于ReactAgent核心,支持多智能体协作、上下文工程与生产级管控,助力开发者快速打造可靠、可扩展的智能应用。
1247 43