通过jquery+html5实现，当浏览器窗口缩小或者手机访问的时候，导航菜单变成按钮下拉式菜单。效果图：HTML代码：复制代码代码如下:<nav id="nav-wrap"> <ul id="nav"> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> </ul></nav>jQuery代码：通过以下jquery代码，会把<div id="menu-icon">添加到<nav id="nav_wrap">中，当点击 #menu-icon 时，菜单就会显示出来：复制代码代码如下:<script type="text/javascr...
jQuery计算文本宽度的原理是利用html提供的<pre>标签，向dom中动态添加<pre>标签，标签里的内容就是要测试长度的文本，获取完长度之后再删除刚才添加的<pre>标签，从而可取到文本的大概长度了。为什么要用标签而不用其他标签呢，那来看看<pre>标签的特性吧：pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符;而文本也会呈现为等宽字体。 <pre>标签的一个常见应用就是用来表示计算机的源代码。需要注...
<!doctype html> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /> <title>无标题文档</title> <scriptsrc="jquery-1.8.3.min.js"></script> <scriptsrc="jquery.cookie.js"></script> <scriptsrc="jquery.base64.js"></script> <scriptlanguage="javascript"type="text/javascript"> functionsetCookie(){ //设置cookie var loginCode = $("#login_co...
<!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>拖动DIV</title> <style type="text/css"> .show{ background:#7cd2f8; width:100px; height:100px; text-alig...
在ipad、iphone网页开发中，我们很可能需要判断是横屏或者竖屏。下面就来介绍如何用 jQuery 判断iPad、iPhone、Android是横屏还是竖屏的方法。代码如下：function orient() { if (window.orientation == 90 || window.orientation == -90) { //ipad、iphone竖屏；Andriod横屏 $("body").attr("class", "landscape"); orientation = ‘landscape‘; return false; } else if (window.orientation == 0 || window.orientation == 180...
<html> <head> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> </head> <body> <div id="divckb"> <input type="checkbox" name="ckb1" value="1" />张三 <input type="checkbox" name="ckb2" value="2" />李四 <input type="checkbox" name="ckb3" value="3"/>王五 <input type="checkbox" name="ckb4" value="4" />赵六 </div> <script> $(function(){$("#divckb input").each(function(){$(this).change...
在本教程的前两篇文章中，笔者分别向大家介绍了使用jQuery Mobile框架如何去设计手机新闻浏览器，其中实现了一个WEB版本的新闻浏览器，在本教程的最后一篇中，将讲解如何将已实现的web版本的新闻浏览器迁移到Android手机中去，注意的是，本文希望读者拥有一点基础的Android知识。迁移到Android应用中去 在Android应用中，将会使用index.html作为界面的布局，我们将编写一个Android的Activity类将index.html整合到android应用中去...
有时候我们需要每隔一段时间向某页面传值，比如说聊天室，每隔几秒就像数据库处理页面传值并取回，然后显示在聊天窗口。又或者是每隔一段时间就查询用户最后发言时间到现在是否间隔2分钟，如果是则将用户退出。这个时候我们就要用到HTML DOM setInterval() 方法。setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInt...
文字上下滚动是经常用到的js效果，这里介绍一种上下渐隐渐出的文字展现效果！代码实现很简单，只需要引入jquery就可以。代码如下：<!DOCTYPE><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>文字滚动</title><style type="text/css">#sidebar{width:200px; height;500px; overflow:hidden; margin:0 auto; background:#f00; color:#fff;}#marquee{width:200px; margin:0;padding:0;}#marquee ...
JQ 实现左右两侧菜单添加、移除效果图：JS代码 function toRight(l, r, v) {$("#" + l + " option:selected").appendTo("#" + r);$("#" + l + " option:selected").remove();var str = $("#" + l + " option").map(function () { return $(this).val(); }).get().join(", ")$("#" + v).val(str);}function allToRight(l, r, v) {$("#" + l + " option").appendTo("#" + r);$("#" + l + " option").remove();var str = $("#...
再阻止事件冒泡的方面,jquery有两种方式:一种是 return false;另外一种是 e.stopPropagation() html代码 <form id="form1" runat="server"><div id="divOne" onclick="alert(‘我是最外层‘);"> <div id="divTwo" onclick="alert(‘我是中间层！‘)"> <a id="hr_three" href="http://www.baidu.com">点击我</a> </div></div></form>js代码: $(‘#hr_three‘).click(function(e){ alert(‘我是最里层！‘) //e....
使用jquery实现图片预加载提高页面加载速度和用户体，本就为大家详细分析jquery图片预加载的实现原理。什么时候使用图片预加载？如果页面使用了很多不是最初加载便可见的图片，有必要进行预加载：$.preloadImages = function () { for (var i = 0; i < arguments.length; i++) { $(‘img‘).attr(‘src‘, arguments[i]); }};$.preloadImages(‘img/hover-on.png‘, ‘img/hover-off.png‘); 下面我来介绍一种在实际应用中经常会使...
1 / jquery实现的搜索功能2 $(‘#search_btn‘).on(‘click‘,function(){3var txt=$(‘#inputValue‘).val();4var value=$(‘.layui-colla-content‘);5if($.trim(txt)!=""){6 $(".layui-colla-content").css(‘display‘,‘none‘).filter(":contains(‘"+txt+"‘)").show().css("color","red");7 }else{8 alert(‘111‘);9 } 10 }) 原文：https://www.cnblogs.com/yangguoe/p/9...
HTML/CSS方法实现下拉菜单来源：慕课网<!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>无标题文档</title><style type="text/css"> *{ margin:0px; padding:0px;}/*清除所有默认格式*/#menu{ background-color:#eee;...
/*** desc : 合并指定表格（表格id为table_id）指定列（列数为table_colnum）的相同文本的相邻单元格* @table_id 表格id : 为需要进行合并单元格的表格的id。如在HTMl中指定表格 ，此参数应为 #data* @table_colnum : 为需要合并单元格的所在列.参考jQuery中nth-child的参数.若为数字，从最左边第一列为1开始算起;"even" 表示偶数列;"odd" 表示奇数列; "3n+1" 表示的列数为1、4、7、......* @table_minrow ? : 可选的,表示要合并列...