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 ...

随机推荐

Vue+Element UI 实现视频上传
一.前言项目中需要提供一个视频介绍,使用户能够快速.方便的了解如何使用产品以及注意事项. 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后台提供视频上传AP ...
DWR日志在log4j.xml配置
一.日志 DWR依赖 Apache Commons Logging,可以使用log4j实现日志记录功能. 1.1 日志简介和其他日志框架一样,当设置低等级的日志时所有高于此等级的日志也将会打印出来. ...
Javal连载4-注释&class与public class区别
一.Java注释 1.作用:不会编译倒.class文件之中:增强可读性 2.分类: (1)单行注释(只注释当前行):// (2)多行注释: /* 注释注释注释 */ (3)javadoc注释 /* ...
自动化API之一自动生成Mysql数据库的微服务API
本文演示如何利用Uniconnector平台,自动生成Mysql数据库的API,节约开发人员编写后台API的时间.使用生成API的前提是开发者有自己的数据库,有数据库的管理权限,并能通过外网 ...
Python 将numpy array由浮点型转换为整型
Python 将numpy array由浮点型转换为整型 ——使用numpy中的astype()方法可以实现,如:
【shell脚本】自动监控tomcat服务===autoCheck.sh
自动监控tomcat服务,当tommcat服务挂掉时自动重启一.脚本内容 [root@localhost ]# cat /root/autoCheck.sh #!/bin/bash startTom ...
Unsupervised Attention-guided Image-to-Image Translation
这是NeurIPS 2018一篇图像翻译的文章.目前的无监督图像到图像的翻译技术很难在不改变背景或场景中多个对象交互方式的情况下将注意力集中在改变的对象上去.这篇文章的解决思路是使用注意力导向来进行图 ...
关于 Paket
参考地址:https://fsprojects.github.io/Paket/editor-support.html 1. 安装 Paket for Visual Studio,一个类似于 Nuge ...
专栏《Elasticsearch 7.x从入门到精通》的相关源代码
新版Elasticsearch 7.3 和 Spring Boot 2.1.7 集成演示项目第一个项目:演示Elasticsearch 6.4.3 和Spring Boot 2.1.7集 ...
SAP PI接口（RFC类型）在函数字段修改或增加后，出现字段映射错误问题
在解决标题所言问题之前,我们先回头看看RFC和sproxy这两种接口的优缺点. 关于PI接口的实现,目前我了解到的各大国企项目像中海油.中石化.国网等,普遍实现方式是RFC和代理类sproxy这两种. ...

html--前端jquery基础实例

html--前端jquery基础实例的更多相关文章

随机推荐

热门专题