制作论坛发帖页面(采用html()方式、操作节点的方式)

学习是我快乐

发布日期: 2020-06-05 09:48:59 浏览量: 191
评分:
star star star star star star star star star star_border
*转载请注明来自write-bug.com

一、任务一:制作论坛发帖页面(采用html()方式)

1.1 任务要求

  • 如获取指定元素的值

  • 如何设置元素的显示和隐藏

  • 如何设置元素的html代码

说明:

  • 单击“我要发帖”按钮,弹出发帖页面

  • 在标题框中输入标题,选择所属板块,输入帖子内容

  • 单击“发布”按钮,新发布的帖子显示在列表的第一个,新帖子显示发帖者的头像、标题、所属板块和发布时间

1.2 设计思路

  • 利用JavaScript Date 对象获取系统时间并将其在相应位置输出\

  • 将多张照片存放在一个数组中,利用随机数输出随机照片

  • 通过$(“id”).val()获取对应id的值;通过$(“.class”).val();获取对应class的值

  • 通过jQuery hide()方法和show()方法 实现元素的显示和隐藏

  • 利用html方法实现输出

1.3 设计代码

1.4 运行结果分析

通过点击”我要提问”实现弹出窗口,输入标题和提问内容,选择板块;点击”发布”实现窗口的隐藏和相关内容的输出。

1.5 错误分析及解决

  • 错误

    • 没有加判断是否为空的情况以及内容不输出的情况,使整体效果不严谨
  • 解决

    • 增加一个alter的提醒,增加一个选择器获取内容的值

1.6 任务要求解释说明

  • 如获取指定元素的值?
    通过$(“id”).val()获取对应id的值;通过$(“.class”).val();获取对应class的值

  • 如何设置元素的显示和隐藏
    通过jQuery hide()方法和show()方法 实现元素的显示和隐藏

  • 如何设置元素的html代码
    html() 方法设置或返回被选元素的内容。当该方法用于返回内容时,则返回第一个匹配元素的内容。当该方法用于设置内容时,则重写所有匹配元素的内容

二、任务二:制作论坛发帖页面(操作节点的方式)

2.1 任务要求

  • 如何创建节点元素

  • 如何在指定节点之后插入节点元素

  • 如何在指定节点之前插入节点元素

  • 如何获取指定元素的值

  • 如何设置元素的显示和隐藏

说明:

  • 单击“我要发帖”按钮,弹出发帖页面

  • 在标题框中输入标题,选择所属板块,输入帖子内容

  • 单击“发布”按钮,新发布的帖子显示在列表的第一个,新帖子显示发帖者的头像、标题、所属板块和发布时间

2.2 设计思路

  • 利用JavaScript Date 对象获取系统时间并将其在相应位置输出

  • 声明一个数组将多张照片存放在数组中,利用随机数输出随机照片

  • 写好html内容,直接用$()包裹;var $newDiv = $(“<div id="newDiv"></div>“);

  • 通过jQuery hide()方法和show()方法 实现元素的显示和隐藏

  • jQuery 文档操作 - append() 方法在指定位置输出

2.3 设计代码

2.4 运行结果分析

隔行换色鼠标指向表格行变色(含页面内容查找功能)

通过点击”我要提问”实现弹出窗口,输入标题和提问内容,选择板块。点击”发布”实现窗口的隐藏和相关内容的输出;

2.5 错误分析及解决

掌握了jQ的操作节点的相关方法。

2.6 任务要求解释说明

  • 如何创建节点元素
    创建节点:写好html内容,直接用$()包裹

    1. var $newDiv = $("<div id="newDiv"></div>");
  • 如何在指定节点之后插入节点元素?

    1. $(" selector ").before($(content));

    selector: 指定元素;
    content:指定要插入的内容,可以是 字符、html标签、函数

  • 如何在指定节点之前插入节点元素?

    1. $("selector").append(content);

    selector: 指定元素;
    content:指定要插入的内容,可以是 字符、html标签、函数

  • 如何获取指定元素的值?
    通过选择器选择指定的标签.val()方法获取该标签的值

  • 如何设置元素的显示和隐藏?
    通过jQuery hide()方法和show()方法 实现元素的显示和隐藏

上传的附件 cloud_download 代码.rar ( 4.57mb, 8次下载 )

发送私信

43
文章数
9
评论数
最近文章
eject