jQuery | 用jQuery框架实现上一篇博客里JavaScript里的特效

最新推荐文章于 2023-02-22 09:53:09 发布

Bravo！！！

最新推荐文章于 2023-02-22 09:53:09 发布

阅读量148

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_47982238/article/details/107986850

版权

jQuery 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

一、toggle实现循环单击特效

<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
    *{
        font-family: 微软雅黑;
    }
    </style> 
    <script src="jquery.js"></script>
</head>
<body>
    <img src="dog.png"  />
</body>
<script>
    $('img').toggle(
    function() {
        this.src='dog.png';
    }, 
    function() {
        this.src='sheep.png';     
    });
    //在上述代码中，单击循环切换执行两个函数内的操作
    //将toggle改为hover，移入移出执行两个函数内的操作
</script>
</html>

二、hover实现移出移入特效

<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
    *{
        font-family: 微软雅黑;
    }
    .jiu{
        width: 180px;
        overflow: hidden;
        float: left;
        margin-left: 35px;
        margin-top: 15px;
    }
    </style> 
    <script src="jquery.js"></script>
</head>
<body>
    <div class="jiu">
        <img src="jiu.jpg" />
    </div>
</body>
<script>
    $('img').hover(
    function() {
        $(this).animate({
            'margin-left':'-100px'
        }, 500);
    }, 
    function() {
        $(this).animate({
            'margin-left':'0px'
        }, 500);  
    }
);
</script>
</html>

三、单击标题切换内容特效

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        *{
            font-family: 微软雅黑;
        }
    </style>
    <script src="jquery.js"></script>
</head>
<body>
    <h1>羊</h1>
    <h2>sheep</h2>
    <h1>狗</h1>
    <h2>dog</h2>
    <h1>篮球</h1>
    <h2>basketball</h2>
</body>
<script>
$('h1').click(function(){
    $(this).next().toggle();
});
</script>
</html>

四、选水果

在左侧选择栏中选中的内容会被储存到右侧的候选框

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        *{
            font-family: 微软雅黑;
        }
 
        select{
            width:100px;
            height:150px;
        }
    </style>
    <script src='jquery.js'></script>
</head>
<body>
    <h1>水果选择:</h1>
    <form action="javascript:">
        <select name="" id="s1" size='2'>
            <option value="">西瓜</option>
            <option value="">冬瓜</option>
            <option value="">苹果</option>
            <option value="">南瓜</option>
        </select>
 
        <input type="button" value=">>" id='btn'>
 
        <select name="" id="s2" size='2'>
        </select>
    </form>
</body>
<script>
$('#btn').click(function(){
    $('#s1 option:selected').appendTo('#s2');
});
</script>
</html>

五、点击显示行号

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        *{
            font-family: 微软雅黑;
        }
    </style>
    <script src='jquery.js'></script>
</head>
<body>
    <h1>aaaaaaaaaaaaaaaaaaaaaaa</h1>
    <h1>aaaaaaaaaaaaaaaaaaaaaaa</h1>
    <h1>aaaaaaaaaaaaaaaaaaaaaaa</h1>
    <h1>aaaaaaaaaaaaaaaaaaaaaaa</h1>
    <h1>aaaaaaaaaaaaaaaaaaaaaaa</h1>
</body>
<script>
$('h1').each(function(i) {
    $(this).attr({'num':i+1});
});
$('h1').click(function(){
    $(this).html($(this).attr('num'));
})
</script>
</html>

六、全选、全不选、反选效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        *{
            font-family: 微软雅黑;
        }
    </style>
    <script src="jquery.js"></script>
</head>
<body>
    <form action="">
        <p>爱好：</p>
        <p>
            <label >
                <input type="checkbox" name="" id="" />打篮球
            </label>
        </p>
        <p>
            <label >
                <input type="checkbox" name="" id="" />踢足球
            </label>
        </p>
        <p>
            <label >
                <input type="checkbox" name="" id="" />游泳
            </label>
        </p>
        <p>
            <label >
                <input type="checkbox" name="" id="" />唱歌
            </label>
        </p>
    </form>
    <p>
        <button id="qx">全选</button>
        <button id="qbx">全不选</button>
        <button id="fx">反选</button>
    </p>
</body>
<script>
$('#qx').click(function(){
    $(':checkbox').attr({'checked':true})
});
$('#qbx').click(function(){
    $(':checkbox').attr({'checked':false})
});
$('#fx').click(function(){
    $(':checkbox').each(function(){
        this.checked=!this.checked;
    });
});
</script>
</html>