初学强大的JQuery

最新推荐文章于 2022-02-17 11:13:24 发布

Lucky-肥仔

最新推荐文章于 2022-02-17 11:13:24 发布

阅读量967

点赞数

分类专栏：前端

坚持写博客

本文链接：https://blog.csdn.net/lifen0908/article/details/47100525

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

我们知道JavaScript是一种脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。为浏览器的一部分，广泛的用于客户端的脚本语言，最早是在HTML网页上的使用，用来给HTML网页增加动态的功能。

而JQuery就是一套跨浏览器的JavaScript库，简化了HTML和JavaScript之间的操作。也就是把JS的封装了起来。在我们敲的例子中，我们都在HTML的页面中引用一个jquery.js，因为有他，我们在我们要敲的js中可以轻松的使用$符号来实现他的功能。

横向和纵向的菜单在网页中的应用比较多，现在我们用这个例子来更好的说明。

HTML代码：

<span style="font-size:18px;"><!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>
<meta http-equiv="Content-Type" content="text/html;charset-gb2312"/>
		<title>JQuery菜单效果</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link type="text/css" rel="stylesheet" href="css/menu.css" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/menu.js"></script>
	</head>
	<body>
	    <ul>
		   <li class="main">
		          <a href="##">菜单项1</a>
			   <ul>
			      <li>
				  <a href="##">
				  子菜单项11</a></li>
				  <li>
				  <a href="a">
				  子菜单项12</a></li>
				  <li>
				  <a href="a">
				  子菜单项13</a></li>
			   </ul>
		   </li>
		   <li class="main">
			      <a href="a">菜单项2</a>
			    <ul>
				<li>
			      <a href="a">
				  子菜单项21</a></li>
				  <li>
				  <a href="a">
				  子菜单项22</a></li>
				  <li>
				   <a href="a">
				  子菜单项23</a></li>
			    </ul>
		   </li>
		   <li class="main">
		        <a href="a">菜单项3</a>
			   <ul>
			      <li>
			      <a href="a">
				  子菜单项31</a></li>
				  <li>
				  <a href="a">
				  子菜单项32</a></li>
				  <li>
				   <a href="a">
				  子菜单项33</a></li>
			   </ul>
		   </li>
		 </ul>
	    <br />
		<br />
		<br />
		<ul>
		   <li class="hmain">
		          <a href="##">菜单项1</a>
			   <ul>
			      <li>
				  <a href="##">
				  子菜单项11</a></li>
				  <li>
				  <a href="#">
				  子菜单项12</a></li>
				  <li>
				  <a href="#">
				  子菜单项13</a></li>
			   </ul>
		   </li>
		   <li class="hmain">
			      <a href="#">菜单项2</a>
			    <ul>
				<li>
			      <a href="#">
				  子菜单项21</a></li>
				  <li>
				  <a href="#">
				  子菜单项22</a></li>
				  <li>
				   <a href="#">
				  子菜单项23</a></li>
			    </ul>
		   </li>
		   <li class="hmain">
		        <a href="#">菜单项3</a>
			   <ul>
			      <li>
			      <a href="#">
				  子菜单项31</a></li>
				  <li>
				  <a href="#">
				  子菜单项32</a></li>
				  <li>
				   <a href="#">
				  子菜单项33</a></li>
			   </ul>
		   </li>
		 </ul>
	</body>
</html>
</span>

接下来我们看一下CSS代码：

<span style="font-size:18px;">ul,li{
    /*标签选择器.清除前面的小圆点*/ 
   list-style:none; 
}
ul{
    padding:0px;
	margin:0px;
}

.main,.hmain{
  background-image:url(../images/title.gif);
  background-repeat:repeat-x;
  width:130px;
}

li{
   background-color:#EFEFEF;
}
a{
   text-decoration:none;//去掉超链接的下划线  
   display:block;
   display:inline-block;
   width:100px;
   padding-bottom:3px;
   padding-top:3px;
   padding-left:20px;
}

.main a,.hmain a{
   color:white;
   background-image:url(../images/collapsed.gif);
   background-repeat:no-repeat;
   background-position:3px center;
}
.main li a,.hmain li a{
   color:black;
  background-image:none;
   
}
.main ul,.hmain ul{
  display:none;
}

.hmain{
  float:left;  //浮动
 margin-right: 1px;
}</span>

我们要实现的很多动态效果，都是用我们的JS来实现的，下面是JS的代码：

$(document).ready(function(){
	//页面中的DOM已经装载完了执行的代码
	$(".main > a").click(function(){
		//找到主菜单项对应的子菜单项目
		var ulNode = $(this).next("ul");
		ulNode.slideToggle();
		changeIcon($this);
	});

	$(".hmain").hover(function(){
		$(this).children("ul").slideDown();
		changeIcon($(this).children("a"));
	},function(){
		$(this).children("ul").slideUp();
		changeIcon($(this).children("a"));
	});
});




//修改主菜单的指示图标
function changeIcon(mainNode) {
	if (mainNode) {
		if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
			mainNode.css("background-image","url('images/expanded.gif')");
		} else {
			mainNode.css("background-image","url('images/collapsed.gif')");
		}
	}
}

在JS的代码中，我们可以看到我们的美元$,他已经成功的代替了我们的document.getElementById()。

我们还看到了很多的HTML元素，就是通过对这些css的元素的操作，来达到动态的效果的。下面我们看一下具体的效果：

工厂函数（$/#等）、便利函数（each）、事件机制（onclick事件）、get/set方法等都是如此的强大。对他的理解，还需要更加的深入。

Lucky-肥仔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
30
评论
初学强大的JQuery

我们知道JavaScript是一种脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。为浏览器的一部分，广泛的用于客户端的脚本语言，最早是在HTML网页上的使用，用来给HTML网页增加动态的功能。而JQuery就是一套跨浏览器的JavaScript库，简化了HTML和JavaScript之间的操作。也就是把JS的封装了起来。在我们敲的例子中，我们都在HTML的
复制链接

扫一扫