实验一jQuery选择器.docVIP

实验一 jQuery选择器 【实验目的】 1、熟悉jQuery开发环境的配置； 2、掌握jQuery应用程序的编写； 3、掌握jQuery常用的选择器 【实验准备】 1、复习教材相关内容； 2、预习本次实验； 【实验内容】 1、实现表格的隔行变色，并且对含有文本“王五”的数据行高亮显示。其页面效果如图1-1所示。 图1-1 代码： script src=jquery-1.4.2.js type=text/javascript/script script type=text/javascript $(document).ready(function(){ $(tbody tr:even).addClass(even); $(tbody tr:odd).addClass(odd); $(tbody tr:contains(女)).addClass(selected); }) /script 2、实现复选框的全选、全不选和反选功能，其页面效果如图1-2所示。 图1-2 代码： script type=text/javascript src=jquery-1.4.2.js/script script type=text/javascript $(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)); }) }) }) /script 3、实现品牌列表的展示效果，用户进入该页面时，品牌列表默认精简显示，如图1-3所示，用户单击“显示全部品牌”按钮来显示全部的品牌；同时将推荐的品牌名字高亮显示，按钮文字也换成“精简显示品牌”，如图1-4所示。 图1-3 图1-4 script type=text/javascript src=jquery-1.4.2.js/script script type=text/javascript $(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; }); }) /script 【总结与体会】 通过完JQuery实验一，了解JQuery基本的选择器，对JQuery的开发环境的配置熟悉了一点，掌握简单的jQuery应用程序的编写。JQuery选择器：CSS选择器，层次选择器，过滤选择器：基本过滤，内容过滤，属性过滤，子元素过滤，表单过滤，表单对象属性过滤