最近在学习js的表格排序，没想到看不起眼的表格排序实际上却暗含了众多JS知识点。在这里记录一下此次学习过程。希望对大家也有所帮助。完整的表格排序涉及了下列这些知识点：call方法使用sort方法深入数据绑定DOM映射下面详细的总结一下这些知识点，最后结合这些知识点实现下面这样一个表格排序案例。完整的案例源码：https://github.com/daweihe/JS...一、知识点总结1、call方法使用call方法的作用是改变方法中的this指向。call这...
一波福利~~js原生实现可移动的div提示框源码，免费提供研究！拿去吧~~关注PHP中文网给你更多好看哦~~代码：<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>PHP中文网--可拖动DIV提示窗口</title> <script language="javascript"> function alertWin(title, msg, w, h){ var titleheight = "22px"; // 提示窗口标题高度 var bordercolor = "#666699"; // 提...
效果图：代码：（demo33.jsp）<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><title>demo33.jsp</title> </head> <body> <label for="text">名称</label> <input type="text" id="text" name="name"/> <label for="file">文件</label> <input type="file" id="file" name="file"/> <button type="button" onclick="ajaxUploadFile()">确定</button> </body> <script type="text/javascript">fu...
主要方法：定时器的运用 setInterval(funnction(){},30);为了避免最后时刻速度即将停止时的误差,可以采用下面的方法：if（iSpeed<1）//速度足够小的时候，让速度直接为0，避免速度的波动{ iSpeed = 0; }绝对值的运用(主要运用于弹性运动等速度有正负的情况)：Math.abs(2.5)// 2弹性运动和摩擦力的组合：iSpeed+=(iTarget-obj.offsetLeft)/5; iSpeed*=0.7;模拟摩擦力：iSpeed*=0.95;//小数速度会越来越小减速运动：iSpeed--;加速运动...
传统方法的的缺陷传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的...
1、内高度、内宽度： 内边距 + 内容框clientWidth clientHeight2、外高度，外宽度： 边框 + 内边距 + 内容框offsetWidth offsetHeight3、上边框、左边框clientTop clientLeft4、元素的大小及其相对于视口的位置getBoundingClientRect() //x\y:元素的左上角和父元素左上角的距离 //width/height:边框 + 内边距 + 内容框 //top:元素的上边界和父元素上边界的距离 //left:元素的左边界和父元素左边界的距离 //right:元素的右边界和父元...
在做移动端开发的时候，必不可少的是轮播图，下面这篇文章主要给大家介绍了关于利用纯JS实现移动端web轮播图的相关资料，重要的是结合Tween算法造轮子，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。前言相信大家应该都知道，移动端的轮播图是我们比较常见的需求, 我们最快的实现方式往往是 使用第三方的代码, 例如 swiper , 但当遇到一些比较复杂的轮播图需求时, 往往是束手无策,不知道怎么改. ...
下面小编就为大家带来一篇JavaScript之事件委托实例(附原生js和jQuery代码)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧事件委托的原理依赖于事件冒泡，可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作。使用事件委托的优点1、操作子元素时不用一一遍历，可以根据事件触发的对象而进行相应操作dom结构如下：<ul id = "oUl"><li class = "item"></li><li class = "it...
在制作网页或移动端有时会用到一个效果，类似文章标题和文章描述的排列总是保持一样的行数，要么标题总是一行，多出的省略，要么标题内容1：3或2：2或3：1这样，今天练习这样的效果。实现的原理：给标题和内容分别加上行高，获取标题的高度除以自身的行高，得知标题的行数，再分配内容的行数即可。<style>*{padding: 0;margin: 0; font-family: Microsoft Yahei}.book{width: 320px;border: 1px solid #ccc;}.bookli{padding: 5px ...
1、原生JavaScript实现字符串长度截取function cutstr(str, len) {var temp;var icount = 0;var patrn = /[^\x00-\xff]/;var strre = "";for (var i = 0; i < str.length; i++) {if (icount < len - 1) {temp = str.substr(i, 1);if (patrn.exec(temp) == null) {icount = icount + 1} else {icount = icount + 2}strre += temp} else {break}}return strre + "..." }2、原生JavaScript获取域名主机function getHost(url) {var hos...
本文参考MDN做的详细整理，方便大家参考MDNMath 也是一个内置对象， 为数学常量和数学函数提供了属性和方法，而不是一个函数对象。与其它全局对象不同的是, Math 不是一个构造器. Math 的所有属性和方法都是静态的. 你用到的常数pi可以用 Math.PI 表示,用 x 作参数 Math.sin(x)调用sin函数. JavaScript中的常数, 是以全精度的实数定义的.属性：Math.E欧拉常数，也是自然对数的底数, 约等于 2.718.Math.LN22的自然对数, 约等于0.693...
<html><head><meta charset="UTF-8"><title>省市二级联动</title></head> <body onload="init()"> <select id="province" size=1 onchange="getCity()"> <option value= 0 >北京</option> <option value= 1 >上海</option> <option value= 2 >天津</option> <option value= 3 >重庆</option> <option value= 4 >河北</option> <option value= 5 >山西</option> <option value= 6 >内蒙古</option> <option value= 7 >辽宁</option>...
要使用jQuery，首先要在HTML代码最前面加上对jQuery库的引用，比如：<script language="javascript" src="/js/jquery.min.js"></script>库文件既可以放在本地，也可以直接使用知名公司的CDN，好处是这些大公司的CDN比较流行，用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了，所以能加快网站的打开速度。另外一个好处是显而易见的，节省了网站的流量带宽。jquery代码写法与原生js写法的区别如下所示：1. 定位元素 J...
这篇文章主要为大家详细介绍了原生JS发送异步数据请求的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下在做项目的时候，有时候需要用到异步数据请求，但是如果这个时候没有框架的依赖，就需要用到原生JS进行异步数据请求。这时候无非有两种请求方式，一种是AJAX，另一个是JSONP。通过原生JS对异步请求进行简单的封装。AJAX AJAX是一种数据请求方式，不需要刷新整个页面就能够更新局部页面的数据。AJAX的技术核心是...
下面为大家带来一篇原生js仿jquery一些常用方法，最近迷上了原生js，能不用jquery等框架的情况都会手写一些js方法，记得刚接触前端的时候为了选择器而使用jquery。。。现在利用扩展原型的方法实现一些jquery函数：1.显示/隐藏//hide() Object.prototype.hide = function(){ this.style.display="none"; return this; } //show() Object.prototype.show = function(){ this.style.display="block"; return this; }return this的...