任务视频V2.0

任务视频V1.0

知识点

创建节点

例如要创建两个<li>元素节点，并且把它们作为<ul>元素节点的子节点添加到DOM节点树上。需要分两个步骤：

（1）创建两个<li>新元素。

（2）将这两个新元素插入文档中。

第（1）个步骤可以使用JQuery的工厂函数$()来完成，格式如下：

$(html标签);

$(html标签)方法会根据传入的HTML标签字符串创建一个DOM对象，并将这个DOM对象包装成一个JQuery对象返回。

创建两个<li>新元素，代码如下：

var $li_1 =$("<li></li>");  //创建第1个<li>元素

var $li_2 =$("<li></li>");  //创建第2个<li>元素

无论$(html标签)中的HTML代码多么复杂，都可以使用相同的方式来创建。例如

$("<div><p>请欣赏图片</p><img src="image/rose.jpg"title="rose"/></div>");

插入节点

将新创建的节点插入文档的方法并非一种，在jQuery中还提供了其它几种插入节点的方法如下表：                                                

教学课件V2.0

教学课件V1.0

制作留言板前端局部更新效果

任务描述

当在“昵称”和“留言内容”文本框内输入信息后，单击“单击这里提交留言”按钮，输入的信息会显示在页面上端的留言板中，如图所示。若没有输入昵称和留言内容，单击“单击这里提交留言”时不能发送留言。

任务分析

根据任务描述，需要进行以下几步操作：

1.设计页面HTML结构，应用CSS样式。

2.找到“单击这里提交留言”按钮，绑定onclick事件。

3.在“昵称”和“留言内容”文本框中显示提示文字，获得焦点时提示文字消失，失去焦点时若内容为空，则再次显示提示文字。

4.获取用户输入的“昵称”和“留言内容”。

5.若用户输入了“昵称”和“留言内容”，则创建一条留言，并显示在页面上面的留言板中。

6.将“昵称”和“留言内容”文本框的value值变为初始值。

任务实现

$(function() {

        $(".text").each(function(){

        var defaultVal = this.value;

        $(this).focus(function(){

                        if(this.value == defaultVal){

                                this.value= "";

                        }

                });

        $(this).blur(function(){

                        if (this.value == ""){

                                this.value= defaultVal;

                        }

                });

    });

        //给button添加鼠标点击事件

        $("input[type='button']").click(function(){

                varName = $("input[name]").val();

           var Content = $("textarea").val();

                if(Name!="你的昵称" && Content!="你要说的话") {

                        var msg ="<li><span>"+Name+"</span><p>"+Content+"</p></li>";

                        $("ul").append(msg);

                        $("input[name]").val("你的昵称");

                        $("textarea").val("你要说的话");

                }

        });

});

制作如图所示页面，当用户单击最下面的超链接“添加”时，表格增加一行

参考答案