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 ...
随机推荐
- MySQL实战45讲学习笔记：第四十二讲
一.本节概述 在 MySQL 里面,grant 语句是用来给用户赋权的.不知道你有没有见过一些操作文档里面提到,grant 之后要马上跟着执行一个 flush privileges 命令,才能使赋权语 ...
- phpize安装PHP扩展
安装编译完成php源码后忘记安装一些扩展可以通过phpize来安装 拿lnmp1.6安装举例 安装完成lnmp后发现有些扩展没有 lnmp1.6的安装脚本会在lnmp1.6里生成src,里面是lnmp ...
- TensorFlow函数: tf.stop_gradient
停止梯度计算. 在图形中执行时,此操作按原样输出其输入张量. 在构建计算梯度的操作时,这个操作会阻止将其输入的共享考虑在内.通常情况下,梯度生成器将操作添加到图形中,通过递归查找有助于其计算的输入来计 ...
- mycat 白话配置
1.server.xml <user name="root" defaultAccount="true"> <property name=&q ...
- 镭神激光雷达对于Autoware的适配
1. 前言 我们的自动驾驶采用镭神激光雷达,在使用Autoware的时候,需要对镭神激光雷达的底层驱动,进行一些改变以适配Autoware. 2. 修改 (1)首先修改lslidar_c32.laun ...
- 【UOJ#48】【UR #3】核聚变反应强度（质因数分解）
[UOJ#48][UR #3]核聚变反应强度(质因数分解) 题面 UOJ 题解 答案一定是\(gcd\)除掉\(gcd\)的最小质因子. 而\(gcd\)的最小值因子一定是\(a_1\)的质因子. 所 ...
- 查询SAP系统支持的ABAP版本
7.52可以使用select 内表,但是怎么看版本呢? 如果有在开发中用到ABAP 7.4&7.5个版本的新语法时,需要考虑到系统支持的ABAP版本,那么要怎么查看呢? 其实这个和SAP的内核 ...
- rsync性能终极优化【Optimize rsync performance】
前言 将文件从一台计算机同步或备份到另一台计算机的快速简便的方法是使用rsync.我将介绍通常用于备份数据的命令行选项,并显示一些选项以极大地将传输速度从大约20-25 MB / s加快到90 MB ...
- C# - VS2019WinFrm桌面应用程序FtpClient实现
前言 本篇主要记录:VS2019 WinFrm桌面应用程序实现简单的FtpClient,包含Ftp文件查看.上传和下载等功能. 准备工作 搭建WinFrm前台界面 添加必要的控件,这里主要应用到Gro ...
- Python - 时间相关与计划任务
Python - 时间处理与定时任务 1.计算明天和昨天的日期 # 获取今天.昨天和明天的日期 # 引入datetime模块 import datetime #计算今天的时间 today = date ...