循环体的最后两句则根据帖子的删除标志显示不同图片,要发送的HTTP请求类型
分类:威尼斯登录首页

至今牵线与删除帖子相关的代码,首先重点看用于出口帖子列表的for循环,代码如下所示:

14.1 表单的功底知识

表单由<form>成分来表示,世襲自HTMLElement类型,除具备HTML成分雷同的默许属性外,还持有以下属性和章程:
action属性,接纳伏乞的U福特ExplorerL;
elements属性,表单中享有控件的合集;
length属性,表单中央调控件的数目;
method属性,要发送的HTTP央求类型,常常是get或post;
name属性,表单的名称;
reset(卡塔尔方法,将表单域重新苏醒设置为默许值;
submit(State of Qatar方法,提交表单。
除动用基本的DOM获取形式得到表单外,document.forms属性可以获取页面中颇负的表单,能够透过索引或name值来博取一定表单。

循环体的前两句用于交错相邻行的背景观,以粗体展现的第 3句是重大,它输出了二个核选框控件,且控件的名号为ids[],控件的值为对应的帖子的ID。控件名称中的方括号使得表单提交时,同名的核选框中的数据以数组的点子交给到服务器端。循环体的终极两句则依照帖子的删减标记展现差异图片。

14.1.1 提交表单

单机提交按键或图像开关时会提交表单,type属性为"submit"的<input>标签和<button>标签会扭转提交按键,type属性为"image"的<input>标签会转移图像按钮。

<button type="submit">提交</button>

<input type="submit" value="提交">

<input type="image" src="tijiao.jpg">

在富有那三种控件的表单获得大旨时,按下回车键就能够交到表单,浏览器在付出表单时会触发submit事件,可以在那表明表单,并垄断(monopoly卡塔尔(قطر‎是还是不是交付,阻止事件的暗中同意行为就足以撤废表单的交给。submit(State of Qatar方法也得以付出表单,但运用此情势提交表单不会触发submit事件。

为防止表单的再次提交,在首先次提交表单后,就应当剥夺提交开关,恐怕利用onsubmit事件管理程序废除后续的表单提交操作。

用以删除操作的开关的HTML代码如下所示:

14.1.2 重新苏醒设置表单

单机重新载入参数开关时,表单的具有控件都会被重新设置为暗中认可值,type属性为"reset"属性的<input>标签和<button>标签会扭转重新设置按键。

<button type="reset">重置</button>

<input type="reset" value="重置">

单击重新载入参数按键时,会触发reset事件,阻止事件的暗许行为能够废除表单的重新载入参数,reset(卡塔尔方法也得以重新初始化表单,调用reset(卡塔尔国方法时,也会触发reset事件。

开关的链接都是调用JavaScript的do_submit(卡塔尔(قطر‎函数,只是传入的参数不一样。do_submit(卡塔尔国函数的概念代码如下所示:

14.1.3 表单字段

各类表单都有elements属性,该属性是表单中保有表单成分的集纳。能够固守每一个控件成分现身的依次或name属性来博取它们。

var f1= document.forms[0].elements[0];
var f2= document.forms[0].elements["first"];

动用name方式获取表单成分时,假设有五个表单使用同一个name(单选开关),则赶回一个以该name命名的NodeList。使用索引方式得到表单成分则只会回去第一个卓绝的表单成分。

<form>
    <input type="radio" name="first" value="red">
    <input type="radio" name="first" value="blue">
    <input type="radio" name="first" value="green">
</form>

var f1= document.forms[0].elements[0];
var f2= document.forms[0].elements["first"];
console.log(f1 === f2[0]);  // true

表单字段的共有属性:
disabled属性,布尔值,表示前段时间表单是或不是禁止使用;
form属性,指向当前字段所属的表单;
name属性,当前字段名称;
readOnly属性,布尔值,表示前段时间字段是还是不是只读;
tabIndex属性,表示如今字段的切换序号;
type属性,当前字段的品类;
value属性,当前字段被交给给服务器的值,文件字段中是只读的,表示文件在Computer中的路线。

表单字段共有的艺术:
focus(卡塔尔国方法,将浏览器宗旨设置到如今字段。
blur(卡塔尔国方法,将浏览器大旨从表单控件中移除。
HTML5新增增添autofocus属性,设置了这几个性子的表单控件在步向页面时会自动取得主旨。

表单字段共有的轩然大波:
blur事件,当前字段失去核心时接触。
change事件,<input>元素和<textarea>成分失去主题且value的值发生变化时接触,<select>成分的选项发生变动时接触。
focus事件,当前字段取得主旨时接触。
调用focus(卡塔尔国和blur(卡塔尔方法一致会触发focus和blur事件。

参数为search时,是对应用帖子寻觅效果的管理;参数为别的值(即单击删除开关传入的值卡塔尔(قطر‎时,假若是all或none(即全数刨除和总体恢复生机卡塔尔国则先调用selectAll(卡塔尔(قطر‎函数将表单中的核选框全体当选,然后再提交。selectAll(卡塔尔(قطر‎函数在op.js中的定义代码如下所示:

14.2 文本框脚本

type属性为"text"的<input>成分表示单行文本框,<textarea>成分表示多创作本框。size天性钦命文本框中可以见到体现的字符数。value性子能够安装文本框的初始值(<textarea>元素的起先值在标签中间)。maxlength本性用于钦命文本框能够肩负的最大字符数。 客户数的输入内容都保存在表单字段的value属性中。要转移value值时,直接利用value属性,不要接收DOM去改过文本框的值。

该函数使用for循环遍历参数所指对象的具有子孙对象,要是子孙对象是核选框则将其checked属性设为true使其被选中。

14.2.1 接受文本

select(卡塔尔(قطر‎方法,能够选中文本框中的全体文件,在文本框获得核心时,选用其全体文件,能够一本万利贰回性修正。
在筛选文本框中的文本时,就能够触发select事件,在调用select(卡塔尔方法时,也会触发select事件。selectionStart和selectionEnd三个属性分别保存所选文本的初步和结尾偏移量。使用下列形式能够博得接收的文件:

<input type="text" value="hello world!">

var f1= document.forms[0].elements[0];
EventUtil.addHandler(f1,"select",function (event) {
    console.log(f1.value.substring(f1.selectionStart,f1.selectionEnd));
});

setSelectionRange(卡塔尔(قطر‎方法能够筛选文本框的一有个别文件,接受多个参数,要选取的第叁个字符的目录和要选拔的最后叁个字符之后的字符的目录。要看看选取的文本,必得在头里或之后随时将刀口设置到文本框上。

<

14.2.2 过滤输入

只允许顾客输入数值:

EventUtil.addHandler(f1,"keypress",function (event) {
    event = EventUtil.getEvent(event);
    var charCode = EventUtil.getCharCode(event);
    if(!/d/.test(String.fromCharCode(charCode))&&charCode>9&&!event.ctrlKey){
        EventUtil.preventDefault(event);
    }
});

通过/d/测量检验值是还是不是为数字,在Firefox中,全部非字符键触发的keypress事件对应的字符编码为0,开始的一段时代Safari版本为8,所以不能够挡住小于9的按钮,因为此代码还有恐怕会隐瞒Ctrl+C,Ctrl+V之类的组合件,所以还要检查评定是或不是按下Ctrl键。

剪贴板事件:
beforecopy事件,在发生复制操作前触发;
copy事件,产生复制操作时接触;
beforecut事件,在发生剪切操作前触发;
cut事件,产生剪切操作时接触;
beforepaste事件,在暴发粘贴操作前触发;
paste事件,产生粘贴操作时接触;
发出剪贴板事件时,能够应用clipboardDate对象访问剪贴板中的数据,在IE中是window对象的性质,在别的浏览器中是事件指标的习性。此目的有3个措施:
getData(卡塔尔国,从剪贴板中获得数据,采用一个参数,平常为"text";独有在onpaste事件管理程序中工夫够运用此方法。
setData(State of Qatar,设置剪贴板中的数据,选择多个参数,第三个为"text/plain",在IE中为"text",第1个是要放在剪贴板中的数据,成功安装剪贴板中的数据后,重返true,不然重回false。

改革复制文本框中内容的办法:

var f1= document.forms[0].elements[0];
var str ="";
EventUtil.addHandler(f1,"select",function (event) {
    event = EventUtil.getEvent(event);
    str = f1.value.substring(f1.selectionStart,f1.selectionEnd);
});
EventUtil.addHandler(f1,"copy",function (event) {
    event = EventUtil.getEvent(event);
    str+="abc";
    EventUtil.setClipboardText(event,str);
    EventUtil.preventDefault(event);
});
EventUtil.addHandler(f1,"paste",function (event) {
    event = EventUtil.getEvent(event);
    var a = EventUtil.getClipboardText(event);
    EventUtil.setClipboardText(event,a);
});
14.2.3 自动切换宗旨

为加强易用性,同期加快数据输入,能够在前三个文本框中的字符达到最大数额后,自动将难点切换来下二个文本框。

<form>
    <input  type="text" value="" maxlength="3">
    <input  type="text" value="" maxlength="3">
    <input  type="text" value="" maxlength="3">
</form>

function tabInput(event) {
    event=EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    if(target.value.length === target.maxLength){
        var form = target.form;
        for(var i=0,len=form.elements.length;i<len;i++){
            if(form.elements[i]===target){
                if(form.elements[i+1]){
                    form.elements[i+1].focus();
                    form.elements[i+1].select();
                }
                return;
            }
        }
    }
}
var f0 = document.forms[0].elements[0];
var f1 = document.forms[0].elements[1];
var f2 = document.forms[0].elements[2];
EventUtil.addHandler(f0,"keyup",tabInput);
EventUtil.addHandler(f1,"keyup",tabInput);
EventUtil.addHandler(f2,"keyup",tabInput);
14.2.4 HTML5羁绊验证API

required属性,表示必填字段。在JavaScript中质量评定此属性能够检查此字段是或不是必填。存在这里个个性则为true,空中楼阁则为false。

email,url类型。当type属性为那多个时,浏览器会对剧情举办求证,email必须为email值,url必需为url值。注意必需增添required属性,否则空文本也会通过验证。

数值类型:"number"、"range"、"datetime"、"datetime-local"、"date"、"month"、"week"、"time"。这个品种都基于数字。能够钦点min和max来表示最小值和最大值。step属性表示每一次改变的增量。还会有stepUp(卡塔尔(قطر‎和stepDown(卡塔尔七个点子,都收到二个参数,即要加减的数值,默以为1。

pattern属性,三个正则表明式,用于相称文本框中的值。形式的起来不用加^和&符号,假定已经有了。表示输入的值必需自始自终都和形式相称。在JavaScript中检查评定此属性能够访谈相配形式。

checkValidity(卡塔尔(قطر‎方法,检验表单中某个字段是还是不是可行。所有表单字段都有其一点子,有效则赶回true,不然再次回到false。要质量评定整个表单是还是不是管用,能够一直在表单本身调用该措施。

validity对象能够告诉有效或无效的切实信息。包罗以下属性:
customError属性,表示是不是设置了setCustomValidity(卡塔尔,设置了回到true,不然再次来到false;
patternMismatch属性,借使与钦赐的pattern属性不宽容,则赶回true;
rangeOverflow属性,若是值比max大,则赶回true;
stepMisMatch属性,要是不是身处min和max之间的由step增量取得的值,则赶回true;
toolong属性,如果长度当先maxlength的值,则赶回true;
typeMismatch属性,假使不是mail只怕url必要的格式,则赶回true;
valid属性, 倘使这里别的属性都为false,则赶回true,与checkValidity(卡塔尔国方法相近;
valueMissing属性,若是标注为required字段中向来不值,则赶回true。

novalidate属性,设置于表单上,表示表单无需验证。

formnovalidate属性,设置于submit开关上,表示通过该按键提交的表单无需表明。

14.3 选用框脚本

挑选框由<select>和<option>组成,具备以下属性和章程:
add(State of Qatar方法,向控件中插入新的<option>成分,接纳四个参数,第七个参数为供给插入的因素,第贰个参数为参照地点,插入地方在参谋地点以前;
multiple属性,布尔值,表示是不是同意多选,与HTML中钦赐的multiple天性相像;
options属性,控件中颇有<option>成分的汇集;
remove(State of Qatar方法,移除钦命选项,传入参数为供给移除的项的目录;
selectedIndex属性,基于0的选中项的目录,若无当选项,则为-1,多选控件中只保留选中的率先项的目录;
size属性,选框中可以知道的行数,与HTML中钦赐的size特性相通;
type属性,唯有二种,单选"select-one"和多选"select-multiple";
value属性,未有当选项时,value属性为空值,选中了多少个项时,若HTML中钦定了value特性,则为value性子值,若没内定,则为文本值,选中了三个项时,value属性将只取第多个选中项的值。

每一种<option>都负有以下属性:
index属性,当前接收在options集结中的索引;
label属性,当前筛选的价签;
selected属性,布尔值,表示近日增选是或不是被入选,设置为true能够选中当前挑选;
text属性,选项的文本;
value属性,选项的值。

14.3.1 选拔选项

对此单选框,访谈选中项的点子便是选用selectedIndex属性。
对此多选框,设置selectedIndex属性会打消从前入选的的项,并采用钦定的项,读取selectedIndex属性只会回来第一条选中的项的目录。对于多选框,能够先拿走其引述,再对其安装selected属性为true。selected属性不会撤废其余选项。
获取多选框中颇有的选中项:

function getSelectedOptions(selectbox) {
    var result = [];
    var option = null;
    for(var i=0;i<selectbox.options.length;i++){
        option = selectbox.options[i];
        if(option.selected){
            result.push(option);
        }
    }
    return result;
}
14.3.2 增添选项

第一种艺术是采取正规DOM方法appendChild(卡塔尔加多选项。

var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("text"));
newOption.setAttribute("value","new value");
selectbox.appendChild(newOption);

其次种格局是应用Option布局函数,该布局函数选拔七个参数,贰个是文本,多个是值。创立实例后可直接用DOM方法appendChild(State of Qatar增加到选框中。

var newOption = new Option("Option text", "Option value");
selectbox.appendChild(newOption);

其二种方法是利用接收框的add(卡塔尔方法,选拔多少个参数为:要加上的新选择和将要坐落于新选用之后的选项。将第叁个参数设置为undefined,能够直接将筛选增加到列表最终。

var newOption = new Option("Option text" , "Option value");
selectbox.add(newOption, undefined);
14.3.3 移除选项

先是种形式是接纳正规DOM方法removeChild(State of Qatar移除选项。

selectbox.removeChild(selectbox.options[0]);

其次种方法是运用采用框的remove(State of Qatar方法,选取三个参数,即为要移除选项的目录。

selectbox.remove(0);

其二种办法是一直将相应的选项设置为null。

selectbox.options[0] = null;
14.3.4 移动和重排选项

将二个增选框的选项运动到另三个增选框中,能够一贯利用DOM的appendChild(卡塔尔国方法,因为appendChild(卡塔尔(قطر‎方法传入的是二个文书档案中早已存在的因素的话,那么就能够现从该因素的父节点将其除去,再将其增加到钦命的职位。

双重排序选拔框相似也是应用DOM的insertBefore(卡塔尔国方法,appendChild(卡塔尔国方法只好将有些选项移到最终。

14.4 表单类别化

表单提交的数目:
对表单字段的称号和值举办UKoleosL编码,使用&号;
不发送禁止使用的表单字段;
只发送勾选的复选框和单选开关;
不发送type为"reset"和"button"的按钮;
多选框中的种种选中值为单唯一个条目款项;
在单击提交按键时才会发送提交开关;
<select>元素的值为当选的<option>成分的value值。

表单体系化方法:

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){
                            optValue = (option.hasAttribute("value") ? option.value : option.text);
                        }else {
                            optValue = (option.attributes["value"].specified ? option.value :option.text);
                        }
                        parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
                    }
                }
            }
                break;

            case undefined:
            case "file":
            case "submit":
            case "reset":
            case "button":
                break;

            case "radio":
            case "checkbox":
                if(!field.checked){
                    break;
                }
            default:
                if(field.name.length){
                    parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
                }
        }
    }
    return parts.join("&");
}

本文由威尼斯在线注册平台发布于威尼斯登录首页,转载请注明出处:循环体的最后两句则根据帖子的删除标志显示不同图片,要发送的HTTP请求类型

上一篇:威尼斯登录首页新建多个PHP文件,把前边的分行去掉 下一篇:【威尼斯登录首页】"五个文本的上载程序"
猜你喜欢
热门排行
精彩图文