jquery

input框事件

$(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');
            });
        })

jQuery属性操作

    $(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
        })

特殊效果

    .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();//切换上收和下展
            })
        })

动画

    .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
                            )
                        }
                    )
                }
            );
        })

循环

    $(function(){
            // //给全部的li设置内容和样式
            // $('.list li').html('111');
            // $('.list li').css({background:'gold'});

            //第一个参数index是索引值
            $('.list li').each(function(index) {
                // alert(index);//弹出索引值
                
                //$(this)是每一个li
                $(this).html(index);
            });
        })

元素绝对位置

.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();
            });
        })

鼠标移入移出

.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});
            });
        })

其他事件

    // //JS原生写法
        // window.onload = function(){

        // }

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

        // })

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

        // })

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

        // })

        // 窗口改变尺寸的时候，会高频触发
        $(window).resize(function() {
            console.log('3');
        });

绑定事件bind

$(function(){
            // //只能绑定click事件，不能绑定其他的了
            // $('#btn').click(function() {
            //  /* Act on the event */
            // });

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

                //取消绑定事件
                $(this).unbind('mouseover');
            });
        })

自定义事件

$(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');
        })

事件冒泡

.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>

定时器弹框

    .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>

事件委托

.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();
            });
        })

节点操作

$(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();    
        })