animate.css是一个有趣的，跨浏览器的css3动画库。 一、首先引入animate css文件 <link rel="stylesheet" href="animate.css" rel="external nofollow" >二、给指定的元素加上指定的动画样式名 <div id="box" class="animated bounce"></div>这里包括两个class名，第一个是基本的，必须添加的样式名，任何想实现的元素都得添加这个。第二个是指定的动画样式名。 三、如果说想给某个元素动态添加动画样式，可以通过jquery来实现 给动...
页面中的输入框默认的提示文字一般使用placeholder属性就可以了，即： <input type="text" name="username" placeholder="请输入用户名" value="" id="username"/>最多加点样式控制下默认文字的颜色 input::-webkit-input-placeholder{color:#AAAAAA;}但是在低版本的浏览器却不支持这个placeholder属性，那么真的要在低版本浏览器也要实现跟placeholder一样的效果，就需要写个插件来兼容下，下面就细讲一下怎样用jquery来实现这个模...
why easy-ajax easy-ajax是为了治理前端乱写Ajax方法而生。基于jquery封装一些常用方法，后期计划加入前端数据缓存功能。 使用方法如下： <script src="easy.ajax.js"></script>API： config配置项： config{jqueryAjax默认配置外增加如下配置：mustCallback：强制回调（很多情况请求失败后直接在Ajax中提示后端返回的错误信息就结束了，不会进入回调函数，但很难避免失败也需要处理逻辑的情况，所以增加了此项配置，无论成功失败皆...
首先，要实现如下图效果，1、要理清思路： 先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容，第三个同理。 2、用到的数据库表：Chinastates表规律：根据国家级（中国）的areacode查询省级(如：北京) ; 根据省级的areacode查询市级（如：北京市辖）；根据市级的areacode查询区级（如东城区） 第一种方式：没有用到封装，数据读取较慢，可以看看原理，这样在第二种方式封装时就容易多了。 代码如下：<!D...
最近在工作中遇到一个问题，需要对页面上一组元素进行ajax操作，结构如下： <div id="aid"></div> <div id="aid"></div> <div id="aid"></div> <div id="aid"></div> <div id="stop">Stop here</div> <div id="aid"></div> <div id="aid"></div> <div id="aid"></div> 编写遍历函数 function a() {$(div).each(function () {var that = $(this);var id = that.attr(id);b(id, that)})} 首先执行函数 a() 遍历每个元素，然后执行b(...
本文实例讲述了JavaScript使用链式方法封装jQuery中CSS()方法。分享给大家供大家参考，具体如下： 主要思路就是：返回this对象，将所获取的操作元素放入一个数组中。在原型中添加拓展方法 <html> <head><title></title> </head> <body><div id="one">aa</div> </body> <script type="text/javascript"> //封装类似于JQuery的连缀 /* 思路：一个操作后再返回本来的对象this，将获取的元素放入一个数组内部。通过原型添加方法; 为了能...
在jquery插件中我们经常看到以下这段代码 ;(function ( $, window, document, undefined ){ //函数体内具体代码 })(jQuery, window,document);1、代码最前面的分号，可以防止多个文件压缩合并以为其他文件最后一行语句没加分号，而引起合并后的语法错误。 2、匿名函数(function(){})();：由于Javascript执行表达式是从圆括号里面到外面，所以可以用圆括号强制执行声明的函数。避免函数体内和外部的变量冲突。 3、$实参:$是jquery的...
00.混乱的前端界 Angular1.x确实是个学习成本很高的框架，刚开始实习那会儿，前端啥也不懂，工头说用Angular，我们这群小弟也只能硬着头皮学。在这之前，前端的东西大部分都用的jQuery，而Angular正好是和jQuery的思维是相反的，开发过程中遇到了不少坑。而Angular团队也放弃了1.x开始开发和React神似的2.0版本，唉，真是沧海桑田啊。 01.Angular vs jQuery Angular模块化和解耦的思路确实值得一学，但是相对于成熟的jQuery插件库，...
前言 众所周知，jquery在我们日常开发中的使用频率非常高，与js相比，我们省去了冗长的获取元素的代码，不用考虑一些麻烦的兼容问题，更加方便的动画实现，以及更加方便的方法调用让我们觉得jquery真是越用越舒服。但是jquery说到底还是对js的封装，我们不光要用的舒服还要深入理解其中的原理，这样才能更好的使用它。首先我们封装的函数为了能实现可传入无限多个参数，在使用我们即将封装的函数时，需要使用对象进行传参，形式如下...
前言： 有一种情况：全站都要用异步方式来调用 数据，提交数据，那么你每次操作 都会要$.ajax({.....}) 写重复的方法 和代码，冗余太大， 也浪费时间，虽说你有代码自动提示补全，但真的不优雅，身为前端极客，是不能允许的！ 【嘿嘿！虽说我现在基本不用jquery了 ，不过异步概念 是永远要用的，就帮助下新人】 jQuery Ajax通用js封装 第一步：引入jQuery库 <script type="text/javascript" src="/js/jquery.min.js"></script>第二...
利用面向对象自己动手写了一个封装好的jquery轮播对象，可满足一般需求，需要使用时只需调用此对象的轮播方法即可。 demo：https://github.com/zsqosos/shopweb 具体代码如下： HTML结构： <div class="banner" id="J_bg_ban"><ul><li><a href="#"><img src="banner_04.jpg" alt="广告图 /></a></li><li><a href="#"><img src="banner_04.jpg" alt="广告图 /></a></li><li><a href="#"><img src="banner_03.jpg" alt="广告图"/></a...
我们在做列表的时候经常会遇到全选，反选进行批量处理问题，例如：我当时就是简单的实现了，然后想封装到公共的js中，封装的太烂，不好意思贴出来了（就是把实现代码之间放到公共js中，然后每个页面都用固定的id,class,现在想想我都不好意思叫他封装了），然后想到之前老大有写过这个功能去看下他怎么写的，真是没有对比就没有伤害啊，这才叫封装； $(:checkbox[data-check-target]).click(function () { var target = $(this).att...
扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。这篇文章将概述jQuery插件开发的基本知识，最佳做法和常见的陷阱。 一、入门 编写一个jQuery插件开始于给jQuery.fn加入??新的功能属性，此处添加的对象属性的名称就是你插件的名称： . 代码如下: jQuery.fn.myPlugin = function(){ //你自己的插件代码 };用户非常喜欢的符号哪里去了？它仍然存在，但是，为了避免和其他JavaScript库冲突，我们最好将jQuery传递...
前言 与js相比，jquery为我们省去了冗长的获取元素的代码，不用考虑一些麻烦的兼容问题，更加方便的动画实现，以及更加方便的方法调用让我们觉得jquery真是越用越舒服。但是jquery说到底还是对js的封装，我们不光要用的舒服还要深入理解其中的原理，这样才能更好的使用它。 首先我们封装的函数为了能实现可传入无限多个参数，在使用我们即将封装的函数时，需要使用对象进行传参，形式如下： //data作为参数传入我们下面封装的函数 ...
用js封装一些常用的jquery方法 记录一下 hasClass：判断是否有class function hasClass(ele, cls) {if (!ele || !cls) return false;if (ele.classList) {return ele.classList.contains(cls);} else {return ele.className.match(new RegExp((\\s|^) + cls + (\\s|$)));} }addClass：增加class function addClass(ele, cls) {if (ele.classList) {ele.classList.add(cls);} else {if (!hasClass(ele, cls)) ele.className += +...