JavaScript初级教程第五课

发布时间：2023-02-16 12:44:51 所属栏目：Java 来源：互联网

导读：我们已经看过文件对象的一个属性－图象数组（Images array）。在第3课中，文件中第1个图象可以通过改变其src属性被修改。例： window.document.images[0].src=some_new_picture.gif; 该命令将把文档中的第1个图象改成一个名为some_new_picture.gif的新图象

　　    目前我们已经学习了文字域和文字区域（值）的属性，接下来我们学习文字域和文字区域处理所用的方法：blur()、focus()和select()。

　　    下面的链接显示了focus() 和select()如何工作。注意他们工作一次后可能会终止功能。

　　
　　Hey, hey, we're the monkeys

　　    Mouseover to focus Mouseover to select
　　    以下为表单和链接的编码：

　　    <form name="method_form">
　　        <input type="text" name="method_text" size=40 value="Hey, hey, we're the monkeys">
　　    </form>

　　    <a href="#" onMouseOver="window.document.method_form.method_text.focus();">Mouseover to focus</a>
　　    <a href="#" onMouseOver="window.document.method_form.method_text.select();">Mouseover to select</a>

　　    其使用方法和调用任何对象方法的做法是一样的：object_name.method(). 该文字域的名称是window.document.form_name.text_field_name，所以用下列语句就可调用文字域的focus()方法。

　　    window.document.method_form.method_text.focus();

　　    表单也是对象；他们有自己的方法、属性及事件处理器。其中有一项就是onSubmit。

　　    onSubmit的调用有以下两种情形：如果用户点击提交（Submit）按钮，或用户在文字域内按了回车键，则会触发onSubmit。

　　    在Netscape中，点击一个没有结果事件处理的Submit按钮通常会导致刷新原有的页面。为了避免这种情况，你可以这样做：

　　    <form onSubmit="return false;">
　　        <input type="submit" value="Submit">
　　    </form>

　　    Javascript用return false阻止浏览器刷新页面。另一个例子是阻止一个href转向赋值的URL 。例如：链接

　　    <a href="http://www.sohu.com" onClick="return false;">sohu!</a>

　　    不会转向任何URL，因为你给onClick赋值为return false。

　　    以下是一个从用户获取信息的表单。在文字域中输入一些内容然后按回车键:

　　    Who does the monkey love:

　　    以下是表单的编码：

　　    <form name="text_entry_form" onSubmit="monkeyLove(); return false;">
　　        <input type="text" name="monkey_love" size="40">
　　    </form>

　　    当你点击文字域中的回车时，onSubmit处理器被调用执行函数monkeyLove()，该函数将改变文字域内的值。

　　    如果onsubmit处理器中没有return false语句的话，执行函数monkeyLove()会改变文字域内容，但由于同时网页内容会被刷新，从而又会将文字域的内容返回到原有的内容。为了阻止这种现象，就必须在onSubmit中加入return false.

　　    以下是monkeyLove() 函数的内容：

　　    function monkeyLove()
　　    {
　　        var who_it_is = window.document.text_entry_form.monkey_love.value;

　　        who_it_is = 'The monkey loves ' + who_it_is;
　　        window.document.text_entry_form.monkey_love.value = who_it_is;
　　    }

　　    文字域和文字区域是表单的两种元素。其它的还有复选框、单选框及下拉菜单。首先我们学习复选框。

　　    复选框的主要属性就是：被选中（checked）。

　　     This checkbox is checked
　　     This checkbox is not checked

　　    如果有一个名为the_form的表单，其中一个复选框的名称为the_checkbox，你可以看到如果点击该复选框会发生什么情况：

　　    var is_checked = window.document.the_form.the_checkbox.checked;

　　    if (is_checked == true)
　　    {
　　        alert("Yup, it's checked!");
　　    } else {
　　        alert("Nope, it's not checked.");
　　    }

　　    如果复选框被选中，则复选框的属性为真(true）。真（true）是JavaScript内置的数据类型，所以你不必对true添加引号。如果复选框未被选中，则其属性为假（false），这也是一只内置数据类型。

　　    你还可以设定复选框的属性。以下是设置复选框属性的一个例子：

　　     Checkbox 1

　　    Click to check Checkbox 1
　　    Click to uncheck Checkbox 1
　　    Click to see the value of Checkbox 1

　　    以下为代码：

　　    <form name="form_1">
　　        <input type="checkbox" name="check_1">Checkbox 1
　　    </form>
　　    <a href="#" onClick="window.document.form_1.check_1.checked=true;return false;">Click to check Checkbox 1</a>
　　    <a href="#" onClick="window.document.form_1.check_1.checked=false;return false;">Click to uncheck Checkbox1</a>
　　    <a href="#" onClick="alert(window.document.form_1.check_1.checked);return false;">Click to see the value of Checkbox 1</a>

　　    注意我在链接中始终加入了return false，以防止浏览器刷新页面又回到原来的内容。复选框的事件处理器是onClick。当某人点击复选框时，onClick事件处理器即发挥作用。以下为其使用实例。

　　     The Light Switch

　　    该例子中，表单应用了onClick复选框处理器：

　　    <form name="form_2">
　　        <input type="checkbox" name ="check_1" onClick="switchLight();">The Light Switch
　　    </form>

　　    当某人点击复选框时，onClick处理器被激活并执行函数switchLight()，以下为函数switchLight() 的编码（它置于网页首部中):

　　    function switchLight()
　　    {
　　        var the_box = window.document.form_2.check_1;
　　        var the_switch = "";

　　        if (the_box.checked == false) {
　　            alert("Hey! Turn that back on!");
　　            document.bgColor='black';
　　        } else {
　　            alert("Thanks!");
　　            document.bgColor='white';

（编辑：十堰站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

2/3

首页

尾页