js
前端岚枫
技术翻译,技术人生,前端知识,生活感悟
展开
-
javascript基础系列:javascript中的变量和数据类型(一)
javascript基础系列:javascript中的变量和数据类型(一)今天开始去重新系统温习一遍js基础,并作下记录javascript是由三部分组成:ECMASCRIPT(ES): 描述了该语言的语法和基本对象DOM: 文档对象模型,描述处理网页内容的方法和接口BOM:浏览器对象模型,描述与浏览器进行交互的方法和接口js做客户端语言按照相关的js语法,去操作页面中的元素,有时还要操作浏览器里面的一些功能ECMAScript3/5/6,js的语法规范(变量、数据类型、操作语句原创 2020-08-03 08:19:30 · 729 阅读 · 2 评论 -
夯实基础,彻底掌握js的核心技术(三):堆栈内存及闭包详解
数据渲染机制及堆栈内存1. 数据值操作机制/** 1. 先声明一个变量a,没有赋值(默认值谁undefined)* 2. 在当前作用域中开辟一个位置存储12这个值* 3. 让变量a和12关联在一起(定义:赋值)*/var a = 12var b = a;b = 13;console.log(a);var ary1 = [12, 23];var ary2 = ary1;ary2.push(100);console.log(ary1)function sum() { var .原创 2020-07-21 20:32:56 · 531 阅读 · 1 评论 -
夯实基础,彻底掌握js的核心技术(二):面向对象编程(Object Oriented Programming)
单例设计模式(Singleton Pattern)1. 单例模式解决的问题:表现形式:Var obj = {xxx; xxx,…}2. 作用:把描述同一件事物的属性和特征进行“分组、分类”(存储在同一个推内存空间中),因此避免了全局变量之间的冲突和污染var pattern1 = {name: ‘xxx’}var pattern2 = { name: ‘xxx’}//name值并不是一个值,属于两个堆内存空间中在单例设计模型中,obj不仅仅是对象名,它被称为”命名空间[N.原创 2020-07-13 22:42:52 · 1046 阅读 · 3 评论 -
夯实基础,彻底掌握js的核心技术(一)
由于工作项目原因,最近很少更新博客了,不过忙中抽闲,利用晚上时间,总结了一些有关JS的基础知识,并分享一些大厂面试 题,根据知识点进行具体分析讲解,希望能对方便大家来学习。数据类型/堆栈内存JS中的数据类型基本数据类型number string boolean null undefined symbol bigint引用数据类型object function数据类型结构如下图数字类型中的比较奇怪的值NaN是number类型Console.log(typeof NaN)原创 2020-07-09 18:29:14 · 645 阅读 · 0 评论 -
每个前端工程师都应该去了解的前端面试题总结(一)
当我们需要找工作的时候,面试对于我们每个程序员来说都是非常重要的环节,掌握一些面试题技巧是非常有必要的,今天主要分享几个js有关的面试题作用域var num1 = 55var num2 = 66function f1(num, num1) {num = 100num1 = 100num2 = 100console.log(num) //100console.log(num1...原创 2020-04-13 11:59:43 · 3476 阅读 · 10 评论 -
教你轻松搞定javascript中的正则
文章目录1 正则表达式概述1.1 什么是正则表达式1.2 正则表达式特点2 正则表达式在Javascript中的使用2.1 创建正则表达式2.2 测试正则表达式 test3 正则表达式中的特殊字符3.1 正则表达式的组成3.2 边界符3.3 字符类3.4 量词符3.5 括号总结3.6 预定义类4 正则表达式中的替换4.1 replace 替换4.2 正则表达式参数总结1 正则表达式概述1....原创 2020-03-06 09:17:04 · 3510 阅读 · 7 评论 -
带你学习javascript的函数进阶(二)
1 严格模式1.1 什么是严格模式JavaScript除了提供正常模式外,还提供了严格模式(strict mode)。ES5的严格模式是采用具有限制性Javascript变体的一种方式。即在严格的条件下运行js代码。严格模式在IE10以上版本的浏览器中才会被支持,旧版本浏览器会被忽略。严格模式对正常的javascript语义做了一些更改:消除了Javascrip语法的一些不合理、不严谨...原创 2020-03-03 08:37:36 · 3312 阅读 · 6 评论 -
带你学习Javascript中的函数进阶(一)
文章目录1. 函数的定义和调用1.1 函数的定义方式1.2 函数的调用方式2. this2.1 函数内this的指向2.2 改变函数内部this指向2.3 call apply bind 总结总结1. 函数的定义和调用1.1 函数的定义方式函数声明方式function关键字(命名函数)函数表达式(匿名函数)new Function()var fn = new Function(...原创 2020-03-02 14:05:48 · 803 阅读 · 4 评论 -
带你学习ES5中新增的方法
1. ES5中新增了一些方法,可以很方便的操作数组或者字符串,这些方法主要包括以下几个方面数组方法字符串方法对象方法2. 数组方法迭代遍历方法:forEach()、map()、filter()、some()、every()判断方法:isArray()2.1 forEach跟jQuery的each用法类似。语法是:array.forEach(function(currentVa...原创 2020-03-01 20:27:51 · 1956 阅读 · 6 评论 -
作为前端,你需要懂得javascript实现继承的方法
在ES6之前,javascript不跟其他语言一样,有直接继承的方法,它需要借助于构造函数+原型对象模拟实现继承。现在我们可以利用ES6的extends方法实现继承,如果想了解更多有关ES6实现的继承请查看《ES6学习笔记(二):教你玩转类的继承和类的对象》,在这里不再做更多的介绍。文章目录1. call()2. 借用构造函数继承父类型属性3. 借用原型对象继承父类型方法总结ES6之前并没...原创 2020-02-29 17:19:58 · 2068 阅读 · 9 评论 -
作为前端,你需要了解的js构造函数和原型
1.1 概述在典型的OOP的语言中,都存在类的概念,类就是对象的模板,对象就是类的实例,但在ES6之前,JS中并没有引入类的概念。对象不是基于类创建的,而是用一种构造函数的特殊函数来定义对象和它们的特征。创建对象可以通过以下三种方式:对象字面量var obj1 = {}new Objectvar obj2 = new Object()自定义构造函数function...原创 2020-02-28 22:38:29 · 889 阅读 · 6 评论 -
有关return、return false、break、continue 用法详解
return false、break、continue 这三种语句是我们写代码中经常遇到的语句,有时不清楚它们的用途场景很容易弄混乱,今天我收集这些语句的详细用法。return函数中的return 语句既是指函数调用的的返回值,这里是return语句的语法:return expressionreturn 语句只能在函数体内出现,如果不是的话将会报语法错误。当执行到return 语句的时候...原创 2019-11-12 08:37:47 · 2939 阅读 · 4 评论 -
正则表达式捕获分组和非捕获分组及用法
正则表达式 (regular expression)是一个描述字符模式的对象。 ECMAScript 的 RegExp 类表示正则表达式,而 String 和 RegExp 都定义了使用正则表达式进行强大的模式匹配和文本 检索与替换的函数。捕获组:把正则表达式中子表达式匹配的内容,保存到内存中以数字编号或显式命名的组里,方便后面引用。例如:var str = "2019-10-28";v...原创 2019-10-28 11:54:20 · 2574 阅读 · 0 评论 -
mouseover/out和mouseenter/leave的区别及用法
今天在做下拉菜单练习时发现一些奇怪的问题,就是当用mouseover和mouseout时,当鼠标移动到下拉菜单时容易出现闪动,最后经过查资料发现 mouseover:无论鼠标指针穿过被选元素还是任何的子元素,都会触发mouseover事件,而mouseenter只有在鼠标指针穿过被选元素时,才会触发mouseenter事件; mouseout : 无论鼠标指针离开被选元原创 2012-07-02 17:05:21 · 1567 阅读 · 0 评论 -
用css和jquery实现标签页效果(一)
用css和jQuery实现一个简单的标签页效果,用css实现斜边导航的效果,除了ie6其他的浏览器都支持, 其效果如下 css样式: body { width: 700px; margin: 100px auto 0 auto; font-family: Arial, Helvetica; font-si原创 2012-07-17 10:31:46 · 1345 阅读 · 0 评论 -
css3和jQuery实现一个简单的标签页效果
主要用css3另外一种jQuery思路方法来实现标签页的切换效果,主要用css3来实现一些渐变,阴影和圆角效果, css代码如下: body{width: 600px;margin: 100px auto 0 auto;font-family: 'Trebuchet MS', Arial, Helvetica; font-size: small;background原创 2012-07-17 14:29:43 · 1232 阅读 · 0 评论 -
用css3和jquery实现的渐变的动态进度条
进度条是网站中常见的一种,今天经过研究外国一个网站的例子,试着用css3来实现进度条: html代码如下: Set above to: 25% / 50% / 75% / 100% Set above to: 25% / 50% / 75% /原创 2012-07-18 10:39:09 · 3220 阅读 · 1 评论 -
用css3和jQuery制作精美的表单
用css3和jQuery制作一个简单的精美表单html代码如下: Mask Your Input Forms and Make It BeautyToo PlainFading The Label Username Password Sliding? Don't Worry Us原创 2012-07-25 15:53:10 · 1097 阅读 · 0 评论 -
用jQuery实现简单的加入收藏页面的功能
加入收藏功能是我们常见的功能,今天研究学习了一下,写了一个简单的例子,主要实现加入收藏的功能:html代码如下: 收藏本页jQuery代码如下: $(document).ready(function(){ $("#favorites").click(function(){ var ctrl=(nav原创 2012-07-31 10:23:10 · 2096 阅读 · 0 评论 -
用jQuery实现页面遮罩弹出框
页面遮罩弹出框是最常见的一种情况,今天用jQuery实现页面遮罩弹出框,主要用的技术有JQuery,css和html, html代码如下: 点击这里查看效果 关闭 正在加载,请稍后.... css代码如下: body { font-family:Ari原创 2012-08-01 14:18:01 · 3753 阅读 · 1 评论 -
读《Javascript高级程序设计》中的javascript事件处理程序(事件侦听器)心得
今天读了《Javascript高级程序设计》中的javascript事件处理程序(事件侦听器)部分的内容,总结一些自己的心得: 事件就是用户或者浏览器自身执行的某种动作。例如click 、load 、mouseover等等,都是事件的名字,而响应某个事件的函数就叫做事件处理程序(或事件侦听器)。事件处理程序的方式分为以下几种:1. HTML事件处理程序: 在HTML中定原创 2012-08-29 17:01:20 · 1436 阅读 · 0 评论 -
jQuery bind事件练习及tab标签切换的实现
1.bind事件 jQuery部分代码:$(document).ready(function(){ $("input[type=button]").bind({ click:function(){$("p").slideToggle();}, mouseover:function(){$("body").css("background-原创 2012-08-31 14:41:27 · 2319 阅读 · 0 评论 -
jQuery实现一个图片左右滚动
jQuery实现的一个图片左右循环滚动的例子,html代码如下: 我是第1张图片 我是第2张图片 我是第3张图片 我是第4张图片 我是第5张图片 我是第6张图片 我是第7张图片 我是第N张图片 当前显示的是第 1 张图片css代码如下:原创 2012-09-03 11:23:00 · 2355 阅读 · 0 评论 -
javascript中为某个对象(控件)绑定事件的几种方法
今天学习了javascirpt的一些基础知识,有关事件绑定的一些方法: 1. 这是最简单也是最直接的一种方法,不过一般程序中很少用。2. var v=document.getElementById("button"); v.onclick=clickHandler;//后面不要带括号;function clickHandler(event){原创 2012-08-23 20:08:03 · 1979 阅读 · 0 评论 -
利用jQuery和css实现的模仿百度搜索列表页面的分页的足迹效果
主要运用css的border属性来实现三角形,jQuery实现切换和选中的效果:html代码如下:上一页 12 345 678 下一页css代码如下:* { margin:0; padding:0; font-size:12px;}.page { ma原创 2012-09-03 16:37:39 · 2994 阅读 · 0 评论 -
腾讯微博——点击按钮自动加关注代码
腾讯微博点击按钮自动加关注:预览效果:原创 2012-09-04 10:41:49 · 4476 阅读 · 4 评论 -
一般左边后台点击收缩展开的效果
html代码: 秋秋淘衣坊 秋秋 酒吧\夜店论坛 福州电影院 秋秋淘衣坊2 房屋出租 招聘求职 福州拼车 二手交易市场 秋秋淘衣坊3 福清论坛 长乐论坛 平潭论坛原创 2012-09-04 16:19:47 · 2728 阅读 · 0 评论 -
javascript实现定时器四秒后跳转到秋秋淘衣坊首页(setInterval计时器)
var Timer; function loadPage(){ Timer=setInterval('countDown()',1000); //每隔1秒执行一次 } var sec=4; function countDown(){ if(sec>0){原创 2012-08-27 09:29:35 · 1823 阅读 · 0 评论 -
javascript获取当前日期时间及其一些操作
var myDate = new Date();myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)myDate.getMonth(); //获取当前月份(0-11,0代表1月)myDate.getDate(); //获取当前日(1-31)myDate.getDay(); //获取原创 2012-08-28 09:13:22 · 1305 阅读 · 2 评论 -
jQuery实现动态地获取系统时间
jQuery部分代码: function current(){ var d=new Date(),str=''; str +=d.getFullYear()+'年'; //获取当前年份 str +=d.getMonth()+1+'月'; //获取当前月份(0——11) str +=d.getDate()+'日';原创 2012-08-28 09:45:56 · 4131 阅读 · 3 评论 -
关于JavaScript中cookie的用法的例子
最近做项目中牵扯到要写一些cookie的例子,发现在自己在js方面还有很多的不足,然需要努力:无标题文档 function cookie(name, value, options) { if (typeof value != 'undefined') { // name and value given, set cookie op原创 2012-09-07 10:02:16 · 1060 阅读 · 0 评论 -
关于JavaScript中cookie的用法例子
前天做项目的中的一个功能,实现图片关闭之后刷新也不显示的功能,由于自己的js基础不好,浪费了好大的时间,请教别人和查资料才整出来,感觉自己虽然做前端都一年多了,js技术还是没多大的提高,以后要加大js的练习了,不然都赶不上团队的发展了。。。。无标题文档 function cookie(name, value, options) { if (type原创 2012-09-07 09:50:01 · 987 阅读 · 0 评论 -
JavaScript解决e6不支持不支持max-width,max-height的问题的方法
今天遇到一个关于用js解决ie6不支持支持max-width,max-height的问题,刚开始用jQuery方法来实现,不过一直获取不到css里面的值,如 if($.browser.msie && $.browser.version == 6.0) { var maxWidth = parseInt($('.viewBigPic img').css('max-width')原创 2012-09-10 13:58:26 · 1126 阅读 · 0 评论 -
如何获取cookie值
获取cookie的值在上一节谈到了读取cookie的名与值,可以看到,只能够一次获取所有的cookie值,而不能指定cookie名称来获得指定的值,这样就必须从cookie中找到你要那个值,因此处理起来可能有点麻烦,用户必须自己分析这个字符串,所以得用到几个常见的字符处理函数来获取指定的cookie值。具体的实现方法如下所示。无标题文档 doc原创 2012-09-10 15:25:33 · 4366 阅读 · 0 评论 -
用jQuery解决input中placeholder值在ie中无法支持的问题
无标题文档//第一种方法$(document).ready(function(){ var doc=document,inputs=doc.getElementsByTagName('input'),supportPlaceholder='placeholder'in doc.createElement('input'),placeholder=function(inpu原创 2012-09-11 16:31:00 · 5778 阅读 · 1 评论 -
用javascript实现有效时间的控制,并显示要过期的时间
JavaScript实现的一个设置时间有效期的,自己用jQuery实现的感觉代码太不简练,这个是同事写的一段js代码,自己研究学习了一下 无标题文档#lastdate{ color:#FF9900; font-style:normal;} 一天内原创 2012-09-14 09:57:23 · 2138 阅读 · 0 评论 -
jquery实现图片等比例缩放,解决max-width在ie中不兼容问题
上次用原生的JavaScript实现的图片等比例缩放,max-width和max-height在ie6中不兼容问题,今天用jQuery实现了这些问题jQuery部分代码 $(document).ready(function(){ var maxWidth=$(".imgBox").width(); $("img").each(functio原创 2012-09-18 15:35:50 · 3767 阅读 · 0 评论 -
用jquery实现仿蘑菇街导航固定顶部的效果
无标题文档$(document).ready(function(){ var headHeight=$(".header").height()+10; var nav=$(".nav"); $(window).scroll(function(){ if($(this).scrollTop()>headHeight){原创 2012-09-20 09:36:28 · 4473 阅读 · 1 评论 -
jQuery实现 div里面的文字如何自动缩小,避免文字溢出
今天用 jQuery实现 div里面的文字如何自动缩小,避免文字溢出的一个例子代码如下jQuery实现 div里面的文字如何自动缩小.box{ width:400px; height:400px; padding:10px; margin:20px; background:#999999; }.content{ color:#fff; fon原创 2012-09-21 11:01:56 · 12262 阅读 · 1 评论 -
js 控制 Windows Media Player
Windows Media Playerhtml: //媒体文件地址 //声道0全声道,-100左声道,100右声道 //播放次数 //是否自动播放-1是,0否 //音量原创 2012-10-17 10:49:14 · 3647 阅读 · 0 评论