美文网首页
jQuery学习

jQuery学习

作者: qianxun0921 | 来源:发表于2018-09-19 23:45 被阅读0次

    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(){
            /*
            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>

    元素的绝对位置

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素绝对位置</title>
    <style type="text/css">
        .con{
            width: 600px;
            height: 600px;
            margin: 50px auto 0;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: gold;
            margin-bottom: 10px;
        }
        .pos{
            margin-left: 500px;
        }
        .pop{
            width: 100px;
            height: 100px;
            background-color: red;
            position: fixed;
            left:0;
            top: 0;
            display: none;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var $pos = $('.pos');
            //offset()是获取相对于页面左上角的绝对位置，即使外面再包一层con居中层，也不影响效果
            var pos = $pos.offset();
            // console.log(pos);
            // alert(pos.left + "," + pos.top);
            var w = $pos.outerWidth();
            var h = $pos.outerHeight();
            // alert(w);

            $('.pop').css({left:pos.left + w,top:pos.top});

            $pos.mouseover(function() {
                $('.pop').show();
            });
            $pos.mouseout(function() {
                $('.pop').hide();
            });
        })
    </script>
</head>
<body>
    <div class="con">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box pos"></div>
        <div class="box"></div>
    </div>

    <div class="pop">提示信息！</div>
</body>
</html>

    鼠标移入移出

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标移入移出</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
            margin: 100px auto 0;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            /*进入子元素也触发*/
            /*$('#div1').mouseover(function() {
                $(this).animate({marginTop: 50});//.stop()
            });
            $('#div1').mouseout(function() {
                $(this).animate({marginTop: 100});//.stop()
            });*/

            /*进入子元素不触发*/
            /*$('#div1').mouseenter(function() {
                $(this).stop().animate({marginTop: 50});//
            });
            $('#div1').mouseleave(function() {
                $(this).stop().animate({marginTop: 100});//
            });*/

            /*通过hover（mouseenter+mouseleave）实现简写*/
            $('#div1').hover(function() {
                $(this).stop().animate({marginTop: 50});
            }, function() {
                $(this).stop().animate({marginTop: 100});
            });
        })
    </script>
</head>
<body>
    <div id="div1" class="box">
        <div class="son"></div>
    </div>
</body>
</html>

    input框事件

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input框事件</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // //一开始就获取焦点，相当于设置了autofocus自动获取焦点了（HTML5 新增表单控件属性）
            // $('#txt01').focus();

            // //文本框获取焦点的时候（有光标闪烁的时候）
            // $('#txt01').focus(function() {
            //  alert('focus');
            // });

            // //失去焦点的时候（光标离开的时候）
            // $('#txt01').blur(function() {
            //  alert('blur');
            // });

            // //输入框内容发生变化的时候，失去焦点后触发，可用于注册时验证用户名是否已存在
            // $('#txt01').change(function() {
            //  alert('change');
            // });

            //松开键盘按键就触发
            $('#txt01').keyup(function() {
                alert('keyup');
            });
        })
    </script>
</head>
<body>
    <input type="text" id="txt01">
</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>

    绑定事件bind

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定事件bind</title>
    <style type="text/css">
        
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // //只能绑定click事件，不能绑定其他的了
            // $('#btn').click(function() {
            //  /* Act on the event */
            // });

            //bind方式可绑定多个事件
            $('#btn').bind('click mouseover', function() {
                alert('hello!');

                //取消绑定事件
                $(this).unbind('mouseover');
            });
        })
    </script>
</head>
<body>
    <input type="button" value="按钮" id="btn">
</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>

    事件冒泡

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    <style type="text/css">
        .grandfather{
            width: 300px;
            height: 300px;
            background-color: green;
            position: relative;
        }
        .father{
            width: 200px;
            height: 200px;
            background-color: gold;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0;
            top: 400px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('body').click(function() {
                alert(4);
            });
            $('.grandfather').click(function() {
                alert(3);
            });
            $('.father').click(function() {
                alert(2);
            });
            $('.son').click(function(event) {//event代表当前事件
                alert(1);
                // console.log(event);//显示很多属性，其中clientX、clientY就是点击的坐标
                // alert("X轴坐标：" + event.clientX);

                // //阻止事件冒泡
                // event.stopPropagation();

                //合并阻止操作：把阻止冒泡和阻止默认行为合并
                return false;
            });

            //阻止右键菜单
            $(document).contextmenu(function(event){
                // //阻止默认行为（原来右键能弹出菜单，阻止后无法弹出）
                // event.preventDefault();

                //合并阻止
                return false;
            })
        })
    </script>
</head>
<body>
    <div class="grandfather">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
</body>
</html>

    定时器弹框

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器弹框</title>
    <style type="text/css">
        .pop_con{
            display: none;/*默认不显示，用定时器显示*/
        }
        .pop{
            width: 400px;
            height: 300px;
            background-color: #fff;
            border: 1px solid #000;
            position: fixed;/*使用固定定位*/
            left: 50%;/*左上角位于页面中心*/
            top: 50%;
            margin-left: -200px;/*让div向左偏移半个宽度、向上偏移半个高度，使div位于页面中心*/
            margin-top: -150px;
            z-index: 9999;/*弹窗在最前面*/
        }
        /*遮罩样式*/
        .mask{
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: #000;
            left: 0;
            top: 0;
            /*设置透明度30%，兼容IE6、7、8*/
            opacity: 0.3;
            filter: alpha(opacity=30);
            z-index: 9990;/*遮罩在弹窗后面*/
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#btn').click(function() {
                $('#pop').show();
                return false;
            });
            $('#shutoff').click(function() {
                $('#pop').hide();
            });
            //点弹框以外的地方，也能让弹框消失
            $(document).click(function(){
                // setTimeout(function(){
                //  $('#pop').hide();
                // },2000);

                $('#pop').hide();
            });
            $('.pop').click(function() {
                return false;
            });
            
            //阻止默认行为（原来超链接可跳转到百度，阻止后无法跳转）
            $('#link1').click(function() {
                return false;
            });
        })
    </script>
</head>
<body>
    <h1>首页标题</h1>
    <p>页面内容</p>
    <a href="http://www.baidu.com" id="link1">百度网</a>
    <input type="button" name="" value="弹出" id="btn">

    <div class="pop_con" id="pop">
        <div class="pop">
            <h3>提示信息！</h3>
            <a href="#" id="shutoff">关闭</a>
            <input type="text" name="">
        </div>
        <!-- 遮罩层 -->
        <div class="mask"></div>
    </div>
</body>
</html>

    事件委托

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托</title>
    <style type="text/css">
        .list{
            list-style: none;
        }

        .list li{
            height: 30px;
            background-color: green;
            margin-bottom: 10px;
            color: #fff;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            /*
            给每个li绑定事件，一共绑定了8次，性能不高
            $('.list li').click(function() {
                alert($(this).html());
            });
            */

            /*
            事件委托：方法delegate，只绑定一次事件，冒泡触发
                参数：
                    selector选择器：写入ul下面的所有要发生事件的元素，多个元素用空格隔开，例如‘li a span’
                    eventType事件
                    function要执行的操作
            
            $('.list').delegate('li', 'click', function() {
                //$(this)指发生事件的子集，即每个li
                alert($(this).html());

                //全部取消委托
                $('.list').undelegate();
            });
        })
    </script>
</head>
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</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(){
            var $span = $('<span>span元素</span>');
            var $p = $('<p>p段落元素</p>');
            var $h = $('<h1>页面标题</h1>');

            /*插入子元素*/
            //div中插入span和p（末尾追加）
            // $('#div1').append($span);
            // $('#div1').append($p);

            // 把span和p插入div中
            $span.appendTo('#div1');
            $p.appendTo('#div1');

            //把子元素插入到父元素（前面追加）
            // $('#div1').prepend($span);
            // $('#div1').prepend($p);
            // $span.prependTo('#div1');
            // $p.prependTo('#div1');

            //在div前边插入兄弟h1标题
            // $('#div1').before($h);
            $h.insertBefore('#div1');

            //在后边插入兄弟元素
            //after()
            //insertAfter()

            //删除p标签
            $p.remove();    
        })
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

    相关文章

      网友评论

          本文标题：jQuery学习

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

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|jQuery学习|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！