1.jQuery——体会链式编程_设计一个导航栏

最新推荐文章于 2021-12-25 22:22:12 发布

在回忆里流浪

最新推荐文章于 2021-12-25 22:22:12 发布

阅读量181

点赞数

分类专栏： jQuery基础系列文章标签： jQuery 链式编程导航栏

本文链接：https://blog.csdn.net/qq_35574190/article/details/89158655

版权

jQuery基础系列专栏收录该内容

7 篇文章 0 订阅

订阅专栏

介绍几个链式编程的方法

addClass(类名)说明：为元素添加类样式

next()说明：获得元素其后紧邻的同辈元素

css(属性,属性值)

1.简单的链式编程程序一

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>导航栏</title>
<link rel="stylesheet" href="css/default.css" type="text/css" />

<!-- 引入 jQuery -->
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript">
$(function(){
	$(".level1 >a").click(function(){
		$(this).addClass("current").next().show().parent().siblings().children("a")
		.removeClass("current").next().hide();
	});
});
</script>

</head>
<body>
<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>
				<li><a href="#none">运动卫衣</a></li>
				<li><a href="#none">童装卫衣</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>
				<li><a href="#none">牛仔裤</a></li>
				<li><a href="#none">免烫卡其裤</a></li>
			</ul>
		</li>
	</ul>
</div>
</body>
</html>

2.简单的链式编程程序一程序说明

$(".level1 >a").click(function(){
        $(this).addClass("current").next().show().parent().siblings().children("a")
        .removeClass("current").next().hide();
    });

①：$(".level1 >1").click：查找class为level1的元素内紧邻的a元素的点击事件

②：$(this):当前点击的元素

③：addClass("current")：为元素添加类样式

④：next().show()：获得元素其后紧邻的同辈元素进行显示

⑤：.parent().siblings().children("a")：父级元素里面相邻里面的a元素

⑥：.removeClass("current")：移除元素的类样式

⑦：.next().hide()：获得元素其后紧邻的同辈元素进行隐藏

3.简单的链式编程程序二

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
    <title>问答特效</title>
    <style type="text/css">
        h2
        {
            padding: 5px;
        }
        p
        {
            display: none;
        }
    </style>
    <script src="js/jquery-1.8.3.js" type="text/javascript"></script>
  <script type="text/javascript">
  	$(function(){
  		$("h2").click(function(){
  			$("h2").css("background-color","#CCFFFF").next().css("display","block");
  		});
  	});
  </script>
</head>
<body>
    <h2>
        当前软件开发有哪些主流语言?</h2>
    <p>
        <strong>解答：</strong> .NET/C#、Java、PHP等等。
    </p>
</body>
</html>

4.简单的链式编程程序二程序说明

利用css设置(属性,属性值)

在回忆里流浪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.jQuery——体会链式编程_设计一个导航栏

介绍几个链式编程的方法addClass(类名)说明：为元素添加类样式next()说明：获得元素其后紧邻的同辈元素css(属性,属性值)1.简单的链式编程程序一<!DOCTYPE html><html><head><meta charset="utf-8" /><title>导航栏</title>...
复制链接

扫一扫