jQuery练习

于 2021-01-10 15:58:58 发布
阅读量196 收藏
点赞数
分类专栏： 学习总结 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_XiangShuai/article/details/112430390
版权
1、左侧菜单栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>left menu</title>
    <style>
        .menu{
            height: 300px;
            width: 30%;
            background: darkseagreen;
            float: left;
        }
        .content{
            height: 300px;
            width: 70%;
            background: coral;
            float: left;
        }
        .title{
            background: darksalmon;
            color: black;
            font-size: larger;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div>
    <div class="menu">
        <div class="item">
            <div class="title">菜单一</div>
            <div class="con hide">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>

        <div class="item">
            <div class="title">菜单二</div>
            <div class="con hide">
                <div>222</div>
                <div>222</div>
                <div>222</div>
            </div>
        </div>

        <div class="item">
            <div class="title">菜单三</div>
            <div class="con hide">
                <div>333</div>
                <div>333</div>
                <div>333</div>
            </div>
        </div>

    </div>

    <div class="content"></div>

</div>
<script src="jquery-3.5.1.js"></script>
<script>
    $(".item .title").click(function () {
        $(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide")
    })
</script>
</body>
</html>
2、tab切换
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab切换</title>
    <style>
        *{
            margin: 0px;
            /*外边距*/
            padding: 0px;
            /*内边距*/
        }
        .outer{
            margin: auto;
            /*使左右外边距平分，居中效果*/
            width: 40%;
        }
        .menu{
            background: darkseagreen;
            line-height: 40px;
            border: solid 1px black;
        }
        .content{
            background: darksalmon;
            border: solid 1px black;
            height: 200px;
        }
        .hide{
            display: none;
        }
        li{
            display: inline-block;
            /*内联块状元素，和其他元素可在一行，可设置元素高度、宽度、行高、边距*/
        }
        .current{
            color: gold;
            background: gray;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="menu">
        <ul>
            <li xxx="c1" class="current" onclick="tab(this)">菜单一</li>
            <li xxx="c2" onclick="tab(this)">菜单二</li>
            <li xxx="c3" onclick="tab(this)">菜单三</li>

        </ul>
    </div>
    <div class="content">
        <div id="c1">内容一</div>
        <div id="c2" class="hide">内容二</div>
        <div id="c3" class="hide">内容三</div>
    </div>
</div>
<script src="jquery-3.5.1.js"></script>
<script>
    function tab(self) {
        var index=$(self).attr("xxx")
        // attr("xxx")获取属性的值
        $(self).addClass("current").siblings().removeClass("current")
        $("#"+index).removeClass("hide").siblings().addClass("hide")
    }
</script>
</body>
</html>
3、checkbox正反选
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button onclick="select('all')">全选</button>
<button onclick="select('cancel')">取消</button>
<button onclick="select('reverse')">反选</button>
<!--相同函数名通过传递不同参数来选择不同操作-->

<table border="1" id="Table">
    <tr>
        <td><input type="checkbox"></td>
        <td>111</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>222</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>333</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>444</td>
    </tr>
</table>

<script src="jquery-3.5.1.js"></script>

<script>
    function select(choice) {
        if(choice=="all"){
            $("table :checkbox").prop("checked",true)
        }
        else if (choice=="cancel"){
            $("table :checkbox").prop("checked",false)
        }
        else if(choice=="reverse"){
            $("table :checkbox").each(function () {
                $(this).prop("checked",!$(this).prop("checked"))
            })
        }
    }
</script>
</body>
</html>
4、模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态对话框</title>
    <style>
        .back{
            background: burlywood;
            height: 2000px;
        }

        .shade{
            background: aquamarine;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0.5;
        }

        .model{
            position: fixed;
            background: gold;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            margin-left: -100px;
            margin-top: -100px;
            /*左边框和上边框偏移100px居中*/
        }

        .hide{
            display: none;
        }

    </style>
</head>
<body>
<div class="back">
    <input type="button" value="点击" onclick="action1(this)">
</div>

<div class="shade hide"></div>

<div class="model hide">
    <input type="button" value="取消" onclick="action2(this)">
</div>

<script src="jquery-3.5.1.js"></script>
<script>
    function action1(self) {
        $(self).parent().siblings().removeClass("hide")
    }
    function action2(self) {
        $(self).parent().addClass("hide").prev().addClass("hide")
    }

</script>
</body>
</html>
5、复制样式条
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复制样式条</title>
</head>
<body>
<div>
    <div class="item">
        <input type="button" value="+" onclick="add(this)">
        <input type="text">
    </div>
</div>
<script src="jquery-3.5.1.js"></script>
<script>
    function add(self) {
        var $clone_obj=$(self).parent().clone();
        $clone_obj.children(":button").val("-").attr("onclick","remove(this)");
        ($(self)).parent().parent().append($clone_obj);
    }
    function remove(self) {
        $(self).parent().remove()
    }
</script>
</body>
</html>
6、返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回顶部</title>
    <style>
        body{
            margin: 0px;
        }
        .div1{
            background: darkgreen;
            overflow: auto;
            width: 300px;
        }
        .div2{
            background: burlywood;
        }
        .div3{
            background: darkseagreen;
        }
        .div{
            height: 500px;
        }
        .returnTop{
            width: 100px;
            height: 100px;
            background: gold;
            text-align: center;
            line-height: 100px;
            right: 0;
            bottom: 0;
            position: fixed;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div>
    <div class="div1 div">
        <div>hello</div>
        <div>hello</div>
        <div>hello</div>
        <div>hello</div>
        <div>hello</div>
        <div>hello</div>
        <div>hello</div>
        <div>hello</div>
        <div>hello</div>
        <div>hello</div>
        <div>hello</div>
        <div>hello</div>
        <div>hello</div>
        <div>hello</div>
        <div>hello</div>
        <div>hello</div>
        <div>hello</div>
        <div>hello</div>
    </div>
    <div class="div2 div"></div>
    <div class="div3 div"></div>
    <div class="returnTop hide" onclick="returnTop()">返回顶部</div>
</div>
<script src="jquery-3.5.1.js"></script>
<script>
    window.onscroll=function () {
        var $current=$(window).scrollTop()
        if($current>100)
        {
            $(".returnTop").removeClass("hide")
        }
        else {
            $(".returnTop").addClass("hide")
        }
    }
    function returnTop() {
        $(window).scrollTop(0)
    }
</script>
</body>
</html>
不是大雄也可以有哆啦a梦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jQuery练习题
CaseyWei
08-01 363
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;jq获取鼠标的位置&lt;/title&gt; &lt;style&gt; div{ widt
jquery练习(一)
iteye_8029的博客
09-14 116
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;script src="../js/libs/jquery-1.6.2.min.js"&gt;&lt;/script&gt; &lt;/head&gt; &a
jquery练习
12-16
jquery练习
前端jquery练习网页
10-12
这个“前端jQuery练习网页”项目是您在学习阶段完成的一个作品，虽然存在一些bug，但它仍然是一个很好的学习和回顾jQuery核心概念的起点。** 在项目中，`js` 文件夹可能包含你编写的所有 JavaScript 代码，这些代码...
jquery练习实例
10-16
在“jQuery练习实例”这个压缩包中，我们可以期待找到一系列的示例代码和讲解，帮助我们深入理解jQuery的核心功能和常见用法。 1. **DOM操作**：jQuery的核心在于其对DOM（Document Object Model）的操作。通过简洁...
js 小项目练习，jQuery 小例子
04-10
js 小项目练习，jQuery 小例子。 使用jquery写的一些小例子，比如菜单，星级评分，轮播图，拖拽上传等效果源码。 jquery小项目
jQuery基础选择器练习题
07-11
JQ 选择器大全包含：基本选择器,层级选择器,层级函数,过滤选择器,内容选择器,可见选择器,jq中显示相关的函数,属性选择器,子元素选择器,表单选择器。里面的练习题可以拿来练手
Jquery练习
qq_42049884的博客
09-19 77
1 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="JQuery/jquery-3.4.1.min.js"> </script> <scrip...
jQuery 练习
qq_44788518的博客
09-15 127
dom增删改 从左到右，从右到左 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style>
Jquery练习题
small_qianzai的博客
09-19 1785
1.使用jquery修改div元素的背景色(随意颜色) 第一个已点击第二个未点击 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery-3.4.1.min.js">...
jQuery 13 一些练习
weixin_34218890的博客
05-25 106
一.高亮选择（主要用到addclass和removeclass方法，它们用于增删样式） <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="JScript/jquery-1.9.1.js" type="text...
jQuery练习(用户登录)
天祺围棋
12-23 1090
下载地址：http://download.csdn.net/source/899554前台%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="test_Default" %>html xmlns="http://www.w3.org/1999/xhtm
jquery练习2:验证贵美网站注册页面
最新发布
01-02
我们可以使用jQuery来实现这一功能。首先，我们可以编写一个jQuery函数，当用户点击注册按钮时触发。在这个函数中，我们可以获取用户输入的用户名、密码、邮箱等信息，并对其进行验证。 我们可以使用正则表达式来...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值