js代码 | 易学教程

5行js代码搞定导航吸顶效果

阅读更多关于 5行js代码搞定导航吸顶效果

一、HTML布局首先写HTML布局 <body> <div id="wrap"></div> </body> 二、CSS样式给点简单的样式 <style> *{ margin: 0; padding: 0; } body{ height: 2000px; background-image: linear-gradient(-180deg, #15f09d 0%, #25A0FF 50%, #fca72b 100%); } #wrap{ background-color: rgba(0,0,0,0.2); width: 100%; height: 100px; margin-top: 100px; } #wrap[data-fixed="fixed"]{ position: fixed; top:0; left: 0; margin: 0; } </style> 三、JS代码 1、面向过程直接编写5行代码搞定 <script> var obj = document.getElementById("wrap"); var ot = obj.offsetTop; document.onscroll = function () { var st = document.body.scrollTop || document.documentElement.scrollTop; obj

js简单实现表格排序

阅读更多关于 js简单实现表格排序

昨天看到一篇关于表格排序的随笔，鉴于本人还只会简单的js，不会使用封装，所以自己也试了一下写这个效果。可能不太优化，原理思路是：获取行对象tr，排序tr中要比较的对象td，排序后添加回tbody。如下：样式如下： <style> thead tr td{ cursor: pointer; } thead tr td:hover{ text-decoration: underline; } </style> 结构如下： <table> <thead> <tr> <td>姓名</td> <td>性别</td> <td id="score">成绩</td> </tr> </thead> <tbody> <tr> <td>hoho</td> <td>女</td> <td>65</td> </tr> <tr> <td>haha</td> <td>男</td> <td>73</td> </tr> <tr> <td>hehe</td> <td>女</td> <td>67</td> </tr> </tbody> </table> js代码： <script> var score=document.getElementById('score'); var tbody=document.getElementsByTagName('tbody')[0]; //获取文档下的第一个tbdoy var tr

JavaScript知识总结

阅读更多关于 JavaScript知识总结

1、什么是JavaScript 1.1、概述 JavaScript是一本世界上最流行的脚本语言一个合格的后端人员，必须要精通JavaScript 1.2、历史 ECMAScript它可以理解是JavaScript的一个标准目前最新的版本是es6 但是大部分浏览器还是只停留在了支持es5代码上问题：开发环境与线上环境的版本不一致 2、快速入门 2.1、引入JavaScript 1、内部标签 <script> alert("hello world1"); </script> 2、外部引入 abc.js alert("hello world2") index.html <script src="abc.js"></script> 2.2、基本语法入门演示代码： <script> //数据类型数据变量名 = 数据变量; var num = 3; if (num > 2) { alert("数字大于2") } else { alert("数字不大于2") } //控制台打印数据 console.log(num) </script> 运行效果：浏览器必备调试须知： 2.3、数据类型数值、文本、图形、音频、视频 1、变量 var //仅仅不能以数字开头 2、number ** js不区分小数和整数 123 //整数123 123.1 // 浮点数123.1 123e3 /

深入js——this

阅读更多关于深入js——this

this this是与执行上下文绑定的，每个执行上下文都有一个this；执行上下文有3种：全局执行上下文、函数执行上下文和eval执行上下文，因此this也有3种，全局执行上下文中的this、函数执行上下文中的this和eval执行上下文中的this。eval我们很少使用，因此这里我们只讨论全局执行上下文中的this、函数执行上下文中的this。全局执行上下文的this 在全局执行上下文中，this指向全局对象，因此在浏览器环境中，this执行window。函数执行上下文的this 函数执行上下文的this有些复杂，主要是因为它与作用域不同，不是静态绑定到一个函数的，而是与函数如何被调用有关，也就是说一个函数每次的this可能不一样。这里尤其要记住，不要混淆作用域和this，这两者可以说没有任何关系，作用域是在函数定义时就确定的，而this是在函数调用时确定的。 JavaScript中共有以下4种函数调用方式：对象调用方法方式；函数调用方式； apply/call方式；构造函数方式；对象调用方法方式当一个函数被保存为对象的一个属性时，我们称此函数为方法。使用对象来调用其内部的一个方法，该方法的 this 是指向对象本身的 var obj ={ value:3, dosth:function(){ return this.value;//通过obj.do(

整理下《前端江湖面试》对自己有益的题目。

阅读更多关于整理下《前端江湖面试》对自己有益的题目。

面试题目汇总前言近期在找工作，也在读前端面试江湖这本书，书中整理了很多基础的面试题目，在书中也发现了一些错误。好记性不如烂笔头，于是整理下对自己有益的题目，都是一些较为基础的题目,后期还会更新。时时刻刻勉励自己，注重基础。现在在找工作，初中级前端，如有哪位热心的仁兄公司在招前端，希望@我一下，目标广州，前端路很长，希望一起努力向前。 js初级之操作字符串截取字符串 var a = "www.qdjhu.com中的qdjhu"。考察知识点，substr()第一个参数为起始位置，第二个参数为截取的长度，注意第一个参数为负数则从末尾往前找，第二个参数为负数则返回空字符串，此方法不会修改原字符串，只是查找并返回查找的结果，与slice()方法不同的是，slice()方法第二个参数为结束位置，slice()的第一个参数如果大于第二个参数则返回空字符串。 a.substr(4,5)或者a.slice(4,9) 判断字符串是否是这样组成的，第一个必须是字母，后面的可以使字母，数字，下划线，总长度为5-20。考察知识点，正则。[a-zA-Z]是匹配所有字母，w表示匹配任意字母，数字，下划线。{n}代表重复几次，{n,m}代表重复至少n次，至多m次。 var a = /^[a-zA-Z]{1}\w{4，19}/ 给定一个字符串 "IamWangZhiJun"

深入js——作用域链

阅读更多关于深入js——作用域链

作用域作用域是可访问对象的集合，确定当前执行代码对变量的访问权限。作用域可分为静态作用域和动态作用域，JavaScript采用静态作用域，也叫词法作用域。静态作用域函数的作用域在函数定义的时候就决定了，与函数如何被调用，在何处被调用无关。 var a = 1; function foo() { console.log(a); // 1 } function bar () { var a = 2; foo() } bar() 以上代码，foo函数为打印出1。虽然foo是在bar函数中执行，但它的作用域是在它定义时就确定了。首先查找foo内部有没有a，没有就从外层找a，于是最终打印出了1。 [[scope]] 在将作用域链之前，先讲讲[[scope]]。用console.dir随便打印一个函数 function bar () { var a = 1; function foo () { console.log(a) } console.dir(foo) } console.dir(bar) bar() 可以看到有一个[[scope]]属性。从这个例子可以看出: [[scope]]是所有父变量对象的层级链 [[scope]]在函数创建时被存储－－静态（不变的），永远永远，直至函数销毁。即：函数可以永不调用，但[[scope]]属性已经写入，并存储在函数对象中。 Q

Console命令，让js调试更简单

阅读更多关于 Console命令，让js调试更简单

转自https://www.cnblogs.com/alantao/p/5859358.html 一、显示信息的命令 console.log("normal"); // 用于输出普通信息 console.info("information"); // 用于输出提示性信息 console.error("error"); // 用于输出错误信息 console.warn("warn"); // 用于输出警示信息二、点位符：字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o); console.log("%s","string"); //字符(%s) console.log("%d年%d月%d日",2016,8,29); //整数(%d或%i) console.log("圆周率是%f",3.1415926); //浮点数(%f) var dog = {}; dog.name = "大毛"; dog.color = "黄色"; dog.sex = "母狗"; console.log("%o",dog); //对象(%o) 三、信息分组 (console.group(),console.groupEnd()) console.group("第一组信息"); console.log("第一组第一条：我的博客"); console.log("第一组第二条：CSDN");

JS 灵活使用 console 调试

阅读更多关于 JS 灵活使用 console 调试

前言： Web 开发中最常用的调试就是 console.log()，console 除了本身 log() 方法外，还有其他很多方法。 console.log() console.log() 有许多意想不到的功能，我们经常使用 console.log(object) 来查看一个对象，或者使用 console.log(object,otherobject,string) 来查看数据信息。除此之外，console.log() 还有另外一种写法： console.log(msg,values) ，类似 Java 或 PHP 中的 sprintf console.log('I like %s but I do not like %s.', 'GaoSirs', 'pus'); 这里会输出： I like GaoSirs but I do not like pus. 常见的占位符有 %o（它接受对象），%s（它接受字符串），d%（它接受数字），%c（它接受 css 语句）；其中比较有趣的是 %c ：使用%c占位符时，对应的后面的参数必须是CSS语句，用来对输出内容进行CSS渲染 console.log('I am a %cbutton', 'color: white; background-color: orange; padding: 2px 5px; border-radius:

Console命令，让js调试更简单

阅读更多关于 Console命令，让js调试更简单

Console命令，让js调试更简单一、显示信息的命令 console.log("normal"); // 用于输出普通信息 console.info("information"); // 用于输出提示性信息 console.error("error"); // 用于输出错误信息 console.warn("warn"); // 用于输出警示信息二、点位符：字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o); console.log("%s","string"); //字符(%s) console.log("%d年%d月%d日",2016,8,29); //整数(%d或%i) console.log("圆周率是%f",3.1415926); //浮点数(%f) var dog = {}; dog.name = "大毛"; dog.color = "黄色"; dog.sex = "母狗"; console.log("%o",dog); //对象(%o) 三、信息分组 (console.group(),console.groupEnd()) 按 Ctrl+C 复制代码按 Ctrl+C 复制代码四、将对象以树状结构展现 (console.dir()可以显示一个对象所有的属性和方法) var info = { name : "Alan", age : "27",

JS初级-作用域

阅读更多关于 JS初级-作用域

作用域：域：空间、范围、区域…… 作用：读、写 script 全局变量、全局函数自上而下函数由里到外 {} 浏览器： “JS解析器” 1）“找一些东西” ：var function 参数 a = ... 所有的变量，在正式运行代码之前，都提前赋了一个值：未定义 fn1 = function fn1(){ alert(2); } 所有的函数，在正式运行代码之前，都是整个函数块 JS 的预解析遇到重名的：只留一个变量和函数重名了，就只留下函数 2）逐行解读代码：表达式：= + - * / % ++ -- ! 参数…… 表达式可以修改预解析的值！下面看一个小例子： alert(a); // function a (){ alert(4); } var a = 1; alert(a); // 1 function a (){ alert(2); } alert(a); // 1 var a = 3; alert(a); // 3 function a (){ alert(4); } alert(a); // 3 alert( typeof a ); 全局与局部的问题： var a = 1; function fn1(a){ alert(a); // undefined a = 2; } fn1(); alert(a); // 1 var a = 1; function

订阅 js代码