文章目录
jQuery插件的概念
- 定义:插件是以JQuery的核心代码为基础,编写出的一套复合一定规范的应用程序
- 本质:JQuery代码
- 格式:以js文件的形式下载和引入
- 分类(按功能):
封装对象方法的插件:基于某个DOM元素的jq对象(局部)
封装全局函数的插件:(全局)
选择器插件:类似于find()
- 种类(列举):ul,表单和验证,输入,ajax,导航,图形图像等
插件引入时必须遵守的规定
1.必须引入样式
2.必须引入js并初始化
3.DOM必须符合规定,即插件和引入者的本地DOM结构要保持一致性
自定义选项卡插件tabs
原生js的选项卡:2021-06-24 css选项卡的实现
引入样式和js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 405px;
height: 330px;
margin: 0 auto;
}
li {
list-style-type: none;
width: 99px;
height: 30px;
background: turquoise;
text-align: center;
line-height: 30px;
float: left;
border-right: solid #cef5f0;
color: #ffffff;
}
li:nth-child(4) {
border-right: none;
}
/* li:hover {
background: rgb(255, 208, 0);
} */
.cont {
clear: left;
width: 100%;
height: 300px;
}
p {
width: 100%;
height: 100%;
background: #fff3e5;
display: none;
font-size: 40px;
line-height: 300px;
text-align: center;
color: lightcoral;
font-weight: bolder;
}
p:nth-child(1) {
display: block;
}
</style>
</head>
<body>
最低0.47元/天 解锁文章
258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
