隔行换色鼠标指向表格行变色(含页面内容查找功能)、jQuery UI插件(gridster)

学习是我快乐

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

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

1.1 任务要求

  • 简单过滤器的使用

  • 内容过滤器的使用

  • 如何获取指定元素的值

  • 如何设置元素的样式

需求说明:

  • 在页面中创建一个表格,令表格奇数行显示一种样式,偶数行显示另一种样式

  • 当鼠标指向某一行时,该行颜色随之改变

  • 输入相应的查找内容,内容所在单元格内容高亮

1.2 设计思路

  • 通过: $(“tr:even”):even 选择器选择每个相隔的(偶数) <tr> 元素
    $(“tr:odd”):odd 选择器选择每个相隔的(奇数) <tr> 元素:

  • 通过hover方法,addClass方法,removeClass方法当鼠标悬停时改变表格元素

  • 通过contain的内容过滤器获取文本值

  • 创建输入框,当click事件发生时判断该值是否在<td>中,若存在则将值颜色改变

  • 结合jQuery的插件autoconplate完成用户输入时信息过滤

1.3 设计代码

1.4 运行结果分析

在查询栏输入一些信息实现利用插件autoconplate实现内容过滤,查询存在的关键词实现样式改变成红色。

1.5 错误分析及解决

  • 错误:

    • 在使用文本选择器获得的值后使用css改变时 将该值放在双引号中,无法改变样式
      1. $("td:contains(s)").css({'color':'red'});
  • 解决:

    • 获取变量→使用字符串拼接符号(+)拼接字符串

1.6 任务要求解释说明

  • 简单过滤器的使用
    本任务中使用的两个基本过滤器
    :even 匹配所有索引值为偶数的元素,索引值从0开始计数 $(“tr:even”) //匹配索引值为偶数的行
    :odd 匹配所有索引值为奇数的元素,索引从0开始计数 $(“tr:odd”) //匹配索引值为奇数的行

  • 内容过滤器的使用
    本任务中使用的内容过滤器
    contains(text) 匹配包含给定文本的元素 $(“li:contains(‘DOM’)”) //匹配含有“DOM”文本内容的li元素

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

  • 如何设置元素的样式
    本任务中利用了两种方法设置改变元素样式:

    • 通过.css内联方法
    • 利用了hover()鼠标位置检测方法,将鼠标悬停时利用addClass()方法为元素增加名的样式;利用removeClass()方法去除某个指定的样式

二、jQuery UI插件

2.1 任务要求

选取一个jQuery插件进行自我学习,并学会使用。

2.2 设计思路

选择gridster(插件实现动态缩放可拖放布局页面应用),了解掌握该插件的使用方法。

2.3 设计代码

2.4 运行结果分析

鼠标悬停实现图片放大预浏。

2.5 任务感悟

在这次实践性课设中学习到了JavaScript、jQuery、html、css的一些基本用法,是一次实用性很强的课程设计,总体上讲代码设计并不难,但有很多的细节要去掌握和理解,比如如何使用各种选择器的方法,HTML的自上而下运行顺序,需要认真的看实验的要求,完成实验,而不能只为完成效果.

遇到了很多问题, 发现大大小小的问题,需要知识一点一滴的积累;JavaScript语言和jQuery语言 都有很多的方法需要,很多的方法老师上课讲过,网上也都有实例和代码,但如何衔接各个方法最终完成任务才是问题的关键所在. 我认为设计网页的代码大都相似,如何利用自己的思维去添加一些使用的方法,培养和提升自身的能力才是最重要的.

通过这次课程设计一暴露了自己的一些问题并总结一些学习方法;

问题: 对知识不求甚解; 对于理论上明白掌握的方法,运用到实际中就有意料之外的错误,需要总结方法,将理论结合实际加深对知识的理解。

方法: .将需要做的事情分成一个个小的任务,再一个个完成; 这次课设有十二的任务,从刚开始的不知所措,到后来将它们一个个罗列,完成后一个个划掉,到最后完成所有任务时的心情是愉悦的。

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

发送私信

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