JQuery

作者: jxvl假装 | 来源:发表于2019-10-29 00:12 被阅读0次

jQuery 效果
jquery常用cdn
jQuery第一天笔记
JavaScript之jQuery
jQuery需要课上讲解的方法
优博精选|2018互联网优秀博客推荐（持续更新）
jquery实战
jQuery操作及动画效果
jQuery操作及动画效果
jQuery

JQuery介绍

jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用

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

jquery的口号和愿望是：Write Less, Do more(写得少，做得多)

http://jquery.com 官方网站
https://code.jquery.com/ 版本下载

JQuery的使用

预加载

<!DOCTYPE html>
<html>
<head>
    <title>jquery的使用</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="./jquery-3.4.1.js"></script>
    <script type="text/javascript"> //新开一个标签自己写代码，不能直接在引入jquery库的标签里面写
        window.onload = function () {
            // body...
            var oDiv1 = document.getElementById('div1');
            alert("原生：" + oDiv1);
        }
        
        //jquery里面的写法：完整
        $(document).ready(function(){
            //作用和window.onload的作用相同，但是比window.onload快
            //因为ready是节点（标签）加载完就执行，而window.onload是节点加载完、再数据加载完（渲染完）后才执行
            var $div = $('#div1');
            //jquery里面选择的对象一般使用喜欢使用$
            alert('JQuery：' + $div);
        })

        //jquery的简写
        $(function(){
            var $div1 = $("#div1"); 
            alert("JQuery-简：" + $div1)
        })

    </script>
</head>
<body>
    <div id="div1">这是一个div元素</div>
</body>
</html>

JQuery选择器

JQuery用法思想一：选择某个网页元素，然后对它进行操作

jquery选择器

对于jquery，可以对选择集进行操作，而且可以容错——即对于类似background-color，可以直接写，而不用必须写成驼峰式

jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。

$('#myId')  //选择id为myId的网页元素（id唯一，所以选择的只有一个元素）
$('.myClass')   //选择class为myClass的元素（选择集）
$('li') //选择所有的li元素（选择集）
$('#ul1 li span')   //选择id为ul1元素下所有li下的span元素（选择集）
$('input[name=first]')  //选择name属性等于first的input元素

对选择器进行过滤

$('div').has('p');  //选择包含p元素的div元素
$('div').not('.myClass');   //选择class不等于myClass的div元素
$('div').filter('.myClass');    //选择class等于myClass的div元素
$('div').eq(5); //选择第六个div元素（因为从0开始数的）。比较常用

JQuery样式操作

jquery用法思想二：用一个函数完成取值和赋值

行间操作样式

//获取div的样式
$('div').css('width');  //读的时候，即使在行间没有写该属性，也可以读。而原生的无法读取行间没有定义的css属性

//设置div的样式
$('div').css("width":"30px");   //对单个属性的操作
$('div').css({font-size:"30px","color":"red"}); //对多个属性进行操作，字典中的key的引号可加可不加

特别注意

选择器获取的多个元素，获取信息获取的是第一个，如：$(div).css('width');，获取的是第一个div的width

操作样式类名

$('#div1').addClass('divClass2')    //为id为div1的元素追加样式divClass2
$('#div1').removeClass('divClass')  //移除id为div1对象的class名为divClass样式
$('div1').removeClass('divClass divClass2') //移除多个样式
$('div1').toggleClass('anotherClass')   //重复切换anotherClass样式，常结合click用。即，如果这个元素有anotherClass，就移除，否则就加上

选择集转移

也可以加参数进行过滤（即：选择有该参数的元素）

$('div').prev();    //选择div元素前面紧挨着的同辈元素
$('div').prevAll(); //选择div之前的所有同辈元素
$('div').next();    //选择div元素后面紧挨着的同辈元素
$('div').nextAll(); //选择div元素之后的所有同辈元素
$('div').parent();  //选择div的父辈元素
$('div').children();    //选择div的所有子元素
$('div').siblings();    //选择div的同级元素，即，除了自己之外的同级元素
$('div').find('.myClass');  //选择div内的class等于myClass的元素

注意：find是查找这个标签内部的，filter是对这个标签再进行筛选

判断是否选择到了元素

jquery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素，length等于0，就是没有找到元素，length大于0，就是找到了元素

绑定click事件

给元素绑定click事件，可以用以下方法

$('#btn1').click(function(){
    //内部的this指的是原生对象，即btn1
    //使用jquery对象使用$(this)
})

案例：利用click切换class

<!DOCTYPE html>
<html>
<head>
    <title>利用click切换class</title>
    <script type="text/javascript" src="./jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function(){
            var $btn = $('#btn');
            $btn.click(function(){
                if($('.box').hasClass('col01')){
                //hasClass，判断是否含样式类
                    $('.box').removeClass('col01');
                }else{
                    $('.box').addClass('col01');
                }
                //以上代码可以简化为如下一行
                //$('.box').toggleClass('col01');
            })
        })
    </script>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: gold;
        }
        .col01 {
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <input type="button" name="" value="切换样式" id="btn">
    <div class="box">div元素</div>
</body>
</html>

获取元素的索引值

有时候需要获得匹配元素相对于其他同胞元素的索引位置，此时可以用index()方法来获取

var $li = $('.list li').eq(1);

alert($li.index()); //弹出1
……
<ul class='list'>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

案例：index的使用

<!DOCTYPE html>
<html>
<head>
    <title>index的使用</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="./jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function(){
        var $li = $('.list li');
            alert($li.length);  //弹出8
            alert($li.eq(3).index());   //弹出3
            var $myli = $li.filter('.myli');    //选中myli
            alert($myli.index());   //弹出4
        })
    </script>
    <style type="text/css">

    </style>
</head>
<body>
    <ul class="list">
        <li>1</li><li>2</li><li>3</li><li>4</li>
        <li class="myli">5</li><li>6</li><li>7</li><li>8</li>
    </ul>
</body>
</html>

重要：案例-选项卡制作

<!DOCTYPE html>
<html>
<head>
    <title>选项卡制作</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="./jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function(){
            var $btns = $('.btns input');
            var $div = $('.cons div');
            $btns.click(function(){
                $(this).addClass('current').siblings().removeClass('current');
                //链式调用，给当前元素加上current,给其他元素去掉cureent
                $div.eq($(this).index()).addClass('active').siblings().removeClass('active');
            })
        })
    </script>
    <style type="text/css">
        .btns input {
            width: 100px;
            height: 40px;
            background-color: #ddd;
            border: 0px;
        }

        .btns .current {
            background-color: gold;
        }

        .cons div {
            width: 500px;
            height: 300px;
            background-color: gold;
            display: none;
            text-align: center;
            line-height: 300px;
            font-size: 30px;
        }
        .cons .active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="btns">
        <input type="button" value="01" name="" class="current">
        <input type="button" value="02" name="">
        <input type="button" value="03" name="">
    </div>

    <div class="cons">
        <div class="active">选项卡一的内容</div>
        <div>选项卡二的内容</div>
        <div>选项卡三的内容</div>
    </div>
</body>
</html>

JQuery特殊效果

类似于动画效果，属于jquery动画的集成效果

fadeIn()    //淡入
    $btn.click(function(){
        $('#div1').fadeIn(1000,'swing',function(){
            alert('done');
        })
    })

fadeIn 淡入
fadeOut() 淡出
fadeToggle() 切换淡入淡出。
hide() 隐藏元素
show() 显示元素
toggle() 切换元素可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素。789三个效果常常是做菜单用

他们都有三个参数：时间，运动方式，回调函数

运动方式常有：swing和linear

案例：元素淡入淡出

<!DOCTYPE html>
<html>
<head>
    <title>Jquery特殊效果</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="./jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#btn').click(function(){
                $('.box').fadeToggle(1000, 'swing', function(){
                    alert("动画播放完毕！")
                } );
                //fadeToggle有三个参数：运动时间 运动曲线 回调函数
                //参数的默认值： 缓冲运动（swing）回调函数就是在动画完成的时候可以做一些事情
            })
        })
    </script>
    <style type="text/css">
        .box {
            width: 300px;
            height: 300px;
            background-color: gold;
            display: none;
        }

    </style>
</head>
<body>
    <input type="button" value="动画" id="btn" name="">
    <div class="box"></div>
</body>
</html>

JQuery的链式调用

链式调用性能比较高

比如看下面这一条语句：

$('#div1')  //id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast')  //高度从0变到实际高度来显示ul元素
.parent()   //跳到ul的父元素，也就是id为div1的元素
.siblings() //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast')    //高度从实际高度变换到0来隐藏ul元素

案例：层级菜单

<!DOCTYPE html>
<html>
<head>
    <title>Jquery特殊效果</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="./jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function(){
            // $('#btn').click(function(){
            //  $('.box').fadeToggle(1000, 'swing', function(){
            //      // alert("动画播放完毕！")
            //  } );
            //  //fadeToggle有三个参数：运动时间 运动曲线 回调函数
            //  //参数的默认值： 缓冲运动（swing）回调函数就是在动画完成的时候可以做一些事情
            // })
            $('.level1').click(function(){
                $(this).next().slideToggle().parent().siblings().children('ul').slideUp();
                //$(this)的下一个元素切换slide状态，然后$(this)
                //的下一个元素的父级元素的兄弟中标签为ul的孩子关闭
                //但是以上代码在连续点击多次后如果鼠标移开该标签，
                //该元素还是会连续展开收拢
                //为了解决这个bug，可以在slideToggle的前面加上stop().
            });
        })
    </script>
    <style type="text/css">

    </style>
</head>
<body>
    <ul class="menu">
        <li>
            <a class="level1" href='#'>水果</a>
            <ul class="current">
                <li><a href="#">苹果</a></li>
                <li><a href="#">梨子</a></li>
                <li><a href="#">葡萄</a></li>
                <li><a href="#">火龙果</a></li>
            </ul>
        </li>

        <li>
            <a class="level1" href='#'>海鲜</a>
            <ul class="current">
                <li><a href="#">扇贝</a></li>
                <li><a href="#">虾</a></li>
                <li><a href="#">蚌</a></li>
                <li><a href="#">蛏子</a></li>
            </ul>
        </li>

        <li>
            <a class="level1" href='#'>肉类</a>
            <ul class="current">
                <li><a href="#">猪肉</a></li>
                <li><a href="#">牛肉</a></li>
                <li><a href="#">鸡肉</a></li>
                <li><a href="#">鸭肉</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

JQuery动画

通过animate()方法可以设置元素某属性值上的动画，可以设置一个或多个属性，动画执行完成后会执行一个回调函数。

四个参数：要更改的属性值，时间，动画方式，回调函数

默认的时间在400ms~500ms左右

animate前也可以加上.stop()避免重复点击时的bug

$('#div1').animate({
    width:300,  //如果要写单位，必须要引起来，如果不加引号，默认px
    height:300
}, 1000, 'swing', function(){
    alert('done');
})

牛逼：参数可以写成数字表达式

注意：对于纯数字，不能加引号

$('div1').animate({
    width: '+=100',
    height:300
},1000, 'swing', function(){
    alert('done!')
})

案例：长、宽、透明度的变化与回调函数的反复使用
caution：jquery的animation不能改变背景颜色

<!DOCTYPE html>
<html>
<head>
    <title>animate</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="./jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function(){
            var $box = $('.box');
            $('.btn').click(function(){
                $box.animate(
                    {width: 500},1000,'swing',
                    function(){
                        $box.animate(
                            {height: 500},1000,'swing',function(){
                                $box.animate(
                                    {opacity:0},1000,'swing',function(){
                                        alert('done');
                                    }
                                )
                            }
                        )
                    }
                )
            })
        })
    </script>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <input class="btn" type="button" value="播放动画" name="">
    <div class="box"></div>
</body>
</html>

尺寸相关、滚动事件

尺寸相关

获取和设置元素的尺寸

width()、height() //获取元素（内容）的width和height
innerWidth()、innerHeight() //包括padding的width和height
outerWidth()、outerHeight() //包括padding和border的width和height。获取元素的真实尺寸，用得最多
outerWidth(true)、outerHeight(true) //包括padding和border以及margin的width和height

width：内容，inner：+padding，outer：+border，outertrue：+margin

获取元素相对页面的绝对位置

offset()：获取的是top和left两个属性，他们又可以用如offset().left方式取出

案例：加入购物车

<!DOCTYPE html>
<html>
<head>
    <title>加入购物车</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="./jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function(){
            var $chart = $('.chart');
            var $count = $('.chart em');
            var $btn = $('.add');
            var $point = $('.point');

            var $w01 = $btn.outerWidth();
            var $h01 = $btn.outerHeight();
            
            var $w02 =$chart.outerWidth();
            var $h02 = $chart.outerHeight();

            $btn.click(function(){
                var oPos01 = $btn.offset();
                var oPos02 = $chart.offset();
                $point.css({'left':oPos01.left + parseInt($w01/2)- parseInt($point.outerWidth()/2), 'top':oPos01.top + parseInt($h01/2) - parseInt($point.outerHeight()/2)});
                $point.show();

                $point.stop().animate({'left':oPos02.left + parseInt($w02/2) - parseInt($point.outerWidth()/2), 'top':oPos02.top + parseInt($h02/2) - parseInt($point.outerHeight()/2)},
                    1000,'swing',function(){
                        $point.hide();
                        var iNum = $count.html();
                        $count.html(parseInt(iNum) + 1);
                    })
            })
        })
    </script>

    <style type="text/css">
        .chart {
            width: 150px;
            height: 50px;
            border: 2px solid #000;
            text-align: center;
            line-height: 50px;
            float: right;
            margin-right: 100px;
            margin-top: 50px;
        }

        .chart em {
            font-style: normal;
            color: red;
            font-weight: bold;
        }

        .add{
            width: 100px;
            height: 50px;
            background-color: yellowgreen;
            border: 0px;
            color: #fff;
            margin-top: 300px;
            margin-left: 300px;
        }
        .point {
            width: 10px;
            height: 10px;
            background-color: red;
            position: fixed;    /*固定定位就是相对于页面的位置*/
            float: left;
            left: 0px;
            top: 0px;
            border-radius: 50%;
            display: none;
            z-index: 9999;
        }
    </style>
</head>
<body>
    <div class="chart">购物车<em>0</em></div>
    <input type="button" class="add" value="加入购物车" name="">
    <div class="point"></div>
</body>
</html>

获取浏览器可视区宽度高度

$(window).width()
$(window).height()

获取页面文档的宽度高度

$(document).widht()
$(document).height()

获取页面滚动距离

$(document).scrollTop()：页面内容超出屏幕上方的距离
$(document).scrollLeft()：页面内容超出屏幕左边的距离

获取页面滚动事件

$(window).scroll(function(){
    ......
})

案例：置顶菜单与页面滚动

<!DOCTYPE html>
<html>
<head>
    <title>置顶菜单</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="./jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $menu = $('.menu');
            $(window).scroll(function(){
                var iNum = $(document).scrollTop();
                if (iNum > 200){
                    $menu.css({
                        'position':'fixed',
                        'left':'50%',
                        'top':'0',
                        'marginLeft':-480   //对于数字，不能打引号
                    });
                    $('.menu-back').show();
                    $('.toTop').fadeIn();
                }else{
                    $menu.css({
                        'position':'static',//static是默认
                        'marginLeft':'auto'
                    })
                    $('.menu-back').hide();
                    $('.toTop').fadeOut();
                }
            })

            $('.toTop').click(function(){
                $('html, body').animate({'scrollTop':0})
            })
        })
    </script>
    <style type="text/css">
        body {
            padding: 0px;
            margin: 0px;
        }

        .banner {
            width: 960px;
            height: 200px;
            background-color: cyan;
            margin: 0 auto;
        }
        .menu {
            width: 960px;
            height: 80px;
            background-color: gold;
            margin: 0 auto;
            text-align: center;
            line-height: 80px;
            /*opacity: 0.2;*/
        }
        .menu-back {
            /*防止menu在fiexed后下面的元素突然上移*/
            width: 960px;
            height: 80px;
            display: none;
        }
        p {
            text-align: center;
            color: red;
        }
        .toTop {
            width: 60px;
            height: 60px;
            background-color: yellowgreen;
            content: #fff;
            position: fixed;
            right: 20px;
            bottom: 50px;
            text-align: center;
            line-height: 60px;
            font-size: 60px;
            border-radius: 50%;
            cursor: pointer;    /*当鼠标放上去就变成手*/
            display: none;
        }

    </style>
</head>
<body>
     <div class="banner"></div>
     <div class="menu">菜单</div>
     <div class="menu-back"></div>
     <div class="toTop">↑</div>
     <p>文档内容</p><br><br><br><br><br><br><br><br><br>
     <p>文档内容</p><br><br><br><br><br><br><br><br><br>
     <p>文档内容</p><br><br><br><br><br><br><br><br><br>
     <p>文档内容</p><br><br><br><br><br><br><br><br><br>
     <p>文档内容</p><br><br><br><br><br><br><br><br><br>
     <p>文档内容</p><br><br><br><br><br><br><br><br><br>
     <p>文档内容</p><br><br><br><br><br><br><br><br><br>
</body>
</html>

JQuery属性操作

html() 取出或设置html内容，如果有参数，就是设置，反之是取出

var $htm = $('#div2').html();   //html类似于原生js的innerHTML，即标签中间的内容
$('#div1').html('<span>添加文字</span>');

prop() 获取或设置某个属性（行间里面）的值，对于地址属性，获取的是绝对地址。prop：property

var $src = $('#img1').prop('src');  //注意要有引号

$('#img1').prop({src:'test.jpg', alt:'test image'});    //键不用引号

案例：

<!DOCTYPE html>
<html>
<head>
    <title>属性操作</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="./jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function(){
            var $a = $('a');
            alert($a.prop('class'));
            alert($a.html());
            $a.html('百度一下');
            $a.prop({'href':'https://www.baidu.com'});
        })
    </script>

    <style type="text/css">
        
    </style>
</head>
<body>
    <a class="link" href="#">这是一个链接</a>
</body>
</html>

jquery的循环

对jquery选择的对象集合分别进行操作，需要用到jquery的循环操作，此时可以用对象上的each方法

$(function(){
    $('.list li').each(function)(i){
    //funtion的第一个参数就是索引。后面的$(this)就是集合中依次取出的元素
        $(this).html(i);
    }
})

事件的绑定

事件冒泡

什么是事件冒泡

在一个对象上触发某类事件（比如点击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了最顶层，即document对象（有些浏览器是window)

代码示例：以下代码当点击son时会弹出1，2，3

注意：事件的向上冒泡不是按照布局的位置，而是标签的包含顺序来冒泡的

<!DOCTYPE html>
<html>
<head>
    <title>手风琴效果</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="./jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.son').click(function(){
                alert(1);
            })
            $('.father').click(function(){
                alert(2);
            })
            $('.grandfather').click(function(){
                alert(3);
            })


        })
    </script>

    <style type="text/css">
        .grandfather {
            width: 300px;
            height: 300px;
            background-color: green;
        }
        .father {
            width: 200px;
            height: 200px;
            background-color: gold;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="grandfather">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
</body>
</html>

事件冒泡的作用

事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

阻止事件冒泡

事件冒泡机制有时候是不需要的，需要阻止掉，通过event.stopPropagation()来阻止，写在哪里事件的冒泡就在哪里停止

$(function(){
    var $box1 = $('.father');
    var $box2 = $('.son');
    var $box3 = $('.grandson');
    $box1.click(function(ev){
    //事件发生的时候都有一个event对象
    //如果要用，就在funtion里面传一个参数，里面的第一个参数就是事件对象，
    //因此常将第一个参数取名为ev，或者event
        ev.stopPropagation();   //事件在此阻止了，不再向上冒泡
        alert('father');
    });
})

阻止默认行为

//阻止表单提交
$('#form1').submit(function(event){
    event.preventDefault();
})

合并阻止操作

在实际开发中，一般把阻止冒泡和阻止默认行为合起来写

//event.stopPropagation();
//event.preventDefault();
//合并写法
return false;   //因为是要返回true时才会向上传播，所以直接返回false即可

即，return false有三个作用：

阻止默认行为
阻止事件冒泡
结束函数的运行

事件函数列表

用法与click相同，以函数为参数

blur() 元素失去焦点 //一般是当表单失去焦点的时候，判断用户的输入是否合法
focus() 元素获得焦点。//12主要是用在input框上面，一般不在focus上面绑定事件，而是直接写成$('#input01').focus(function(){})以达到当页面刷新后直接聚焦于该输入框（效果与autofocus一样），如果写为了两个获取焦点，只有后写的能够获取焦点
click() 鼠标点击
mouseover() 鼠标进入（鼠标在元素的上方）（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发） //45之所以在子元素上的也会触发，是由于事件的冒泡
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数，类似于toggle，参数为两个function，第一个是移入的，第二个是移出的
ready() DOM加载完成 $(document).ready(function(){})
resize() 浏览器窗口的大小发生变化，一般是写在window上，$(window).resize()
scroll() 滚动条的位置发生变化
submit() 用户提交表单，一般是表单（form，form下一般才是input）的事件

绑定事件的其他方式

可以同时绑定多个事件，但是

$(function(){
    $('#div1').bind('mouseover click', functio(event){
    //可以同时绑定多个事件
        alert($(this).html));
    });
})

取消绑定事件

$(function(){
    $('#div1').bind('mouseover click',function(){
        alert($(this).html());
        //$(this).unbind();
        $(this).unbind('mouseover');
    })
})

综合案例：弹窗

<!DOCTYPE html>
<html>
<head>
    <title>弹框</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="./jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#btn').click(function(ev){
                // ev.stopPropagation();
                $('.pop_con').fadeIn();
                return false;
            })
            $(document).click(function(){
                $('.pop_con').fadeOut();
            })

            $('.pop').click(function(){
                return false;//让点击弹窗内的内容时，弹窗不会关闭
            })

            $('.close').click(function(){
                $('.pop_con').fadeOut();
                return false;
            })
        })
    </script>

    <style type="text/css">
        .pop_con {
            display: none;
        }
        .pop {
            position: fixed;
            width: 500px;
            height: 300px;
            background-color: #fff;
            border: 3px solid #000;

            left: 50%;
            top: 50%;

            margin-left: -250px;
            margin-top: -150px;
            z-index: 999;
        }

        .mask {
            position: fixed;
            height: 100%;
            width: 100%;
            background-color: #000;
            opacity: 0.2;
            filter: alpha(opacity=30);  /*兼容性写法，为了兼容ie浏览器*/

            left: 0px;
            top: 0px;
            z-index: 998;
        }
        .close {
            float: right;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <input type="button" value="弹出" id="btn" name="">
    <div class="pop_con">
        <div class="pop">
            弹窗里面的文字
            投资金额：
            <input type="text" name="">
            <a href="#" id="close" class="close">x</a>
        </div>
        <div class="mask"></div>
    </div>
</body>
</html>

事件委托

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以换新加入的子元素也可以拥有相同的操作。

一般绑定事件的写法

$(function(){
    $ali = $('#list li');
    $ali.click(function(){
        $(this).css({background:'red'});
    });
});

事件委托的写法及案例

delegate：委托，委派

<!DOCTYPE html>
<html>
<head>
    <title>事件委托</title>
        <meta charset="utf-8">
    <script type="text/javascript" src="./jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(function(){
            // $('.list li').click(function(){
            //  $(this).css({'background-color':'red'});
            // })//正常方式

            //事件委托方式
            $('.list').delegate('li', 'click', function(){
                //三个参数：要代理它的那些元素，代理的事件，要执行的行为
                $(this).css({'background-color':'red'});
                //$(this)指的是每次代理的li
            })
        })
    </script>

    <style type="text/css">
        .list {
            background-color: gold;
        }
        .list li {
            height: 30px;
            background-color: yellowgreen;
            margin: 10px;
        }
    </style>
</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>

jquery元素节点操作

对于原生js，其元素节点操作很多不兼容，而jquery就克服了这个问题

创建节点

var $div = $('<div>');
var $div2 = $('<div>这是一个div元素</div>');

插入节点

如果原来里面是空的，可以直接用html的方式，效率更高（在前面插入，就把要插入的部分与原来的html相加，然后写入html，如果是插入在后面，就将相加的顺序调换）

append()和appendTo()：在现存元素的内部，从后面插入元素。append是前者里面放入参数元素，appenTo是前者放入参数中去1

var $span = $('<span>这是一个span元素</span>');
$('#div1').append($span);
//ps：相当于就是以字符串的格式插入
......
<div id='div1'></div>

prepend()和prependTo()：在现存元素的内部，从前面插入元素
after()和insertAfter() ：在现存元素的外部，从后面插入元素
before和insertBefore()：在现存元素的外部，从前面插入元素。eg：比如id为p1的标签和id为title01的标签处于同级，用$('#p1').insertBeofre($('#title01'));交换二者的位置

删除节点

$('#div1').remove();    //删除id为div1的标签

滚轮事件与函数节流

jquery.mousewheel插件使用

jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.mousewheel.js。

当鼠标向下滑的时候，返回1；向上滑的时候，返回-1

$(window).mousewheel(function(event, dat){
    //event就是事件对象，一般写event；第二个参数是判断滚轮是向下还是向上滚动，向下dat就为1，向上dat就为-1
    //这个函数里面写滚轮滚动时候要做的事情，根据dat的值（1or-1）来做不同的事情
})

注意：鼠标滚动是高频触发事件（滚动一下滚轮，会触发事件好几次），可以将要做的事情放在一个定时器中以解决该问题

$(window).mousewheel(function(){
    clearTimeout(timer);
    timer = setTimeout(function(){
        //这里写鼠标滚动的时候要做的事情
    })
})

函数节流

javascript中有些事件的触发频率非常高，比如onresize事件（jq中是resize），onmousemove事件（jq中是mousemove）以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流

jQuery 效果
目录 jQuery 隐藏/显示jQuery 淡入淡出jQuery 滑动jQuery 动画jQuery Callba...
jquery常用cdn
jQuery： jQuery mobile： jQuery UI：
jQuery第一天笔记
JQuery简介 JQuery常用方法 JQuery中的插件 JQuery简介 JQuery 的发展历史http:...
JavaScript之jQuery
九、jQuery 目录：初识jQuery及公式、jQuery选择器、jQuery事件、jQuery操作DOM元素 ...
jQuery需要课上讲解的方法
jQuery jQuery 核心jQuery() jQuery对象访问each()index()get()leng...
优博精选|2018互联网优秀博客推荐（持续更新）
前端开发 jQuery之家:jQuery之家致力于搜集和整理各种jQuery插件，jQuery特效，jquery ...
jquery实战
jQuery属性操作 jQuery特殊效果 jQuery动画 jQuery循环 jQuery其他事件自定义事件
jQuery操作及动画效果
jQuery样式操作 click事件 jQuery索引值 jQuery做选项卡 jQuery属性操作 jQuery...
jQuery操作及动画效果
jQuery样式操作 click事件 jQuery索引值 jQuery做选项卡 jQuery属性操作 jQuery...
jQuery
jQuery框架一、jQuery基础添加jQuery到网页 jQuery基本语法二、jQuery 选择器示...