一、选择框脚本
选择框也是表单的一个字段，是通过<select>和<option>元素来创建的，需要使用javascript来控制。选择框拥有以下的属性和方法：
以下介绍一些选择框的常用方法：
1、获取选择项
var selectbox = document.forms[0].elements["selectID"];
// 选择第0项的值和文本
var text = selectbox.options[0].text;
var value = selectbox.options[0].value;
//选择选项框某一项的值并显示
var selectedIndex = selectbox.selectedIndex;
var selectedOption = selectbox.options[selectedIndex];
alert("selected index: "+selectedIndex + "\nselected text:"+selectedOption.text+"\nselected value" + selectedOption.value);
// 循环遍历取得每一项的值并返回
function getSelectedOptions(selectbox){
var result = new Array();
var option = null;
for(var i = 0, len = selectbox.options.length; i < len){
option =selectbox.options[i];
if(option.selected){
result.push(option);
}
}
return result;
}
2、增/删/移动
//增：// 使用javascript的dom方式来添加一个option元素（不推荐）
var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.setAttribute("value", "option value");
selectbox.appendChild(newOption);
// 使用选择框的add方法来添加一个option元素（推荐）
var newOption = new Option("Option text", "Option value");
selectbox.add(newOption, undefined);
//删：// 使用javascript的dom方法来移除第一个option
selectbox.removeChild(selectbox.options[0]);
// 使用选择框的remove方法来移除第一个option
selectbox.remove(0);
// 清除选择框中的所有项
function clearSelectBox(selectbox){
for(var i = 0, len = selectbox.options.length; i < len; i++){
selectbox.remove(i);
}
}
//移动：// 把某一项向前移动一个位置 var optionToMove = selectbox.options[1]; selectbox.insertBefore(optionToMove, selectbox.options[optionTomove - 1]); // 把某一项向后移动一个位置 selectbox.insertBefore(optionToMove, selectbox.options[optionTomove +2]);
二、表单序列化
随着Ajax的出现，表单序列化已经成了一种常见需求。在编写代码前，先来了解一下，浏览器是怎么样将数据发送给服务器的。
- 对表单字段的名称和值进行URL编码，并使用和号(&)进行分隔；
- 不发送禁用的表单字段；
- 只发送勾选的复选框和单选按钮；
- 不发送type为“reset”和“submit"的按钮；
- 多选框每一个选中的值为一个条目；
- 单击提交按钮提交表单时，也会发送提交按钮；否则，不发送提交按钮；也包含type为”image“的图片；
- select元素的值，就是选中的option元素的value属性值；如果没有value属性，则为option元素的文本值；
以下是表单序列化的函数：
function serialize(form){
var parts = [];
field = null,
i,
len,
j,
optLen,
option,
optValue;
for(i=0, len=form.elements.length; i<len; i++){
field = form.elements[i];
switch(field.type){
case "select-one":
case "select-multiple":
if(field.name.length){
for(j=0, optLen=field.options.length; j<optLen; j++){
option = field.options[j];
if(option.selected){
optValue = "";
if(option.hasAttribute){
// DOM兼容的浏览器，可以使用hasAttribute方法
optValue = (option.hasAttribute("value") ? option.value:option.text);
}else{
// 兼容IE浏览器
optValue = (option.attribute["value"].specified ? option.value:option.text);
}
parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(optValue));
}
}
}
case undefined://type属性未定义，则不需要进行序列化
case "file"://文件输入
case "submit":
case "reset":
case "button"://自定义按钮
break; //以上按钮和文字输入的字段无法模仿，也不需要序列化
case "radio"://单选按钮
case "checkbox"://复选框
if(!field.checked){
break;
// 如果单选和复选框的checked属性被设置为false，则不需要序列化
}
default;
if(field.name.length){
parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(field.value));
}
}
}
return parts.join("&");
}
三、富文本编辑
富文本编辑，又称WYSIWYG(what you see is what you get，所见即所得)。javascript通过以下两种方式，实现了在网页中编辑文本内容。
1、使用iframe让加载的iframe的内容可编辑
新建一个index.html：
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
hello world
</body>
</html>
在建立一个html并执行（把这两个html都放在同一个域下，这里把这两个文件都放在本地的服务器上的）：
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<iframe name="richEdit" style="height:400px;width:400px;" src="http://127.0.0.1/index.html" frameborder="2"></iframe>
<script>
// 要让iframe的内容可编辑，需要将designMode属性设置为on
window.addEventListener("load", function(){
frames["richEdit"].document.designMode = "on";
});
</script>
</body>
</html>
2、使用contentEditable属性让div可编辑
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<!-- 为元素设置contenteditable属性 -->
<div id="richedit" contenteditable>1111</div>
<script>
var div = document.getElementById("richedit");
// 将属性开关打开
div.contentEditable = "true";
</script>
</body>
</html>
时间： 2024-12-28 09:26:25