精选_毕业设计_隔行换色鼠标指向表格行变色（含页面内容查找功能）、jQuery UI插件（gridster）_完整源码

# 隔行换色鼠标指向表格行变色（含页面内容查找功能）、jQuery UI插件（gridster） [TOC] # 一、隔行换色鼠标指向表格行变色（含页面内容查找功能） ## 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改变时 将该值放在双引号中,无法改变样式 ```js $("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语言 都有很多的方法需要,很多的方法老师上课讲过,网上也都有实例和代码,但如何衔接各个方法最终完成任务才是问题的关键所在. 我认为设计网页的代码大都相似,如何利用自己的思维去添加一些使用的方法,培养和提升自身的能力才是最重要的. 通过这次课程设计一暴露了自己的一些问题并总结一些学习方法; **问题**: 对知识不求甚解; 对于理论上明白掌握的方法,运用到实际中就有意料之外的错误,需要总结方法,将理论结合实际加深对知识的理解。 **方法**: .将需要做的事情分成一个个小的任务,再一个个完成; 这次课设有十二的任务,从刚开始的不知所措,到后来将它们一个个罗列,完成后一个个划掉,到最后完成所有任务时的心情是愉悦的。