javascript
关注
分享
扫一扫
文章平均质量分 63
TimChen666
持续学习的渣渣
展开
-
JS & jQ实践——固定边栏滚动
前言当左边栏内容高度大于右边栏的时候，左边栏继续滚动，右边栏保持底部不变。 使用到的属性有position:fixed、页面高度、滚动高度、内容高度。 判断，当 滚动高度 + 页面高度 > 右边拦高度，右边栏fixed，bottom: 0 , right : 0。 jQuery代码实现var jWindow = $(window);jWindow.scro原创 2017-09-25 11:17:57 · 590 阅读 · 0 评论 -
JS实践——放大镜
原理鼠标在小图片上移动时，通过捕捉鼠标在小图上的位置，定位大图片的相应位置。 思路首先，我们先理清楚页面元素。 页面元素 容器——demo 小盒子（尺寸与图片一样）放大镜框小图片大盒子（尺寸与图片一样）大图片事件事件都发生在小盒子上。最简单的是——onmouseover、onmouseout，此时只需要控制放大镜框，以及大容器的显示与隐藏。最复杂的是，onmousemove事件。原创 2017-09-25 02:04:54 · 300 阅读 · 0 评论 -
JS实践——拖拽
大体思路1. 鼠标按下onmousedown事件在该事件，我们需要计算鼠标相对于元素左上角的坐标（clientX和clientY），标记元素为可拖动2. 鼠标移动onmousedown事件在该事件，我们需要检测元素是否标记为移动更新元素的位置，到当前鼠标的位置（鼠标当前位置 - 鼠标相对元素的位置）3. 限制区域在上面的鼠标移动事件，我们还需要对元素的移动范围做出限制。首先，页面原创 2017-09-24 10:28:35 · 383 阅读 · 0 评论 -
JS实践——选项卡
大体思路选项卡的原理就是在不需要的时候，隐藏其他信息，只显示需要的信息。显示信息display:block，以及锚点定位。隐藏信息overflow：hidden 和 display：none CSS实现选项卡不使用JS，也可以实现选项卡。主要是通过锚点定位，以及overflow：hidden。当我们点击的时候，跳转到对应的栏目，而其他内容进行隐藏。实例代码<html><head>原创 2017-09-23 22:01:21 · 236 阅读 · 0 评论 -
JS——动画
运动实现思路1. 速度（匀速）改变left、right、width、height、opacity实例1（速度）做一个侧栏分享的案例 思路容器设置相对定位。内容原本的left是负值，设置一个定时器，每隔一段时间，露出一点来。直至offsetLeft为0，结束计时器。代码window.onload=function(){ var oDiv=document.getElemen原创 2017-09-22 15:25:46 · 380 阅读 · 0 评论 -
JS——作用域 && 闭包
执行上下文范围一段<script>或者一个函数全局（一段<script>）执行顺序变量定义函数声明函数执行顺序变量定义函数声明设定this传入参数consloe.log(a); // undefinedvar a = 100;fn("Tim Chen"); // Tim Chen 20function fn(name){ age = 20; cons原创 2017-09-20 10:02:14 · 349 阅读 · 0 评论 -
深入理解——继承
继承继承算是Javascript里面最最最最最最难一点了，所以再怎么深入理解都不为过。本文将继续探讨Javascript的继承。 构造函数的继承一、 构造函数绑定使用call( )或者apply( )父类.call（子类, [参数]）二、prototype模式子类的prototype对象，指向父类的实例。 语法：子类.prototype = new 父类();子类.prototype.co转载 2017-09-19 16:06:54 · 399 阅读 · 0 评论 -
JS——原型
构造函数其实就是一个普通函数，但是内部使用了this变量。对构造函数使用new运算符，就能生成实例，并且this变量会绑定在实例对象上。构造函数首字母最好是大写。//创建构造函数function Foo(name,age){ this.age = age; this.name = name;}//创建实例var f = new Foo("Tim",20) 构造函数扩展引原创 2017-09-19 10:41:35 · 306 阅读 · 0 评论 -
JS——变量类型和计算
变量类型JS按照存储方式，分为值类型和引用类型。值类型 && 引用类型值类型（Number、Boolean、String）var a = 100;var b = a;a = 200;console.log(b); // 100引用类型（Object、Array、Function）var a = {age:20};var b = a;b.age = 21;console.log(a.age)原创 2017-09-19 10:04:01 · 361 阅读 · 0 评论 -
JS——面向对象高级
JSON面向对象用JSON可以方便的创建一个面向对象函数。但是它只适合，只有一个对象的情况。var json = { name: 'Tim'; age: "22"; showName = function (){ alert("我的名字是："+this.name); } showAge = function (){ ...原创 2017-09-17 22:49:17 · 233 阅读 · 0 评论 -
JS——面向对象实例
面向过程的选项卡<script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById("div1"); var oBtn = oDiv.getElementsByTagName("input"); var aDiv = oDi原创 2017-09-17 22:35:43 · 287 阅读 · 0 评论 -
JS——面向对象基础
概念只关注对象提供的功能，不关注内部细节。 JS的面向对象特点：抽象：捉住核心（获取需要的内容）封装：只考虑使用功能，不考虑原理继承：继承父类方法、属性，子类又有自己的特性 1）多重继承（多个父类） 2）多态 对象的组成方法/函数：方法：属于一个对象函数：自由的，不属于任何人 过程、动态的属性 / 变量：属性：属于一个对象变量：自由的，不属于任何人 状态、静态的 对原创 2017-09-17 16:52:07 · 219 阅读 · 0 评论 -
JS——Ajax
使用语法：ajax(url,funSu,funFa);参数说明：url：文件路径，绝对或相对都行。funSu：读取成功执行函数funFa：读取失败执行函数实例：请求并显示静态txt文件ajax("fileName.txt", function(str){ alert(str);},function(){ alert("失败")});字符集编码请求文件、JS、HTML编码要统一原创 2017-09-16 17:31:39 · 296 阅读 · 0 评论 -
JS收藏——cookie
概念页面用来保存信息。例如：自动登录、记住用户名特性同一个域名共享一套cookie。数量、大小有限（4k-10k）。有过期时间JS使用cookiedocument.cookie设置： 名字 = 值 添加expires = 时间 设置过期时间实例1：添加多个，也不会被后面的覆盖。document.cookie = "user = Tim Chen";document.cookie原创 2017-09-16 16:32:34 · 332 阅读 · 0 评论 -
JS——DOM表单
表单事件onsubmit 提交时发生onreset 重置时发生实例： <form id = "fom1" action = "#"> 用户名：<input type = "text" name = "user" /><br> 密码：<input type = "password" name = "pass" /> <input type = "submit">原创 2017-09-16 12:23:46 · 368 阅读 · 0 评论 -
JS——DOM表格
获取tBodies tbody(数组)tHead (元素)tFoot (元素)rows 行(数组)cells 例(数组)实例：<table id = "tb1"> <thead> <td>ID</td> <td>姓名</td> <td>年龄</td> </thead>原创 2017-09-16 02:25:20 · 361 阅读 · 0 评论 -
JS——计时器
超时调用在指定的时间后调用函数，代码串。 语法：setTimeout(代码, 时间) 创建clearTimeout() 删除时间以毫秒为单位。setTimeout( )一定要记得赋给一个变量，否则无法通过clearTimeout( ) 删除。实例：//代码串(不推荐)var sayHi = setTimeout("alert('Hello')", 2000);//函数se原创 2017-09-16 01:51:24 · 377 阅读 · 0 评论 -
JS总结——BOM
概念浏览器对象模型包含以下对象：window navigator screen history location windowwindow是浏览器的一个实例。 方法1. windows.alert显示带有一段消息和一个确认按钮的警告框 2. windows.confirm显示一个带有指定消息和ok以及取消按钮的对话框 返回值：点击“确定”，返回true；反之亦然。 3原创 2017-09-16 01:26:49 · 233 阅读 · 0 评论 -
JS收藏——DOMReady
浏览器渲染流程 我们编写的JS脚本，需要在浏览器把DOM树结构构建完成以后，才能被正确运行。 如果JS脚本加载完了，页面元素还未被加载成功，则会发生无法运行的处境。 检测方法 onload在页面的所有资源加载完成时，window对象上会触发一个onload事件。 但是，当资源过多过大时，onload会出现比较严重的延迟问题，严重影响用户体验。 DOMContentL原创 2017-09-15 17:28:02 · 232 阅读 · 0 评论 -
JS总结——DOM事件
事件流描述的是从页面中接受事件的顺序，分为 冒泡流、捕获流冒泡：即从事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。捕获：与冒泡相反。事件处理程序 DOM0级事件处理程序使用DOM0级事件处理程序，无法添加多个事件。 使用一共有2种方式：匿名函数函数名称赋名给事件实例：//通过匿名函数的形式var btn1=documen原创 2017-09-15 15:48:44 · 257 阅读 · 0 评论 -
JS总结——DOM节点
DOM节点 类型最常用的有三种，分别是元素节点、文本节点以及属性节点。元素节点：可以理解为HTML标签属性节点：可以理解为html标签里的属性文本节点：就是一对标签之间的内容。文档节点：其实就是document注意：还有一个叫做空白文本节点的东西！！！（IE9以下没这个问题，其余浏览器都有）如果在写html标签时，你使用了回车进行换行，它存在于上一个闭...原创 2017-09-15 10:56:43 · 238 阅读 · 0 评论 -
JS内置对象5：正则RegExp
定义字符串匹配工具。 风格JS风格，其实就是通过new关键字实例化一个正则对象； new RegExp("查询字符串","模式/规则")perl风格 /查询字符串/模式/规则 规则/模式i 忽略大小写g 找到全部匹配结果m 多行搜索（换行了，依然可以匹配到）量词元字符元字符，是拥有特殊含义的字符。. 除了换行符和结束符\w [a-zA-Z0-9_] 注意原创 2017-09-13 16:07:15 · 391 阅读 · 0 评论 -
JS内置对象4：Date
创建语法：new Date();返回值：不传参的情况下，返回当前日期时间对象。实例：var d=new Date();console.log(d);获取年月日时分秒、星期1.getFullyYear( ) 返回四位数的年份2.getMonth( ) 返回月份 0-113.getDate() 返回天数 4.getDay() 返回星期几 0-65.原创 2017-09-12 15:07:13 · 198 阅读 · 0 评论 -
JS内置对象3：Math
方法min( )max( )ceil( )floor( )round( )abs ( )random( ) 最大最小值 max( ) && min( )语法：Math.max(num1,num2,...numx)Math.min(num1,num2,...numx)返回值： Number只要出现一个非数字，就会返回NaN。实例：//求最大值console.log(Math.m原创 2017-09-12 14:30:08 · 209 阅读 · 0 评论 -
JS内置对象2——字符串
字符串索引相关方法charAt( )charCodeAt( )indexOf( )lastIndexOf(） charAt( ) && charCodeAt( )语法：stringObject.charAt(index)stringObject.charCodeAt(index)charAt: IE7+以上可以写成stringObj...原创 2017-09-12 11:40:46 · 238 阅读 · 0 评论 -
JS内置对象1：数组
JS中的内置对象ArrayStringMathDate Array每一项都可以保存任意类型的数据。数组的大小或者说长度，是可以动态调整的。 创建2种方法： 1. 使用Array构造函数 语法： new Array()（）内可以填写预设的**参数个数**，或者预设的**参数项名称**。<br>**实例：** var colors = new Array(原创 2017-09-11 19:45:05 · 307 阅读 · 0 评论 -
JS总结——函数
定义语法：function 函数名（[参数1,参数2 ... 参数n]）{ 语句}说明：[ ]里的内容不是必须的，是可选的。调用语法：函数名([参数1,参数2,...参数n])返回值 return函数会在执行完return语句后停止并立即退出。任何函数通过return语句，把函数内部的值返回出来。然后就可以通过API对向页面输出，或进行其他操作。return也可以不带任何返回值，原创 2017-09-10 22:55:14 · 219 阅读 · 0 评论 -
JS总结——语句
分支语句 if语句语法：if（条件）{ 语句1;}else if{ 语句2;}else{ 语句3;}实例：判断是否是符合条件的6位数字密码var password = prompt("请输入您要设置的密码");//判断长度if(password.length!=6){ alert("请输入六位的数字密码"); //判断类型是否是数字}else{原创 2017-09-10 21:00:18 · 235 阅读 · 0 评论 -
JS总结——运算符
操作符1. 算术操作符 + ：加 - ：减 * ：乘 / ：除 %：取余在使用以上操作符的时候，浏览器会尝试将本来不是number的数据进行转换。递增和递减1. 递增++a和a++ 区别：++a: 先是对a的值进行修改；再执行相关函数。也就是说， 执行时的a，已经不是a的原始值。a++: 先是执行相关函数，再对a值进行修改。 也就是说，执行时的a原创 2017-09-10 17:40:53 · 214 阅读 · 0 评论 -
JS总结——数据类型
数据类型一共有五种简单数据类型（基本数据类型）：Undefined Null Boolean Number String一种复杂数据类型：Object 检测数据类型typeof语法：typeof 变量 或 typeof（变量）返回值：字符串值可能是："string" / "number" / "boloean" / "object" / "undefined" / "fun原创 2017-09-09 23:46:27 · 245 阅读 · 0 评论