js基础整理总结

变量和变量作用域

变量和函数声明提升定义

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() 失去焦点

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

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


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


});


//失去焦点

$("input").blur(function(){


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


});

常见题目

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基础整理总结的更多相关文章

JS基础整理面试题
1.DOM和BOM的区别 DOM:document object model;文档对象模型,提供操作页面元素的方法和属性BOM:browser object model;浏览器对象模型,提供一些属性和 ...
JS基础整理
使用JS的三种方式 1.直接在html标签中,使用事件属性,调用js代码 <button onclick="alert('弹框')">弹框!</button> ...
SVG.js 基础图形绘制整理（二）
一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...
Three.js基础
Three.js基础探寻一 Three.js基础探寻一 1.webGL 一种网络标准,定义了一些较底层的图形接口. 2.Three.js 一个3Djs库,webGL开源框架中比较优秀的一个.除了w ...
js基础进阶--图片上传时实现本地预览功能的原理
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...
Three.js基础探寻一
1.webGL 一种网络标准,定义了一些较底层的图形接口. 2.Three.js 一个3Djs库,webGL开源框架中比较优秀的一个.除了webGL以外,Three.js还提供了基于Canvas.SV ...
Three.js基础探寻二——正交投影照相机
本篇主要介绍照相机中的正交投影照相机. 第一篇传送门:Three.js基础探寻一 1.照相机图形学中的照相机定义了三维空间到二维屏幕的投影方式. 针对投影方式照相机分为正交投影照相机和透视投影照相机 ...
前端工程师面试问题归纳（一、问答类html/css/js基础）
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
[转帖]nginx基础整理
nginx基础整理 https://www.cnblogs.com/guigujun/p/6588545.html 目录结构如下: Nginx基础知识 Nginx HTTP服务器的特色及优点 Ngin ...

随机推荐

C++ 拷贝控制和资源管理，智能指针的简单实现
C++ 关于拷贝控制和资源管理部分的笔记,并且介绍了部分C++ 智能指针的概念,然后实现了一个基于引用计数的智能指针.关于C++智能指针部分,后面会有专门的研究. 通常,管理类外资源的类必须定义拷贝控 ...
早期练手：功能相对比较完善的 js 计算器
第一次发博客,就先发一个自己早期,刚开始学前端时,用js写的一个计算器吧,计算功能比较少,只有 + - * / ,不过其他功能还是比较完善的,比如: 输出结果后,连续按"=",可以 ...
POPTEST联合创始人李爱然的“IT培训创业的随想"
POPTEST联合创始人李爱然的“IT培训创业的随想" IT教育行业最大的问题是缺少像互联网行业一样的产品经理. 大多数IT教育机构在早期依靠个人或者一套课程开创了一定的局面,随着机构的壮大 ...
Java集合常见面试题集锦
1.介绍Collection框架的结构集合是Java中的一个非常重要的一个知识点,主要分为List.Set.Map.Queue三大数据结构.它们在Java中的结构关系如下: Collection接口 ...
ASP.NET自定义处理程序
要创建自定义处理程序,可以创建一个实现IHttpHandler接口的类. 该类有两个重要的参数:IsResuable属性和ProcessRequest方法.如果处理程序实例可以在不同的请求中重用,Is ...
getline函数(精华版)
在我的印象中,getline函数经常出现在自己的视野里,模糊地记得它经常用来读取字符串 .但是又对它的参数不是很了解,今天又用到了getline函数,现在来细细地总结一下: 首先要明白设计ge ...
深入浅出分析MySQL索引设计背后的数据结构
在我们公司的DB规范中,明确规定: 1.建表语句必须明确指定主键 2.无特殊情况,主键必须单调递增对于这项规定,很多研发小伙伴不理解.本文就来深入简出地分析MySQL索引设计背后的数据结构和算法,从 ...
dubbo+zipkin调用链监控
分布式环境下,对于线上出现问题往往比单体应用要复杂的多,原因是前端的一个请求可能对应后端多个系统的多个请求,错综复杂. 对于快速问题定位,我们一般希望是这样的: 从下到下关键节点的日志,入参,出差,异 ...
Html 经典布局（三）
经典布局案例(三): <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

js基础整理总结

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

随机推荐

热门专题