jquery选择器

最新推荐文章于 2024-09-05 15:53:15 发布

最新推荐文章于 2024-09-05 15:53:15 发布 · 72 阅读

文章标签：

#jQuery #CSS #JavaScript #XHTML #HTML #ViewUI

本文通过一个具体的示例展示了如何使用jQuery选择特定的DOM元素，并应用隐藏和显示的效果。此外，还介绍了如何为页面元素添加点击事件，实现商品列表的展开与收起效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>jquery选择器</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> #SubCategory { width:150px; font-size:12px; line-height:20px; } </style> <mce:script type="text/javascript" src="jquery-1[1].3.2.min.js" mce_src="jquery-1[1].3.2.min.js"></mce:script> </head> <body> <mce:script type="text/javascript"></mce:script> <div id="SubCategory"> <ul> <li><a href="#" mce_href="#">佳能</a><i>(2300)</i></li> <li><a href="#" mce_href="#">索尼</a><i>(2300)</i></li> <li><a href="#" mce_href="#">松下</a><i>(2300)</i></li> <li><a href="#" mce_href="#">尼康</a><i>(2300)</i></li> <li><a href="#" mce_href="#">卡西欧</a><i>(2300)</i></li> <li><a href="#" mce_href="#">富士</a><i>(2300)</i></li> <li><a href="#" mce_href="#">柯达</a><i>(2300)</i></li> <li><a href="#" mce_href="#">宾得</a><i>(2300)</i></li> <li><a href="#" mce_href="#">理光</a><i>(2300)</i></li> <li><a href="#" mce_href="#">明基</a><i>(2300)</i></li> <li><a href="#" mce_href="#">爱国者</a><i>(2300)</i></li> <li><a href="#" mce_href="#">其他品牌</a><i>(2300)</i></li> </ul> </div> <div class="ShowMore"> <a href="jCss.htm" mce_href="jCss.htm"><span>显示所有商品</span></a> </div> </body> </html>

jquery