html--前端jquery基础实例
一、左边的菜单栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>left_menu</title>
<style>
body{
margin: ;
}
.hide{
display: none;
}
.top{
height: 48px;
background-color: darkturquoise;
}
.outer{
float: left;
width: %;
height: 600px;
background-color: darkgray;
}
.outer .menu .title{
border: 1px solid darkcyan;
background-color: darkcyan;
}
.content{
float: left;
width: %;
background-color: bisque;
height: 600px;
}
</style>
<script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<div class="top"></div>
<div class="outer">
<div class="menu">
<div class="title" onclick="Show(this);">菜单一</div>
<ul class="con">
<li>菜单一中的功能一</li>
<li>菜单一中的功能二</li>
<li>菜单一中的功能三</li>
</ul>
</div>
<div class="menu">
<div class="title" onclick="Show(this);">菜单二</div>
<ul class="con hide">
<li>菜单二中的功能一</li>
<li>菜单二中的功能二</li>
<li>菜单二中的功能三</li>
</ul>
</div>
<div class="menu">
<div class="title" onclick="Show(this);">菜单三</div>
<ul class="con hide">
<li>菜单三中的功能一</li>
<li>菜单三中的功能二</li>
<li>菜单三中的功能三</li>
</ul>
</div>
</div>
<div class="content"></div> <script>
function Show(self) {
$(self).next().removeClass("hide");
$(self).parent().siblings().find(".con").addClass("hide");
}
</script> </body>
</html>
结果图示
二、tab栏切换实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquer_tab</title>
<script src="js/jquery-3.4.1.js"></script>
<style>
*{
margin: ;
padding: ;
}
.current{
background-color: cornflowerblue;
color: white;
}
.tab{
height: 40px;
background-color: darkgray;
}
li{
display: inline;
list-style: none;
padding: 20px; }
.outer{
width: %;
margin: auto;
height: 300px;
background-color: bisque;
}
.content{
height: auto;
padding: 50px;
background-color: darkcyan; }
.hide{
display: none;
}
</style>
</head>
<body> <div class="outer">
<ul class="tab">
<li sel="c1" class="current" onclick="Tab(this);">菜单一</li>
<li sel="c2" onclick="Tab(this);">菜单二</li>
<li sel="c3" onclick="Tab(this);">菜单三</li>
</ul>
<div class="content">
<div id="c1">我是菜单一的内容</div>
<div id="c2" class="hide">我是菜单二的内容</div>
<div id="c3" class="hide">我是菜单三的内容</div>
</div>
</div> <script>
function Tab(self) {
$(self).addClass("current").siblings().removeClass("current");
var index = $(self).attr("sel");
$("#"+index).removeClass("hide").siblings().addClass("hide");
}
</script> </body>
</html>
结果图示
三、隐藏/显示、渐变控制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隐藏/显示</title>
<script src="js/jquery-3.4.1.js"></script>
</head>
<body> <p>I'm yusheng_liang,I studying jquery</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">隐藏/显示</button> <script>
//隐藏
$("#hide").click(function () {
$("p").hide();
})
//显示
$("#show").click(function () {
$("p").show();
}) $("#toggle").click(function () {
$("p").toggle()
})
</script> </body>
</html>
结果图示
四、轮播图实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<script src="js/jquery-3.4.1.js"></script>
<style>
*{
margin: ;
padding: ;
}
ul li{
list-style: none;
}
.outer{
width: 200px;
height: 200px;
border: dashed cadetblue 5px;
margin: auto;
position: relative;
}
.outer .img li{
position: absolute;
left: ;
top: ;
cursor: pointer;
}
.num{
position: absolute;
left: ;
/*top: 0;*/
bottom: 5px;
font-size: 0px;
text-align: center;
width: %;
}
.num li{
height: 18px;
width: 18px;
background-color: aqua;
border-radius: %;
text-align: center;
display: inline-block;
font-size: 14px;
margin: 5px;
cursor: pointer;
}
.but{
height: 40px;
width: 20px;
background-color: bisque;
position: absolute;
/*left: 0px;*/
top: %;
margin-top: -20px;
opacity: 0.6;
font-size: 20px;
font-weight: bolder;
display: none;
}
.btn_right{
right: ;
}
.outer:hover .but{
display: block;
}
.outer .num li.current{
background-color: red;
}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li><img src="data:image/1.jpg"></li>
<li><img src="data:image/2.jpg"></li>
<li><img src="data:image/4.jpg"></li>
<li><img src="data:image/5.jpg"></li>
</ul>
<ul class="num">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<button class="btn_left but"> < </button>
<button class="btn_right but"> > </button>
</div> <script>
$(".num li").first().addClass("current");
$(".num li").mouseover(function () {
$(this).addClass("current").siblings().removeClass("current");
var index = $(this).index();
i = index;
$(".img li").eq(index).fadeIn().siblings().fadeOut();
}); i = ;
var time = setInterval(autoShow,);
function autoShow() {
i++;
if(i == ){
i = ;
}
$(".num li").eq(i).addClass("current").siblings().removeClass("current");
$(".img li").eq(i).fadeIn().siblings().fadeOut();
}
$(".outer").hover(function () {
clearInterval(time);
},function () {
time = setInterval(autoShow,);
}) $(".btn_right").click(function () {
autoShow();
})
$(".btn_left").click(function () {
if(i == ){
i = ;
}
i = i - ;
autoShow();
}) </script>
</body>
</html>
结果图示
五、模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模态对话框</title>
<script src="js/jquery-3.4.1.js"></script>
<style>
.shade{
position: fixed;
left: ;
top: ;
bottom: ;
right: ;
background: rgba(,,,.);
z-index:
}
.model{
position: fixed;
left: %;
top:%;
height: 200px;
width: 300px;
margin-top: -100px;
margin-left: -150px;
z-index: ;
background-color: white; }
.hide{
display: none;
}
</style>
</head>
<body>
<input type="button" value="添加" onclick="Add();"/>
<div>
<table border="">
<thead>
<tr>
<th>主机名</th>
<th>IP</th>
<th>端口</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td target="host">web1</td>
<td target="ip">10.160.25.26</td>
<td target="port"></td>
<td onclick="Edit(this);">编辑</td>
</tr>
<tr>
<td target="host">web2</td>
<td target="ip">10.160.25.27</td>
<td target="port"></td>
<td onclick="Edit(this);">编辑</td>
</tr>
<tr>
<td target="host">web3</td>
<td target="ip">10.160.25.28</td>
<td target="port"></td>
<td onclick="Edit(this);">编辑</td>
</tr>
<tr>
<td target="host">web4</td>
<td target="ip">10.160.25.29</td>
<td target="port"></td>
<td onclick="Edit(this);">编辑</td>
</tr>
</tbody>
</table>
</div>
<div class="shade hide"></div>
<div class="model hide">
<form action="" method="post">
<p><input type="text" name="host" id="host"></p>
<p><input type="text" name="ip" id="ip"></p>
<p><input type="text" name="port" id="port"></p>
<input type="submit" value="提交">
<input type="button" value="取消" onclick="HideModel();">
</form>
</div> <script>
function Edit(ths) {
$(".model,.shade").removeClass("hide");
var preList = $(ths).prevAll();
preList.each(function () {
var text = $(this).text();
var target = $(this).attr('target');
$("#"+ target).val(text);
});
}
function HideModel() {
$(".model,.shade").addClass("hide");
$(".model").find('input[type="text"]').val("");
}
function Add() {
$(".model,.shade").removeClass("hide");
}
</script>
</body>
</html>
结果图示
六、jquery_clone应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clone方法的应用</title>
<script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<div class="outer">
<div class="section">
<div class="icons" style="display: inline-block">
<a onclick="AddClone(this);"><button>+</button></a>
</div>
<div class="inputs" style="display: inline-block">
<input type="checkbox">
<input type="text" value="请输入内容">
</div>
</div>
</div> <script>
function AddClone(self) {
var items = $(self).parent().parent().clone();
$(".outer").append(items);
items.find("a").children().text("-");
items.find("a").attr("onclick","Remove8(this);")
}
function Remove8(self) {
$(self).parent().parent().remove();
}
</script> </body>
</html>
结果图示
html--前端jquery基础实例的更多相关文章
- web前端----jQuery基础语法
一.jQuery基础1.为什么要用jquery? 写起来简单,省事,开发效率高,兼容性好2.什么是jQuery? jQuery是一个兼容多浏览器的JavaScript库(类似python里面的模块)3 ...
- Web前端JQuery基础
JQuery知识汇总 一.关于Jquery简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaS ...
- 【jQuery基础学习】09 jQuery与前端（这章很水）
这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...
- Web前端学习笔记之jQuery基础
0x0 jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Aja ...
- JQuery基础原理 与实例 验证表单 省市联动 文本框判空 单选 复选 判空 下拉判空 确认密码判等
JQuery 基础原理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- 【前端】之jQuery基础知识
jQuery 简介 在项目中引入jQuery: 去jQuery官网下载jQuery包:jquery-3.2.1.min.js 将下载的jQuery包添加到项目目录中 在标签下添加jQuery引用:&l ...
- Web前端-Ajax基础技术(上)
Web前端-Ajax基础技术(上) ajax是浏览器提供一套的api,用于向服务器发出请求,接受服务端返回的响应,通过javascript调用,实现通过代码控制请求与响应,实现网络编程. ajax发送 ...
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- JQuery基础知识梳理篇
这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器 介绍 jque ...
随机推荐
- HMM AND CRF
Structured Learning 4: Sequence Labeling:https://www.youtube.com/watch?v=o9FPSqobMys HMM crf 李宏毅老师讲的 ...
- Python爬取糗事百科示例代码
参考链接:http://python.jobbole.com/81351/#comment-93968 主要参考自伯乐在线的内容,但是该链接博客下的源码部分的正则表达式部分应该是有问题,试了好几次,没 ...
- 修改设置notepad++默认保存文件格式
设置notepad++保存文件的默认格式 在使用notepad++新建文件保存后,有的时候会有一个all type 然后没有文件扩展名,很不方便 网上有很多帖子都是如下图所示的提示,但是却不生效
- MySQL优化常见Extra分析——慢查询优化
数据准备: create table user ( id int primary key, name ), sex ), index(name) )engine=innodb; 数据说明:用户表:id ...
- Spring-AOP源码分析随手记(一)
1.@EnableAspectJAutoProxy(proxyTargetClass = true) 就是弄了个"org.springframework.aop.config.interna ...
- linq,skip(),take实现分页
using (AdventureWorks2012Entities db = new AdventureWorks2012Entities()) { int num = (from stu in db ...
- Gtksharp编译时提示下载gtk文件问题
Gtksharp编译时提示下载gtk文件问题 1.昨天晚上新建gtksharp项目之后,安装gtksharp之后,编译时无法成功,提示无法下载gtk-3.24.zip 2.记得前几天,另一个项目可以生 ...
- ArcGIS Server JavaScript API中ESRI字体下载
---------------------------------------------------------------------------------- import sys, os im ...
- iis7 下配置 ASP.NET MVC 项目遇到的问题 （WIN7 64位 旗舰版 第一次配置站点）
转自 https://www.cnblogs.com/Leo_wl/p/3866625.html,再次感谢 指定的目录或文件在 Web 服务器上不存在. URL 拼写错误. 某个自定义筛选器或模块(如 ...
- C 补充
a++与++a的区别 #include <stdio.h> void main(){ int a=5,b=5; int i=0; for(i=0;i<2;i++){ printf(& ...