表单编程和jquery

表单编程

表单form必要属性为action 和 method（默认值为get）

表单下面的表单元素必须有一个属性是name

//获取表单form

    var myform;

    //dom方式的id属性

    myform=document.getElementById("myform");

//    alert(myform.nodeName);

    //bom下面的document所特有的表单集合

    myform=window.document.forms;

//    alert(myform.length);

//    alert(myform[0])

//    alert(myform["myform"]);

    //document下面可以直接使用name属性的名称来获取对应的元素

    myform = document.myform;

//    alert(myform);

    //获取表单中的具体书写内容的表单元素

    var e;

    //表单下面的所有表单元素（其它元素不包含）

    e=myform.elements;

//    alert(e.length);

//    alert(e[0].type);

//    alert(e["username"].type);

表单元素input--》type=image可以替代提交按钮功能

可以用普通按钮来编程实现提交按钮功能，使用js函数submit（）

提交按钮或者图片提交按钮会触发表单的submit事件，而手动调用submit函数则不触发

submit事件代码中，如果有返回值且返回值为TRUE，代表通过验证，提交数据； 反之，返回FALSE，验证未通过，不提交

disabled代表不可用，不能写入，也无法进行数据提交

readonly代表只读，不能写入数据，但是可以将已有数据提交

change事件 指代修改了内容并失去焦点后触发；blur仅仅只是失去焦点后触发

有change事件必定有blur事件，同时blur事件的代码在change事件之后执行

select事件代表元素中有文字内容被选中了（思考查询：如何获取被选中的文字）

单选按钮组radio通常使用同一个name属性，必须有一个被选中才能正常提交

单选按钮如果没有value属性，则传递时默认值为on

因此，为了满足上述条件，需要给单选按钮设置value，同时要有一个默认被选中

jQuery

最新版本号：① 1.12.2

            ② 2.2.2  全面支持html5

jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。

它是轻量级的js库 ，兼容CSS3，还兼容各种浏览器，jQuery2.0及后续版本不再支持IE6/7/8浏览器。

由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。

jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。

jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。

jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，

由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，

有超过55%在使用jQuery。

jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、

制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。

其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。

中文名极快瑞 外文名Jquery 核心理念write less,do more 发布时间2006年1月 发布人John Resig 发布地点美国纽约

最新版本jQuery 2.1.3 第一个版本jQuery 1.0（2006年8月）

特点

一、动态特效       二、AJAX       三、通过插件来扩展

四、

方便的工具 - 例如浏览器版本判断         五、渐进增强       六、链式调用

七、多浏览器支持，支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+（在2.0.0中取消了

对Internet Explorer6,7,8的支持）

选择器

jQuery 使用sizzle引擎，支持css选取，Xpath选取等方式。

$("p") 选取全部 <p> 元素。

$("p.intro") 选取所有包含class为"intro"的 <p> 元素。

$("#demo") 选取 id为"demo" 的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

$("[href^='/imgaes/']") 选取所有 href 值以 /imgaes/" 开头的元素。

更多详细信息请参见jQuery API的Selectors部分。

  

事件处理

直接绑定指定事件，事件类型即方法名，支持click、focus、blur、submit等。

$("#button").click(function(){

//script goes here

});

用on来绑定事件，off来解绑事件，第一个参数为事件名，第二个参数为回调函数。1.7.2版本开始支持。

$("#button").on('click',function(){

//script goes here

});

在1.7.1或更早版本，需要用bind/unbind（常规绑定），live/die（预绑定）来替代on/off。

更多详细信息请参见jQuery API的Events部分。

jQuery还支持如下方法:

.blur() 表单元素失去焦点。

.change() 表单元素的值发生变化

.click() 鼠标单击

.dblclick() 鼠标双击

.focus() 表单元素获得焦点

.focusin() 子元素获得焦点

.focusout() 子元素失去焦点

.hover() 同时为mouseenter和mouseleave事件指定处理函数

.keydown() 按下键盘（长时间按键，只返回一个事件）

.keypress() 按下键盘（长时间按键，将返回多个事件）

.keyup() 松开键盘

.load() 元素加载完毕

.mousedown() 按下鼠标

.mouseenter() 鼠标进入（进入子元素不触发）

.mouseleave() 鼠标离开（离开子元素不触发）

.mousemove() 鼠标在元素内部移动

.mouseout() 鼠标离开（离开子元素也触发）

.mouseover() 鼠标进入（进入子元素也触发）

.mouseup() 松开鼠标

.ready() DOM加载完成

.resize() 浏览器窗口的大小发生改变

.scroll() 滚动条的位置发生变化

.select() 用户选中文本框中的内容

.submit() 用户递交表单

.toggle() 根据鼠标点击的次数，依次运行多个函数

.unload() .当用户离开页面时，会发生 unload 事件。

   使用jQuery来获取页面元素， 它得到的是通过jquery封装后的jQuery对象

   转换后的jQuery对象才能正常的去调用jquery函数库中函数和属性

   

   在jquery当中，借用了Css中选择器的做法，从页面中找寻对应的元素，因此称为jQuery选择器

   jquery中的html函数相当于js中innerHTML属性

   jquery中的text函数相当于js中innerTEXT属性，但是它只获取文字内容，没有显示效果

   那么标准js的dom元素是否可以和jQuery的对象进行转换

   标准的jQuery可以简写为$

   可以使用简单的jQuery()或者$()函数将已经获取的dom元素直接转换为jQuery对象

   标准的dom元素无法直接调用jquery函数

   使用get（n）函数来把对应的jQuery对象转换为dom元素

   如果得到多个同名的jQuery对象，当调用函数时，默认是调用其中的第一个jQuery对象

   eq函数可以获取到jQuery对象中的第N个jQuery对象，其值从0开始正着数

   但是可以用负数来表示倒数，但是倒数是从-1开始