• 变量和变量作用域

变量和函数声明提升定义

Var a=100;

Function test(){

这时候由于变量声明提升，a变量已经声明，值为undefined

Console.log(a);

Var a=10;

}

  • 字符串

数据类型检测方法：typeof（）

函数用法

indexOf 获取索引值

charAt 根据索引值获取单个字符

concat连接字符串

subStr获取部分字符串

substring获取部分字符串

slice获取部分字符串

split（”,”）分割

join合并

字符串大小写转换

toLowerCase （小）

toUpperCase （大）

  • 数组

shift unshift  从数组开头开始添加或者删除

pop push   从数组末尾添加或者删除

concat：返回一个新数组，是将参数添加到原数组中构成的

排序 sort 从小到大 reverse 从大到小排序

slice(start,end) 数组截取

join(“|”) 数组拼接成字符串1|2|3|4|5

splice(start,deleteCount,val1,val2,...)：

从start位置开始删除deleteCount项，并从该位置起插入val1,val2,..

  • 数据类型
  • 日期

console.log('获取日期')

date = new Date();

console.log(date.getFullYear())  //获取完整的年份

console.log(date.getYear())      //获取当前年份

console.log(date.getMonth())     //获取当前月份

console.log(date.getDate());　　 //获取几号

console.log(date.getDay());　　  //获取星期几

console.log('获取时间')

date = new Date();

console.log(date.getHours())            //获取小时

console.log(date.getMinutes());         //获取分

console.log(date.getSeconds());         //获取秒

console.log(date.getMilliseconds());　　// 获取毫秒     　　

console.log(date.getTime());　　        // 获取相对于1970-01-01的毫秒值

//设置时间

date = new Date();

date.setFullYear(9999); // => 9999年

date.setMonth(11); // => 11：月；实际为12月份(月份从0开始计算)

date.setDate(25); // => 25：日

date.setHours(15); // => 15：时

date.setMinutes(30); // => 30：分

date.setSeconds(40); // => 40：秒

date.setMilliseconds(333); // => 333：毫秒

console.log(date); // =>  9999年12月25日 15点30分40秒 333毫秒

  • 循环语句
  • 数学对象

Math

round(x)      把数四舍五入为最接近的整数。

random()    返回 0 ~ 1 之间的随机数。

  • 事件

点击事件

Onclick

Click

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<button id="btn1">aa</button>

<button id="btn2">bb</button>

<button id="btn3" onclick="change()">cc</button>

<button id="btn4">ee</button>

<button id="btn5" onclick="change()">ff</button>

</body>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script>

    //点击事件  onclick是事件，而click是方法
    $(function () {

    //第一种方法addEventListener添加的事件  removeEventListener() 方法来移除
    var btn1=document.getElementById('btn1');

    var btn2=document.getElementById('btn2');

    btn1.addEventListener('click',change);

    btn2.addEventListener('click',function(){alert(this.id)},false);

  //第二种方法

//click本身是方法作用是触发onclick事件，只要执行了元素的click()方法，就会触发onclick事件。
     $("#btn4").click(function(){

       $("#btn3").click();

      }) ;

//click方法中的function代码会在onclick事件执行完后执行，此时click方法起到追加事件的作用
        $("#btn5").click(function
() {

            alert("click btn5");

        });

//       
document.getElementById("btn3").onclick();
//       
document.getElementById("btn3").click();
  });

    function change() {

        alert("onclick btn3");

    }

</script>

</html>

鼠标移上离开事件

Onmouseenter鼠标移上

Onmouseleave鼠标离开

dbclick事件：迅速连续的两次点击时触发

mousedown事件：按下鼠标时触发

mouseup事件：松开鼠标时触发

toggle事件：鼠标点击切换事件

hover事件鼠标指针悬停

mouseover事件：鼠标从一个元素移入另一个元素时触发

mouseout事件：鼠标移出元素时触发

焦点事件

focus() 获取焦点

blur() 失去焦点

  1. <input type="text"><span>请输入你的电话号码?</span>

 

  1. $("input").focus(function(){

  2.     $("span").css("display","inline").fadeOut(2000);

  3. });

  4. //失去焦点
  5. $("input").blur(function(){

  6.     alert("输入框失去了焦点");

  7. });

常见题目

1.将一个变量放在外面和放在函数中的区别：

将一个变量放在外面，一般称之为全局变量：当前页面内有效

将一个变量放在一个函数中，一般称之为局部变量：只在函数内有效

2. ”==”和“===”的不同

==表示相等：只要值相等就可以了，数据类型不一定相等（会自动做类型转换）

1==‘1’（相等）

===表示全等于：比较的时候必须值和数据类型都相等才相等

1===‘1’（不相等）

3.函数

知道函数其实就是一个工具，我们只需要学会使用工具就可以实现某个功能

这就是封装性

4. split() join() 的区别

前者是切割成数组的形式，后者是将数组转换成字符串

5.题目

5.1写个函数将string的每个字符之间加个空格返回，例如：

addSpace(“hello world”) // -> ‘h e l l o  w o r l d’

5.2已知有字符串”get-element-by-id”,写一个function将其转化成驼峰表示法getElementById

5.3 写一个函数，实现如下功能：

字符串反转，如将 '12345678' 变成 '87654321'

js基础整理总结的更多相关文章

  1. JS基础整理面试题

    1.DOM和BOM的区别 DOM:document object model;文档对象模型,提供操作页面元素的方法和属性BOM:browser object model;浏览器对象模型,提供一些属性和 ...

  2. JS基础整理

    使用JS的三种方式 1.直接在html标签中,使用事件属性,调用js代码 <button onclick="alert('弹框')">弹框!</button> ...

  3. SVG.js 基础图形绘制整理（二）

    一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...

  4. Three.js基础

    Three.js基础探寻一 Three.js基础探寻一   1.webGL 一种网络标准,定义了一些较底层的图形接口. 2.Three.js 一个3Djs库,webGL开源框架中比较优秀的一个.除了w ...

  5. js基础进阶--图片上传时实现本地预览功能的原理

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...

  6. Three.js基础探寻一

    1.webGL 一种网络标准,定义了一些较底层的图形接口. 2.Three.js 一个3Djs库,webGL开源框架中比较优秀的一个.除了webGL以外,Three.js还提供了基于Canvas.SV ...

  7. Three.js基础探寻二——正交投影照相机

    本篇主要介绍照相机中的正交投影照相机. 第一篇传送门:Three.js基础探寻一 1.照相机 图形学中的照相机定义了三维空间到二维屏幕的投影方式. 针对投影方式照相机分为正交投影照相机和透视投影照相机 ...

  8. 前端工程师面试问题归纳（一、问答类html/css/js基础）

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

  9. [转帖]nginx基础整理

    nginx基础整理 https://www.cnblogs.com/guigujun/p/6588545.html 目录结构如下: Nginx基础知识 Nginx HTTP服务器的特色及优点 Ngin ...

随机推荐

  1. CSS3学习笔记(2)-CSS盒子模型

    p{ font-size: 15px; text-indent: 2em; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid ...

  2. 性能测试培训：分布式测试之jmeter

    性能测试培训:分布式测试之jmeter   在使用Jmeter进行性能测试时,如果并发数比较大(比如最近项目需要支持1000并发),单台电脑的配置(CPU和内存)可能无法支持,这时可以使用Jmeter ...

  3. 使用cocapods报错 [!] Your Podfile has had smart quotes sanitised. To avoid issues in the future, you should not use TextEdit for editing it. If you are not using TextEdit, you should turn off smart quotes

    从github上下载的工程大部分都使用了cocapods,在install的时候可能会报错. 报错原因: 1.不要使用文本编辑去编辑Podfile文件,使用Xcode编辑,或者使用终端敲命令去编辑. ...

  4. laravel blade $loop

    laravel 5.3 blade 新增$loop变量 文档如下: 在Laravel 5.3中,@foreach指令提供了更加强大的功能,在每一个@foreach循环体中都可以调用一个新的$loop变 ...

  5. Ubuntu常用软件安装（附带地址和卸载自带软件）

    跨平台系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#linux 上次说了安装VSCode(http://www.cnblogs.com/dun ...

  6. HBase应用快速学习

    HBase是一个高性能.面向列.可伸缩的开源分布式NoSQL数据库,是Google Bigtable的开源实现. HBase的思想和应用和传统的RDBMS,NoSQL等有比较大的区别,这篇文章从HBa ...

  7. JS关于全局变量跟局部变量的总结

    一.Javascript的变量的scope是根据方法块来划分的(也就是说以function的一对大括号{ }来划分).切记,是function块,而for.while.if块并不是作用域的划分标准,可 ...

  8. 卷积神经网络CNN公式推导走读

      0有全连接网络,为什么还需要RNN 图像处理领域的特殊性,      全连接网络缺点:                              RNN解决办法:      1参数太多       ...

  9. MySQL最常用数值函数

    数值函数: 用来处理很多数值方面的运算,使用数值函数,可以免去很多繁杂的判断求值的过程,能够大大提高用户的工作效率. 1.ABS(x):返回 x 的绝对值 mysql> select abs(- ...

  10. 【从无到有】教你使用animation做简单的动画效果

    今天写写怎么用animation属性做一些简单的动画效果 在CSS选择器中,使用animition动画属性,调用声明好的关键帧 首先声明一个动画(关键帧): @keyframes name{ from ...