jQuery—链式操作

最新推荐文章于 2022-01-23 13:20:23 发布

原创

最新推荐文章于 2022-01-23 13:20:23 发布 · 487 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #链式操作

这篇博客通过实例展示了如何使用jQuery的链式操作来高效地实现导航栏功能，强调了良好的代码层次结构和规范的重要性。文中提出了优化链式操作的三个建议：(1)对同一对象的操作不超过3个；(2)对于多个操作，每行一个；(3)对于多个对象，每个对象一行，适当考虑子元素处理。

以导航栏为例，单击不用的商品名称链接，显示对应的内容，同时高亮当前选择的商品。

HTML 代码如下：

		<div class="box">
			<ul class="menu">
				<li class="level1">
					<a href="#none">衬衫</a>
					<ul class="level2">
						<li><a href="#none">长袖衬衫</a></li>
						<li><a href="#none">短袖衬衫</a></li>
						<li><a href="#none">短袖T恤</a></li>
						<li><a href="#none">长袖T恤</a></li>
					</ul>
				</li>
				<li class="level1">
					<a href="#none">裤子</a>
					<ul class="level2">
						<li><a href="#none">长裤</a></li>
						<li><a href="#none">短裤</a></li>
					</ul>
				</li>
				<li class="level1">
					<a href="#none">裙子</a>

最低0.47元/天解锁文章