前端的翻页插件有很多，bootstrap的翻页界面看起来就不错，做起来也易于上手，但应用于项目中的翻页实现还有有几个难点，分别是： 如何封装一个翻页插件，如题中的yunm.pager.js。 涉及到的div局部刷新该如何做。 在没给大家介绍正文之前，先给大家展示下效果图，如果感觉还不错，请继续往下阅读：翻页的总体流程涉及到的知识点很多，这篇文章我们也主要来关注以上两点，其余的内容，请自悟。 一、如何定义局部刷新的div 翻页时，我...
在web开发中，经常会用到iframe，难免会碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素 1、 格式：window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click(); 实例：window.frames["ifm"].document.getElementById("btnOk").click(); 2、 格式： var obj=document.getElementById("iframe的name").contentWindow; var ifmObj=obj.docu...
dropload.js提供了最基本的上拉翻页，下拉刷新功能。对于由服务端一次返回所有数据的情况基本通用。 但是，需求往往不是服务端一次性返回所有数据，往往还要支持服务端分页，搜索，排序，多条件筛选等功能。（比较类似美团美食的界面）一、解决方案 改进1：由于有分页，搜索，排序，多条件筛选功能，可能都不需要上拉，进到页面就没有数据。 例如：搜索一个服务端不存在的名字。 所以，添加接口设置setHasData。 MyDropLoad.proto...
本文实例讲述了jQuery悬停文字提示框插件jquery.tooltipster.js用法。分享给大家供大家参考，具体如下： 运行效果截图如下：index.html页面： <!DOCTYPE html> <html lang="en"> <head> <title>jQuery Tooltips悬停文字提示框效果</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="css/tooltipster.css" /> <link rel="stylesheet" type="text/css" href="css/style2.css" /> <script type="text/j...
前言 项目需求要弄个瀑布流的页面，用的是waterfall这个插件，感觉还是可以的，项目赶就没自己的动手写。最近闲来没事，就自己写个。大致思路理清楚，还是挺好实现的... 原生javascript版 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>瀑布流-javascript</title><style>*{margin:0;padding:0;}#content{position: relative;margin:0 auto;}.box{padding:10px;float: left;}/*首行浮动，第二行开始绝对定...
jquery animate动画效果： 代码<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>动画</title><style>*{margin:0;padding:0;}.box{width: 400px;height: 300px;background: #000;margin:40px auto;color: #fff;font-size: 18px;text-align: center;}</style><script>//获取对象样式规则信息，IE下使用currentStylefunction getStyle(obj,style){return obj.currentStyle?obj.currentStyle[style]:getComput...
本文实例讲述了jQuery操作iframe中js函数的方法。分享给大家供大家参考，具体如下： 1、jquery操作iframe中的元素（2种方式） var tha = $(window.frames["core_content"].document).find("#trewuuu").html(); var thb = $("#core_content").contents().find("#trewuuu").html();2、操作父界面中的元素（header：为某个元素的id） $(#header, parent.document).text()3、js调用iframe中的js函数（2种） window.frames["core_conten...
经过前两部分的讲解，我们大概知道内容滑动切换的基本开发思路和技巧，现在我们在第三部分将前面两部分的代码进行优化，封装成一个jQuery插件：jquery.hwSlide.js。开发者可以轻松创建各种图片轮播效果、焦点图效果、图文混排滑动效果。下载源码hwSlider具有以下特性：?多个参数定制，满足不同项目需求。 ?支持移动端触控滑动。 ?支持图文混排，支持各种html元素。 ?响应式自适应屏幕尺寸。 ?同一页面支持多个滑动切换。 ?轻量级的...
本文实例讲述了js与jquery正则验证电子邮箱、手机号、邮政编码的方法。 jQuery代码： //验证邮政编码$("#postcode").blur(function(){//获取邮政编码var postcode=$("#postcode").val();if(is_postcode(postcode)){$("#postcode_info").html("");}else{$("#postcode_info").html("邮编格式不正确");return false;}});//验证手机号码$("#mobile").blur(function(){//获取手机号,并去除左右两边空格var mobile=$.trim($("#mobile").v...
什么是jsonp？ 说到jsonp，你可能最先想到JSON；它还真和JSON有关系；JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用...
本文大概分为三步实现jquery ajax通过js封装，通过代码实例讲解，代码附有注释，比较容易理解，具体详情如下所示： 第一步：引入jQuery库<script type="text/javascript" src="<%=path%>/resources/js/jquery.min.js"></script> 第二步：开发Ajax封装类，已测试通过，可以直接调用，直接贴代码，讲解就省了/***************************************************************** jQuery Ajax封装通用类 (linjq) ******************...
分别利用javascript的源码和jQuery来实现一个简单的选项卡，对比各自的步骤。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery实例—选项卡的简单实现(js源码和jQuery) </title> <style> div{display:non...
讲到ajax这个东西，我们要知道两个对象XMLHTTPRequest和ActiveXObject ，提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。XMLHTTPRequest基本上算是标准化了，兼容大部分浏览器ActiveXObject这玩儿意儿是微软的东西，所以是为了兼容IE版本，我们用的只是它的xmlHTTP功能。 为了功能的明确和清晰，我们把...
今天有朋友问我一个关于在<select>里动态添加option问题，一开始以为是JS那里动态添加，所以用了JS动态添加option的方法，但你那里是用JQuery的，所以才会一直出错，下面记下在JS和JQuery里添加option的区别。JS：var selid = document.getElementById("sltid"); for(var i=0; i<10;i++){ //循环添加多个值 sid.option[i] = new Option(i,i); } sid.options[sid.options.length]=new Option("1","2"); // 在最后一个值后面添加多一...
js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElementsByTagName("ul"); var itemss=items[2].getElementsByTagName("li");//获取第二个li标签 或 var div=document.getElementById(a); var ul=div.childNodes.item(0); var lis=ul.childNodes; for(var i=0;i<lis.length;i++){ alert("Item "+i+": "+lis.item(i).innerHTML); } 如何用jquery获得每个ul下最后一个li$(f...