总的来说思路比较简单，就是先获取节点，然后对节点进行相应的处理,下面是完整的页面代码： 原生js：原生js tab.tab{margin:10px auto;position:relative;width:300px; } ul,li{list-style-type:none;padding:0;margin:0;font:13px/20px SimSun,arial;color:#333;text-align:center; } .tabTltle ul li{float:left;position:relative;background:#fefefe;background:-webkit-gradient(linear,left top,left bottom, from(#fefefe),...
本文实例讲述了原生JS和JQuery动态添加、删除表格行的方法。分享给大家供大家参考。具体分析如下： 下面HTML代码作用：提交一个表单，将复选框的值提交（复选框的值等于后面的文本框，复选框和文本框处在同一行，可以动态添加和删除）。 原生态JS版：javascript添加行demo /**验证表单复选框是否有选择*/ function isValidChkSelect(frm){ var chk = frm.chked; if(chk == undefined){ return; } var len = frm.chked.length; if(c...
tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形。使用面非常广，下面我们用两种方法简单实现之。首先，构建页面元素。页签的可点击部分我们通常用列表来承载，包括ul和ol，我们这里让页签呈横向分布，所以需要使之向左浮动。而页签内容部分使用div承载即可。另外，我们需要对具有共性的元素统一控制样式和行为，所以就有了下面的dom结构：t1t2t3t4t5Hi !I Like You!Hello World!How Ar...
本文实例为大家介绍了基于jQuery实现淡入淡出轮播效果的关键代码，分享给大家供大家参考，具体内容如下： 基本原理：将所有图片绝对定位在同一位置，透明度设为0，然后通过jQuery的淡入淡出实现图片的切换效果。 html代码：一个轮播 #scrollPlay{width: 730px;height: 336px;/*overflow: hidden;*/}#pre{position: absolute;margin-top: 150px;width:30px;height: 30px;background: #000;color:#fff;opacity: 0.7;text-align: cent...
本文实例讲述了原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作。分享给大家供大家参考，具体如下： 一、原生JS forEach()和map()遍历 共同点： ①.都是循环遍历数组中的每一项。 ②.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数：数组中的当前项item,当前项的索引index,原始数组input。 ③.匿名函数中的this都是指Window。 ④.只能遍历数组。 1.forEach() 没有返回值。 var ary = [12,23...
本文实例为大家分享了JS编写简单选项卡的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>jquery选项卡</title><style type="text/css">#div1 div{width: 200px;height: 200px;border: 1px red solid;display: none;}.active{background:#999;}</style><!-- 原生的JS --><script type="text/javascript">window.onload=function(){var oDiv=document.getElementById(div...
ajax 是用来处理前后端交互的技术，可以改善用户体验，其本质是 XMLHttpRequest，异步访问服务器并发送请求数据，服务器返回响应的数据，以页面无刷新的效果改变页面中的局部内容 同步：任务一个一个的执行，只有前面的任务执行完才会执行下一个任务，如果前面的任务是耗时操作，则需要一直等待 异步：多条任务并发执行，也就是一个任务的开启，不需要等待其他任务执行结束，效率较高 ajax的语言载体是JavaScript，最大的特点是页面...
事件委托的原理依赖于事件冒泡，可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作。 使用事件委托的优点 1、操作子元素时不用一一遍历，可以根据事件触发的对象而进行相应操作 dom结构如下： <ul id = "oUl"><li class = "item"></li><li class = "item"></li><li class = "item"></li><li class = "item"></li> <li class = "item"></li> </ul>当li被点击时，打印该li的值。 在我们还没有学事件委托的时候...
本文介绍了浅谈原生JS实现jQuery的animate()动画示例，希望此文章对各位有所帮助。 参数介绍：obj执行动画的元素cssJSON数值对，形式为“{属性名: 属性值}"，指要执行动画的书序及其对应值interval属性每执行一次改变的时间间隔speedFactor速度因子，使动画具有缓冲效果，而不是匀速不变（speedFactor为1）func执行完动画后的回调函数 注意：必须为每一个元素分别添加一个定时器，否则会互相影响。cur != css[arr]判断是否每一个属...
前言 大家应该都有所体会，在一些数据展示的专题页里，有时候希望数字能动态从某一个数变化到另一个数，以此来吸引用户眼球，突出数据。于是有了下文。 在这里，我用了两种方式：一种是原生的JavaScript，另一种是jQuery插件。 数字线性变化的原理很简单，就是让数字增量变化，并循环动画。 原生JS版 首先获取DOM元素。为了兼容到IE6，兼容性方法如下： var domUtil = {// 获取DOM元素get: function(query) {var _this = this;if(d...
前言 众所周知，jquery在我们日常开发中的使用频率非常高，与js相比，我们省去了冗长的获取元素的代码，不用考虑一些麻烦的兼容问题，更加方便的动画实现，以及更加方便的方法调用让我们觉得jquery真是越用越舒服。但是jquery说到底还是对js的封装，我们不光要用的舒服还要深入理解其中的原理，这样才能更好的使用它。首先我们封装的函数为了能实现可传入无限多个参数，在使用我们即将封装的函数时，需要使用对象进行传参，形式如下...
本文实例分析了jQuery实现隔行变色的方法。分享给大家供大家参考，具体如下： 原生js： var tab = document.getElementByTagName(table)[0]; var tr = tab.getElementByTagName(tr); for(var i=0;i<tr.length;i++){if(i%2==0){tr[i].style.background="orange";}else{tr[i].style.background="#abcdef";} }jquery dom选择器： $(table tr:odd).css(background,orange); $(table tr:even).css(background,#abcdef);jquery 方法选择器...
日常项目中, 对于列表类文章或数据, 大概都会用到checkbox的全选或全不选的功能, 以前的项目中也写过checkbox的选择js, 但都没有整理过. 正好前几天一个兄弟遇到了这个问题, 索性, 我花了点时间, 用原生JS与jQuery分别写了一个版本, 考虑到使用时灵活性问题, 未封装, 需要的童鞋使用时自行改下相关参数.功能介绍点此查看DEMO演示 1. 全选/全不选 选框一体实现, 即列表中选框的状态与全选/全不选框前的选框状态一致; 2. 自动更改 全...
前言 与js相比，jquery为我们省去了冗长的获取元素的代码，不用考虑一些麻烦的兼容问题，更加方便的动画实现，以及更加方便的方法调用让我们觉得jquery真是越用越舒服。但是jquery说到底还是对js的封装，我们不光要用的舒服还要深入理解其中的原理，这样才能更好的使用它。 首先我们封装的函数为了能实现可传入无限多个参数，在使用我们即将封装的函数时，需要使用对象进行传参，形式如下： //data作为参数传入我们下面封装的函数 ...
最近迷上了原生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的好处在于链式调用。 2.滑动 省略speed和callb...