js（全称“JavaScript”）是一种具有函数优先的轻量级、解释型或即时编译型的高级编程语言。JavaScript已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。js简介（推荐学习：js教程）JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。特点：JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。是一种解释性脚本语言（代码不进行预编译）。主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。可以实现web页面的人机交互。用途：嵌入动态文本于HTML页面。对浏览器事件做出响应。读写HTML元素。在数据被提交到服务器之前验证数据。检测访客的浏览器信息。控制cookies，包括创建和修改等。基于Node.js技术进行服务器端编程。以上就是js是什么的详细内容

1、扫码枪相当于键盘输入设备，输入一连串数字后加一个enter键。但在实际开发中需要区分是扫描枪输入还是键盘用户输入，区别在于扫码枪输入很快。let code = '';  let lastTime, nextTime;  let lastCode, nextCode;  window.document.onkeypress = (e) => {   if (window.event) { // IE    nextCode = e.keyCode;   } else if (e.which) { // Netscape/Firefox/Opera    nextCode = e.which;   }   if (nextCode === 13) {    if (code.length < 3) return; // 手动输入的时间不会让code的长度大于2，所以这里只会对扫码枪有     console.log(code); // 获取到扫码枪输入的内容，做别的操作     code = '';    lastCode = '';    lastTime = '';    return;   }   nextTime = new Date().getTime();   if (!lastTime && !lastCode) {    code += e.key;   }    if (lastCode && lastTime && nextTime - lastTime > 30) { // 当扫码前有keypress事件时,防止首字缺失    code = e.key;   } else if (lastCode && lastTime) {    code += e.key;   }   lastCode = nextCode;   lastTime = nextTime;  }PS：下面看下js获取USB扫码枪数据的代码前言找了很多相关的教程不太好用，汲取各家之长总结精简了一下原理扫码枪扫描到的条形码每一位会触发一次onkeydown事件比如扫描条码位‘1234567890'的条形码，会连续执行10次onkeydown事件条码扫描到最后一位，会直接触发Enter需要引入jQuery，我这里用的是vuewindow.onload = (e)=> {  document.onkeydown = (e)=> {    let nextCode,nextTime = '';    let lastTime = this.lastTime;    let code = this.code;    if (window.event) {// IE      nextCode = e.keyCode    } else if (e.which) {// Netscape/Firefox/Opera      nextCode = e.which    }    nextTime = new Date().getTime();    //字母上方 数字键0-9 对应键码值 48-57; 数字键盘 数字键0-9 对应键码值 96-105    if((nextCode>=48&&nextCode<=57) || (nextCode>=96&&nextCode<=105)){        let codes = {'48':48,'49':49,'50':50,'51':51,'52':52,'53':53,'54':54,'55':55,'56':56,'57':57,             '96':48,'97':49,'98':50,'99':51,'100':52,'101':53,'102':54,'103':55,'104':56,'105':57            };            nextCode = codes[nextCode];            nextTime = new Date().getTime();    }    // 第二次输入延迟两秒，删除之前的数据重新计算    if(nextTime && lastTime && nextTime-lastTime>2000){            code = String.fromCharCode(nextCode);    }else{        code += String.fromCharCode(nextCode)    }    // 保存数据    this.nextCode = nextCode;    this.lastTime = nextTime;    this.code = code;    // 键入Enter    if(e.which == 13) {      // 判断 code 长度（这里就获取到条码值了，以下业务自由发挥）        code = $.trim(code)      if (code.length == 13) {        this.$message('A类条码:' + code);      } else if (code.length == 23) {                this.$message('B类条码:' + code);      } else if (code.length == 0) {                this.$message('请输入条码');      } else{        this.$message('条码不合法：' + code);      }      //键入回车务必清空code值        this.code = ''        return false;    }  }}

js、jQuery面试题整理1.数据类型基本类型：除Object、String、Number、boolean、null、undefined。引用类型：object。里面包含的 function、Array、Date。2.数组方法join()：数组转为字符串，可带中间符号push()：数组尾部添加内容，返回新长度pop()：数组尾部删除一条内容，返回长度unshift()：数组头部添加内容，返回新长度shift()：数组头部删除一条内容，返回删除内容sort()：数组内容从大到小排序reverse()：反转数组内容项concat()：拼接数组，若无内容复制数组内容slice()：截取数组，从指定下标开始splice()：删除、插入、替换；删除：2 个参数：要删除的第一项的位置和要删除的项数。插入：3 个参数：起始位置、 0（要删除的项数）和要插入的项。替换：3 个参数：起始位置、要删除的项数和要插入的任意数量的项。3.字符串方法charAt()：根据下标找到对应值charCodeAt()：通过下标值找到对应字符Unicode编码indexOf()：通过字符查找对应下标（首次出现）lastIndexOf()：通过字符找最后一次出现的下标值slice()：截取字符串，2个参数，（起始位置，结束位置）split()：把字符串按分隔符分割成数组substring()：截取字符串，（起始位置，结束位置）substr()：截取指定位置和长度的字符串，（起始位置，长度）toLowerCase()：字符串转为小写toUpperCase()：字符串转成大写trim()：去掉字符串前后所有空格4.阻止冒泡，阻止默认事件阻止冒泡：e.stopPropagatione.cancleBubble=true（IE）return false；阻止默认事件：e.preventDefault();e.returnValue=false;（IE）return false;5.函数作用域函数作用域是指在函数内声明的所有变量在函数体内始终是可见的，可以在整个函数的范围内使用及复用.全局变量：声明在函数外部的变量，在代码中任何地方都能访问到的对象拥有全局作用域（所有没有var直接赋值的变量都属于全局变量）局部变量：声明在函数内部的变量，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所有在一些地方也会看到有人把这种作用域称为函数作用域。6.闭包外部函数访问内部函数，能够读取其他函数内部变量的函数。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。7.原型链每个对象都有一个原型_proto_，这个原型还可以有它自己的原型，以此类推，形成一个原型链。prototype属性，函数的原型对象，它是函数所独有的，它是从一个函数指向一个对象。__proto__是指向构造函数的原型对象，它是对象独有的。8.继承的几种方式构造函数继承：在Child里面,把Parent的this指向改为是Child的this指向,从而实现继承缺点:只能解决属性的继承,使用属性的值不重复,但是父级类别的方法不能继承原型链继承：把Child的原型改为是Parent的实例,从而实现继承缺点:因为Child的原型对象都是New Parent,所以实例化出来的对象的属性都是一样的,而且Parent上面的引用类型只要有一个实例对象修改了,其他也会跟着修改.因为他们原型对象都是共用的组合方式继承（组合前两种）：缺点:父类的原型对象调用了两次,没有必要,而且student实例的构造函数是来自于Person还有两种组合式继承优化9.函数创建的方式函数声明：function Fn(){}字面量/函数表达式：var m = function(){}构造函数：var sum =new Function(“n1”,”n2”,”return n1+n2”)10.如何解决异步回调地狱promise、generator、async/awaitpromiselet getStuPromise = new Promise((resolve,reject)=>{    getStu(function(res){        resolve(res.data);    });});getStuPromise.then((data)=>{    // 得到每个学生的课程    getCourse();    // 还可以继续返回promise 对象})generatorfunction *generatorGetStu(){    let stus = yield getStu();    // 等到getStu异步执行完才会执行getCourse    let course = yield getCourse();}async/awaitasync函数是Generator函数的语法糖。使用 关键字async来表示，在函数内部使用await来表示异步11.事件委托理解通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件.原理: 利用冒泡的原理，把事件加到父级上，触发执行效果。target 事件属性可返回事件的目标节点（触发 该事件的节点）oUl.onmouseover = function(ev){    var ev = ev || window.event;    var target = ev.target || ev.srcElement;    if(target.nodeeName.toLowerCase() == "li"){        target.style.background = "red";    }}12.图片的懒加载和预加载预加载：常用的是new Image();，设置其src来实现预载，再使用onload方法回调预载完成事件。function loadImage(url, callback){    var img = new Image(); //创建一个Image对象，实现图片预下载    img.src = url;    if (img.complete){         // 如果图片已经存在于浏览器缓存，直接调用回调函数        callback.call(img);        return; // 直接返回，不用再处理onload事件    }    img.onload = function (){     //图片下载完毕时异步调用callback函数。    callback.call(img);//将回调函数的this替换为Image对象 ，如果你直接用img.width的时候，图片还没有完全下载下来    };}懒加载：主要目的是作为服务器前端的优化，缓解服务器前端压力，一次性请求次数减少或延迟请求。实现方式：1.第一种是纯粹的延迟加载，使用setTimeOut、setInterval进行加载延迟.2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。3.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。13.bind,apply,call的区别都可以改变函数内部this指向区别：callcall传递参数aru1， aru2… 形式apply传递参数必须数组形式[arg]bind不会调用函数，可以改变函数内部this指向主要应用场景：1、call经常做继承。2、apply经常跟数组有关系。比如借助于数学对象实现数组最大值最小值。3、bind不会调用函数，可以改变函数内部this指向。14.js的节流和防抖防抖：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始延时。也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于既定时间，那么防抖的情况下只会执行一次。节流：当持续触发事件时，保证在一定时间内只调用一次事件处理函数，意思就是说，假设一个用户一直触发这个函数，且每次触发小于既定值，函数节流会每隔这个时间调用一次。时间戳和定时器区别：防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行。15.前端模块化和组件化模块化：可复用，侧重的功能的封装，主要是针对Javascript代码，隔离、组织复制的javascript代码，将它封装成一个个具有特定功能的的模块。组件化：可复用，更多关注的UI部分，页面的每个部件，比如头部，弹出框甚至确认按钮都可以成为一个组件，每个组件有独立的HTML、css、js代码。16.js单线程怎么执行异步操作Js作为浏览器脚本语言，它的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。js怎么异步：浏览器只分配给js一个主线程，用来执行任务（函数），但一次只能执行一个任务，这些任务形成一个任务队列排队等候执行，但前端的某些任务是非常耗时的，比如网络请求，定时器和事件监听，如果让他们和别的任务一样，执行效率会非常的低，甚至导致页面的假死。所以，浏览器为这些耗时任务开辟了另外的线程，主要包括http请求线程，浏览器定时触发器，浏览器事件触发线程，这些任务是异步的。这些异步任务完成后通过回调函数让主线程知道。17.手写promise函数三种状态：pending（过渡）fulfilled（完成）rejected（失败）function Promise(exector){    let _this = this;    //status表示一种状态    let status = “pending”;    let value = undefined;    let reason = undefined;    //成功    function resolve(value){        if(status == “pending”){            _this.value = value;            _this.status = “resolve”;        }    }    //执行失败    function reject(value){        if(status == “pending”){            _this.value = value;            _this.status = “reject”     }    }    //异步操作    try{        exector(resolve,reject)    }catch(e){        reject(e)    }    //测试then    Promise.prototype.then = function(reject,resolve){        let _this = this;        if(this.status == “resolve”){            reject(_this.value)        }        if(this.status == “reject”){            resolve(_this.reason)        }    }}//new Promise测试let promise = new Promise((reject,resolve)=>{    resolve(“return resolve”);});promise.then(data=>{    console.log(`success${data}`);},err=>{    console.log(`err${data}`);})18.数组去重1.遍历并两个对比，splice删除重复的第二个function unique(arr){                    for(var i=0; i<arr.length; i++){            for(var j=i+1; j<arr.length; j++){                if(arr[i]==arr[j]){         //第一个等同于第二个，splice方法删除第二个                    arr.splice(j,1);                    j--;                }            }        }return arr;}2.indexOffunction unique(arr) {    var array = [];    for (var i = 0; i < arr.length; i++) {        if (array .indexOf(arr[i]) === -1) {            array .push(arr[i])        }    }    return array;}3.sortfunction unique(arr) {    arr = arr.sort()    var arrry= [arr[0]];    for (var i = 1; i < arr.length; i++) {        if (arr[i] !== arr[i-1]) {            arrry.push(arr[i]);        }    }    return arrry;}4.includes （ES6）function unique(arr) {    var array =[];    for(var i = 0; i < arr.length; i++) {            if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值                    array.push(arr[i]);              }    }    return array}19.数组排序冒泡排序：var arr=[1,5,7,9,16,2,4];//冒泡排序,每一趟找出最大的,总共比较次数为arr.length-1次,每次的比较次数为arr.length-1次，依次递减var temp;for(var i=0;i<arr.length-1;i++){    for(var j=0;j<arr.length-1;j++){        if(arr[j]>arr[j+1]){            temp=arr[j];            arr[j]=arr[j+1];            arr[j+1]=temp;        }    }}选择排序：（相邻对比）var arr=[1,23,5,8,11,78,45];var temp;for(var i=0;i<arr.length-1;i++){    for(var j=i+1;j<arr.length;j++){        if(arr[i]>arr[j]){            temp=arr[i];            arr[i]=arr[j];            arr[j]=temp;        }    }}sort()：var arr=[1,5,7,9,16,2,4];arr.sort(function(a,b){    return b-a;  //降序排列，return a-b; —>升序排列})      //括号里不写回调函数，则默认按照字母逐位升序排列，结果为[1,16,2,4,5,7,9]20.去除首尾空格JavaScript 本身并不提供 trim() 方法，不过可以用正则表达式（其中一种）if(typeof(String.prototype.trim) === "undefined"){    String.prototype.trim = function()     {        return String(this).replace(/^\s+|\s+$/g, '');    };} if(" dog  ".trim() === "dog") {    document.write("去除首尾空格成功");    }21.解决跨域方案jsonp：包含回调函数和数据//1、使用JS动态生成script标签，进行跨域操作function handleResponse(response){    console.log('The responsed data is: '+response.data);    //处理获得的Json数据}var script = document.createElement('script');script.src = 'http://www.example.com/data/?callback=handleResponse';document.body.insertBefore(script, document.body.firstChild);//2、手动生成script标签function handleResponse(response){    console.log('The responsed data is: '+response.data);    //处理获得的Json数据}<script src="http://www.example.com/data/?callback=handleResponse"></script>//3、使用jQuery进行jsonp操作//jquery会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁//$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。<script>    $.getJson('http://www.example.com/data/?callback=?',function(jsondata){    //处理获得的Json数据});</script>window.name + iframelocation.hash+iframewindow.postMessage（HTML5中的XMLHttpRequest Level 2中的API）通过document.domain+iframe来跨子域(只有在主域相同的时候才能使用该方法)使用跨域资源共享（CORS）来跨域使用Web sockets来跨域使用flash URLLoader来跨域22.手写ajaxajax的技术核心是 XMLHttpRequest 对象；ajax 请求过程：创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据；（理解）<script type="text/javascript">//通过createXHR()函数创建一个XHR对象：function createXHR() {    if (window.XMLHttpRequest) {    //IE7+、Firefox、Opera、Chrome 和Safari         return new XMLHttpRequest();    } else if (window.ActiveXObject) {   //IE6 及以下        var versions = ['MSXML2.XMLHttp','Microsoft.XMLHTTP'];        for (var i = 0,len = versions.length; i<len; i++) {            try {                return new ActiveXObject(version[i]);                break;            } catch (e) {                //跳过            }          }    } else {        throw new Error('浏览器不支持XHR对象！');    }}//封装ajax，参数为一个对象function ajax(obj) {    var xhr = createXHR();  //创建XHR对象    //通过使用JS随机字符串解决IE浏览器第二次默认获取缓存的问题    obj.url = obj.url + '?rand=' + Math.random();    obj.data = params(obj.data);  //通过params()将名值对转换成字符串    //若是GET请求，则将数据加到url后面    if (obj.method === 'get') {        obj.url += obj.url.indexOf('?') == -1 ? '?' + obj.data : '&' + obj.data;    }    if (obj.async === true) {   //true表示异步，false表示同步        //使用异步调用的时候，需要触发readystatechange 事件        xhr.onreadystatechange = function () {            if (xhr.readyState == 4) {   //判断对象的状态是否交互完成                callback();      //回调            }        };    }    //在使用XHR对象时，必须先调用open()方法，    //它接受三个参数：请求类型(get、post)、请求的URL和表示是否异步。    xhr.open(obj.method, obj.url, obj.async);    if (obj.method === 'post') {        //post方式需要自己设置http的请求头，来模仿表单提交。        //放在open方法之后，send方法之前。        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');        xhr.send(obj.data);     //post方式将数据放在send()方法里    } else {        xhr.send(null);     //get方式则填null    }    if (obj.async === false) {  //同步        callback();    }    function callback() {        if (xhr.status == 200) {  //判断http的交互是否成功，200表示成功            obj.success(xhr.responseText);          //回调传递参数        } else {            alert('获取数据错误！错误代号：' + xhr.status + '，错误信息：' + xhr.statusText);        }      }}//名值对转换为字符串function params(data) {    var arr = [];    for (var i in data) {        //特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理        arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));    }    return arr.join('&');}</script>实例：ajax({    method : 'het/post',    url : '...',    data : {    },    success : function (res) {    },    error : function(err){    },    async : true});23.ES6简述，具体请参考https://blog.csdn.net/Juliet_xmj/article/details/103940173字符串扩展解构表达式函数优化函数参数默认值箭头函数对象的函数属性简写箭头函数结合解构表达式map：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。reduce：接收一个函数（必须）和一个初始值（可选），该函数接收两个参数：（上一次reduce处理的结果，数组中要处理的下一个元素）promiseconst promise = new Promise(function(resolve, reject) {  // ... 执行异步操作  if (/* 异步操作成功 */){    resolve(value);// 调用resolve，代表Promise将返回成功的结果  } else {    reject(error);// 调用reject，代表Promise会返回失败结果  }});promise.then(function(value){    // 异步执行成功后的回调}).catch(function(error){    // 异步执行失败后的回调    })set：本质与数组类似。不同在于Set中只能保存不同元素，如果元素相同会被忽略。map：本质是与Object类似的结构。不同在于，Object强制规定key只能是字符串。而 Map结构的key可以是任意对象。模块化：把代码进行拆分，方便重复利用对象扩展数组扩展24.BOM，DOMBOM:指的是浏览器对象模型，它使JavaScript有能力与浏览器进行“对话”DOM:是指文档对象模型，通过它，可以范文HTLM文档的所有元素window对象：是客户端JavaScript最高层对象之一，由于window对象是其他大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的应用。25.jQuery选择器元素选择器：$("p.intro")选取所有 class=“intro” 的<p>元素。属性选择器：$("[href='#']")选取所有带有 href 值等于 “#” 的元素。css选择器：$("p").css("background-color","red");26.隐式迭代遍历内部DOM元素（伪数组形式存储）的过程，给匹配到的所有元素进行循环遍历，执行相应的方法，而不需要我们自己进行循环遍历<ul>    <li>web</li>    <li>前端</li></ul>//js$("li").html("WEB前端梦之蓝");    //将所有的li标签html内容全部换成“WEB前端梦之蓝”,这个就属于隐式迭代感谢大家的阅读，希望大家面试成功。本文转自：https://blog.csdn.net/Juliet_xmj/article/details/106982585

//只能输入数字function keydown(doc){ //doc为元素名称,从8开始，依次为（左删除，tab键，左移，上移，右移，下移，右删除），其它为数字键 $(doc).keydown(function(evt){ var kc = evt.keyCode; var array = new Array(48,49,50,51,52,53,54,55,56,57,96,97,98,99,100,101,102,103,104,105,8,9,37,38,39,40,46); var flag = true; for(var i = 0;i < array.length && flag; i++){ if(kc == array[i]){    flag = false; } } if(flag){ evt.keyCode = 0; evt.returnValue=false; return false; } });} //查看图片的弹出层，这个需要jquery-ui的dialog组件支持，下面的也是一样的function showImg(img){// $("img[id*='Img']").click(function(){ $(img).click(function(){ var url = $(this).attr("src"); if(url == "") return; var html = "<div id='imgDiv' style='display: none;height: 600px;'><div align='center'><img src='"+url+"' id='hideImg' style='border: 10px solid gray;margin: 0px;padding: 0px;height: 600px;'/></div></div>"; var dig = window.top.$(html).appendTo(window.top.document.body); dig.dialog({ title: "图片查看",  maxWidth:1024, minWidth:1024,   maxHeight: 600,   minHeight:600, modal: true, resizable:false, bgiframe:true, option:"", close: function(event, ui){ }  }); });} //file验证function fileValidate(doc,types){ var file = doc.val(); //文件名 var array = types.split(","); //文件格式 var lasterOn = ""; //文件后辍 if(file == "" || file == null) { alert("上传文件不能为空！"); return false; } if(file.lastIndexOf(".") > -1){ lasterOn = file.substring(file.lastIndexOf(".")); var flag = false; for(var i = 0; i < array.length && !flag; i++){ if(lasterOn.indexOf(array[i]) >= 0){ //找到该文件格式 flag = true; } } if(!flag){ showErr("上传文件格式错误！正确格式应为" + types + "！"); return false; } }} //删除提示function delBtn(url){ msg("您确定执行删除操作吗？", url);} function msg(msg,url){ var html = "<div id='logout' style='display: none;width: 500px;height: 200px;'>"+msg+"</div>"; var diag = window.top.$(html).appendTo(window.top.document.body); diag.dialog({ title:"系统提示", width : 300, modal : true, resizable:false, buttons : { "确定" : function() { diag.dialog("close"); location.href=url; }, "取消" : function() { diag.dialog("close"); } } });} //信息提示function showErr(msg){ var html = "<div id='logout' style='display: none;width: 500px;height: 200px;'>"+msg+"</div>"; var diag = window.top.$(html).appendTo(window.top.document.body); diag.dialog({ title:"系统提示", width : 300, modal : true, resizable:false, buttons : { "确定" : function() { diag.dialog("close"); } } }); return false;}

  js中splice方法，可以将元素从数组中移除，具体做法如下，（当然，这个方法功能很多，这里只列一种，做个笔记，有遇到的时候，再加上其它的。）$("input[id*='ad']").change(function(){ if($(this).is(":checked")){ $("#seq").append("<span id='seq"+$(this).val()+"'>  "+$("#span" + $(this).val()).html()+"</span>"); array.push($(this).val()); } else { for(var i = 0; i < array.length; i++){ $("#seq"+$(this).val()).html(""); if(array[i] == $(this).val()){ //在该位置移除元素   ( items <- i -> items ) splice方法调用后，返回被移除元素的集合，即可从标记位置向两边Splice array = array.slice(0,i).concat(array.slice(i+1,array.length)); } } } }); });

其实是有两种做法的，第一种，当输入框状态改变的时候，即change事件时，将内容取出来，将所有的非数字字符，全替换为空，但这样挺别扭的，你一输入其它的，显示出来了，马上就消失了。第二种，就是以下的做法，监听键盘事件，如果不是数字键（分为两排，字母上面的一排与右边的数字键）则拦截掉该次按下事件，但也有弊端，就是粘贴的时候也还是会粘进来一些字符，或用鼠标拖拉文字，所以在提交时，需要做下判断，还有就是它除了数字键，其它的也给禁用了，包括删除键。。。$(function() {$('#save').button().click(function() { $('#AdvertForm').submit(); }); $('#cancel').button().click(function() { history.back(); }); $("#delayTime").keydown = keydown($("#delayTime")); $("#playCount").keydown = keydown($("#playCount")); }); function keydown(doc){ //doc为元素名称 $(doc).keydown(function(evt){ var kc = evt.keyCode; var array = new Array(48,49,50,51,52,53,54,55,56,57,96,97,98,99,100,101,102,103,104,105); var flag = true; for(var i = 0;i < array.length && flag; i++){ if(kc == array[i]){ flag = false; } } if(flag){ evt.keyCode = 0; evt.returnValue=false; return false; } }); }