JQurey第七章笔记.doc

第七章 7.1调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素，它的调用格式分别为： $(selector).hide(speed,[callback])和$(selector).show(speed,[callback]) 参数speed设置隐藏或显示时的速度值，可为“slow”、“fast”或毫秒数值，可选项参数callback为隐藏或显示动作执行完成后调用的函数名。 例如，在页面中，通过点击“显示”和“隐藏”两个按钮来控制图片元素的显示或隐藏状态，如下图所示： 在浏览器中显示的效果： 从图中可以看出，点击“显示”按钮时，可以将图片元素显示在页面中，点击“隐藏”按钮时，则将图片元素隐藏起来。 任务 我来试试，亲自通过点击“标题”显示或隐藏“标题”下的内容 在下列代码的第25和28行中，调用show()或hide()方法显示或隐藏正文。 不对：!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head title使用show()和hide()方法显示和隐藏元素/title script src=/jquery/1.9.0/jquery.js type=text/javascript/script link href=style.css rel=stylesheet type=text/css / /head body h3使用show()和hide()方法显示和隐藏元素/h3 div h4我喜欢吃的水果/h4 ul li苹果/li li甘桔/li li梨/li /ul input id=hidval type=hidden value=0/ /div script type=text/javascript $(function () { $(h4).bind(click, function () { if ($(#hidval).val() == 0) { $(ul).show(); $(#hidval).val(1); } else { #(ul).hide(); $(#hidval).val(0); } }); }); /script /body /html 7.2动画效果的show()和hide()方法 在上一小节中，调用show()和hide()方法仅是实现的元素的显示和隐藏功能，如果在这些方法中增加“speed”参数可以实现动画效果的显示与隐藏，同时，如果添加了方法的回调函数，它将在显示或隐藏执行成功后被调用。 例如，以动画的方式显示或隐藏页面中的图片，同时，当显示或隐藏完成时，对应的按钮状态将变为不可用，如下图所示： 在浏览器中显示的效果： 从图中可以看出，当以动画方式显示或隐藏图片时，图片在显示或隐藏过程中，则以动画效果按“speed”参数设置数字执行，完成后，调用回调函数中的代码。 任务 我来试试，亲自以动画的效果点击“标题”时显示或隐藏“正文”元素 在下列代码的第25和29行，以动画的效果显示或隐藏正文元素，并在方法的回调函数中，设置控制显示或隐藏状态的“hidval”元素值。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head titleshow()和hide()方法动画方式显示和隐藏元素/title script src=/jqu