`
wangdei
  • 浏览: 374577 次
社区版块
存档分类
最新评论

几个WEB中常用的js方法

阅读更多
  1. /**
  2.   *现应用于http://www.bt285.cn http://www.5a520.cn 这两个网站j 
  3.   *@class DOM工具类,提供了一些方便的函数页面元素的一些操作
  4.   *@constructor
  5.   *@return DomUtils
  6. */
  7. function DomUtils(){
  8. }
  9. /**
  10.  *从待选列表移动一项到已经选择列表
  11.  *@param {Object} fbox  -待选项目列表
  12.  *@param {Object} tbox  -选择了的项目列表
  13.  *@param {string} fmsg -提示信息(待选项目列表无数据...)
  14.  *@param {string} tmsg  -提示信息(请选择数据....)
  15.  *@version 1.0 适用范围:IE6.0/opera 8.5/firefox1.5
  16.  *
  17.  */
  18. DomUtils.move=function(fbox,tbox,fmsg,tmsg)  {
  19.     var id =0;
  20.     if(fbox.options.length==0){
  21.       alert(fmsg);
  22.       return false;
  23.     }
  24.     for(var i=0; i<fbox.options.length; i++)  {
  25.      if(fbox.options[i].selected)  {
  26.          id = 1;
  27.         // 增加项目列表到右侧
  28.         var no = new Option();
  29.         no.value = fbox.options[i].value
  30.         no.text = fbox.options[i].text
  31.         tbox.options[tbox.options.length] = no;
  32.         //  清空左侧的项目列表
  33.         fbox.options[i].value = ""
  34.         fbox.options[i].text = ""
  35.      }
  36.    }
  37.    if(id==0){
  38.        alert(tmsg);
  39.        return false;
  40.    }
  41.    DomUtil.bumpUp(fbox);
  42. }
  43. /**
  44.  *一般不直接调用该方法,该方法用于
  45.  *把列表中value属性为""的option清空,其他相应的移上去。
  46.  *@param {Object} box  -列表框对象
  47.  *@version 1.0 适用范围:IE6.0/opera 8.5/firefox1.5
  48.  *
  49.  */
  50. DomUtils.bumpUp=function(box)  {
  51.   for(var i=0; i<box.options.length; i++)  {
  52.      if(box.options[i].value == "")  {
  53.        for(var j=i; j<box.options.length-1; j++)  {
  54.          box.options[j].value = box.options[j+1].value;
  55.          box.options[j].text = box.options[j+1].text;
  56.        }
  57.        var ln = i;
  58.        break
  59.      }
  60.    }
  61.    if(ln < box.options.length)  {
  62.      box.options.length -= 1;
  63.      DomUtil.bumpUp(box);
  64.    }
  65. }
  66. /**
  67.  *全部移动到已选择列表
  68.  *@param {Object} fbox  -待选项目列表
  69.  *@param {Object} tbox  -选择了的项目列表
  70.  *@param {string} msg  -提示信息(待选项目列表无数据...)
  71.  *@version 1.0 适用范围:IE6.0/opera 8.5/firefox1.5
  72.  *
  73.  */
  74. DomUtils.moveAll=function(fbox,tbox,msg){
  75.     if(fbox.options.length==0){
  76.       alert(msg);
  77.       return false;
  78.     }
  79.     for(var i=0; i<fbox.options.length; i++)  {
  80.         // 增加项目列表到右侧
  81.         var no = new Option();
  82.         no.value = fbox.options[i].value
  83.         no.text = fbox.options[i].text
  84.         tbox.options[tbox.options.length] = no;
  85.         //  清空左侧的项目列表
  86.         fbox.options[i].value = ""
  87.         fbox.options[i].text = ""
  88.      }
  89.    DomUtil.bumpUp(fbox);
  90. }
  91. /**
  92.  *子复选框改变父复选框状态,当父复选框对应的子复选框的选中状态改变后父复选框的状态也要跟着变化,在这里我们改变父复选框的background样式。
  93. 当名为b的复选框的被点击时,名为a的复选框的选中状态将会发生相应变化。如b全选中,则a也呈现选中状态,如b不全选,则b的background呈现#949494颜色,如b全不选,则a呈现未选中状态
  94.  *@param{string} arentCheck:父复选框的引用,
  95.  *@param{string} childCheck:子复选框名
  96.  *@param{boolean} isChild:是否是子复选框主动变化了,true表示是,false表示是父复选框变化
  97.  *@type 无
  98.  *@returns 无
  99.  *@version 1.0  适用范围:IE6.0
  100.  */
  101. DomUtils.changeCheckbox=function(parentCheckBoxName,childCheckBoxName,isChild){
  102.     //子checkbox
  103.     var childCheckboxs=document.getElementByName(childCheckBoxName);
  104.     //父checkbox
  105.     var parentCheckBox=document.getElementByName(parentCheckBoxName);
  106.     //如果是父checkbox变化,则让子checkbox状态和父保持一致
  107.     if(!isChild){
  108.             for (var j=0;j<childCheckboxs.length;j++){
  109.             if ( childCheckboxs[j].type == "checkbox"){
  110.                 childCheckboxs[j].checked = parentCheckBox[0].checked;
  111.             }
  112.         }
  113.     }
  114.     
  115.     //所有子复选框长度
  116.     var childNum = 0;
  117.     //所有被选复选框长度
  118.     var checkedNum = 0;
  119.     
  120.     for (var j=0;j<childCheckboxs.length;j++){
  121.         if (childCheckboxs[j].type == "checkbox"){
  122.                 childNum++;
  123.             if(childCheckboxs[j].checked){
  124.                 checkedNum++;
  125.             }
  126.         }
  127.     }
  128.     //一个都没有选中
  129.     if(checkedNum == 0){
  130.         parentCheckBox[0].checked = false;
  131.     }else if(childNum != checkedNum){
  132.         parentCheckBox[0].checked = false;
  133.     }else if(childNum == checkedNum){
  134.         parentCheckBox[0].checked = true;
  135.     }
  136.     return;
  137. }
  138. /**
  139.  *
  140.  * 选择复选框
  141.  *@param{string} checkboxname:复选框名字
  142.  *@param{string or array} targetValue:要设定的值或值数组
  143.  *@type 无
  144.  *@returns 无
  145.  *@version 1.0  适用范围:IE6.0
  146.  */
  147. DomUtils.selectCheckbox=function(checkboxname,targetValue){
  148.  var objs = document.getElementByName(checkboxname);
  149.   if(objs){
  150.     var array=targetValue;
  151.     if(false==(targetValue instanceof Array)){//不是数组,,则转换为数组
  152.         array=new Array();
  153.         array.push(targetValue);
  154.     }
  155.  
  156.      for(var i=0;i<objs.length;i++){
  157.         var obj=objs[i];
  158.        if(existInArray(obj.value)){
  159.           obj.checked=true;
  160.        }
  161.      }
  162.   }else{
  163.     alert('no checkbox named ['+checkboxname+']');
  164.     return false;
  165.   }
  166.   return true;
  167. }
  168. DomUtils.existInArray=function(array,value){
  169.  for(var i=0;i<array.length;i++){
  170.    if(array[i]==value){
  171.       return true;
  172.    }
  173.  }
  174.  return false;
  175. }
  176. /**
  177.  *
  178.  * 选择单选
  179.  *@param{string} radioname:单选名字
  180.  *@param{string } targetValue:要设定的值
  181.  *@type 无
  182.  *@returns 无
  183.  *@version 1.0  适用范围:IE6.0
  184.  */
  185. DomUtils.selectRadio=function(radioname,targetValue){
  186.  var objs = document.getElementByName(radioname);
  187.   if(objs){
  188.      for(var i=0;i<objs.length;i++){
  189.         var obj=objs[i];
  190.        if(obj.value==targetValue){//找到了
  191.           obj.checked=true;
  192.           break;
  193.        }
  194.      }
  195.   }else{
  196.     alert('no radio named ['+radioname+']');
  197.     return false;
  198.   }
  199.   return true;
  200. }
  201. /**
  202. *
  203. * 选择下拉框中的指定值的元素
  204.  * eg: DomUtils.selectOption('ids',1)
  205. */
  206. DomUtils.selectOption=function(objId, targetValue){
  207.   var obj = document.getElementById(objId);
  208.   if(obj){
  209.     var options = obj.options;
  210.     if(options){
  211.       var len = options.length;
  212.       for(var i=0;i<len;i++){
  213.         if(options[i].value == targetValue){
  214.           options[i].defaultSelected = true;
  215.           options[i].selected = true;
  216.           return true;
  217.         }
  218.       }
  219.     } else {
  220.       alert('missing element(s)!');
  221.     }
  222.   } else {
  223.     alert('missing element(s)!');
  224.   }
  225. }



这几个方法用处在哪里呢?我分别举例说明一下:
    DomUtils.move这个方法,适用于两个select选择框,比如A和B,要把A和B中的元素相互移动的情况,可能A是待选择的美女,B是你已选择的美女,那么你还想选几个的话,你就可以用DomUtils.move(A,B,'没美女可以选了','你还选美女啊')

    DomUtils.changeCheckbox,适用于那种全选或者去掉全选的checkbox处理,例如:A是全选checkbox,剩下的全部是同名字的其他checkbox,如果你选择了A,那么其他的checkbox就默认全选,如果你取消了A就默认取消其他全部选项。如果你一个一个的选择了checkbox,当你选择完的时候,A也默认勾选上了。
  
    DomUtils.selectCheckbox,这个适用于你有一个或者几个值,他们对应都是某个名字组下checkbox的值,自动让他们选中。
   DomUtils.selectRadio 同上面一样,和制定值相等的radio才选择。

   DomUtils.selectOption 这个是选择只有指定值的选项。


 一般情况下,我们页面的功能都是增删改查, 当你修改某个页面的时候,你页面中可能会有这些元素出现,那么你可能就得选中某些值,那么用这些工具方法,一句JS代码就搞定了。岂不是很简单!呵呵,欢迎扔砖头!

2
1
分享到:
评论

相关推荐

    web开发中几种常用的JS验证方法

    ### Web开发中几种常用的JS验证方法 在Web开发过程中,前端数据验证是非常重要的一个环节,它不仅能够提高用户体验,还能有效减轻后端服务器的压力。本文将详细介绍两种取得页面控件值的方法以及一种常用的验证方法...

    几个比较常用的JS

    本压缩包中的"几个比较常用的JS"包含了几个在实际开发中经常使用的JS代码片段或库,这些工具能够帮助开发者提高效率,实现各种功能。 1. DOM操作: JavaScript的核心之一就是Document Object Model(DOM) API,...

    WebCalendar网页日历控件(js,javascript)

    WebCalendar控件的基本结构通常包括以下几个部分: 1. **初始化**:在网页加载完成后,通过调用特定的JavaScript函数来初始化日历控件。这一步可能涉及到设置日历的初始显示日期、样式、语言等属性。 2. **DOM操作...

    1500个web前端开发常用JavaScript特效

    JavaScript特效大致可以分为以下几个类别: 1. 动画效果:包括滑动门、淡入淡出、旋转、缩放、平移等,这些特效能够使网页元素有流畅的动态展示,增强视觉吸引力。 2. 导航菜单:JavaScript可以创建响应式的导航栏...

    web js虚拟键盘(中英文切换)

    首先,JavaScript(简称JS)是Web开发中的重要脚本语言,它主要用于控制浏览器的行为,如处理用户交互、动态更新内容和与服务器通信。在实现虚拟键盘时,JS主要负责监听用户的触摸事件,展示键盘界面,并根据用户...

    js常用方法总结

    在这个话题中,我们将深入探讨JavaScript中的一些常用方法,特别是`indexOf()`,并延伸到与定位相关的CSS属性。 `indexOf()`方法是JavaScript中字符串对象的一个内置方法,用于查找指定子字符串在原字符串中的首次...

    activx控件回调web中js函数的方法

    要实现ActiveX控件回调JavaScript函数,主要涉及以下几个步骤: 1. **创建ActiveX控件**: 在VC6中,你可以创建一个新的ActiveX工程,定义一个接口,该接口包含要暴露给JavaScript的回调方法。例如,你可以定义一...

    java web中调用后台方法用js快速生成图表

    这通常涉及以下几个步骤: - 初始化图表对象,指定容器元素、图表类型、宽度和高度等属性。 - 设置图表的标题、轴标签、数据系列等属性。 - 调用DWR方法获取数据后,将数据填充到图表对象中。 - 最后,使用`draw...

    压缩web程序中的js文件

    在Web开发中,JavaScript(简称JS)是一种必不可少的编程语言,用于实现网页的动态效果和交互功能。然而,未经过优化的JS文件可能会导致页面加载速度变慢,影响用户体验。为了提升网页性能,开发者通常会采取压缩JS...

    WEB + JS 扫码枪

    在IT行业中,"WEB + JS 扫码枪"是一个典型的前端技术应用场景,它结合了Web技术与JavaScript(JS)的功能,使得网页能够直接处理来自扫码枪的数据输入。在这个场景下,用户无需点击任何按钮,只需通过扫码枪扫描条形...

    webQQ响应式兼容手机web和pcweb的聊天纯JS的静态

    在这样的项目中,JavaScript的主要任务可能包括以下几个方面: 1. 用户界面交互:处理用户的输入,如点击按钮、填写表单等,更新页面内容。 2. 数据处理:可能涉及到JSON格式的数据解析,用于展示聊天记录或用户信息...

    一种基于JavaScript的Web网页特效实现方法.pdf

    该方法的实现过程可以分为以下几个步骤: 1. 创建HTML文档:首先,需要创建一个HTML文档作为网页的基础结构。 2. 添加JavaScript代码:在HTML文档中添加JavaScript代码,以实现网页特效。 3. 定义网页特效:定义...

    使用JavaScript实现Web程序中多个文本框的批量选择、批量修改

    最近,我使用纯Javascript实现了一个批量修改文本框中的数据的功能,拖动鼠标即可选择页面上(包括GridView中)多个文本框,然后会自动弹出对话框要求用户输入新值。实现方法对TextBox没有侵入性,也不需要修改现有...

    一个不错的web软键盘(JS实现)

    在设计Web软键盘时,可以考虑以下几点: 1. **布局与样式**:软键盘的布局可以根据实际需求调整,常见的有QWERTY布局和数字键盘布局。样式设计应保持与网站整体风格一致,提供良好的用户体验。 2. **事件处理**:...

    QT调用JS详细过程

    更进一步,我们可以通过QScriptEngine将QT对象暴露给JavaScript,以便在JavaScript中调用QT对象的方法。示例代码如下: ```cpp // 创建QScriptEngine实例 QScriptEngine engine; // 将QT对象暴露给JavaScript ...

    JS 实现web分页打印功能

    首先,`Window.print()`方法是JavaScript中用于调用浏览器内置的打印对话框的函数,用户可以在该对话框中选择打印机、页面设置等选项,然后开始打印操作。为了确保在各种浏览器中都能正常工作,我们需要关注以下几点...

    web管理后台常用的插件

    "web管理后台常用的插件"这个主题涵盖了几个重要的技术领域,包括后台系统、数据图表、表单处理以及dialog弹框。以下是对这些知识点的详细介绍: 1. **后台系统**:后台系统通常是指服务器端的应用程序,负责处理...

    web开发中文件上传的各种方法

    以上就是Web开发中文件上传的几种常见方法,每种方法都有其适用场景和优缺点,开发者应根据项目需求选择合适的技术。在实际应用中,还需要考虑安全性、性能优化等问题,如限制文件大小、类型、防止恶意文件上传等。

    web前端三种常见的通过JS加密文本方式

    开发者可以通过引入这些库并调用相应的函数,轻松地在JavaScript中实现文本加密和编码。 总之,了解和掌握这些加密方法对于Web前端开发者来说至关重要,它们是保障数据安全、提升用户体验的常用工具。在实际项目中...

Global site tag (gtag.js) - Google Analytics