1.提交表单
submit
onsubmit
 
2.表单的change事件
input与textarea元素的change事件触发在，他们失去焦点且value值改变的时候
select的change事件发生在选项改变的时候
 
3.选中文本select()与获取选中的文本
在文本框获得焦点的时候默认选中其中所有文本，用以提高用户体验。
if(window.getSelection){//现代浏览器userSelection=window.getSelection();

    }elseif(document.selection){//IE浏览器 考虑到Opera，应该放在后面userSelection=document.selection.createRange();

    }

当然jQuery对象也有select()方法。

jQuery的复制方法 clone()。
 
一个例子：
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script src="jquery-1.11.3.js"></script>

</head>

<body>

<div id="AA">

<input type="text" style="width:100px;height:30px;" value="" />

<input type="text" style="width:100px;height:30px;" value="" />

</div>

</body>

<script>

$(document).ready(function(){

$("input").click(function(){//$("input")[0]这样写就讲jQuery对象转化成了DOM对象

$(this).select();

if (window.getSelection) {

//现代浏览器

userSelection = window.getSelection();

            } else if (document.selection) {

//IE浏览器 考虑到Opera，应该放在后面

userSelection = document.selection.createRange();

            }

            console.log(userSelection);

//在DOM Level2标准中定义了一个HTMLElement对象，它规定所有的DOM对象都是HTMLElement的实例，

// 所以我们可以利用这点来判断一个对象是不是DOM对象:如果该对象是HTMLElement的实例，

// 则它肯定是一个DOM对象。在不支持HTMLElement的浏览器中我们则还是使用特征检测法。

/* if($(this) instanceof jQuery){

                alert("Jqueryduixiang ")

            }else if( document.getElementsByTagName("input")[0] instanceof HTMLElement){

                alert("DOM")

            }*/

return false;//防止冒泡

})

$("#AA").click(function(){alert("AA")})

    })

</script>

</html>
 
4.访问剪贴板的数据 clipboardData
有三个方法：getData(),setData(),clearData()
 
5.自动切换焦点
当达到一定长度之后 下个input自动获得焦点
 
6.<select>和<option>的花式玩法
add(newOption,relOption);向控件中插入元素
multiple：多选
options:所有<option>元素的HTMLCollection
remove(index):移除给定位置的选项
selectedIndex
size:选择框中可见的行数
 
可以使用:
var newOption=new Option("Option text","Option value");

selectbox.appendChild(newOption);
添加一个选项
 
7.appendChild()
可以用来将一个列表中的项移动到另外一个列表最后，注意是移动~
例子：
<body>

<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>

<ul id="myList2"><li>Water</li><li>Milk</li></ul>

<p id="demo">请点击按钮把项目从一个列表移动到另一个列表中。</p>

<button onclick="myFunction()">亲自试一试</button>

<script>

function myFunction()

{

var node=document.getElementById("myList2").lastChild;

document.getElementById("myList1").appendChild(node);

}

</script>
 
 
我们想的可能是：将water从第二项中删除，然后生成一个文本water,给一追加上。
然而，并不需要这样只需要appendChild()，就会自然的将water从二项中移除，添加到一项中。
jQuery中的append效果也是如此。
 
 
 
 
 
 

JavaScript高级程序设计--表单脚本的更多相关文章

  1. JS高级程序设计 表单部分

    目录:     表单:1.引用表单           2.提交表单           3.重置表单           4.表单字段 在HTML中,表单是由<form>元素来表示的,而 ...

  2. 14. javacript高级程序设计-表单

    1. 表单脚本 1.1 基础知识 <from>元素表示表单: l acceptCharset:服务器能处理的字符集 l action:接受请求的URL l elements:表单中所有控件 ...

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

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

  4. 《JavaScript高级程序设计》读书笔记--前言

    起因 web编程过程使用javascript时感觉很吃力,效率很低.根本原因在于对javascript整个知识体系不熟,看来需要找些书脑补一下,同时欢迎众网友监督. 大神推荐书籍 看了博客大神们推荐的 ...

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

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

  6. 《JAVASCRIPT高级程序设计》表单基础知识和文本框脚本

    在HTML中,表单是由<form>元素来表示,在javascript中,表单对应的是HTMLFormElement类型,它具有一些独有的属性和方法: 一.表单基础知识 1.取得表单的方式 ...

  7. JavaScript高级程序设计学习笔记第十四章--表单

    1.在 HTML 中,表单是由<form>元素来表示的,而在 JavaScript 中,表单对应的则是 HTMLFormElement 类型. HTMLFormElement 继承了 HT ...

  8. JavaScript基础笔记（十）表单脚本

    表单脚本 一.表单基础知识 JavaScript中表单对应的是HTMLFormElement类型,该类型继承自HTMLElement类型. 通过document.forms可以获得所有表单元素,通过数 ...

  9. javascript权威指南第14章 表单脚本示例代码

    HTML部分 <!DOCTYPE html> <html> <head> <title></title> </head> < ...

随机推荐

  1. SQL Server技术内幕笔记合集

    SQL Server技术内幕笔记合集 发这一篇文章主要是方便大家找到我的笔记入口,方便大家o(∩_∩)o Microsoft SQL Server 6.5 技术内幕 笔记http://www.cnbl ...

  2. SQLSERVER聚集索引与非聚集索引的再次研究（上）

    SQLSERVER聚集索引与非聚集索引的再次研究(上) 上篇主要说聚集索引 下篇的地址:SQLSERVER聚集索引与非聚集索引的再次研究(下) 由于本人还是SQLSERVER菜鸟一枚,加上一些实验的逻 ...

  3. 如何利用pt-online-schema-change进行MySQL表的主键变更

    业务运行一段时间,发现原来的主键设置并不合理,这个时候,想变更主键.这种需求在实际生产中还是蛮多的. 下面,看看pt-online-schema-change解决这类问题的处理方式. 首先,创建一张测 ...

  4. 在centos7中添加一个新用户，并授权

    前言 笔记本装了一个centos,想要让别人也可以登录访问,用自己的账号确实不太好,于是准备新建一个用户给他. 创建新用户 创建一个用户名为:zhangbiao [root@localhost ~]# ...

  5. C#开发微信门户及应用(39)--使用微信JSSDK实现签到的功能

    随着微信开逐步开放更多JSSDK的接口,我们可以利用自定义网页的方式来调用更多微信的接口,实现我们更加丰富的界面功能和效果,例如我们可以在页面中调用各种手机的硬件来获取信息,如摄像头拍照,GPS信息. ...

  6. 【Java每日一题】20170105

    20170104问题解析请点击今日问题下方的"[Java每日一题]20170105"查看(问题解析在公众号首发,公众号ID:weknow619) package Jan2017; ...

  7. mac下生成ssh keys 并上传github仓储

    使用github仓储需要本机生成一个公钥key 添加到自己的git账户SSH keys中   mac 生成方法:   1. 打开终端 输入   ssh-keygen 然后系统提示输入文件保存位置等信息 ...

  8. iOS9支付宝无法调起客户端

    1.为了适配 iOS9.0 中的 App Transport Security(ATS)对 http 的限制,这里需要对 支付宝的请求地址 alipay.com 做例外,在 app 对应的 info. ...

  9. JS案例之3——倒计时

    利用简单的数字累加循环模拟倒计时的效果,逻辑比较简单.如果大牛们有更好的办法欢迎补充. 这种效果经常用于在规定的时间做某件事.比如在1分钟之后重新发送验证码等. 案例演示: 源代码如下: <!D ...

  10. SQL SERVER全面优化-------Expert for SQL Server 诊断系列

    现在很多用户被数据库的慢的问题所困扰,又苦于花钱请一个专业的DBA成本太高.软件维护人员对数据库的了解又不是那么深入,所以导致问题迟迟不能解决,或只能暂时解决不能得到根治.开发人员解决数据问题基本又是 ...