----jQuery基础语法
1.jQuery选择器
jQuery选择器可用改变HTML元素的CSS属性。如下代码选择页面中所有的p标签并改变其背景颜色为红色。
$(“p”).css(“background-color”,“red”);
jQuery根据CSS中相应的选择器,来操作HTML页面中的节点,列如上面的列子中,$(“p”)该代码是使用元素选择器来选择页面
中所有p标签。我们还可以使用id,类或组合选择器,甚至还可以添加:first,last,even,odd这样的后缀来匹配第一个,最后一个,偶数,奇数元素来操作HTML节点。
2.jQuery基础语法:
jQuery的选择机制构建于CSS的选择器,它提供了快速查询DOM文档中元素的能力,而且大大强化了JavaScript中获取页面元素的方式。
jQuery语法是为HTML元素的选取编制的,可以对元素执行某些操作。
基础语法:
(
s
e
l
e
c
t
o
r
)
.
a
c
t
i
o
n
(
)
.
美
元
符
号
“
(selector).action() .美元符号“
(selector).action().美元符号“”定义jQuery
.选择器(selector)“查询”和“查找”HTML元素。
jQuery的action()执行对元素的操作。
selector:“查询和查找”html元素
action:执行操作
例子:p.style.background
用无序列表实现二级导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
*{margin:0; padding:0;}
#nav{background-color: #e9efa3;
width:600px;
height:20px;
margin:0 auto;
}
ul li{
text-decoration: none;float:left;line-height: 20px;text-align: center;margin:0 auto;position:relative;
}
a{text-decoration: none;color:#33bba5;padding:0 10px;width:100px;}
a:hover{
background-color: antiquewhite;color: #55f0ff;
}
ul li ul{position:absolute;top:20px;left:0px;}
ul li ul li{float:none;background-color: #c5ffb8;margin:1px 0;display:none;}
ul li ul li a{padding:0px;}
ul li:hover ul li{display:block;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程大厅</a>
<ul>
<li><a href="#">web实战</a></li>
<li><a href="#">服务端技术</a></li>
<li><a href="#">python开发</a></li>
</ul>
</li>
<li><a href="#">学习中心</a></li>
<li><a href="#">经典案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</body>
</html>
效果如下
JS实现二级导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0;padding: 0}
#nav{background-color: #ff5e48;width: 600px;height: 20px;margin: 0 auto;}
ul li{list-style: none;float: left;line-height: 20px;text-align: center;position: relative}
a {text-decoration: none;color: #c8e1de;padding: 0 20px;width: 100px}
a:hover{background-color: #669900;color: #eee4cc}
ul li ul{position: absolute;top: 20px;left: 0px}
ul li ul li{float: none;background-color: #f2b179;margin: 1px 0;display: none}
ul li ul li a{padding: 0;}
ul li:hover ul li{display: block}
</style>.
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a>
<ul>
<li><a href="#">web网页战术</a></li>
<li><a href="#">web网页战术</a></li>
<li><a href="#">web网页战术</a></li>
</ul>
</li>
<li><a href="#">课程大厅</a>
<ul>
<li><a href="#">web网页战术</a></li>
<li><a href="#">服务端技术</a></li>
<li><a href="#">python开发</a></li>
</ul>
</li>
<li><a href="#">学习中心</a>
<ul>
<li><a href="#">web网页战术</a></li>
<li><a href="#">web网页战术</a></li>
<li><a href="#">web网页战术</a></li>
</ul>
</li>
<li><a href="#">经典案例</a>
<ul>
<li><a href="#">web网页战术</a></li>
<li><a href="#">web网页战术</a></li>
<li><a href="#">web网页战术</a></li>
</ul>
</li>
<li><a href="#">关于我们</a>
<ul>
<li><a href="#">web网页战术</a></li>
<li><a href="#">web网页战术</a></li>
<li><a href="#">web网页战术</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>