首页

移动端、PC端 网页特效

前端达人

移动端网页特效

触屏事件

移动端浏览器兼容性较好,不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android 和 IOS 都有。

touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。

常见的触屏事件:
在这里插入图片描述
触摸事件对象(TouchEvent)

TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,等等

touchstart、touchmove、touchend 三个事件都会各自有事件对象。

触摸事件对象常见对象列表:
在这里插入图片描述
因为平时都是给元素注册触摸事件,所以重点记住 targetTocuhes

移动端拖动元素JS代码实现:

// (1) 触摸元素 touchstart:  获取手指初始坐标,同时获得盒子原来的位置 // (2) 移动手指 touchmove:  计算手指的滑动距离,并且移动盒子 // (3) 离开手指 touchend: var div = document.querySelector('div'); var startX = 0; //获取手指初始坐标 var startY = 0; var x = 0; //获得盒子原来的位置 var y = 0; div.addEventListener('touchstart', function(e) { //  获取手指初始坐标 startX = e.targetTouches[0].pageX; startY = e.targetTouches[0].pageY; x = this.offsetLeft; y = this.offsetTop; }); div.addEventListener('touchmove', function(e) { //  计算手指的移动距离: 手指移动之后的坐标减去手指初始的坐标 var moveX = e.targetTouches[0].pageX - startX; var moveY = e.targetTouches[0].pageY - startY; // 移动我们的盒子 盒子原来的位置 + 手指移动的距离 this.style.left = x + moveX + 'px'; this.style.top = y + moveY + 'px'; e.preventDefault(); // 阻止屏幕滚动的默认行为 }); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

classList属性

classList属性是HTML5新增的一个属性。返回元素的类名,该属性用在元素中添加、移除及切换CSS类

<style> .bg { background-color: black; } </style> <body> <div class="one two"></div> <button> 开关灯</button> <script> // classList 返回元素的类名 var div = document.querySelector('div'); // console.log(div.classList[1]); // 1. 添加类名  是在后面追加类名不会覆盖以前的类名 注意前面不需要加. div.classList.add('three'); // 2. 删除类名 div.classList.remove('one'); // 3. 切换类 var btn = document.querySelector('button'); btn.addEventListener('click', function() { document.body.classList.toggle('bg'); }) </script> </body> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

常用开发插件

移动端 要求的是快速开发,所以经常会借助于一些插件来帮完成操作

JS 插件是 js 文件,它遵循一定规范编写,方便程序展示效果,拥有特定功能且方便调用。如轮播图和瀑布流插件

插件的使用:

  1. 引入 js 插件文件
  2. 按照规定语法使用

特点: 它一般是为了解决某个问题而专门存在,其功能单一,并且比较小。比如移动端常见插件:iScroll、Swiper、SuperSlider

PC端网页特效

偏移量系列 offset

offset 翻译过来就是偏移量, 使用 offset 系列相关属性可以 动态 的得到该元素的位置(偏移)、大小等。

  • 获得元素距离带有定位父元素的位置
  • 获得元素自身的大小(宽度高度)
  • 注意: 返回的数值都不带单位

常用属性:
在这里插入图片描述
图示:
在这里插入图片描述

offset与style区别:

offset style
可以得到任意样式表中的样式值 只能得到行内样式表中的样式值
offset系列获得的数值是没有单位的 style.width 获得的是带有单位的字符串
offsetWidth 包含padding+border+width style.width 获得不包含padding和border 的值
offsetWidth 等属性是只读属性,只能获取不能赋值 style.width 是可读写属性,可以获取也可以赋值
获取元素大小位置,用offset更合适 元素更改值,则需要用style改变

案例——获取鼠标在盒子内的坐标:

效果展示:
在这里插入图片描述

实现代码(JS):

// 在盒子内点击, 想要得到鼠标距离盒子左右的距离。 // 首先得到鼠标在页面中的坐标( e.pageX, e.pageY) // 其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop) // 用鼠标距离页面的坐标减去盒子在页面中的距离, 得到 鼠标在盒子内的坐标 var box = document.querySelector('.box'); box.addEventListener('mousemove', function(e) { // console.log(e.pageX); // console.log(e.pageY); // console.log(box.offsetLeft); var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; this.innerHTML = 'x坐标是' + x + ' y坐标是' + y; }) 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

案例——模态拖拽框:

  • 点击弹出层, 会弹出模态框, 并且显示灰色半透明的遮挡层。
  • 点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层。
  • 鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动。
  • 鼠标松开,可以停止拖动模态框移动。

效果展示:
在这里插入图片描述

实现代码:

<head lang="en"> <meta charset="UTF-8"> <title></title> <style> .login-header { width: 100%; text-align: center; height: 30px; font-size: 24px; line-height: 30px; } ul,li,ol,dl,dt,dd,div,p,span,h1,h2,h3,h4,h5,h6,a { padding: 0px; margin: 0px; } .login { display: none; width: 512px; height: 280px; position: fixed; border: #ebebeb solid 1px; left: 50%; top: 50%; background: #ffffff; box-shadow: 0px 0px 20px #ddd; z-index: 9999; transform: translate(-50%, -50%); } .login-title { width: 100%; margin: 10px 0px 0px 0px; text-align: center; line-height: 40px; height: 40px; font-size: 18px; position: relative; cursor: move; } .login-input-content { margin-top: 20px; } .login-button { width: 50%; margin: 30px auto 0px auto; line-height: 40px; font-size: 14px; border: #ebebeb 1px solid; text-align: center; } .login-bg { display: none; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: rgba(0, 0, 0, .3); } a { text-decoration: none; color: #000000; } .login-button a { display: block; } .login-input input.list-input { float: left; line-height: 35px; height: 35px; width: 350px; border: #ebebeb 1px solid; text-indent: 5px; } .login-input { overflow: hidden; margin: 0px 0px 20px 0px; } .login-input label { float: left; width: 90px; padding-right: 10px; text-align: right; line-height: 35px; height: 35px; font-size: 14px; } .login-title span { position: absolute; font-size: 12px; right: -20px; top: -30px; background: #ffffff; border: #ebebeb solid 1px; width: 40px; height: 40px; border-radius: 20px; } </style> </head> <body> <div class="login-header"><a id="link" href="javascript:;">点击,弹出登录框</a></div> <div id="login" class="login"> <div id="title" class="login-title">登录会员 <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span> </div> <div class="login-input-content"> <div class="login-input"> <label>用户名:</label> <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input"> </div> <div class="login-input"> <label>登录密码:</label> <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input"> </div> </div> <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div> </div> <!-- 遮盖层 --> <div id="bg" class="login-bg"></div> <script> // 1. 获取元素 var login = document.querySelector('.login'); var mask = document.querySelector('.login-bg'); var link = document.querySelector('#link'); var closeBtn = document.querySelector('#closeBtn'); var title = document.querySelector('#title'); // 2. 点击弹出层这个链接 link  让mask 和login 显示出来 link.addEventListener('click', function() { mask.style.display = 'block'; login.style.display = 'block'; }) // 3. 点击 closeBtn 就隐藏 mask 和 login  closeBtn.addEventListener('click', function() { mask.style.display = 'none'; login.style.display = 'none'; }) // 4. 开始拖拽 // (1) 当我们鼠标按下, 就获得鼠标在盒子内的坐标 title.addEventListener('mousedown', function(e) { var x = e.pageX - login.offsetLeft; var y = e.pageY - login.offsetTop; // (2) 鼠标移动的时候,把鼠标在页面中的坐标,减去 鼠标在盒子内的坐标就是模态框的left和top值 document.addEventListener('mousemove', move) function move(e) { login.style.left = e.pageX - x + 'px'; login.style.top = e.pageY - y + 'px'; } // (3) 鼠标弹起,就让鼠标移动事件移除 document.addEventListener('mouseup', function() { document.removeEventListener('mousemove', move); }) }) </script> </body> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168

可视区系列 client

client 翻译过来就是客户端,使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

常用属性:
在这里插入图片描述
client和offset最大的区别就是 :不包含边框
图示:
在这里插入图片描述

滚动系列 scroll

scroll 翻译过来就是滚动的,使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

常用属性:
在这里插入图片描述
图示:
在这里插入图片描述

滚动条:

  • 如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。
  • 当滚动条向下滚动时,页面上面被隐藏掉的高度,称为页面被卷去的头部。
  • 滚动条在滚动时会触发 onscroll 事件。

案例——固定右侧侧边栏:

  • 原先侧边栏是绝对定位
  • 当页面滚动到一定位置,侧边栏改为固定定位
  • 页面继续滚动,会让 返回顶部显示出来

效果展示:
在这里插入图片描述

实现代码:

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .slider-bar { position: absolute; left: 50%; top: 300px; margin-left: 600px; width: 45px; height: 130px; background-color: pink; } .w { width: 1200px; margin: 10px auto; } .header { height: 150px; background-color: purple; } .banner { height: 250px; background-color: skyblue; } .main { height: 1000px; background-color: yellowgreen; } span { display: none; position: absolute; bottom: 0; } </style> </head> <body> <div class="slider-bar"> <span class="goBack">返回顶部</span> </div> <div class="header w">头部区域</div> <div class="banner w">banner区域</div> <div class="main w">主体部分</div> <script> //1. 获取元素 var sliderbar = document.querySelector('.slider-bar'); var banner = document.querySelector('.banner'); // banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面 var bannerTop = banner.offsetTop // 当侧边栏固定定位之后应该变化的数值 var sliderbarTop = sliderbar.offsetTop - bannerTop; // 获取main 主体元素 var main = document.querySelector('.main'); var goBack = document.querySelector('.goBack'); var mainTop = main.offsetTop; // 2. 页面滚动事件 scroll document.addEventListener('scroll', function() { // window.pageYOffset 页面被卷去的头部 // console.log(window.pageYOffset); // 3 .当页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位 if (window.pageYOffset >= bannerTop) { sliderbar.style.position = 'fixed'; sliderbar.style.top = sliderbarTop + 'px'; } else { sliderbar.style.position = 'absolute'; sliderbar.style.top = '300px'; } // 4. 当我们页面滚动到main盒子,就显示 goback模块 if (window.pageYOffset >= mainTop) { goBack.style.display = 'block'; } else { goBack.style.display = 'none'; } }) </script> </body> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84

三大系列作用区别:
在这里插入图片描述

它们主要用法:

系列 作用 属性
offset 用于获得元素位置 offsetLeft offsetTop
client 用于获取元素大小 clientWidth clientHeight
scroll 用于获取滚动距离 scrollTop scrollLeft

注意:页面滚动的距离通过 window.pageXOffset 获得

动画原理

核心原理:通过定时器 setInterval() 不断移动盒子位置

实现步骤:

  1. 获得盒子当前位置
  2. 让盒子在当前位置加上1个移动距离
  3. 利用定时器不断重复这个操作
  4. 加一个结束定时器的条件
  5. 注意此元素需要添加定位,才能使用 element.style.left

简单动画函数封装:

// 简单动画函数封装obj目标对象 target 目标位置 function animate(obj, target) { var timer = setInterval(function() { if (obj.offsetLeft >= target) { // 停止动画 本质是停止定时器 clearInterval(timer); } //每次均匀向右移动1px obj.style.left = obj.offsetLeft + 1 + 'px'; }, 30); } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

缓动效果原理:

缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来

  1. 让盒子每次移动的距离慢慢变小,速度就会慢慢落下来。
  2. 核心算法: (目标值 - 现在的位置 ) / 10 做为每次移动的距离步长
  3. 停止的条件是: 让当前盒子位置等于目标位置就停止定时器
  4. 注意步长值需要取整
// 缓动动画函数封装obj目标对象 target 目标位置 // 思路: // 1. 让盒子每次移动的距离慢慢变小, 速度就会慢慢落下来。 // 2. 核心算法:(目标值 - 现在的位置) / 10 做为每次移动的距离 步长 // 3. 停止的条件是: 让当前盒子位置等于目标位置就停止定时器 function animate(obj, target) { // 先清除以前的定时器,只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function() { // 步长值写到定时器的里面 var step = (target - obj.offsetLeft) / 10; if (obj.offsetLeft == target) { // 停止动画 本质是停止定时器 clearInterval(obj.timer); } // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式:(目标值 - 现在的位置) / 10 obj.style.left = obj.offsetLeft + step + 'px'; }, 15); } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

多个目标值之间移动:

当开始移动时候,判断步长是正值还是负值

  • 如果是正值,则步长 往大了取整
  • 如果是负值,则步长 向小了取整

动画函数封装到单独JS文件: animate.js

function animate(obj, target, callback) { // 先清除以前的定时器,只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function() { // 步长值写到定时器的里面 // 把步长值改为整数 不要出现小数的问题 // var step = Math.ceil((target - obj.offsetLeft) / 10); var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == target) { // 停止动画 本质是停止定时器 clearInterval(obj.timer); // 回调函数写到定时器结束里面 // if (callback) { //     // 调用函数 //     callback(); // } callback && callback(); } // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式:(目标值 - 现在的位置) / 10 obj.style.left = obj.offsetLeft + step + 'px'; }, 15); }

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

分享此文一切功德,皆悉回向给文章原作者及众读者.

转自:csdn 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

Echarts图表根据浏览器窗口缩放进行动态缩放,多个echarts同时缩放

前端达人


更改之前的效果图:

在这里插入图片描述
更改之前浏览器窗口放大缩小图表都不会进行动态的缩放,
更改之后的效果图:

在这里插入图片描述
更改之后图表就会根据浏览器窗口大小实时监听进行缩放
代码:

 topChart.setOption({ series: [ {name: '最大值',type: 'line',stack: '最大值',data: dataMax}, {name: '最小值',type: 'line',stack: '最小值',data: dataMin}, {name: '平均值',type: 'line',stack: '平均值',data: dataAvg}, ] }); window.addEventListener("resize",()=> {//监听浏览器窗口大小 topChart.resize(); }); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

如果有多个图表同时渲染,给个定时器就可以了,ss[0],ss[1],ss[2],ss[3]分别表示四个图表的class

var resizeTimer = null; window.addEventListener("resize", () => { if (resizeTimer) { clearTimeout(resizeTimer) } resizeTimer = setTimeout(function(){ ss[0].resize(); ss[1].resize(); ss[2].resize(); ss[3].resize(); }, 10); }); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

没了,结束了,是不是很简单呐,如有问题,欢迎留言。


























蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

分享此文一切功德,皆悉回向给文章原作者及众读者.

转自:csdn
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


JS 如何实现占位符

前端达人

占位符

–首先了解一下占位符的概念。占位符就是先占住一个固定的位置,等着你再往里面添加内容的符号,广泛用于计算机中各类文档的编辑。
–格式占位符(%)是在C/C++语言中格式输入函数,如 scanf、printf 等函数中使用。其意义就是起到格式占位的意思,表示在该位置有输入或者输出。
那么在JS中,如何实现占位符呢。

JS操作

首先可以说明在js中,是没有占位符这一个概念的,那我们怎么实现该功能,这个时候就可以自己定义一个方法,去实现该功能。

String.format = function() { //字符串中赋值变量 if (arguments.length == 0) return null; var str = arguments[0]; for ( var i = 1; i < arguments.length; i++) { var re = new RegExp('\\{' + (i - 1) + '\\}', 'gm'); str = str.replace(re, arguments[i]); } return str; }; //使用方法 const h = 1; const l = 2; var key = String.format("{0}-{1}",h,l); console.log(key); //key:"1-2" 
            
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17


























蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

分享此文一切功德,皆悉回向给文章原作者及众读者.

转自:csdn
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

node.js案例,写一个简单的get请求,请求有50%的概率,要求数据在一个json文件中

前端达人

  • 案例目标:实现GET的主要属性为req.method,并且生成随机数

  1. 使用nodejs,实现一个Ajax的get请求方式
  2. 将lib里的data.json文件请求获取出来
  3. data里面的数据为
    
                            
    1. {
    2. "success":[
    3. {
    4. "data": "你赢了",
    5. "message":"请求成功",
    6. "code": "200"
    7. }
    8. ],
    9. "fail":[
    10. {
    11. "data": "你输了",
    12. "message":"请求失败",
    13. "code": "200"
    14. }
    15. ]
    16. }
  •  案例准备

  •  案例代码

    
                            
    1. // 1.定义核心模块 http fs path
    2. const http = require('http')
    3. const fs = require('fs')
    4. const path = require('path')
    5. // 2.创建服务
    6. const server = http.createServer((req, res) => {
    7. // 2.1 如果url地址为/getList 执行代码
    8. // -req.method 为请求类型
    9. // 生成随机数,大于0.5为0,小于为1
    10. let render = Math.random() > 0.5 ? 0 : 1
    11. // console.log(render)
    12. // 2.2 拼接字符串,为读取数据传参
    13. // -__dirname为获取的目录地址
    14. // -lib为存放数据的名字,data.json为读取的文件
    15. const filepath = path.join(__dirname, 'lib', 'data.json')
    16. // -console.log('拼接的地址', filepath)
    17. if (render === 0 && req.url === '/getList' && req.method === 'GET') {
    18. // 2.3 读取data文件
    19. fs.readFile(filepath, 'utf8', (err, data) => {
    20. // - 打印错误信息
    21. if (err) {
    22. console.log('错误日志', err)
    23. return
    24. }
    25. // 读取的为json数据,设置请求头,如果不设置,则打印乱码信息
    26. res.setHeader('content-type', 'application/json;charset=utf8')
    27. // - 返回数据
    28. let jsonArr = JSON.parse(data)['success']
    29. let jsonStr = JSON.stringify(jsonArr)
    30. res.end(jsonStr)
    31. })
    32. } else if (render === 1 && req.url === '/getList' && req.method === 'GET') {
    33. fs.readFile(filepath, 'utf8', (err, data) => {
    34. // - 打印错误信息
    35. if (err) {
    36. console.log('错误日志', err)
    37. return
    38. }
    39. // 读取的为json数据,设置请求头,如果不设置,则打印乱码信息
    40. res.setHeader('content-type', 'application/json;charset=utf8')
    41. // - 返回数据
    42. let jsonArr = JSON.parse(data)['fail']
    43. let jsonStr = JSON.stringify(jsonArr)
    44. res.end(jsonStr)
    45. })
    46. }
    47. })
    48. // 3.启动服务
    49. // 8111为端口号,默认8000,尽量使用8开头,如果使用其他,咋不会正常运行,会报错
    50. server.listen(8111, () => {
    51. // 服务提示信息,运行代码后的提示
    52. console.log('端口1111已经开启')
    53. })











蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

分享此文一切功德,皆悉回向给文章原作者及众读者.

转自:csdn
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

JavaScript作用域和闭包

前端达人


前言

深入了解闭包和作用域链就需先了解函数预编译的过程


一、预编译

JavaScript:运行三部曲:
语法分析–预编译–解释执行
预编译:
发生在函数执行的前一刻。
函数声明整体提升,变量只声明提升。
1.函数预编译的过程:
1.创建AO对象Activation Object(执行期上下文,其作用就是我们理解的作用域,函数产生的执行空间库)
2.找形参和变量声明,将变量和形参名作为AO属性名,值为undefined
3.将实参值与形参统一
4.找到函数声明,将函数名作为属性名,值为函数体。
例:

function test (a, b){ console.log(a); c = 0; var c; a = 3; b = 2; console.log(b); function b (){}; function d (){}; console.log(b); } test(1); /*答案:1,2,2
答题过程:找形参和变量声明,将变量和形参名作为 AO 属性名,值为 undefined, AO{
 a : 1,
 b : undefined,
 c : undefined
}
函数声明 function b(){}和 function d(){},AO{
 a : 1,
 b : function b(){},
 c : undefined,
 d : function d(){}
}
执行 console.log(a);答案是 1
执行 c = 0;变 AO{
 a : 1,
 b : function b(){},
 c : 0,
 d : function d(){}
}
var c 不用管,因为 c 已经在 AO 里面了
执行 a = 3;改 AO{
 a : 3,
 b : function b(){},
 c : 0,
 d : function d(){}
}
执行 b = 2;改 AO{
 a : 3,
 b : 2,
 c : 0,
 d : function d(){}
}
执行 console.log(b);答案是 2
function b () {}和 function d(){}已经提过了,不用管
执行 console.log(b);答案是 2*/ 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47

2.全局预编译它和函数预编译步骤一样,但它创造的是GO(全局对象):
1.生成了一个 GO 的对象 Global Object(window 就是 GO
2.找变量声明…
3.找函数声明…

任何全局变量都是 window 上的属性
变量没有声明就赋值了,归 window 所有,就是在 GO 里面预编译。
例 :

function test(){ var a = b =123; console.log(window.b); } test(); 答案 a 是 undefined,b 是 123 先生成 GO{ b : 123 } 再有 AO{ a : undefined } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

想执行全局,先生成 GO,在执行 test 的前一刻生成 AO
函数里找变量,因为GO和AO有几层嵌套关系,近的优先,从近的到远的, AO里有就看 AO,AO 没有才看 GO。所以函数局部变量和全局变量同名,函数内只会用局部。

二、作用域精讲

作用域定义:变量(变量作用于又称上下文)和函数生效(能被访问)的区域
全局、局部变量
作用域的访问顺序:函数外面不能用函数里面的。里面的可以访问外面的,外面的不能访问里面的,彼此独立的区间不能相互访问。

1.[[scope]]: 每个 javascript 函数都是一个对象,对象中有些属性我们可以访问,但有些不可以,这些属性仅供 javascript 引擎存取,[[scope]]就是其中一个。[[scope]]指的就是我们所说的作用域,其中存储了运行期上下文的集合。

2.执行期上下文: 当函数在执行的前一刻,会创建一个称为执行期上下文的内部对象(AO)。
一个执行期上下文定义了一个函数执行时的环境,函数每次执行时对应的执行上下文都是独一无二的,所以多次调用一个函数会导致创建多个执行上下文,当函数执行完毕,执行上下文被销毁。

3.作用域链:[[scope]]中所存储的执行期上下文对象的集合(GO和AO),这个集合呈链式链接,我们把这种链式链接叫做作用域链。

4.查找变量: 在哪个函数里面查找变量,就从哪个函数作用域链的顶端依次向下查找(先查自己的AO,再查父级的AO,一直到最后的GO)。
函数类对象,我们能访问 test.name
test.[[scope]]隐式属性——作用域

作用域链图解:

function a (){ function b (){ var bb = 234; aa = 0; } var aa = 123; b(); console.log(aa) } var glob = 100; a(); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

0 是最顶端,1 是次顶端,查找顺序是从最顶端往下查
在这里插入图片描述
在全局预编译中函数a定义时,它的[[scope]]属性中有GO对象。
在这里插入图片描述
在函数a执行前先函数预编译,创建自己的AO对象,并存储在[[scope]]属性上,与之前存储的GO成链式。同时函数b被创建定义。
在这里插入图片描述
在b被创建时,它生成的[[scope]]属性直接存储了父级的[[scope]],它有了父级的AO和GO。
在这里插入图片描述
b函数执行前预编译,生成自己的AO,存储在[[scope]]属性中。

详解过程: 注意[[scope]]它是数组,存储的都是引用值。
b 中 a 的 AO 与 a 的 AO,就是同一个 AO,b 只是引用了 a 的 AO,GO 也都是同一个。
function b(){}执行完,干掉的是 b 自己的 AO(销毁执行期上下文)(去掉连接线),下次 function b 被执行时,产生的是新的 b 的 AO。b 执行完只会销毁自己的 AO,不会销毁 a 的 AO。会退回到b被定义时(仍有父级的AO和GO)。
function a(){}执行完,会把 a 自己的 AO 销毁【也会把 function b的[[scope]]也销毁】,只剩 GO(回归到 a 被定义的时候),等下次 function a再次被执行时,会产生一个全新的 AO,里面有一个新的 b 函数。。。。。。周而复始。

思考一个问题:如果 function a 不被执行,下面的 function b 和 function c 都是看不到的(也不会被执行,被折叠)。只有 function a 被执行,才能执行 function a 里面的内容a();不执行,根本看不到 function a (){}里面的内容,但我们想在a函数外面调用b函数怎么办呢,于是闭包出现了。

三、闭包

闭包的定义

当内部函数被保存到外部时,将会生成闭包。但凡是内部的函数被保存到外部,一定生成闭包。
闭包的问题:闭包会导致原有作用域链不释放,作用域中的局部变量一直被使用着,导致该作用域释放不掉,造成内存泄露(就是占有过多内存,导致内存越来越少,就像泄露了一样)
例:

function a(){ function b(){ var b=456; console.log(a); console.log(b); } var a=123; return b; } var glob = a(); glob(); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

答案 123,456。
function a(){ }是在 return b 之后才执行完,才销毁。而return b 把 b(包括 a 的 AO)保存到外部了(放在全局)当 a 执行完砍掉自己的 AO 时(砍掉对AO存储地址的指针),因为b还保存着对a的AO的引用,所以内存清除机制不会清除掉a的AO, b 依然可以访问到 a 的 AO。

闭包的作用:

1.实现共有变量

function test(){ var num=100; function a(){ num++; } function b(){ num--; } return [a,b]; } var myArr=test(); myArr[0](); myArr[1](); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

答案 101 和 100。
思考过程:说明两个用的是一个 AO。
myArr[0]是数组第一位的意思,即 a,myArr0;就是执行函数 a 的意思;
myArr[1]是数组第二位的意思,即 b,myArr1; 就是执行函数 b 的意思。
test doing test[[scope]] 0:testAO
1:GO
a defined a.[[scope]] 0 : testAO
1 : GO
b defined b.[[scope]] 0 : testAO
1 : GO
return[a, b]将 a 和 b 同时被定义的状态被保存出来了
当执行 myArr0;时
a doing a.[[scope]] 0 : aAO
1 : testAO
2 : GO
当执行 myArr1;时
b doing b.[[scope]] 0 : bAO
1 : a 运行后的 testAO
2 : GO
a 运行后的 testAO, 与 a doing 里面的 testAO 一模一样
a 和 b 连线的都是 test 环境,对应的一个闭包

2.可以做缓存(存储结构)

function eater(){ var food=""; var obj={ eat : function (myFood){ console.log("i am eating"+food); food =""; }, push : function (myFood){ food = myFood; } } return obj; } var eater1 = eater(); eater1.push("banana"); eater1.eat(); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

答案 i am eating banana,eat 和 push 操作的是同一个 food
在 function eater(){里面的 food}就相当于一个隐式存储的机构
obj 对象里面是可以有 function 方法的,也可以有属性,方法就是函数的表现形式

3.可以实现封装,属性私有化
只能调用函数方法,不能修改函数的属性。

4.模块化开发,防止污染全局变量


























蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

分享此文一切功德,皆悉回向给文章原作者及众读者.

转自:csdn
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

如何限制datatable列宽--(收缩内容)

前端达人

实现功能:dataTable某列内容过长的话,只显示部分内容,鼠标点击显示全部,再点击显示部分。可以切换。

效果图:

鼠标点击:

如果再次点击,备注内容又收缩了。

JS实现代码如下:

var remarkShowLength = 10;//默认现实的字符串长度

datatable中的配置:

首先在 columnDefs 中显示文本的时候,如果超长,就只显示部分。

然后通过 createdRow ,如果备注信息超长的话,给该td元素添加上onclick时间,鼠标点击的时候,可以进行切换。并且将全部的字符信息 data.remarks 放置到属性中去,以便后面可以取出来。


  1. "createdRow": function( row, data, dataIndex ) {
  2. if(data.remarks.length > remarkShowLength){//只有超长,才有td点击事件
  3. $(row).children('td').eq(7).attr('onclick','javascript:changeShowRemarks(this);');
  4. }
  5. $(row).children('td').eq(7).attr('content',data.remarks);
  6. },
  7. "ajax" : {
  8. "url" : "/cluster/list?importantLevel=" + $('#searchImportantLevelSelect').val()
  9. },
  10. "columnDefs" : [
  11. {
  12. "type": "date",
  13. "targets": 7,
  14. "render": function (data, type, full, meta) {
  15. if (full.remarks.length > remarkShowLength) {
 return getPartialRemarksHtml(full.remarks);//显示部分信息
 } else {

 return full.remarks;//显示原始全部信息 }

 }
}
]

下面从td的属性中取出全部的remark,然后根据当前是显示的全部还是显示的部分信息,进行切换。


  1. //切换显示备注信息,显示部分或者全部
  2. function changeShowRemarks(obj){//obj是td
  3. var content = $(obj).attr("content");
  4. if(content != null && content != ''){
  5. if($(obj).attr("isDetail") == 'true'){//当前显示的是详细备注,切换到显示部分
  6. //$(obj).removeAttr('isDetail');//remove也可以
  7. $(obj).attr('isDetail',false);
  8. $(obj).html(getPartialRemarksHtml(content));
  9. }else{//当前显示的是部分备注信息,切换到显示全部
  10. $(obj).attr('isDetail',true);
  11. $(obj).html(getTotalRemarksHtml(content));
  12. }
  13. }
  14. }

 


  1. //部分备注信息
  2. function getPartialRemarksHtml(remarks){
  3. return remarks.substr(0,remarkShowLength) + '&nbsp;&nbsp;<a href="javascript:void(0);" ><b>...</b></a>';
  4. }
  5. //全部备注信息
  6. function getTotalRemarksHtml(remarks){
  7. return remarks + '&nbsp;&nbsp;<a href="javascript:void(0);" >收起</a>';
  8. }

原文链接:https://blog.csdn.net/zz_chst/article/details/79587936?utm_source=blogxgwz5

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:csdn

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

table中td超出内容隐藏,鼠标悬停全部显示(完整版,含js代码)

前端达人

一、CSS语法:
text-overflow:clip | ellipsis
默认值:clip
适用于:所有元素
clip: 当对象内文本溢出时不显示省略标记(...),而是将溢出的部分裁切掉。
ellipsis: 当对象内文本溢出时显示省略标记(...)。
在使用的时候,有时候发现不会出现省略标记效果,经过测试发现,使用ellipsis的时候,必须配合overflow:hidden; white-space:nowrap; width:50%;这三个样式共同使用才会有效果
 
实例:
复制代码
table { width: 100%; float: left; table-layout:fixed; width:500px; border:1px solid #ccc;
        } table tr { line-height: 25px; border:1px solid #ccc;
            } table td { border:1px solid #ccc; text-align:center;
            } .MHover{ border:1px solid #ccc; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
            }
复制代码
二、HTML代码
复制代码
<table> <tr> <th>姓名</th> <th>个性签名</th> <th>性别</th> </tr> <tr> <td>张国荣</td> <td> <div class="MHover">我就是我,是颜色不一样的烟火!</div> <div class="MALL">我就是我,是颜色不一样的烟火!</div> </td> <td></td> </tr> </table>
复制代码
注:class="MHover"为表格里显示的内容,内容长度超多指定宽度时隐藏多余字段,并在后面加...
class="MALL"为鼠标悬停显示的内容。
三、js代码
复制代码
$(document).ready(function () {
            $(".MALL").hide();
            $(".MHover").mouseover(function (e) {
                $(this).next(".MALL").css({"position":"absolute","top":e.pageY+5,"left":e.pageX+5}).show();
            });
            $(".MHover").mousemove(function (e) {
                $(this).next(".MALL").css({ "color": "fff", "position": "absolute", "opacity": "0.7", "background-color": "666", "top": e.pageY + 5, "left": e.pageX + 5 });
            });
            $(".MHover").mouseout(function () {
                $(this).next(".MALL").hide();
            });
        });
复制代码
注:class="MHover"为表格里显示的内容,内容长度超多指定宽度时隐藏多余字段,并在后面加...
class="MALL"为鼠标悬停显示的内容。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:博客园

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

 


DataTables固定表格宽度(设置横向滚动条)

前端达人

当表格的列比较多的时候,可能就需要固定表格的宽度了,默认的100%宽已经不适应了。默认的100%宽要实现改变窗口大小也100%的话,在table元素上添加width="100%",至于css的100%为什么不生效,原因未知。下面就说说设置如何给datatables设置固定的宽度。

1.html代码

复制代码
<div id="tableArea"> <table id="userTable" class="display table table-bordered" cellspacing="0" > <thead> <tr> <th style="display: none">ck</th> <th>序号</th> <th>账号</th> <th>姓名</th> <th>CPID</th> <th>CP名称</th> <th>操作</th> </tr> </thead> </table> </div>
复制代码

 

2.覆盖某些样式(我们的样式优先级高,所以会覆盖内置的样式)

复制代码
#tableArea .dataTables_wrapper { position: relative; clear: both; zoom: 1; overflow-x: auto;
} #tableArea table{ width: 800px;
}
复制代码

这里的overflow-x:auto是新增的,表示表格内容超出宽度后,出现横向滚动条;table的width必须写死宽度,直接写在table元素上不生效,原因未知。

 

3.设置列宽(可略)

"columns": [
    { "data": "number", "orderable": false ,"width":"100px","searchable": false}
]

 

4.运行浏览,发现此时,当浏览器窗口小于800像素的时候,表格出现了横向的滚动条,正是我们想要的结果。

 

5.为什么不用"scrollX":true的配置实现横向滚动条呢?查询它渲染后的网页发现,它把table拆分成了两个表格,一个表示表头,一个表示表体。这不是我想要的,而且它表头的内容若是超出的话是隐藏的。

 

6.还有两个样式,可以参考参考,可能对你有用。

table td{

word-break:break-all;

}

单词也可以允许换行,这对于单元格的宽度有很好的控制,而不会让单元格被内容撑开!

 

table
{
        table-layout:fixed;
}

表格布局算法为固定(列宽由表格宽度和列宽度设定)。




蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:博客园

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

jquery取点击位置是table中的第几行第几列

前端达人

$('table tr td').click(
  function()
  {
   alert( $(this).parent().parent().find("tr").index($(this).parent()[0]));//第几行
   alert($(this).index());//第几列
  }
);

 

 

 

$('table tr td').click(
  function()
  {
   var i = $(this).parent().parent().find("tr").index($(this).parent()[0]);//第几行
   alert($("table:eq(0) tr:eq("+i+") td:eq(0)").text());//取点击行第一列的值
  }
);

分类: JavaScript


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:博客园

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

jquery、js获取table,遍历输出tr中各个td的内容。

前端达人

首先,依赖jquery..

复制代码
1 $('#btntb').click(function(){ 2 $('#tab tr').each(function(i){ // 遍历 tr 3 $(this).children('td').each(function(j){ // 遍历 tr 的各个 td 4 alert("第"+(i+1)+"行,第"+(j+1)+"个td的值:"+$(this).text()+"。"); 5  }); 6  }); 7 });
复制代码

js的方法

复制代码
var tb = document.getElementById('tab'); // table 的 id var rows = tb.rows; // 获取表格所有行 for(var i = 0; i<rows.length; i++ ){ for(var j = 0; j<rows[i].cells.length; j++ ){ // 遍历该行的 td alert("第"+(i+1)+"行,第"+(j+1)+"个td的值:"+rows[i].cells[j].innerHTML+"。"); // 输出每个td的内容  }
}
复制代码

Html代码

复制代码
<div align="center"> <table id="tab" border="1" align="center"> <tr> <td>西瓜</td> <td></td> </tr> <tr> <td>芒果</td> <td>桔子</td> </tr> <tr> <td>奇异果</td> <td>葡萄</td> <td>西柚</td> </tr> </table> <br> <button id="btntb">遍历table</button> </div>
复制代码

 

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:博客园

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档