jquery实战

作者: 我本无常 | 来源:发表于2018-09-19 18:44 被阅读4次

jQuery属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> </title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            /*
            alert($('.box').html());//这是一个div元素
            $('.box').html('<a href="http://www.baidu.com">百度网</a>');
            */

            /*
            读写值为布尔类型的属性用prop方法
            读写值为非布尔类型的属性用attr方法
            */

            /*
            $('.box').attr({title:'这是一个div!'});//写入title属性,并赋值
            alert($('.box').attr('class'));//读属性class的值,弹出box
            */

            /*
            var $src = $('#img1').attr('src');
            alert($src);//img/1.png

            $('#img1').attr({
                src:'img/2.gif',
                alt:'图片二'
            });
            */

            /*
            alert($('#check').prop('checked'));//选中为true,非选中为false
            $('#check').prop({checked:true});//设置默认勾选
            */

            // alert($('.box2').html());//<span>这是div元素内的span</span>
            alert($('.box2').text());//这是div元素内的span
        })
    </script>
</head>
<body>
    <div class="box">这是一个div元素</div>

    <img id="img1" src="img/1.png" alt="一张图片">

    <input type="checkbox" id="check">多选

    <div class="box2">
        <span>这是div元素内的span</span>
    </div>
</body>
</html>

jQuery特殊效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery特殊效果</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
            display: none;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#btn').click(function(){
                // $('.box').fadeOut();//淡出
                // $('.box').fadeIn();//淡入
                // $('.box').fadeToggle();//切换淡入淡出
                // $('.box').toggle();//切换显示隐藏
                $('.box').slideToggle();//切换上收和下展
            })
        })
    </script>
</head>
<body>
    <input type="button" name="" value="效果" id="btn">
    <div class="box"></div>
</body>
</html>

jQuery动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery动画</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            /*
            参数:
            1、什么属性做动画,属性设置{param1: value1, param2: value2}
            2、动画执行的时间,单位毫秒
            3、动画曲线:
                swing(默认值)开始和结束慢,中间快
                linear匀速
                可省略不写
            4、回调函数,动画完成之后要做的事情,可无限嵌套
            */
            $('#div1').animate({
                width: 200,
                height: 200},
                1000,
                function(){
                    // alert('动画完了!');
                    $(this).animate(
                        {marginLeft: 500},
                        1000,
                        function(){
                            $(this).animate(
                                {marginTop: 500},
                                1000
                            )
                        }
                    )
                }
            );
        })
    </script>
</head>
<body>
    <div id="div1" class="box"></div>
</body>
</html>

jQuery循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery循环</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // //给全部的li设置内容和样式
            // $('.list li').html('111');
            // $('.list li').css({background:'gold'});

            //第一个参数index是索引值
            $('.list li').each(function(index) {
                // alert(index);//弹出索引值
                
                //$(this)是每一个li
                $(this).html(index);
            });
        })
    </script>
</head>
<body>
    <ul class="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

jQuery其他事件

# <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery其他事件</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        // //JS原生写法
        // window.onload = function(){

        // }

        // //jQuery写法,等同于上面写法
        // $(window).load(function(){

        // })

        // //ready的写法
        // $(document).ready(function(){

        // })

        // //ready的简写
        // $(function(){

        // })

        // 窗口改变尺寸的时候,会高频触发
        $(window).resize(function() {
            console.log('3');
        });
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

自定义事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义事件</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //自定义事件只能用bind方式绑定,第一个参数是事件的名字,第二个参数是事件发生时执行的函数
            $('#btn1').bind('hello', function(){
                alert('hello');
            })
            $('#btn1').bind('click', function(){
                alert('click');
            })
            $('#btn2').click(function() {
                // trigger即可以触发自定义事件,也可以触发原始的事件
                $('#btn1').trigger('hello');
                $('#btn1').trigger('click');
            });
            
            //不一定点击按钮触发,也可页面加载时触发,也可在满足某种if条件时触发
            // $('#btn1').trigger('hello');
        })
    </script>
</head>
<body>
    <input type="button" value="按钮" id="btn1">
    <input type="button" value="按钮2" id="btn2">
</body>
</html>

相关文章

网友评论

    本文标题:jquery实战

    本文链接:https://www.haomeiwen.com/subject/gaxwnftx.html