jquery基础和导航栏
jquery基础和导航栏功能
·
jquery基础和导航栏
目录
1 jQuery基础
2 jQuery事件
3 jQuery影藏和显示
4jQuery滑动
5、区块属性
6、导航栏
1 jQuery基础
-
介绍
- jQuery 是一个 JavaScript 库。
- jQuery 极大地简化了 JavaScript 编程。
- jQuery 很容易学习。
-
基础语法：
$(selector).action()- 美元符号定义 jQuery
- 选择符（selector）“查询"和"查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
1.1 安装jQuery
1.2 jQuery语法
2 jQuery事件
-
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>张三</li> <li>李四</li> <li>王五</li> </ul> <script src="static/js/jquery-3.7.1.js"></script> <script> $("li").click(function () { var text = $(this).text(); alert(text) } ) </script> </body> </html> -
jQuery常用事件
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
2.1 鼠标事件
-
鼠标单击-click
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>点我</p> <script src="static/js/jquery-3.7.1.js"></script> <script> $(document).ready(function () { $("p").click(function () { alert("段落被点击了。"); }); }); </script> </body> </html> -
鼠标双击-dblclick
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>点我</p> <script src="static/js/jquery-3.7.1.js"></script> <script> $(document).ready(function () { $("p").dblclick(function () { alert("这个段落被双击。"); }); }); </script> </body> </html> -
鼠标移动-mouseenter
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>过来</p> <script src="static/js/jquery-3.7.1.js"></script> <script> $(document).ready(function () { $("p").mouseenter(function () { $("p").css("background-color", "yellow"); }); $("p").mouseleave(function () { $("p").css("background-color", "lightgray"); }); }); </script> </body> </html> -
鼠标移出-mouseleave
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>过来</p> <script src="static/js/jquery-3.7.1.js"></script> <script> $(document).ready(function () { $("p").mouseenter(function () { $("p").css("background-color", "yellow"); }); $("p").mouseleave(function () { $("p").css("background-color", "red"); }); }); </script> </body> </html>
2.2 键盘事件
-
输入次数-keypress
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 输入你的名字: <input type="text"> <p>按键的次数: <span>0</span></p> <script src="static/js/jquery-3.7.1.js"></script> <script> i = 0; $(document).ready(function () { $("input").keypress(function () { $("span").text(i += 1); }); }); </script> </body> </html> -
按下某键-keydown
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 输入你的名字: <input type="text"> <p>在以上输入框中输入你的名字。在按键按下后输入框背景颜色会改变。</p> <script src="static/js/jquery-3.7.1.js"></script> <script> $(document).ready(function () { $("input").keydown(function () { $("input").css("background-color", "yellow"); }); $("input").keyup(function () { $("input").css("background-color", "pink"); }); }); </script> </body> </html> -
松开某键-keyup
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 输入你的名字: <input type="text"> <p>在以上输入框中输入你的名字。在按键按下后输入框背景颜色会改变。</p> <script src="static/js/jquery-3.7.1.js"></script> <script> $(document).ready(function () { $("input").keydown(function () { $("input").css("background-color", "yellow"); }); $("input").keyup(function () { $("input").css("background-color", "pink"); }); }); </script> </body> </html>
3 jQuery影藏显示
3.1 hide()与show()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color: #3e8f3e;
height: 25px;
width: 350px;
}
</style>
</head>
<body>
<div>如果你点击“隐藏” 按钮，我将会消失。</div>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<script src="static/js/jquery-3.7.1.js"></script>
<script>
$(document).ready(function () {
$("#hide").click(function () {
$("div").hide(1000);
});
$("#show").click(function () {
$("div").show(1000);
});
});
</script>
</body>
</html>
3.2 toggle()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
background-color: #3e8f3e;
height: 25px;
width: 350px;
}
</style>
</head>
<body>
<div>如果你点击“隐藏” 按钮，我将会消失。</div>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<script src="static/js/jquery-3.7.1.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("div").toggle(1000);
});
});
</script>
</body>
</html>
4 jQuery滑动
4.1 slideToggle()
-
slideToggle()方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
-
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #panel, #flip { padding: 5px; text-align: center; background-color: #e5eecc; border: solid 1px #c3c3c3; } #panel { padding: 50px; display: none; } </style> </head> <body> <div id="flip">点我，显示或隐藏面板。</div> <div id="panel">Hello world!</div> <script src="static/js/jquery-3.7.1.js"></script> <script> $(document).ready(function () { $("#flip").click(function () { $("#panel").slideToggle("slow"); }); }); </script> </body> </html>https://layui.dev/
5、区块属性
5.1 css Overflow
- CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div-a1{
width: 500px;
height: 200px;
background-color: pink;
border: 1px solid black;
overflow: scroll;
}
</style>
</head>
<body>
<div class="div-a1">
<p>我是div当中的内容</p>
<p>我是div当中的内容</p>
<p>我是div当中的内容</p>
<p>我是div当中的内容</p>
<p>我是div当中的内容</p>
<p>我是div当中的内容</p>
<p>我是div当中的内容</p>
<p>我是div当中的内容</p>
</div>
</body>
</html>
5.2 css display
- 隐藏元素 - display:none
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div-a1{
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<div class="div-a1">1</div>
<div class="div-a1" style="display: none">2</div>
<div class="div-a1">3</div>
</body>
</html>
- 块级元素 display: block;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
display: block;
}
</style>
</head>
<body>
<h1>我是一个标题</h1>
<span>大家好</span>
<span>我是一段文字</span>
</body>
</html>
- 内联元素 display:inline
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li{
display: inline;
}
</style>
</head>
<body>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>
5.3 垂直水平居中
- 文本居中：text-align: center;
- div水平居中：margin: auto;提前设置 width 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div-a1{
width: 50%;
height: 200px;
background-color: pink;
border: 1px solid black;
margin: auto;
text-align: center;
padding: 100px 0;
}
</style>
</head>
<body>
<div class="div-a1">
<p>我是div当中的内容</p>
</div>
</body>
</html>
6、导航栏
6.1 基本导航栏
- 导航栏=链接列表
<style>
ul {
list-style-type:none;
margin:0;
padding:0;
}
a{
display: block;
width: 50px;
background-color: rgba(185, 223, 223, 0.68);
}
</style>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
</ul>
6.2 垂直导航栏
- 垂直分布，需要使用块级元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
list-style-type: none;
margin: 0;
padding: 0;
background-color: #f1f1f1;
width: 150px;
height: 100%;
position: fixed;
}
a{
display: block;
padding: 5px 16px;
text-decoration: none;
color: black;
}
a:hover{
background-color: black;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
</ul>
<div style="margin-left:100px;padding:1px 16px;">
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
<p>我是一个段落标签</p>
</div>
</body>
</html>
6.3 水平导航栏
- 水平分布，需要使用内联元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
position: fixed;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
top:0;
width: 100%;
}
li{
float: left;
}
a{
display: block;
width: 50px;
color: white;
text-decoration: none;
padding: 16px 12px;
}
a:hover:not(.active){
background-color: black;
}
.active{
background-color: rebeccapurple;
text-align: center;
}
</style>
</head>
<body>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
<li style="float: right"><a href="#" class="active">登录</a></li>
</ul>
<div style="padding:20px;margin-top:30px">
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
<p>我是一个段落</p>
</div>
</body>
</html>
6.4 搭配下拉菜单
- 实现下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.dropdown{
display: inline-block;
}
.dropdown-content{
display: none;
position: absolute;
}
.dropdown-content a{
text-decoration:none;
display:block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display:block;
}
</style>
</head>
<body>
<div class="dropdown">
<a href="#">下拉菜单</a>
<div class="dropdown-content">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
</div>
</body>
</html>
- 导航栏当中嵌套下拉框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .drop-btn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover, .drop-btn {
background-color: #111;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
a:hover:not(.active) {
background-color: black;
}
.active {
background-color: rebeccapurple;
text-align: center;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown-content a {
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
<div class="dropdown">
<a href="#" class="drop-btn">下拉菜单</a>
<div class="dropdown-content">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
</div>
<li style="float: right"><a href="#" class="active">登录</a></li>
</ul>
</body>
</html>
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
8
0- 0
已为社区贡献1条内容
所有评论(0)