前端之jquery

一、JavaScript和jquery的区别

Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。
jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发
jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到

注意：一般情况下，是库的文件，该库中都会抛出来构造函数或者对象，如果是构造函数，那么使用new关键字创建对象，如果是对象直接调用属性和方法

DOM文档加载的步骤

解析HTML结构。
加载外部脚本和样式表文件。
解析并执行脚本代码。
DOM树构建完成。
加载图片等外部文件。
页面加载完毕。

执行时间不同

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

编写个数不同

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个

$(document).ready()可以同时编写多个，并且都可以得到执行

二、jquery文件的引入

<!-- 引包 -->
<script src="jquery-3.3.1.js"></script>
<!-- jquery是全局的一个函数，当调用$()内部会 new jQuery()，创建出对象之后，就可以用对象的属性和方法。-->

三、jquery的入口函数

// jquery对象
console.log($(document));

// jquery的文档对象
console.log($(document)[0]);

// 1.jquery入口函数，等待文档资源加载完之后调用此方法
$(document).ready(function () {
    alert(1);
});


// 2.jquery入口函数简易版
$(function () {
    alert(2);
});

// 图片资源加载完成之后调用
$(window).ready(function () {
    alert(3);
})


// 上面三个方法谁也不覆盖谁，解决了之前windows.onload()的覆盖现象。

四、JQuery对象和JS对象的互相转换

    $(function () {
       // 获取jquery对象
        console.log($('#box2'));

        // 获取js对象
        let oDiv2 =  document.getElementById('box2');
        console.log(oDiv2);

        // jquery -> js对象
        console.log($('#box2')[0]);
        console.log($('#box2').get(0));    // 两种方式一样


        // js对象 -> jquery对象 $(js对象)
        console.log($(oDiv2));

    });

五、jQuery如何操作DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div {
            margin-top: 10px;
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box">wusir</div>
<div id="box">日天</div>
<div>alex</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">


    $(function () {

        // 事件三步走： 事件源,事件,事件驱动程序

        // jquery如何获取dom
        // jquery的标签选择器

        // console.log($('div'));


        // js对象
        // $('div')[0].onclick

        // jquery内部自己遍历
        $('div').click(function () {

            // alert(1);

            // this指的是js对象
            // console.log(this.innerText);
            // console.log($(this).text())

            $(this).hide(300);
        });

        // // 2.类选择器
        // console.log($('.box'));
        // // 3.id选择器
        // console.log($('#box'))


    });
</script>
</body>
</html>

六、选择器

1. 层级选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul class="lists">
    <li>
        女友
        <ol>
            <li>alex</li>
        </ol>
    </li>
    <li class="item">
        <a href="#">alex2</a>
    </li>
    <li class="item2">wusir</li>
    <li>日天</li>
    <li>村长</li>
    <li>小马哥</li>

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

    $(function(){
        // 后代选择器  修改样式属性
        $('.lists li').css('color','red');
        // 子代选择器 亲儿子
        $('.item>a').css({
            'color':'yellow',
            'background-color':'red'
        });
        //
        // + 紧邻  只选中挨着最近的兄弟
        $('.item + li').css('color','green');
        //
        // ~ 兄弟选择器
        $('.item2~li').css('color','purple');



    });
</script>

</body>
</html>

2. 基本过滤选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">

    $(function(){
        // 写法 $('ul li:eq(0)')
        // 1.:eq(index) 选择序号为index的元素
        $('ul li:eq(0)').css('background','red');
        $('ul li:gt(0)').css('color','green');
        $('ul li:lt(3)').css('color','yellow');
        // 选取的奇数和偶数
        $('ul li:odd').css('background','black');
        $('ul li:even').css('background','green');
        // 选取第一个和最后一个
        $('ul li:first').css('background','red');
        $('ul li:last').css('background','red');
    });
</script>

</body>
</html>

3. 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form>
    <input type="text" name="">
    <input type="password" name="">

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

    $(function(){
        // 属性选择器
        $('input[type=text]').css('background','red');
        $('input[type=password]').css('background','red');
    })
</script>
</body>
</html>

4. 筛选选择器（重要）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="box">
    <p>
        <span class="child">alex</span>
    </p>
    <p>
        <span class="active">alex2</span>
    </p>
    <p class="item3">alex3</p>
    <p>alex4</p>
    <p>alex5</p>
    <div class="child">哈哈哈哈哈</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">

    $(function(){

        // // find(selector)
        // 查找后代 包括子子孙孙
        // $('.box').find('p').css('color','red');
        // $('.box').find('.item3').css('color','green');

        // //   在jquery中，这叫链式编程，就因为有这个链式编程，所有我们书写的就少。
        // $('.box').find('p>.active').css('color','yellow').click(function() {
        //     alert($(this).text());
        // });
        // console.log($('.box').find('p>.active').css('color','yellow'));
        // console.log($('.box').find('p'));

        // 子代children(selector) 获取的是亲儿子
        // $('.box').children('.child').css('color','purple');
        // parent 获取的是亲爹

        // eq(index) index是从0 开始的

        $('.box').children('p').eq(1).css('font-size',30);

    });
</script>
</body>
</html>

4.siblings选择器方法的基本使用

查找所有兄弟元素（不包括自己）

选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        button{
            width: 100px;
            height: 40px;
        }
    </style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">

    $(function(){
        // 内部遍历
        $('button').click(function(event) {
            // 选项卡
            $(this).css('background','red').siblings('button').css('background','transparent');
            console.log($(this).css('background','red'));
        });
    });
</script>
</body>
</html>

选项卡完整版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            width: 400px;
            height: 100px;
            overflow: hidden;
        }
        ul li{
            list-style: none;
            float: left;
            width: 80px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: red;
            margin-right: 10px;

        }
        ul li a{
            padding: 20px;
            /*background-color: green;*/
            color:#fff;
        }
        p{
            display: none;
        }
        p.active{
            display: block;
        }
    </style>
<body>
    <ul>
        <li>
            <a href="javascript:void(0)">
                alex1
            </a>
        </li>
        <li>
            <a href="javascript:void(0)">
                alex2
            </a>
        </li>
        <li>
            <a href="javascript:void(0)">
                alex3
            </a>
        </li>
        <li>
            <a href="javascript:void(0)">
                alex4
            </a>
        </li>
    </ul>
    <p>alex1</p>
    <p>alex2</p>
    <p>alex3</p>
    <p>alex4</p>

    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $('ul li a').click(function() {
                // 选项卡的完整版
                $(this).css('background','green').parent('li').siblings('li').find('a').css('background','transparent');

                // 得获取到点击的 dom的索引 通过 index()方法获取  注意 这个要找的是有兄弟元素的索引
                var i = $(this).parent('li').index();
                // addClass()  removeClass()
                $('p').eq(i).addClass('active').siblings('p').removeClass('active');
            });
        })
    </script>
    
    
</body>
</html>

七、jqueryd动画

jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。

显示动画

方式一：

  $("div").show();

解释：无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: block;实现的。

方式二：

$('div').show(3000);

解释：通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。

方式三：

 $("div").show("slow");

参数可以是：

slow 慢：600ms
normal 正常：400ms
fast 快：200ms

解释：和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示。

方式四：

 //show(毫秒值，回调函数;
    $("div").show(5000,function () {
        alert("动画执行完毕！");
    });

解释：动画执行完后，立即执行回调函数。

总结：

上面的四种方式几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画结束后执行的回调函数。

1. 基本动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color:red;
            display: none;
        }
    </style>
</head>
<body>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<button id="toggle">开关式动画</button>
<div class="box"></div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function(){
        // 显示动画
        $('#show').click(function(){
            // 如果是一个按钮控制盒子显示隐藏 那么得需要去控制isShow这个变量

            // show(动画的时间，fn)
            // 默认是normal  400ms   slow  600ms  fast 200ms
            $('.box').show(2000,function(){
                $(this).text('alex');
            });

        });
        // 隐藏
        $('#hide').click(function(){

            $('.box').hide('slow');

        });

        // 开关式的显示隐藏动画
        $('#toggle').click(function(){
            // 玩动画，就跟玩定时器一样，先关动画，再开动画
            $('.box').stop().toggle(2000);
        })
    });
</script>

</body>
</html>

2. 卷帘门动画效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>
</head>

<body>
<button id="slideDown">卷帘门下拉</button>
<button id="slideUp">卷帘门上拉</button>
<button id="toggleSlide">开关式动画</button>
<div class="box"></div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function() {
        // 显示动画
        $('#slideDown').click(function() {
            $('.box').slideDown(200);

        });
        // 隐藏
        $('#slideUp').click(function() {

            $('.box').slideUp(200);

        });

        // 开关式的显示隐藏动画
        $('#toggleSlide').click(function() {
            $('.box').stop().slideToggle(1000);
        })
    });
</script>
</body>

</html>

3. 淡入淡出

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            display: none;
        }
    </style>
</head>

<body>
<button id="fadeIn">淡入动画</button>
<button id="fadeOut">淡出动画</button>
<button id="fadeToggle">开关式动画</button>
<div class="box"></div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function() {
        // 显示动画
        $('#fadeIn').click(function() {
            $('.box').fadeIn(1000);

        });
        // 隐藏
        $('#fadeOut').click(function() {
            // 第二个参数都是有回调函数
            $('.box').fadeOut(1000);
        });

        // 开关式的显示隐藏动画
        $('#fadeToggle').click(function() {
            $('.box').stop().fadeToggle(1000);
        })
    });
</script>
</body>

</html>

4. 自定义动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    
    <div></div>
    <button>动画吧</button>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        
        $(function(){
                $('button').click(function(event) {
                    /* Act on the event */
                    // animate({队列的属性},时间,fn)
                        var  json = {
                            width:200,
                            height: 200,
                            top: 200,
                            left : 500,
                            "border-radius":200
                            
                        };
                        var json2 = {
                            width: 0,
                            height: 0,
                            top: 10,
                            left: 1000
                        }

                        $('div').stop().animate(json,2000,function(){
                            $('div').stop().animate(json2,1000,function(){
                                alert('已添加购物车')
                            })
                        });
                });
                
        });
    </script>
    
</body>
</html>

5. 二级菜单动画的使用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-color: pink;
        }

        .wrap li {
            background-color: green;
        }

        .wrap > ul > li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>


</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
                <li><a href="javascript:void(0);">二级菜单4</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">二级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
                <li><a href="javascript:void(0);">二级菜单4</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">三级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">三级菜单2</a></li>
                <li><a href="javascript:void(0);">三级菜单3</a></li>
                <li><a href="javascript:void(0);">三级菜单4</a></li>
            </ul>
        </li>
    </ul>
</div>

<script src="./jquery-3.3.1.js"></script>
<script>
    //入口函数
    $(function () {
        //需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。
        var jqli = $(".wrap>ul>li");

        //绑定事件  mouseenter 鼠标进入 mouseleave  鼠标离开吧
        // js  onmouseover onmouseout
        jqli.mouseenter(function () {
            $(this).children("ul").stop().slideDown(1000);
        });
        //绑定事件(移开隐藏)
        jqli.mouseleave(function () {
            $(this).children("ul").stop().slideUp(1000);
        });
    });
</script>
</body>
</html>

八、jquery的属性操作

jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作

html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()

DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()

类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()

值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()

1. JQuery的标签属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div title='alex' class="active"></div>
<!-- <img src="" alt=""> -->
<a href="">百度一下</a>
<!-- <input type="text" name="" value="" placeholder="" id="" > -->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">

    /*1.样式属性操作 css('color') 获取值
    css('color','red') 设置单个值
    css({
        key1:value1,
        key2:value2
    });
    key 既可以是驼峰  又可以是margin-left 要给margin-left 加引号

       2. 标签的属性操作
       attr(key) 获取属性值
       attr(key,value) 设置单个值
       attr({key1:value1,key2:value2});设置多个值


       3.DOM对象属性操作

       4.类样式属性操作
       addClass()  removeClass() toggleClass()

       5.对值的操作
       text() html()  val()

       innerText
       innerHTML
       value

       6.对DOM的操作 CRUD

    */


    // js中
    // setAttribute(key,value)
    // getAttribute()
    // removeAttribute(name: DOMString)
    $(function () {

        // attr() 有一个参数表示获取属性值
        console.log($('div').attr('title'));

        // 设置 属性的时候 不要使用此方式来设置类名  不建议
        // $('div').attr('class','box1 box2');
        //

    });

</script>

</body>
</html>

2. jQuery对DOM对象属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="radio" name="sex" checked> 男
<input type="radio" name="sex"> 女

<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    // prop() removeProp()

    $(function () {

        // js对input单选按钮checked的默认设置
        // console.log($('input[type = radio]').attr('checked')); //checked
        var oInput = document.getElementsByTagName('input')[1];
        console.dir(oInput);

        // 用prop返回的是true或false
        console.log($('input[type=radio]').eq(0).prop('checked'));
        $('input[type=radio]').eq(0).prop('aaaaa', '11121111');

        // console.log($('input[type=radio]').eq(0))   // 可以找到aaaaa

        $('input[type=radio]').eq(0).removeProp('aaaaa');
        console.log($('input[type=radio]').eq(0))

    });
</script>

</body>
</html>

3. JQuery对类样式的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .hidden{
            display: none;
        }
    </style>
</head>
<body>
<button id="btn">隐藏</button>
<div class="box"></div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function(){
        var isShow = true;
        $('#btn').click(function(){

            /*
            1.通过控制类样式属性对盒子显示隐藏
            if (isShow) {
                $('.box').css('display','none');
                isShow = false;
                $(this).text('显示');
            }else{
                $('.box').css('display','block');
                isShow = true;
                $(this).text('隐藏');

            }


            */

            // 2.通过控制类名  addClass() removeClass()
            // 记住 如果是操作类名  一定要使用addClass 和removeClass 不要使用attr()
            if (isShow) {
                // className +=' hidden'
                $('.box').addClass('hidden active yyy uuu ooo ppp');
                isShow = false;
                $(this).text('显示');
            }else{
                $('.box').removeClass('hidden yyy uuu ooo ppp');
                isShow = true;
                $(this).text('隐藏');
            }


        })


    });
</script>
</body>
</html>

4. JQuery对值的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<p id="box">
    wusir
</p>
<div class="box">
    女盆友
    <span>alex</span>
</div>
<input type="text" value="123">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function(){
        // 只 获取文本的内容  text() innerText
        // trim()清除前后的空格
        // console.log($('#box').text().trim());

        // 设置文本的内容
        // $('#box').text('武sir 女朋友');

        // 获取标签和文本的内容 html() innerHTML
        // console.log($('.box').html().trim());
        // 设置
        // $('.box').html('<h2>我女朋友呢</h2>');


        // // val()         value
        // console.log($('input').val());
        // // 清空input输入框中的内容
        // $('input').val('');

        $('input').val('哈哈哈哈');

    });
</script>
</body>
</html>

5. 插入操作

父子之间插入操作

插到最后一个元素上

父元素.append(子元素) 追加某元素父元素中添加新的元素

子元素.appendTo(父元素) 追加到某元素子元素添加到父元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="wusir">wusir</div>
<div class="box">

</div>

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

    $(function(){
        var oP = document.createElement('p');
        oP.innerText = '女朋友';
        oP.id = 'tt';
        // 1.父子之间 父.append(子)  子.appendTo(父)
        // 子元素 ： 可以是 一个string  、jsDOM对象 、jquery对象
        // $('.box').append('alex');//可以插入普通的文本
        // $('.box').append('<h2>alex</h2>');//可以插入标签+文本
        // $('.box').append(oP); //插入一个jsDom对象
        // $('.box').append($('.wusir')); //如果插入的是一个jquery对象 相当于是一个移动操作
    
        // $('.box').append(oP);
        // console.log($('#tt'));
        // $('#tt').click(function(){
        //
        //     alert($(this).text());
        // });

        $('<p>日天</p>').appendTo('.box').click(function(event) {
            $(this).css({
                width:100,
                height:100,
                backgroundColor:'red'
            }).text('wusir');
        });

        // jquery有链式编程 简化我们的代码
    });
</script>
</body>
</html>

插到第一个元素上

prepend（）前置添加，添加到父元素的第一个位置

prependTo 后置添加，第一个元素添加到父元素中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul>
    <li>alex</li>
</ul>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function(){
        // prepend()   prependTo()
        //1. prepend() 插入 子级的第一个元素
        $('ul').prepend('<li>wusir</li>');
        $('<li>村长</li>').prependTo('ul').click(function() {
            alert(this.innerText);
        });
    });
</script>

</body>
</html>

兄弟之间插入操作

父.after(子) 在匹配的元素之后插入内容与子.insertAfter(父)

父.before(子) 在匹配的元素之前插入内容与子.insertBefor(父)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
<ul>
    <li class="item">alex</li>
</ul>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function() {
        // es6的模板字符串,tab键,上面的反引号``，重要，不用考虑单引号和双引号了。使用${变量名}插入变量。
        var title = "百度一下";
        var title2 = '百度一下before';
        $('.item').after(`<li>
            <a href="#">${title}</a>
        </li>`);

        $('<li>wusir</li>').insertAfter('.item');

        // // before
        $('.item').before(`<li>
            <a href="#">${title2}</a>
        </li>`);
        $('<li>wusir before</li>').insertBefore('.item');




    });
</script>
</body>

</html>

6. 替换操作

一、replaceWith()：将所有匹配的元素替换成指定的HTML或DOM元素。

//将所有的h5标题替换为a标签
$('h5').replaceWith('<a href="#">hello world</a>')
//将所有h5标题标签替换成id为app的dom元素
$('h5').replaceWith($('#app'));

二、replaceAll():用匹配的元素替换掉所有 selector匹配到的元素

二、replaceAll():用匹配的元素替换掉所有 selector匹配到的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="box">
    <h2>alexsb</h2>
    <h2>alexsb</h2>
    <h3>wusirddb</h3>
</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">

    $(function () {
        // 页面中获取的DOM对象.replaceWith(替换的内容)
        $('h2').replaceWith('<span>圆圆</span>');

        // replaceAll()
        $('<p style = "color:red;">黑girl</p>').replaceAll('span');

    });
</script>

</body>
</html>

7. 删除和清空操作

一、remove() 删除节点后，事件也会删除（简言之，删除了整个标签）

$('ul').remove();

二、detach() 删除节点后，事件会保留

 var $btn = $('button').detach()
 //此时按钮能追加到ul中
 $('ul').append($btn)

三、empty(): 清空元素中的所有后代节点

//清空掉ul中的子元素，保留ul
$('ul').empty()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
<div class="box">
    <p style="font-size: 20px;font-weight: 600;">alex</p>
</div>
<button>删除</button>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function() {

        $('button').click(function() {
            alert(1);
            // remove() 删除节点后，事件也会删除，也就是删除了整个标签
        // console.log($(this).remove());  // jquery对象
        //     var jqBtn = $(this).remove();
        //     $('.box').prepend(jqBtn);


            // detach() 删除节点后,事件会保留
            // var jqBtn = $(this).detach();
            // $('.box').prepend(jqBtn);

            // 清空
            $('.box').empty();
        })
    });
</script>
</body>

</html>

8. 操作input的value值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form>
    男<input type="radio" name="sex">
    女<input type="radio" name="sex">

    <select>
        <option>alex</option>
        <option>wusir</option>
        <option selected="">黑girl</option>
    </select>

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

    $(function(){
        // 原生js  onchange

        // jquery  change()
        // 设置值 加载页面时默认选中第一个
        $('input[type=radio]').eq(0).attr('checked',true);

        $('input[type=radio]').change(function(){
            alert(1);
            // 获取值  on
            console.log($(this).val());
            console.log($('input[type=radio]:checked').val())

        });



        $('select').change(function(){

            // 1.获取选中项的值
            console.log($('select option:selected').text());

            // 2.获取选中项的值
            console.log($('select').find('option:selected').text());

            // 3.获取选中项的索引   $('select').get(0) 将jquery对象转化 js对象
            console.log($('select').get(0).selectedIndex);
            console.log($('select option:selected').index());

        });

        // 设置select 的值

        // 加载页面时，设置第二个当做选中值
        // $('select option').get(1).selected = true;
        // selectedIndex是select对象的属性
        // $('select').get(0).selectedIndex = 0;
        // index() 只读的，不能使用这个方法来设置值

    });
</script>
</body>
</html>

九、jquery的位置信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            position: relative;
            top: 10px;
        }

        .box{
            width: 200px;
            height: 200px;
            padding: 10px;
            border: 1px solid red;
            position: absolute;
            top: 100px;
            left: 200px;
        }
    </style>
</head>
<body style="height: 2000px">
<div class="father">
    <div class="box"></div>
</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function(){
        // width() heigth()
        // 获取宽
        // console.log($('.box').width());
        // 设置宽
        // $('.box').width('300');

        // 内部宽和内部高 innerWidth() innerHeight   包含内部宽+padding  不包含border
        // console.log($('.box').innerWidth());

        // 改变的是内部的宽度  不去修改padding和border
        // $('.box').innerWidth('500');

        //外部宽 outerWidth()  outerHeight  包含内部宽 + padding + border
        //$('.box').outerWidth();//222

        // 它的返回值 是一个对象 对象中包含了top和left属性
        // 距离页面顶部的距离 与父相子绝定位没有任何关系
        console.log($('.box').offset().top);
        console.log($('.box').offset().left);

        // 它的属性是只读
        // $('.box').offset().top

        // 滚动的偏移的距离 ---> 页面卷起的高度 和宽度
        // $(document).scrollTop(110);

        // 监听文档的滚动事件 ---> jquery的事件方法
        $(document).scroll(function(){
            console.log($(this).scrollTop());
            var scrollTopHeight = $(this).scrollTop();
            var boxOffsetTop = $('.box').offset().top;
            if (scrollTopHeight >boxOffsetTop ) {
                $('.box').stop().hide(1000);
            }


        })
    });
</script>
</body>
</html>

十、jquery的事件

1. 事件的概念

HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念

2. 什么是事件流

事件流描述的是从页面中接收事件的顺序

1、DOM事件流

“DOM2级事件”规定的事件流包括三个阶段：

① 事件捕获阶段；

② 处于目标阶段；

③ 事件冒泡阶段

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
<button id='btn'>按钮</button>
<script type="text/javascript">
    let oBtn = document.getElementById('btn');
    oBtn.onclick = function () {
        alert(1);
    };

    // false：冒泡，ture：捕获，默认是false。
    oBtn.addEventListener('click',function(){
        console.log('按钮处于捕获阶段');
    },false);

    oBtn.addEventListener('click',function(){
        console.log('按钮处于捕获阶段');
    },true)
</script>
</body>
</html>

3. 事件冒泡的处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .father{
            width: 300px;
            height: 300px;
            background-color: red;
        }

    </style>
</head>
<body>
<div class="father">
    <button>按钮</button>
    <a href="http://www.baidu.com">百度一下</a>
</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">

    $(function(){

        // 给按钮绑定事件
        // 在所有的事件回调函数中 都会有默认的事件对象
        $('.father button').click(function(event){
            // 原生js的事件对象
            console.log(event);
            alert($(this).text());
            // 阻止事件冒泡
            event.stopPropagation();

        });

        $('a').click(function(e){
            // e.preventDefault();
            // e.stopPropagation();


            alert('a被点击了');  // 默认事件
            return false;
        });

        $('.father').click(function(event){
            alert('父亲被点击了');
            // event.stopPropagation();
            console.log('哈哈哈哈哈');

            // 既阻止了默认事件 又阻止了冒泡
            return false;
        });

        $('body').click(function(){
            alert('body被点击了');
        })
    });
</script>
</body>
</html>

4. 评论收起操作的实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;

        }
        /*body{
            width: 100%;
            height: 2000px;
        }*/
        .commentBtn{
            font-size: 30px;
            color: #fff;
        }
        .box{
            width: 300px;
            background-color: red;
            position: relative;
        }
        .comment{
            position: relative;
            width: 300px;
            height: 500px;
            background-color: yellow;
        }
        .comment span.close{
            position: absolute;
            right: 0;
            top:0;
            color: #000;
            cursor: pointer;
        }
        .comment button.showQi{
            position: absolute;
            bottom: 0;
            right: 0;

        }

    </style>
</head>
<body>
<div class="box">
    <span class="commentBtn">评论</span>
    <div class="comment" style="display: none;">
        <span class="close active">X</span>
        <button class="showQi active">收起</button>
    </div>
</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>

<script type="text/javascript">

    $(function(){
        // 点击评论 展开评论列表
        $('.commentBtn').click(function(e){
            e.stopPropagation();
            $('.comment').delay(1000).slideDown(50);

        });
        $('.comment span.active,.comment button.active').click(function(e){
            e.stopPropagation();
            $('.comment').delay(300).slideUp(50);
        });

        // 或直接给box返回一个false，就不用写上面两个阻止冒泡了
        $('.box').click(function(event) {
            /* Act on the event */
            return false;
        });
        $('body').click(function(e){
            alert(1);

            // alert(1);
            $('.comment').delay(300).slideUp(50);
        })

    });
</script>
</body>
</html>

5. 事件对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button>按钮</button>
<input type="text" name="user" value="123">
<p class="content"></p>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">

    $(function(){
        // // jquery中没有监听输入框输入内容的方法，需要用原生js，下面代码无效。
        // $('input').change(function(e){
        //     console.log(e.target.value);
        // });



        // 原生oninput的事件

        // 双向的数据绑定  单向数据绑定（data==>view）
        $('input')[0].oninput = function(e){
            console.log(e.target.value);
            $('.content').text(e.target.value);
        };

        // $('.content').text($('input').val()); //  和上面的方法功能一样


        $('button').click(function(e){
            // currentTaget  当前事件的目标对象
            console.log(e.currentTarget);
            // 事件的触发对象  js对象
            console.log(e.target);
            console.dir(e.target.innerText);
            console.log($(e.target).text());
            console.log($(this).text());

            console.log(this===e.currentTarget);  // true
            console.log(this===e.target);   //  true

            // 在用事件的时候，99%的情况都需要阻止冒泡
            e.stopPropagation();


        });
        $('body').click(function(e){
            // console.log(e.currentTarget);
            console.log(e.target);
            console.log(this===e.currentTarget);
            console.log(this===e.target);


        });
        $('html').click(function(e){
            // console.log(e.currentTarget);
            console.log(e.target);
            console.log(this===e.currentTarget);
            console.log(this===e.target);

        });
    });
</script>

</body>
</html>

6. 单双击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button>按钮</button>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">

    $(function(){
        // 两次单击中间的时间差是300毫秒，如果小于300毫秒，表示双击
        // 遇到的问题：是双击，调用了两次单击
        var timer = null;
        // 解决这个单双击冲突问题
        $('button').click(function(event) {
            // 取消第一次延时未执行的方法
            clearTimeout(timer);
            // 如果是双击事件，要阻止两次单击事件的调用
            timer = setTimeout(function(){
                console.log('单击了');
            },300)
        });
        $('button').dblclick(function(event) {
            // 取消的是第二次延时未执行方法
            clearTimeout(timer);
            console.log('双击了');
        });
    });
</script>
</body>
</html>

7. 鼠标移入和移出事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .father{
            width: 200px;
            height: 200px;
            background-color:red;

        }
        .child{
            width: 50px;
            height: 50px;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="father">
    <p class="child">
        alex
    </p>
</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">

    $(function(){
        // 鼠标穿过被选元素和被选元素的子元素,会触发此事件
        // $('.father').mouseover(function(event) {
        //     console.log('移入了');
        // });
        // $('.father').mouseout(function(event) {
        //     console.log('移出了');
        // });

        鼠标只穿过被选元素会触发此事件
        $('.father').mouseenter(function(event) {
            console.log('进入了');
        });
        $('.father').mouseleave(function(event) {
            console.log('离开了');
        });


    });
</script>
</body>
</html>

购物车案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        .shopCart {
            position: relative;
            width: 100px;
            height: 40px;
            background-color: red;
            line-height: 40px;
        }

        .content {
            position: absolute;
            top: 40px;
            width: 300px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>

<body>
<div class="shopCart">
    <span>购物车</span>
    <div class="content" style="display: none;"></div>
</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function() {
        /*  不要用over和out实现
        $('.shopCart').mouseover(function(){

            $(this).children('.content').slideDown(500);
        });
        $('.shopCart').mouseout(function(){
            console.log(111);
            $(this).children('.content').slideUp(500);
        })
        */

        /*
        $('.shopCart').mouseenter(function() {
            $(this).children('.content').slideDown(500);
        });
        $('.shopCart').mouseleave(function() {
            console.log(111);
            $(this).children('.content').slideUp(500);
        })
        */

        // 合成事件  mouseenter mouseleave
        $('.shopCart').hover(function() {
            $(this).children('.content').slideDown(500);
        }, function() {
            /* Stuff to do when the mouse leaves the element */
            $(this).children('.content').slideUp(500);
        });


    });
</script>
</body>
</html>

8. 表单事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="http://www.baidu.com/s" method="get">
    <input type="text" name="wd">
    <input type="submit" value="🔍">
</form>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">

    $(function(){
        // 文本选中的时候会调用
        $('input[type=text]').select(function(){
            console.log('内容选中了');
        });
        // 原生js的onsubmit事件
        $('form').submit(function(e){
            // 如果想自己用js实现，就要阻止它的默认发送
            e.preventDefault();
            console.log('form被submit了');
        });
    });
</script>
</body>
</html>

9. 聚焦、失焦、键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="text" name="user">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">

    $(function(){
        // 加载页面时 让输入框 获得焦点
        // $('input[type=text]').focus();

        // setTimeout(function(){
        //     $('input[type=text]').blur();
        // },2000)

        // $('input[type=text]').focus(function(){
        //     console.log('获取焦点');
        // });
        // $('input[type=text]').blur(function(){
        //     console.log('失去焦点');
        // });


        // 键盘按键事件 

        $('input').keyup(function(e){
            console.log(e.keyCode);
            // 键码
            switch (e.keyCode) {
                case 13:
                    console.log('回车键调用了');
                    console.log($(this).val());
                    // 未来与后端进行交互
                    break;
                case 27:
                    console.log('回车键调用了');
                    console.log($(this).val());
                    // 未来与后端进行交互
                    break;
                default:
                    // statements_def
                    break;
            }
        })
    });
</script>

</body>
</html>

10. 事件委托

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul>
    <li>alex</li>
    <li class="item">wusir</li>
</ul>
<button>添加</button>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">

    $(function(){
        /*
        $('ul>li').click(function(){
            alert($(this).text());
        });
        */
        // 事件委托（如果是未来追加的元素，建议使用事件委托来绑定事件）
        // 原理： 利用冒泡的原理，把事件加到父级上，触发执行效果。
        $('ul').on('click','li',function(e){
            alert($(this).text());
        });
        // 未来动态的往ul中追加了li标签
        // 未来追加的li标签,自己完成不了click事件,那么这个时候考虑“事件委托(代理)”
        $('button').click(function(event) {
            $('ul').append('<li>黑gril</li>')
        });
    });
</script>
</body>
</html>

十一、ajex

什么是动态页面：数据驱动视图（面试必考）

AJAX = 异步的javascript和XML（Asynchronous Javascript and XML）

简言之，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

1. get请求

$.ajax({
url:'http://localhost:8800/course',
type:'get',
dataType:'json',
success:function(data){
console.log(data);
// // $('body').html(data);
// $('.box').text(data.name);
},
error:function(err){
console.log(err);
}
});

2. post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form >
        <input type="text" name="user">
        <input type="submit" name="">
    </form>
    <!-- <div class="box"></div> -->
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        
        $(function(){

            $('form').submit(function(e){
                // 阻止form表单的默认事件
                e.preventDefault();
                var userVal = $('input[name=user]').val();
                console.log(userVal);
                
                // 与你后端交互
                $.ajax({
                    url:"http://localhost:8800/create",
                    type:'post',
                    data:{
                        "name":userVal
                    },
                    success:function(data){
                        console.log(data);
                    },
                    error:function(err){
                        console.log(err);
                    }
                })
            })

        })
    </script>
    
</body>
</html>

3. 和风天气案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="tmp"></div>
<div class="city"></div>
<img src="" alt="">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            url: 'https://free-api.heweather.com/s6/weather/now?location=tianjin&key=4693ff5ea653469f8bb0c29638035976',
            type: "get",
            success: function (data) {
                console.log(data.HeWeather6[0].now.tmp);
                // 温度
                var tmp = data.HeWeather6[0].now.tmp;
                // 城市
                var city = data.HeWeather6[0].basic.location;
                // 天气状况码
                var cond_code = data.HeWeather6[0].now.cond_code;

                // 后面方法的参数使用的是es6的模板字符串拼接的变量
                $('.tmp').text(`${tmp}℃`);
                $('.city').text(city);
                // 后面的地址是使用的和风天气的天气状况cdn资源。您也可以使用本地图片加载
                $('img').attr('src', `https://cdn.heweather.com/cond_icon/${cond_code}.png`);

            }
        })
    });
</script>
</body>
</html>

posted @ 2019-01-22 21:09 梁少华阅读(200) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

梁少华