HTML jQuery

最新推荐文章于 2021-09-08 18:00:06 发布

puppycuty

最新推荐文章于 2021-09-08 18:00:06 发布

阅读量93

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_38125626/article/details/81638814

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。

添加各种图标：http://fontawesome.dashgame.com/

easy ui 简单的web框架：http://www.jeasyui.net/demo/380.html

web框架：http://www.bootcss.com/

选择器和筛选
属性
css
文档处理
事件
扩展
ajax

ps：链式编程

更多见：http://www.php100.com/manual/jquery/

返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .back{
            position: fixed;
            bottom: 0px;
            right: 0px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>

<div style="height: 2000px;"></div>

<div onclick="GoTop()" class="back hide">返回顶部</div>

<script src="jquery-1.8.2.js"></script>
<script type="text/javascript">

    function GoTop(){
        //返回顶部
        $(window).scrollTop(0);
    }

    $(function(){

        $(window).scroll(function(){
            //当滚动滑轮时，执行函数体

            //获取当前滑轮滚动的高度
            var top = $(window).scrollTop();

            if(top>100){
                //展示“返回顶部”
                $('.back').removeClass('hide');
            }else{
                //隐藏“返回顶部”
                $('.back').addClass('hide');
            }
        });
    });

</script>

</body>
</html>

终极版本http://files.cnblogs.com/files/wupeiqi/GoTop%E7%BB%88%E6%9E%81%E7%89%88.zip

绑定事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>I would say:</p>
    <input type="button" id="Add1" value="add1">
    <input type="button" id="Add2" value="add2">






    <script src="js/jquery-1.8.0.js"></script>
    <script type="text/javascript">
   /* $(function(){
        $("#Add1,").click(function () {
            $("p").append("alex")
        })
    })*/
   $(function(){
        $("#Add1,#Add2").click(function () {
            var CID = $(this).attr(id);
            if(CID == "Add1"){
                $("p").append("alex");
            }else if(CID == "Add2 ") {
                $("p").append("xiaoming ");
            }else{

            }
        })
    };


    </script>
</body>
</html>

多选框

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <script type="text/javascript" src='jquery-1.8.2.js'></script>
        <script type="text/javascript">
            $(function(){
                $('#selectAll').click(function(){
                    $('#checklist :checkbox').prop('checked',true);
                })
                $('#unselectAll').click(function(){
                    $('#checklist :checkbox').prop('checked',false);
                })
                $('#reverseAll').click(function(){
                    $('#checklist :checkbox').each(function(){
                        $(this).prop('checked',!$(this).prop('checked'))
                    })
                })

            })            
        </script>
    </head>
    <body>
        <div id='checklist'>
            <input type='checkbox' value='1'/>篮球
            <input type='checkbox' value='2'/>足球
            <input type='checkbox' value='3'/>羽毛球
        </div>
        <input type='button' value='全选' id='selectAll' />
        <input type='button' value='不选' id='unselectAll' />
        <input type='button' value='反选' id='reverseAll' />
    </body>
</html>

菜单：

.hide{
    display: none;
}

.container{
    width:300px;
    height: 600px;
    background-color: #ddd;
    border: 1px solid #999;
}

.container .title{
    height: 38px;
    font-size: 28px;
    line-height: 38px;
    background-color: orange;
    cursor: pointer;
}

.container .body{
    background-color:white;
}

.container .body a{
    display:block;
    padding: 10px;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <link rel="stylesheet" type="text/css" href="common.css" />
        <script type="text/javascript" src='jquery-1.8.2.js'></script>

    </head>
    <body>
        <div class='container'>
            <div>
                <div class='title'>Menu1</div>
                <div class='body'>
                    <a href="">content1</a>
                    <a href="">content2</a>
                    <a href="">content3</a>
                </div>
            </div>

            <div>
                <div class='title'>Menu1</div>
                <div class='body hide'>
                    <a href="">content1</a>
                    <a href="">content2</a>
                    <a href="">content3</a>
                </div>
            </div>

            <div>
                <div class='title'>Menu1</div>
                <div class='body hide'>
                    <a href="">content1</a>
                    <a href="">content2</a>
                    <a href="">content3</a>
                </div>
            </div>
            
            <div>
                <div class='title'>Menu1</div>
                <div class='body hide'>
                    <a href="">content1</a>
                    <a href="">content2</a>
                    <a href="">content3</a>
                </div>
            </div>
            
            <div>
                <div class='title'>Menu1</div>
                <div class='body hide'>
                    <a href="">content1</a>
                    <a href="">content2</a>
                    <a href="">content3</a>
                </div>
            </div>

        </div>

        <script type="text/javascript">
            $(function(){
                $('.title').click(function(){
                    $(this).parent().siblings().children('.body').addClass('hide');
                    $(this).next().removeClass('hide');
                });
            });
        </script>
    </body>
</html>
复制代码

puppycuty

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML jQuery

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。添加各种图标：http://fontawesome.dashgame.com/easy ui 简单的web框架：http://www.jeasyui.net/demo/380.html...
复制链接

扫一扫