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
-
地址
https://jquery.com/download/- 复制原文件，创建JavaScript文件粘贴即可
1.2 jQuery语法
-
基础语法： $(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询"和"查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
2 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>Titletitle>
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>Titletitle>
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>Titletitle>
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>Titletitle>
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>Titletitle>
head>
<body>
输入你的名字: <input type="text">
<p>按键的次数: <span>0span>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>Titletitle>
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>Titletitle>
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>Titletitle>
<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>Titletitle>
<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>Titletitle>
<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>Titletitle>
<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
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.div-a1{
width: 200px;
height: 200px;
background-color: orange;
}
style>
head>
<body>
<div class="div-a1">1div>
<div class="div-a1" style="display: none">2div>
<div class="div-a1">3div>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
span{
display: block;
}
style>
head>
<body>
<h1>我是一个标题h1>
<span>大家好span>
<span>我是一段文字span>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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>Titletitle>
<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>Titletitle>
<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>Titletitle>
<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>Titletitle>
<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="#">链接 1a>
<a href="#">链接 2a>
<a href="#">链接 3a>
div>
div>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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="#">链接 1a>
<a href="#">链接 2a>
<a href="#">链接 3a>
div>
div>
<li style="float: right"><a href="#" class="active">登录a>li>
ul>
body>
html>
