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月前
|
JavaScript 前端开发
javascript中的this
javascript中的this
|
1月前
|
JavaScript 前端开发
JavaScript是什么,其特点又是什么?
JavaScript是什么,其特点又是什么?
25 0
|
10月前
|
存储 缓存 JavaScript
非常实用的JavaScript技巧
非常实用的JavaScript技巧
39 0
|
11月前
|
移动开发 JavaScript 前端开发
|
11月前
|
JavaScript 前端开发
JavaScript 中的 mailto
JavaScript 中的 mailto
|
存储 缓存 JavaScript
有趣的JavaScript(1)
有趣的JavaScript(1)
有趣的JavaScript(1)
JavaScript
JavaScript
74 0
|
JavaScript 前端开发
JavaScript中的this
JavaScript中的this自制脑图
58 0
JavaScript中的this
|
JavaScript 前端开发
Javascript 中的 this
当我们学习 Javascript 中的 this 时,非常容易陷入一种困境,一种似懂非懂的困境。在某些情况下,我们看了一些文章和解释,将其应用到一些简单的情况,发现,嗯,确实这么运作了。而在另一些更为复杂的情况下,我们发现又懵逼了,什么情况?这篇文章的目的,就是要完全搞懂并掌握 Javascript 中的 this。为什么我们很难完全掌握 this?在我看来,原因是 this 的解释太过抽象,在理
614 0
|
JavaScript 前端开发 Java