0

0

javascript常用方法汇总_基础知识

php中文网

php中文网

发布时间:2016-05-16 16:29:35

|

1488人浏览过

|

来源于php中文网

原创

本章没有深奥的讲解js一些底层原理,比如this指针、作用域、原型啦,涉及的都是一些有利于平时开发时简化代码,提高执行效率,或者说可以当做一种经验方法来使用,篇幅都不长,小步快跑的让你阅读完整篇文章,体验编程的快乐。

 获取两个区间之内随机数

网页制作与PHP语言应用
网页制作与PHP语言应用

图书《网页制作与PHP语言应用》,由武汉大学出版社于2006出版,该书为普通高等院校网络传播系列教材之一,主要阐述了网页制作的基础知识与实践,以及PHP语言在网络传播中的应用。该书内容涉及:HTML基础知识、PHP的基本语法、PHP程序中的常用函数、数据库软件MySQL的基本操作、网页加密和身份验证、动态生成图像、MySQL与多媒体素材库的建设等。

下载

立即学习Java免费学习笔记(深入)”;

复制代码 代码如下:

function getRandomNum(Min, Max){ // 获取两个区间之内随机数
    // @逆火狂飙  提出有可能第一个参数大于第二个参数,所以增加一下判断更可靠
    if (Min > Max)
    Max = [Min, Min = Max][0]; // 快速交换两个变量值
   
    var Range = Max - Min + 1;
    var Rand = Math.random();
    return Min + Math.floor(Rand * Range);
};

随机返回一个 正/负参数

立即学习Java免费学习笔记(深入)”;

复制代码 代码如下:

function getRandomXY(num){ // 随机返回一个 正/负参数
    num = new Number(num);
    if (Math.random()         num = -num;
    return num;
}

 setInterval()或setTimeOut()计时器函数传参

立即学习Java免费学习笔记(深入)”;

复制代码 代码如下:

var s = '我是参数';
function fn(args) {
    console.log(args);
}
var a = setInterval(fn(s),100);    // xxxxxx错误xxxxx
var b = setInterval(function(){    // 正确,用匿名函数调用被计时函数
    fn(s);
}, 100);

setInterval()或setTimeOut()计时器递归调用

立即学习Java免费学习笔记(深入)”;

复制代码 代码如下:

var s = true;
function fn2(a, b){        //  步骤三
    if (s) {
        clearInterval(a);
        clearInterval(b);
    }
};
function fn(a){     //  步骤二
    var b = setInterval(function(){
        fn2(a, b) // 传入两个计时器
    }, 200)
};
var a = setInterval(function(){      //  步骤一
    fn(a); // b代表计时器本身,可座位参数传递
}, 100);

字符串转换为数字

立即学习Java免费学习笔记(深入)”;

复制代码 代码如下:

// 无需 new Number(String)   也无需 Number(String) 只需字符串减去零即可
var str = '100';  // str: String
var num = str - 0;// num: Number

空值判断

立即学习Java免费学习笔记(深入)”;

复制代码 代码如下:

var s = '';  // 空字符串
if(!s)         // 空字符串默认转换为布尔false,可以直接写在判断语句里面
if(s != null) // 但是空字符串 != null
if(s != undefined) // 空字符串也 != undefined

IE浏览器parseInt()方法

立即学习Java免费学习笔记(深入)”;

复制代码 代码如下:

// 下面的转换在IE下为0,其他浏览器则为1,这跟IE浏览器解释数字的进制有关
var iNum = parseInt(01);
// 所以,兼容的写法为
var num = parseInt(new Number(01));

Firebug便捷调试js代码

立即学习Java免费学习笔记(深入)”;

复制代码 代码如下:

//Firebug内置一个console对象,提供内置方法,用来显示信息
/**
 * 1:console.log(),可以用来取代alert()或document.write(),支持占位符输出,字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)。如:console.log("%d年%d月%d日",2011,3,26)
 * 2:如果信息太多,可以分组显示,用到的方法是console.group()和console.groupEnd()
 * 3:console.dir()可以显示一个对象所有的属性和方法
 * 4:console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码
 * 5:console.assert()断言,用来判断一个表达式或变量是否为真
 * 6:console.trace()用来追踪函数的调用轨迹
 * 7:console.time()和console.timeEnd(),用来显示代码的运行时间
 * 8:性能分析(Profiler)就是分析程序各个部分的运行时间,找出瓶颈所在,使用的方法是console.profile()....fn....console.profileEnd()
 */

 快速取当前时间毫秒数

立即学习Java免费学习笔记(深入)”;

复制代码 代码如下:

// t == 当前系统毫秒值,原因:+号运算符会,会调用Date的valueOf()方法。
var t = +new Date(); 

快速取小数整数位

立即学习Java免费学习笔记(深入)”;

复制代码 代码如下:

// x == 2,以下x值都为2,负数也可转换
var x = 2.00023 | 0;
// x = '2.00023' | 0;

两个变量值互换(不用中间量

立即学习Java免费学习笔记(深入)”;

复制代码 代码如下:

var a = 1;
var b = 2;
a = [b, b=a][0]
alert(a+'_'+b)    // 结果 2_1,a和b的值已经互换。

 逻辑或'||'运算符

立即学习Java免费学习笔记(深入)”;

复制代码 代码如下:

// b不为null:a=b, b为null:a=1。
var a = b || 1;
// 较常见的用法为为一个插件方法传参,和获取事件目标元素:event = event || window.event
// IE有window.event对象,而FF没有。

只有方法对象才有prototype原型属性

立即学习Java免费学习笔记(深入)”;

复制代码 代码如下:

// 方法有对象原型prototype属性,而原始数据没有该属性,如  var a = 1, a没有prototype属性
function Person() {} // 人的构造函数
Person.prototype.run = function() { alert('run...'); } // 原型run方法
Person.run(); // error
var p1 = new Person(); // 只有在new操作符时,此时才会把原型run方法赋值给p1
p1.run(); // run...

快速获取当天为星期几

立即学习Java免费学习笔记(深入)”;

复制代码 代码如下:

// 计算系统当前时间是星期几
var week = "今天是:星期" + "日一二三四五六".charat(new date().getDay());

闭包偏见

立即学习Java免费学习笔记(深入)”;

复制代码 代码如下:

/**
 * 闭包:任何一个js方法体都可以称为一个闭包,并非什么只有内嵌函数来引用了外部函数的某个参数或属性才会发生。
 * 它有一个独立作用域,在该作用域内可存在若干的子作用域(就是方法嵌套方法),最终该闭包作用域为最外层方法的作用域
 * 它包含了本身方法参数和所有内嵌函数的方法参数,所以当一个内嵌函数在外部有引用时,该引用的作用域为引用函数所在的(顶级)方法作用域
 */
function a(x) {
    function b(){
        alert(x); // 引用外部函数参数
    }
    return b;
}
var run = a('run...');
// 由于作用域的扩大,可以引用到外部函数a的变量并显示
run(); // alert(): run..

获取地址参数字符串和定时刷新

立即学习Java免费学习笔记(深入)”;

复制代码 代码如下:

// 获取问号?后面的内容,包括问号
var x = window.location.search
// 获取警号#后面的内容,包括#号
var y = window.location.hash
// 配合定时器可实现网页自动刷新
window.location.reload();

Null和Undefined

立即学习Java免费学习笔记(深入)”;

复制代码 代码如下:

/**
 * Undefined类型只有一个值,即undefined。当声明的变量还未被初始化时,变量的默认值为undefined。
 * Null类型也只有一个值,即null。null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象。
 * ECMAScript认为undefined是从null派生出来的,所以把它们定义为相等的。
 * 但是,如果在一些情况下,我们一定要区分这两个值,那应该怎么办呢?可以使用下面的两种方法
 * 在进行判断时根据需要,判断对象是否有值时最好用‘==='强类型判断。
 */
var a;
alert(a === null); // false,因为a不是一个空对象
alert(a === undefined); // true,因为a未初始化,值为undefined
// 引申
alert(null == undefined); // true,因为‘=='运算符会进行类型转换,
// 同理
alert(1 == '1'); // true
alert(0 == false); // true,false转换为Number类型为0

 给方法动态添加参数

立即学习Java免费学习笔记(深入)”;

复制代码 代码如下:

// 方法a多了一个参数2
function a(x){
    var arg = Array.prototype.push.call(arguments,2);
    alert(arguments[0]+'__'+arguments[1]);
}

自定义SELECT边框样式

立即学习Java免费学习笔记(深入)”;

复制代码 代码如下:



   

最简单的调色盘

立即学习Java免费学习笔记(深入)”;

复制代码 代码如下:



函数、对象 is 数组?

立即学习Java免费学习笔记(深入)”;

复制代码 代码如下:

var anObject = {}; //一个对象
anObject.aProperty = “Property of object”; //对象的一个属性
anObject.aMethod = function(){alert(“Method of object”)}; //对象的一个方法
//主要看下面:
alert(anObject[“aProperty”]); //可以将对象当数组以属性名作为下标来访问属性
anObject[“aMethod”](); //可以将对象当数组以方法名作为下标来调用方法
for( var s in anObject) //遍历对象的所有属性和方法进行迭代化处理
alert(s + ” is a ” + typeof(anObject[s]));
// 同样对于function类型的对象也是一样:
var aFunction = function() {}; //一个函数
aFunction.aProperty = “Property of function”; //函数的一个属性
aFunction.aMethod = function(){alert(“Method of function”)}; //函数的一个方法
//主要看下面:
alert(aFunction[“aProperty”]); //可以将函数当数组以属性名作为下标来访问属性
aFunction[“aMethod”](); //可以将函数当数组以方法名作为下标来调用方法
for( var s in aFunction) //遍历函数的所有属性和方法进行迭代化处理
alert(s + ” is a ” + typeof(aFunction[s]));

立即学习Java免费学习笔记(深入)”;

复制代码 代码如下:

/**
 * 是的,对象和函数可以象数组一样,用属性名或方法名作为下标来访问并处理。
 * 那么,它到底应该算是数组呢,还是算对象?我们知道,数组应该算是线性数据结构,线性数据结构一般有一定的规律,适合进行统一的批量迭代操作等,有点像波。
 * 而对象是离散数据结构,适合描述分散的和个性化的东西,有点像粒子。
 * 因此,我们也可以这样问:JavaScript 里的对象到底是波还是粒子?如果存在对象量子论,那么答案一定是:波粒二象性!
 * 因此,JavaScript里的函数和对象既有对象的特征也有数组的特征。这里的数组被称为“字典”,一种可以任意伸缩的名称值对儿的集合。其实, object和function的内部实现就是一个字典结构,但这种字典结构却通过严谨而精巧的语法表现出了丰富的外观。正如量子力学在一些地方用粒子来 解释和处理问题,而在另一些地方却用波来解释和处理问题。你也可以在需要的时候,自由选择用对象还是数组来解释和处理问题。只要善于把握 JavaScript 的这些奇妙特性,就可以编写出很多简洁而强大的代码来。
 */

点击空白处能触发某一元素关闭/隐藏

立即学习Java免费学习笔记(深入)”;

复制代码 代码如下:

/**
 * 有时候页面有个下拉菜单或者什么的效果,需要用户点击空白处或者点击其他元素时将其隐藏
 * 可用一个全局document点击事件来触发
 * @param {Object} "目标对象"
 */
$(document).click(function(e){
    $("目标对象").hide();
});
/**
 * 但是有一个缺点就是当你点击该元素又想让他显示
 * 如果你不及时阻止事件冒泡至全局出发document对象点击时,上面方法就会执行
 */
$("目标对象").click(function(event){
    event = event || window.event;
    event.stopPropagation(); // 当点击目标对象时,及时阻止事件冒泡
    $("目标对象").toggle();
});

以上都是个人整理的一些常用的javascript小方法,记录下来方便自己开发时直接拿来使用,这里也推荐给有需要的小伙伴。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

智谱清言 - 免费全能的AI助手
智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

相关专题

更多
batoto漫画官网入口与网页版访问指南
batoto漫画官网入口与网页版访问指南

本专题系统整理batoto漫画官方网站最新可用入口,涵盖最新官网地址、网页版登录页面及防走失访问方式说明,帮助用户快速找到batoto漫画官方平台,稳定在线阅读各类漫画内容。

65

2026.02.25

Steam官网正版入口与注册登录指南_新手快速进入游戏平台方法
Steam官网正版入口与注册登录指南_新手快速进入游戏平台方法

本专题系统整理Steam官网最新可用入口,涵盖网页版登录地址、新用户注册流程、账号登录方法及官方游戏商店访问说明,帮助新手玩家快速进入Steam平台,完成注册登录并管理个人游戏库。

6

2026.02.25

TypeScript全栈项目架构与接口规范设计
TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

9

2026.02.25

Python数据处理流水线与ETL工程实战
Python数据处理流水线与ETL工程实战

本专题聚焦 Python 在数据工程场景下的实际应用,系统讲解 ETL 流程设计、数据抽取与清洗、批处理与增量处理方案,以及数据质量校验与异常处理机制。通过构建完整的数据处理流水线案例,帮助开发者掌握数据工程中的性能优化思路与工程化规范,为后续数据分析与机器学习提供稳定可靠的数据基础。

0

2026.02.25

Java领域驱动设计(DDD)与复杂业务建模实战
Java领域驱动设计(DDD)与复杂业务建模实战

本专题围绕 Java 在复杂业务系统中的建模与架构设计展开,深入讲解领域驱动设计(DDD)的核心思想与落地实践。内容涵盖领域划分、聚合根设计、限界上下文、领域事件、贫血模型与充血模型对比,并结合实际业务案例,讲解如何在 Spring 体系中实现可演进的领域模型架构,帮助开发者应对复杂业务带来的系统演化挑战。

0

2026.02.25

Golang 生态工具与框架:扩展开发能力
Golang 生态工具与框架:扩展开发能力

《Golang 生态工具与框架》系统梳理 Go 语言在实际工程中的主流工具链与框架选型思路,涵盖 Web 框架、RPC 通信、依赖管理、测试工具、代码生成与项目结构设计等内容。通过真实项目场景解析不同工具的适用边界与组合方式,帮助开发者构建高效、可维护的 Go 工程体系,并提升团队协作与交付效率。

18

2026.02.24

Golang 性能优化专题:提升应用效率
Golang 性能优化专题:提升应用效率

《Golang 性能优化专题》聚焦 Go 应用在高并发与大规模服务中的性能问题,从 profiling、内存分配、Goroutine 调度、GC 机制到 I/O 与锁竞争逐层分析。结合真实案例讲解定位瓶颈的方法与优化策略,帮助开发者建立系统化性能调优思维,在保证代码可维护性的同时显著提升服务吞吐与稳定性。

9

2026.02.24

Golang 面试题精选:高频问题与解答
Golang 面试题精选:高频问题与解答

Golang 面试题精选》系统整理企业常见 Go 技术面试问题,覆盖语言基础、并发模型、内存与调度机制、网络编程、工程实践与性能优化等核心知识点。每道题不仅给出答案,还拆解背后的设计原理与考察思路,帮助读者建立完整知识结构,在面试与实际开发中都能更从容应对复杂问题。

6

2026.02.24

Golang 运行与部署实战:从本地到云端
Golang 运行与部署实战:从本地到云端

《Golang 运行与部署实战》围绕 Go 应用从开发完成到稳定上线的完整流程展开,系统讲解编译构建、环境配置、日志与配置管理、容器化部署以及常见运维问题处理。结合真实项目场景,拆解自动化构建与持续部署思路,帮助开发者建立可靠的发布流程,提升服务稳定性与可维护性。

5

2026.02.24

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 5.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.1万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号