• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > 基于jquery用于查询操作的实现代码

基于jquery用于查询操作的实现代码

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了jquery,查询操作等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
一.本文干些啥:
通过javascript得到用户操作改变url参数从而实现某些功能,如查询(具体的查询由服务器端代码得到url中的参数组成查询语句实现)。
二.准备工作:
一个JQuery类库(我使用的版本为:1.3.2),一个工具类库(Tool.js,基本都是网上搜索来的代码),一个查询类库(Search.js,自己写的),一个htm页面(用来做练习),将这些js代码添加进页面htm页面。
htm页面

三.Search.js介绍

a.需要JQuery和Tool 2个js脚本的支持。
b.已经默认含有些需要操作的id和url参数,它们分别存放在_UrlHtmlIdAry和_UrlParmAry中,当然这两个完全可以合二为一,如果要添加新的id,请以#开头,并添加相应的url参数名称。
c.文本id最好含有txt(查询框需要特别照顾,需要含有query);时间id含有date(文中的开始时间含有begin,结束时间含有end);多选框id含有cb;下拉框id含有drop。这些都是为了javascript能集中管理。
d.创建Search对象时,会传入一个css参数,这个css主要实现,如,下拉框在未被选择时,下拉框字体颜色等效果。
e.时间查询框在未被填入内容时,默认为“xxxx-xx-xx”;查询框(query),默认为“关键字...”。他们都添加传入css的效果,在改变了内容的情况下,css效果被移除。


四.调用Search.js

a.首先,运行htm页面。得到下图:

b.将前面的htm页面中的js代码中的var search = new Search('initCss');改为var search = new Search();刷新页面,我们会发现页面中的“关键字...”,“xxxx-xx-xx”,和下拉框中的字体颜色改变了,如图:

这就是这个参数的作用。将代码还原。
 

c.随意操作页面,然后按查询按钮或直接输入:http://localhost:1406/search.htm?way=1&query=%u4F60%u597D&date=2010-4-20&me=t&bdate=2019-1-1&edate=2019-1-2&other=1&otherTxt=helloworld,得到类似下图:

js代码已将url参数内容绑定到页面中。
 

d.现在去掉

search._UrlHtmlIdAry['other'] = '#dropOther';

search._UrlParmAry['other'] = 'other';

search._UrlHtmlIdAry['otherTxt'] = '#txtOther';

search._UrlParmAry['otherTxt'] = 'otherTxt';

刷新页面,会发现未给查询2和查询其它绑定查询内容,这是因为此刻_UrlHtmlIdAry和_UrlParmAry并没有对应的值,未操作相应的数据。如图,

还原代码。
 

e.现在将search.InitBind(Other);改为search.InitBind();会发现查询其它的字体颜色为黑色,而非先前的红色,如图,

这是因为没有为InitBind()方法添加一个方法参数,这个参数能在不改变InitBind()方法的情况下进行一个操作内容的扩展。将代码还原。
 

f.SearchApply方法第一个参数是‘#'加上一个操作按钮的id(Search类会为该按钮添加回车事件),第二个参数是页面定向的url地址。
五 代码
tools.js

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • 2017-08-16jquery实现简单文字提示效果
  • 2017-08-16jquery遍历筛选数组的几种方法和遍历解析json对象
  • 2017-08-16使用jquery给input和textarea设定ie中的focus
  • 2017-08-16jquery中获取select选中值的代码
  • 2017-08-16jquery-1.2.6得到焦点与失去焦点的写法
  • 2017-08-16解析Jquery取得iframe中元素的几种方法
  • 2017-08-16jquery不常用方法汇总
  • 2017-08-16关于jquery中全局函数each使用介绍
  • 2017-08-16jquery拖拽排序简单实现方法(效果增强版)
  • 2017-08-16jquery实现像栅栏一样左右滑出式二级菜单效果代码

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • Jquery判断$("#id")获取的对象是否存在的方法
    • jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
    • jQuery图片滚动图片的效果(另类实现)
    • jQuery导航条固定定位效果实例代码
    • jQuery插件开发发送短信倒计时功能代码
    • Jquery操作Select 简单方便 一个js插件搞定
    • jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
    • jQuery检测鼠标左键和右键点击的方法
    • 同域jQuery(跨)iframe操作DOM(实例讲解)
    • jQuery实现首页图片淡入淡出效果的方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有