js

CSS、JS中的相对路径引用

笑着哭i 提交于 2020-01-30 23:50:10
  初学者由于对一些比较基本的知识的把握不是很牢,所以在开发或者设计的时候,往往很容易出现一些错误或者异常现象而找不到出错的根源。记得自己刚刚java入门的时候,会出现一些很“离奇”的现象,然后一遍一遍查看自己的代码,一步一步的进行调试(当然那个时候的调试方式也只是从初学这的角度上而言的,大多是比较粗略的手段),还是发现不了哪里出了问题,这直接打击学习的积极性。甚至有时候,照着书本或者教学视频敲的实例代码也不能正常跑起来,不知道大家有没有这种悲催的感觉。   比如说,大家在html中通常会导入一些外部的css、js文件,而其中一个比较容易被忽视的问题就是路径问题,有时候,我们在css、js中都有通过路径来引入一张图片的需求,当我们采用相对路径的时候,在css和js中引用图片的相对路径的基准是不一样的。在css中出现的相对路径,是以css文件所在路径为基准的,而js中的路径则是以导入此js的网页文件所在的位置为基准的。   为了很好的说明这个问题,我们写一个简单的切换图片的js特效,刚开始的时候,我们让html有一副默认的背景图,通过css来设计,而当用户单击“切换背景图”按钮时,通过javascript代码来控制背景图的变更,效果如下: 图一:更改背景图之前的效果图 图二:更改背景图之后的效果图 我们的文件结构是这样的: / index.html /js/ chbk.js /css

10分钟理解JS引擎的执行机制

爷,独闯天下 提交于 2020-01-30 21:29:18
10分钟理解JS引擎的执行机制 javascript 阅读约 7 分钟 深入理解JS引擎的执行机制 1.灵魂三问 : JS为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4.说说setTimeout 首先,请牢记2点: (1) JS是单线程语言 (2) JS的Event Loop是JS的执行机制。深入了解JS的执行,就等于深入了解JS里的event loop 1.灵魂三问 : JS为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢? 技术的出现,都跟现实世界里的应用场景密切相关的。 同样的,我们就结合现实场景,来回答这三个问题 (1) JS为什么是单线程的? JS最初被设计用在浏览器中,那么想象一下,如果浏览器中的JS是多线程的。 场景描述: 那么现在有2个线程,process1 process2,由于是多线程的JS,所以他们对同一个dom,同时进行操作 process1 删除了该dom,而process2 编辑了该dom,同时下达2个矛盾的命令,浏览器究竟该如何执行呢? 这样想,JS为什么被设计成单线程应该就容易理解了吧。 (2) JS为什么需要异步? 场景描述: 如果JS中不存在异步,只能自上而下执行,如果上一行解析时间很长,那么下面的代码就会被阻塞。 对于用户而言

js操作获取和设置cookie

[亡魂溺海] 提交于 2020-01-30 19:43:14
/*cookie的三种操作:读取,写入,删除*/ var CookieUtil = { get:function(name){ var cookieName = encodeURIComponent(name) + "=", cookieStart = document.cookie.indexOf(cookieName), cookieValue = null; if (cookieStart > -1) { var cookieEnd = document.cookie.indexOf(";",cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length,cookieEnd)); } return cookieValue; }, set:function(name,value,expires,path,domain,secure){ var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value); if (expires

js 函数的嵌套

本秂侑毒 提交于 2020-01-30 17:15:31
函数的嵌套 : 函数嵌套中不允许嵌套定义,嵌套的是调用。 形参的命名:在定义函数的小括号中自定义,符合名称规则即可,一旦定义过后,在当前函数内,必须按照定义好的名称; 上述代码执行流程 : 在比较三个数的大小时候,代码从上往下执行,当遇到定义函数ThreeNumber时条过函数定义,往下走,遇到一个叫函数调用名为ThreeNumber的,回去找跟这个名字相同的定义函数,找到后把实参的值复制给形参,然后执行ThreeNmuber函数体中的内容,返现一个叫TwoNumber调用函数然后网上找叫TwoNumber的定义函数,找到后执行里面的代码,比较完结果return结果 返回给var s,执行下一步用 s跟最后一个数据c比价得出结果return给新定义 的变量Three 上述代码执行过程比较复杂请仔细阅读 来源: CSDN 作者: Jason–json 链接: https://blog.csdn.net/weixin_46146313/article/details/104114707

JS原型链的理解和使用(二)

廉价感情. 提交于 2020-01-30 16:39:25
根据在创建对象的时候,创建出来的对象的__proto__指向创建这个对象的函数的prototype属性。 由于在调用对象的属性或者方法的时候会首先在对象的作用域中查找指定的属性或者方法,如果未找到则会去对象的原型链(即__proto__对象)上查找。所以可以在自定义函数的时候往函数的prototype属性对象上面添加自己的属性和方法(一般是添加方法),然后在用这个函数生成对象的时候则生成的对象就可以直接访问这些添加在函数的prototype上的属性和方法。 如JS内置的Date函数,在我们使用var date = new Date();后date对象中就由很多Date函数中预先在prototype上添加的方法可以使用。 来源: https://www.cnblogs.com/maycpou/p/12242894.html

JS-常用事件集合

余生颓废 提交于 2020-01-30 14:31:47
常见的事件如下: 事件 事件句柄 用法 blur onblur 元素失去焦点。 focus onfocus 元素获得焦点。 change onchange 域的内容被改变。 click onclick 当用户点击某个对象时调用的事件句柄。 dblclick ondblclick 当用户双击某个对象时调用的事件句柄。 keydown onkeydown 某个键盘按键被按下。 keyup onkeyup 某个键盘按键被松开。 load onload 一张页面或一幅图像完成加载。 mousedown onmousedown 鼠标按钮被按下。 mousemove onmousemove 鼠标被移动。 mouseout onmouseout 鼠标从某元素移开。 mouseover onmouseover 鼠标移到某元素之上。 mouseup onmouseup 鼠标按键被松开。 reset onreset 重置按钮被点击。 submit onsubmit 确认按钮被点击。 select onselect 文本被选中。 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"> 6 <meta name="Author"

JS原型链的理解

自作多情 提交于 2020-01-30 13:43:43
一些个人的理解,不一定是对的,仅供参考。 在JS中有函数和对象两个概念,而又有一切皆对象的概念及函数也是一个对象。所以可以说函数一定可以作为一个对象,而对象不一定是一个函数。 也可以说在js中对象分为两种:1.仅仅是一个对象2.既时对象又是函数(以下称为函数对象) 在JS中有一个概念:所有对象都有__proto__属性,而函数对象则还有prototype属性,可以以此区分出哪些是函数对象 在JS中有两个顶级的内置对象:Object和Function,这两个对象我测试了都属于函数对象。但有所不同的是:Object和Function的__proto__都是ƒ () { [native code] }(native code是已被编译为特定于处理器的 机器码 的代码,我反正就理解为不可见的源代码),Function的prototype为ƒ () { [native code] },Object的prototype是一个对象,里面有一些自己系统自定义的方法 在JS中有一个概念:对象是由函数对象生成的,并且对象的 __proto__ 属性指向函数对象的 prototype 属性;函数(函数对象)也是由函数(函数对象)生成的,并且生成函数(函数对象)的prototype是一个系统默认生成的对象包含了两个属性(constructor和__proto__)

js基础中的概要案例统计

本秂侑毒 提交于 2020-01-30 10:12:31
** 1.交换两个变量的值 var apple1 = '青苹果' ; var apple2 = '红苹果' ; var temp = '' ; temp = apple1 ; apple1 = apple2 ; apple2 = temp ; console . log ( apple1 , apple2 ) ; ** 2.数值的最大值,最小值 console . log ( Number . MAX_VALUE ) ; console . log ( Number . MIN_VALUE ) ; console . log ( Number . MAX_VALUE * 2 ) ; //无穷大 console . log ( - Number . MAX_VALUE * 2 ) ; //无穷小 ** 3.闰年平年的判断 //4年一闰,百年不闰,400年再闰,能被四整除且不能被100整除或能被400整除 let year = prompt ( '请输入年份' ) ; if ( year % 4 == 0 && year % 100 != 0 || year % 400 == 0 ) { alert ( '你输入的是闰年' ) } else { alert ( ' 你输入的是平年' ) } ** 3.判断语句的用法 //1.if的用法适用于范围的判断 let score =

js switch多分支语句

你说的曾经没有我的故事 提交于 2020-01-30 04:30:28
switch.case多分支语句 作用:提供了多个分支功能类似if-else级联式,但是代码可读性好 语法: 1.switch后面跟的是整形或者字符的表达式 2.case后面跟的是整形或字符的常量 3.break;用于结束当前语句 4.default类似于if-else中的else如果case的值都无法满足表达式匹配那么执行default后面的代码。 输入框promot(用户提示信息) 小练习 判断输入数1输出春天 2.夏天 3.秋天 4.冬天 其他输出没有这个季节 var s = prompt("请输入一个数字"); switch(parseInt(s)){ case 1: alert("春天"); break; case 2: alert("夏天"); break; case 3: alert("秋天"); break; default: alert("冬天"); break; } 来源: CSDN 作者: Jason–json 链接: https://blog.csdn.net/weixin_46146313/article/details/104108219

JavaScript

女生的网名这么多〃 提交于 2020-01-30 00:01:17
基本语法 与HTML结合方式 1、内部js: 定义<script>标签内容就是js代码 2、外部js: 定义<script>通过src属性引入外部的js文件 3、注意 1.<script>可以定义在html页面的任何地方,但是定义的位置会影响执行顺序。 2.<script>可以定义多个 注释 1、单行注释 1、单行注释://注释内容 2、多行注释:/*注释内容*/ 数据类型 1、原始数据类型 1)number:数字。整数/小数/NaN(not a number 一个不是数字的数字类型) 2)string:字符串。“asdf“ "a" 'fds' 3)booolean:true ro false 4)null:一个对象为空的占位符 5)undefined:未定义。如果一个变量没有给初始值,则会被默认赋值为undefined 变量 变量:一小块存储数据的内存空间 Java语言时强类型语言,而JavaScript是弱类型语言。 1、强类型语言:在开辟变量内存空间时,定义了空间将来存储的数据类型,只能存储固定类型的数据 2、弱类型:在开辟变量空间时,不定义看空间将来的存储数据类型,可以放任意类型的数据。 语法: var 变量名 = 初始值; typeof运算符:获取变量的类型 注:null运算后得到的是object 运算符 1、一元运算符 ++ -- +(正号) -(负号) ++(--