推荐几个WEB中常用的工具方法

雨点打透心脏的1/2处 2022-08-24 00:47 180阅读 0赞

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

这几个方法用处在哪里呢？我分别举例说明一下：  
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代码就搞定了。岂不是很简单！呵呵，欢迎扔砖头！