jQuery常见案例

时间：2023-03-10 05:10:25
jQuery常见案例

jQuery常见案例

通过jQuery实现全选，反选取消；

选择 地址 端口
1.1.1.1 80
1.1.1.1 80
1.1.1.1 80
1.1.1.1 80

代码实现
```html

选择 地址 端口
1.1.1.1 80
1.1.1.1 80
1.1.1.1 80
1.1.1.1 80

```

通过jQuery实现左侧菜单；

菜单1
内容1
内容1
内容1
菜单2
内容2
内容2
内容2
菜单3
内容3
内容3
内容3
菜单4
内容4
内容4
内容4

CSS部分代码：

    .hide{

        display: none;

    }

    .bodycontent{

        width: 300px;

        height: 700px;

        border: solid 1px #dddddd

    }

    .header{

        height: 35px;

        background-color: #000795;

        color: white;

        line-height: 35px;

    }

    .content{

        min-height: 50px;

    }

HTML部分代码和JS部分代码：

<body>

    <div class="bodycontent">

        <div class="item">

            <!--this 就表示当前点击的标签-->

            <div  class="header" >菜单1</div>

            <div class="content">

                <div>内容1</div>

                <div>内容1</div>

                <div>内容1</div>

            </div>

        </div>

        <div class="item">

            <div  class="header" >菜单2</div>

            <div class="content hide">

                <div>内容2</div>

                <div>内容2</div>

                <div>内容2</div>

            </div>

        </div>

        <div class="item">

            <div class="header" >菜单3</div>

            <div class="content hide">

                <div>内容3</div>

                <div>内容3</div>

                <div>内容3</div>

            </div>

        </div>

        <div class="item">

            <div class="header" >菜单4</div>

            <div class="content hide">

                <div>内容4</div>

                <div>内容4</div>

                <div>内容4</div>

            </div>

        </div>

    </div>

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

    <script>

        $(".item >.header").click(function () {

            // 删除选中标签的，下一个标签中的 hide 属性

            $(this).next().removeClass("hide");

            // 找到当前标签的，所有父类标签的所有兄弟标签，查找父亲兄弟标签里面儿子标签带有content属性的加上hide属性

            $(this).parent().siblings().find(".content").addClass("hide");

        })

    </script>

</body>

通过jQuery实现商城菜单内容详情页的切换；

菜单一
菜单二
菜单三
话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉。汉朝自高祖斩白蛇而起义，一统天下;后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃共相辅佐。时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。

CSS部分代码：

<style>

    .bodcontent{

        width: 700px;

        margin: 0 auto;

    }

    .hide{

        display: none;

    }

    .menu{

        height: 38px;

        background-color: #dddddd;

        line-height: 38px;

    }

    .menu .menu-item{

        float: left;

        border-right: 1px solid red;

        padding: 0 8px;

        cursor: pointer;

    }

    .menu .active{

        background-color: #2dccc5

    }

    .content{

        min-height: 100px;

        border: 1px solid red;

    }

</style>

HTML部分代码和JS部分代码：

<body>

    <div class="bodcontent">

        <div class="menu">

            <div class="menu-item active" >菜单一</div>

            <div class="menu-item" >菜单二</div>

            <div class="menu-item" >菜单三</div>

        </div>

        <div class="content">

            <div >话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉。汉朝自高祖斩白蛇而起义，一统天下;后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃共相辅佐。时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横</div>

            <div class="hide">蜀汉建兴七年夏四月，孔明兵在祁山，分作三寨，专候魏兵。却说司马懿引兵到长安，张郃接见，备言前事。懿令?为先锋，戴陵为副将，引十万兵到祁山，于渭水之南下寨。郭淮、孙礼入寨参见。懿问曰："汝等曾与蜀兵对阵否？"二人答曰："未也。"懿曰："蜀兵千里而来，利在速战；今来此不战，必有谋也。陇西诸路，曾有信息否？"淮曰："已有细作探得各郡十分用心，日夜提防，并无他事。只有武都、阴平二处，未曾回报。"懿曰："吾自差人与孔明交战。汝二人急从小路去救二郡，却掩在蜀兵之后，彼必自乱矣。"</div>

            <div class="hide">汉朝天数当桓灵，炎炎红日将西倾。奸臣董卓废少帝，刘协懦弱魂梦惊。曹操传檄告天下，诸侯奋怒皆兴兵。议立袁绍作盟主，誓扶王室定太平。温侯吕布世无比，雄才四海夸英伟。护躯银铠砌龙鳞，束发金冠簪雉尾。参差宝带兽平吞，错落锦袍飞凤起。龙驹跳踏起天风，画戟荧煌射秋水。出关搦战谁敢当？诸侯胆裂心惶惶。踊出燕人张冀德，手持蛇矛丈八枪。虎须倒竖翻金线，环眼圆睁起电光。酣战未能分胜败，阵前恼起关云长。青龙宝刀灿霜雪，鹦鹉战袍飞蛱蝶。马蹄到处鬼神嚎，目前一怒应流血。枭雄玄德掣双锋，抖擞天威施勇烈。三人围绕战多时，遮拦架隔无休歇。喊声震动天地翻，杀气迷漫牛斗寒。吕布力穷寻走路，遥望家山拍马还。倒拖画杆方天戟，乱散销金五彩幡。顿断绒绦走赤兔，翻身飞上虎牢关。</div>

        </div>

    </div>

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

    <script>

        $(".menu-item").click(function () {

            $(this).addClass("active").siblings().removeClass("active");

            // $(this).index() 表示获取索引

            $(".content").children().eq($(this).index()).removeClass("hide").siblings().addClass("hide");

        })

    </script>

</body>

通过jQuery实现点赞变大的效果；

赞

用到的知识点：
```html
// $("t1").append();
// $("t1").remove();
// setInterval
// 透明度 1 -> 0;
// position
// 字体大小，位置变化
```

CSS部分代码：

<style>

    .container{

        padding: 50px;

        border: 1px solid #dddddd;

    }

    .item{

        position: relative;

        width: 30px;

    }

</style>

HTML部分代码和JS部分代码：

<body>

    <div class="container">

        <div class="item">

            <span>赞</span>

        </div>

    </div>

    <div class="container">

        <div class="item">

            <span>赞</span>

        </div>

    </div>

    <div class="container">

        <div class="item">

            <span>赞</span>

        </div>

    </div>

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

    <script>

        $(".item").click(function () {

            AddFavor(this)

        });

        function AddFavor(self) {

            var fontSize = 15;

            var top = 0;

            var right = 0;

            var opacity=1;

            var tag = document.createElement("span");

            $(tag).text("+赞");

            $(tag).css("color","green");

            $(tag).css("position","absolute");

            $(tag).css("fontSize",fontSize +"px");

            $(tag).css("top",top +"px");

            $(tag).css("right",right +"px");

            $(tag).css("opacity",opacity);

            $(self).append(tag);

            var obj = setInterval(function () {

                fontSize = fontSize+5;

                top = top-5;

                right = right-5;

                opacity = opacity-0.1;

                $(tag).css("fontSize",fontSize +"px");

                $(tag).css("top",top +"px");

                $(tag).css("right",right +"px");

                $(tag).css("opacity",opacity);

                if (opacity< 0){

                    clearInterval(obj);

                    $(tag).remove();

                }

            },40)

        }

    </script>

</body>

通过jQuery实现表单提交验证内容是否为空；

表单一：
表单二：
表单三：
表单四：
表单五：
<input type="submit" value="提交">

表单提交,如果表格为空提示输入内容：
```html

表单一：
表单二：
表单三：
表单四：
表单五：
<input type="submit" value="提交">

```

相关文章