在一篇文章中查找关键字，找到后高亮显示。具体代码： <html> <head> <title>Search</title> <style type="text/css"> p { border:1px solid black;width:500px;padding:5px;} .highlight { background-color:yellow; } </style> </head> <body> <form> <p> I consider that a mans brain originally is like a little empty attic, and you have to stock it with such furniture as you choose. A fool takes in all the lumber ...
利用jQuery UI中Auto-complete插件实现输入自动完成功能，大家在使用诸如淘宝、京东等电商平台搜索商品时，往往只要输入商品的一些特殊字符，就可以显示出和该字符相近的列表菜单，用户使用鼠标或者键盘方向键就可以快速选择，实现了很好的用户体验。 1.最简单的用户输入自动完成 <!doctype html> <html lang="en"> <head><meta charset="utf-8"><title>jQuery UI Autocomplete - Default functionality</title><link rel="stylesh...
项目中突然需要使用复制功能，在网上搜索了下看到了ZeroClipboard插件，好用，但是也有局限。用法如下： 1、引用jquery、zclip.js、swf文件。 demo地址：https://github.com/chaoli920029342/jquery_copy 2、初始化 <body> <input type="text" name="text" id="text" value="http://www.baidu.com" /> <a href="javascript:void(0)" rel="external nofollow" id="dynamic">复制</a> <script type="text/javascript"> $(document).r...
本文实例讲述了jQuery基于Ajax方式提交表单功能。分享给大家供大家参考，具体如下： 提交表单一般通过同步的方式提交，提交后页面刷新或跳转到新页面来显示服务器端返回的处理结果。如果表单提交后有另外的操作或业务需求需要还在这个页面上显示或处理，那么页面不能整体刷新，这时第一想到的就是采用ajax的方式提交表单。下面完整的介绍一个表单采用ajax方式提交的流程。 一、准备 1、页面引入jQuery文件 2、页面引入jQuery的表单...
本文实例讲述了jQuery基于ajax方式实现用户名存在性检查功能。分享给大家供大家参考，具体如下： 对于拥有会员功能的网站，尤其是会员登录后可以留言或评论的网站，一般要求不能有两个或两个以上相同的用户名存在。因此，在用户注册的时就需要对用户名是否已经被注册进行检查防止出现相同的用户名。下面是我实现这种功能的一种解决方案。 1、方案原理：利用ajax的异步请求不刷新正在注册的页面向后端发送请求，后端对请求数据进行处...
下面一段代码是关于datatable增加跳转到指定页功能，具体代码如下所示： var mytable = $(#datatables);mytable.dataTable({"sDom": "<row-fluid<span6l><span6f>r>t<row-fluid<span6i><span6p>>","sPaginationType": "bootstrap","bProcessing": true,"bServerSide": true,"sAjaxSource": "/user/list","aoColumns":[{ "mData": "Id" }, { "mData": "Username" },{"mData":function(obj){return obj.group;}},{"mData":"yi...
具体代码如下所示：$("#showTitle").mousedown(function (e) {vbool = true;vHeight = e.pageY;vWidth = e.pageX;cHeight = vHeight - $("#show").offset().top;cWdith = vWidth - $("#show").offset().left;//alert("divshow" + $("#show").offset().top + " divvHeight" + vHeight);//alert("高" + cHeight + " 宽" + cWdith);})$(document).mouseup(function () {vbool = false;})var showWidth = $("#show").width();var showH...
jquery 轮播图代码如下所示： <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>图片轮播</title> <style> *{margin:0px;padding:0px;} .one{ float:left; position:relative; left:0px; top:0px; margin-left:10px; width:790px; height:340px; overflow:hidden; } .one ul li{ list-style:none; } .photo ul{ float:left; position:absolute; height:490px; left:0px; top:0px; }...
本文实例讲述了jQuery实现的分页功能。分享给大家供大家参考，具体如下： 1、分页栏HTML码 <div class="g-cf g-pagerwp"><div style="visibility:hidden" class="g-pager"></div> </div>2、CSS样式文件 .g-cf:after {clear: both;content: "";display: table;} .g-cf {zoom:1;} /*分页*/ .g-pager{ text-align:center; color: #111111; font: 12px/1.5em Arial,Tahoma; float: right;} .g-pager a,.g-pager input{ cursor:pointer;...
使用jquery与bootstrap实现了一个比较简单但功能齐全的增删改查功能的后台管理页面，虽然只是一个CRUD页面，但麻雀虽小五脏俱全，JS常用的功能都用到了，本例用原生的jquery与bootstrap配合使用，不考虑JS的重构性及打包，该例子零耦合，开箱即用。先看Demo：一、用到的Jquery功能1、获取/赋值input输入值 $("#my_id").val();// 获取 $("#my_id").val(“user_id");// 赋值2、获取/赋值textarea文本域输入值 $("#my_textarea").val(...
分页场景常见于电商网站，比如说淘宝天猫的评论区，分页功能一般是后台实现，前端请求就完事了。现闲得无聊，就写出来玩玩，只实现功能，并未封装。 基于jq实现分页功能，大致分为以下几步： 定义一个分页方法，可多次调用参数设置请求数据页面跳转方法创建非数字按钮和数据内容区创建数字按钮首屏加载调用结构层只需要一个容器 <div class="pagination-nick"></div> 一、定义分页方法 function paginationNick(opt){ //code }二、...
本文实例讲述了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>Test</title> <script type="text/javascript" ...
本文实例讲述了jQuery.cookie.js实现记录最近浏览过的商品功能。分享给大家供大家参考，具体如下： 1、jquery.cookie.js /*jquery.cookie.js */ jquery.cookie = function(name, value, options) {if (typeof value != undefined) { // name and value given, set cookieoptions = options || {};if (value === null) {value = ;options.expires = -1;}var expires = ;if (options.expires && (typeof options.expires == number |...
本文实例讲述了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>Test</title> <script type="text/javascript" language="javascript" s...
接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写，这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果，主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口。关于FormData，大家可以看MDN文档。 1，先看效果图期望的功能和效果很简单：点击页面中的上传文件表单控件，选择文件后点击“ajax提交”，将文件上传至服务器，上传成功后，页面给出一个简单的提示。 2，前端的代码 看下...