Erlo

jQuery(实例)

时间:2019-08-12 15:04   阅读:31次   来源:博客园页面报错

点赞

1.开关灯效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <input id="i1" type="button" value="开关" />
    <div class="c1 hide">假装现在有效果了</div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#i1').click(function () {
            #zs# 第一种方法
            if($('.c1').hasClass('hide')){
                $('.c1').removeClass('hide')
            }else {
                $('.c1').addClass('hide')
            }   #fzs#
            //jquery实现方法
            $('.c1').toggleClass('hide')
        })
    </script>
</body>
</html>

View Code

2.模态对话框

 View Code

3.点击菜单显示对应的内容

 View Code

 通过索引实现菜单更方便

4.编辑功能

 View Code

5.模态对话框添加删除功能

 View Code

6.点赞

 View Code

7.随鼠标移动的框

 View Code

8.表单验证

 View Code

9.轮播图

 View Code

10.返回顶部

 View Code

11.左侧菜单

 View Code

12.显示和隐藏

 View Code

13.滑动和隐藏

 View Code

14.添加与删除

 View Code

15.商品放大镜

 View Code

16.商品分类

 View Code

下一篇:jquery获取元素各种宽高及页面宽高总结

评论留言

还没有评论留言,赶紧来抢楼吧~~

Erlo大厅()

* 这里是“吐槽厅”,所有人可看,只保留当天信息。

  • Erlo.vip2019-08-23 02:01:45Hello、欢迎使用吐槽厅,这里是个吐槽的地方。
  • 首页 笔记分享 案例展示 ERLO 搜索
    鼠标试试
    返回顶部