您的位置：首页 > 其它

web实训知识点0326

2019-03-30 13:50 176 查看

jQuery
1.jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作；
2.基础语法是：$(selector).acti
on()
<1>美元符号定义 jQuery
<2>选择符（selector）“查询”和“查找” HTML 元素
<3>jQuery 的 action() 执行对元素的操作
示例1:
$(this).hide() - 隐藏当前元素
$(“p”).hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class=“test” 的所有元素
$("#test").hide() - 隐藏所有 id=“test” 的元素
示例2 jQ基础应用：

用代码实现：

<body>
<p>123</p>
<p>123</p>
<p>123</p>
<span>123</span>
<span>123</span>
<span>123</span>
<a>123456</a>
<a>123456</a>
<a>123456</a>
<script type="text/javascript">
var pl = document.getElementsByTagName("p")
for(var i=0;i<pl.length;i++) {
pl[i].style.backgroundColor = '#CCC'
pl[i].style.width = '50px'
pl[i].style.height = '50px'
}
$("a").css({color: "#ff0011",background: "blue"});
$("span").css("background-color","red").css('color','blue')
</script>
</body>

JavaScript
用JavaScript来实现导航栏的二级菜单；

用代码来实现此二级导航栏；
在body标签里的代码：

<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程大厅</a>
<ul>
<li><a href="#">web网页实战</a>
<ul>
<li><a href="#">web1</a></li>
<li><a href="#">web2</a></li>
<li><a href="#">web3</a></li>
</ul>
</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>

在head标签里的代码：

<style type="text/css">
*{
margin: 0;
padding: 0;
}
#nav{
background-color: #2ba949;
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: #f5fcff;
padding: 0 20px;
width: 100px;
}
a:hover{
background-color: #78a95c;
color: #77e55d;
}
ul li ul{
position: absolute;
top:20px;
left: 0px;
}
ul li ul li{
float: none;
width: 100px;
background-color: #09ff26;
margin: 1px 0;
display: none;
}
ul li ul li a{
padding: 0;
}
ul li:hover li{
display: block;
}
</style>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航