一、选择框脚本

　　选择框也是表单的一个字段，是通过<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的出现，表单序列化已经成了一种常见需求。在编写代码前，先来了解一下，浏览器是怎么样将数据发送给服务器的。

  1. 对表单字段的名称和值进行URL编码，并使用和号(&)进行分隔；
  2. 不发送禁用的表单字段；
  3. 只发送勾选的复选框和单选按钮；
  4. 不发送type为“reset”和“submit"的按钮；
  5. 多选框每一个选中的值为一个条目；
  6. 单击提交按钮提交表单时，也会发送提交按钮；否则，不发送提交按钮；也包含type为”image“的图片；
  7. 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>

《JAVASCRIPT高级程序设计》选择框脚本和富文本编辑的更多相关文章

  1. JavaScript高级程序设计--表单脚本

    1.提交表单 submit onsubmit   2.表单的change事件 input与textarea元素的change事件触发在,他们失去焦点且value值改变的时候 select的change ...

  2. JavaScript高级程序设计之动态脚本及动态样式

    1.动态加载脚本(src 原理,异步,支持跨域) var loadScript = function (url, callback) { var script = document.createEle ...

  3. Javascript高级编程学习笔记（79）—— 表单（7）选择框脚本

    选择框脚本 选择框由<option>和<select>元素创建,为了方便选择框的交互,除了提供表单字段的公有方法之外 HTMLSelectElement 类型还提供下列特有的属 ...

  4. 《JavaScript高级程序设计》笔记：表单脚本（十四）

    表单的基础知识 在HTML中,表单是由<form>元素来表示的,而在JS中,表单对应的是HTMLFormElement类型.HTMLFormElement继承了HTMLElement,因而 ...

  5. JavaScript高级程序设计第14章表单脚本 （学习笔记）

    第十四章 表单脚本 1.阻止默认表单提交 1.提交表单数据 1.使用type=submit提交按钮 2.使用submit():方法 注意:当用户点击提交按钮时,会触发submit事件,从而在这里我们有 ...

  6. javascript高级程序设计学习笔记

    javascript高级程序设计,当枕头书已经好久了~zz  现在觉得自己在js的开发上遇到了一些瓶颈,归根究底还是基础太薄弱,所以重新刷一遍js高程希望有更新的认识. 一.javascript简介 ...

  7. JavaScript高级程序设计（第4版）知识点总结

    介绍 JavaScript高级程序设计 第四版,在第三版的基础上添加了ES6相关的内容.如let.const关键字,Fetch API.工作者线程.模块.Promise 等.适合具有一定编程经验的 W ...

  8. javascript高级程序设计第三版书摘

    在HTML 中使用JavaScript <script>元素 在使用<script>元素嵌入 JavaScript 代码时,只须为<script>指定 type 属 ...

  9. Javascript 高级程序设计--总结【四】

    *******************************  Chapter 11 DOM扩展  ******************************* 主要的扩展是 选择符API 和 H ...

随机推荐

  1. 配置 Gitblit 进行 Git 代码管理

    配置 Gitblit 进行 Git 代码管理 环境 CentOS 7 x64 IP: 10.6.0.2 首先需要安装jdk  安装步骤 就略过了 下载最新版本  gitblit wget http:/ ...

  2. python--字符串操作（删除，替换）

    示例: 替换字符串开头和结尾处的空格 1. [代码][Python]代码     跳至 [1] [全屏预览] view source print? 01 # -*- coding: utf-8 -*- ...

  3. IT技术网站汇总

    首先是比较著名的博客型的网站!一般来说在国外比较著名的博客基本上都是比较有影响力发起的或者建立的经常发布一些比较有思考力深入分析的文章! 博客媒体网站 1.www.ArsTechnica.com 2. ...

  4. 字典NSDictionary的常见用法

    // 动态获取字典的第一个典 NSString *firstKey = responseObject.keyEnumerator.nextObject;

  5. IOS开发－UI学习－NSBundle和NSURL的区别（读取文件以及写入文件）

    NSBundle和NSURL的区别: 在项目的工程中添加一个文件,本例程添加的是aa.txt,文件的内容为百度: www.baidu.com,现在要使用NSBundle和NSURL分别去获取内容,代码 ...

  6. 3）Javascript设计模式：Observer模式

    Observer模式 var Observer = (function() { var instance = null; function Observe() { this.events = {} } ...

  7. 优酷、YouTube、Twitter及JustinTV几个视频网站的架构

      优酷视频网站架构 一.网站基本数据概览据2010年统计,优酷网日均独立访问人数(uv)达到了8900万,日均访问量(pv)更是达到了17亿,优酷凭借这一数据成为google榜单中国内视频网站排名最 ...

  8. Mysql死锁问题解决方式 & 聚簇索引、隔离级别等知识

    参考了这篇文章:http://www.cnblogs.com/LBSer/p/5183300.html  <mysql死锁问题分析> 写的不错. 如果Mysql死锁,会报出: 1.1 死锁 ...

  9. win7(windows 7)系统下安装SQL2005(SQL Server 2005)图文教程——转载

    操作系统:Microsoft Windows 7 旗舰版(32位) 数据库版本:SQL Server 2005 简体中文开发板 数据库下载链接:http://pan.baidu.com/share/l ...

  10. Struts框架中struts-config.xml文件配置小结

    弄清楚struts-config.xml中各项元素的作用,对于我们构建web项目有莫大的好处.<struts-config>是struts的根元素,它主要有8个子元素,DTD定义 如下: ...