实验一 jQuery选择器.doc

实验一 jQuery选择器【实验目的】1、熟悉jQuery开发环境的配置；2、掌握jQuery应用程序的编写；3、掌握jQuery常用的选择器【实验准备】1、复习教材相关内容；2、预习本次实验；【实验内容】1、实现表格的隔行变色，并且对含有文本“王五”的数据行高亮显示。其页面效果如图1-1所示。图1-1代码：$(document).ready(function()$(tbody tr:even).addClass(even);$(tbody tr:odd).addClass(odd);$(tbody tr:contains(女).addClass(selected);)2、实现复选框的全选、全不选和反选功能，其页面效果如图1-2所示。图1-2代码： $(document).ready(function() $(#CheckedAll).click(function() $(type=checkbox).attr(checked,true); ) $(#CheckedNo).click(function() $(name=items).attr(checked,false); ) $(#CheckedRev).click(function() $(name=items).each(function() $(this).attr(checked,!$(this).attr(checked); ) ) ) 3、实现品牌列表的展示效果，用户进入该页面时，品牌列表默认精简显示，如图1-3所示，用户单击“显示全部品牌”按钮来显示全部的品牌；同时将推荐的品牌名字高亮显示，按钮文字也换成“精简显示品牌”，如图1-4所示。图1-3图1-4 $(document).ready(function()var $category=$(ul li:gt(5):not(:last);$category.hide();var $toggleBtn=$(.showmorea);$toggleBtn.click(function()if($category.is(:hidden)$category.show();$(ul li).filter(:contains(佳能),:contains(尼康),:contains(奥林巴斯).addClass(promoted);$(.showmorea span).css(background,url(img/up.gif) no-repeat 0 0).text(显示精简品牌);else$category.hide();$(ul li).removeClass(promoted);$(.showmorea span).css(background,url(img/down.gif) no-repeat 0 0).text(显示所有品牌);return false;);)【总结与体会】通过完JQuery实验一，了解JQuery基本的选择器，对JQuery的开发环境的配置熟悉了一点，掌握简单的jQuery应用程序