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>

九、总结

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

目录
相关文章
|
1月前
|
Web App开发 JavaScript 前端开发
javascript主要特点有哪些,简单描述javascript的特点
javascript主要特点有哪些,简单描述javascript的特点
38 0
|
6月前
|
存储 JavaScript 前端开发
JavaScript
JavaScript
52 0
|
5月前
|
移动开发 JavaScript 前端开发
快速认识JavaScript
快速认识JavaScript
|
Web App开发 JavaScript 前端开发
JavaScript Day01 初识JavaScript 1
JavaScript Day01 初识JavaScript
82 0
|
存储 JavaScript 前端开发
JavaScript Day01 初识JavaScript 2
JavaScript Day01 初识JavaScript
52 0
|
存储 JSON JavaScript
JavaScript Day01 初识JavaScript 3
JavaScript Day01 初识JavaScript
83 0
|
JavaScript
JavaScript2
JavaScript2
42 0
|
JavaScript 前端开发
【JavaScript】什么是JavaScript?
【JavaScript】什么是JavaScript?
88 0
|
JavaScript 前端开发
Javascript的特点
Javascript的特点
83 0
|
JavaScript 前端开发
JavaScript 介绍
JavaScript 介绍
199 0
JavaScript 介绍

相关实验场景

更多