前端开发 - JQuery - 上

一、js的缺点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用js的一些痛处</title>
    <style type="text/css">
        div{ width: 100%; height: 100px;margin: 10px 0 0 0 ;display: none; background-color: red;}

    </style>
</head>
<body>
    <button id="btn">展示</button>
    <div></div>
    <div></div>
    <div></div>

</body>
<!-- http://libs.baidu.com/jquery/2.0.0/jquery.min.js  -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script type="text/javascript">

        $(function(){
            $('#btn').click(function () {
                $('div').css('display','block');
                $('div').html('div展示了');

            })
        });

        // window.onload = function () {
        //     var oBtn = document.getElementsByTagName('button')[0];
        //     var oDivs = document.getElementsByTagName('div');
        //
        //     oBtn.onclick = function () {
        //         for(var i=0;i<oDivs.length;i++){
        //             oDivs[i].style.display = 'block';
        //             oDivs[i].innerHTML = 'div展示了';
        //         }
        //     }
        // }

        /* 总结：
        *   痛处：1.书写繁琐，代码量大
        *        2.动画 开启定时器 小心定时器的清除
        *        3.各种操作和处理事件 不好实现 浏览器的兼容；
        *
        *   jquery 的出现就解决了上面出现的问题
        *
        *   jquery的官网  http://jquery.com/
        *
        *   jquery-3.2.1.js        用在开发环境
        *   jquery-3.2.1.min.js    用在生产环境
        * */
    </script>
</html>

二、jquery文件的引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery文件的引入</title>

    <!--<script type="text/javascript">-->
        <!--// 如果不写 window.onload  代码的执行顺序是 从上到下-->
        <!--var oDiv = document.getElementById('box');-->
        <!--console.log(oDiv); //null -->
    <!--</script>-->

</head>
<body>

       <script type="text/javascript">
           // window.onload = function () {
           //     var oDiv = document.getElementById('box');
           //      console.log(oDiv); //有
           // };
           // window.onload = function () {
           //     alert('1111111111111')
           // }

        </script>

    <div id="box"></div>


</body>
    <script src="./jquery-3.2.1.js"></script>
    <script type="text/javascript">
        //如果没有引入jquery ; $ is not defined
        // console.log($);

        //jquery 是js的一个库文件，既然是库文件，就会抛出来 一个构造函数或者对象

        // 书写jquery的方式 入口函数 
        $(document).ready(function () {
            alert(111);
        });
        $(document).ready(function () {
            alert(222);
        });
        // 等价
        $(function () {
            alert(333);
        })


        /*总结：
        *   DOM文档加载的步骤
                解析HTML结构。
                加载外部脚本和样式表文件。
                解析并执行脚本代码。
                DOM树构建完成。
                    $(document).ready()
                加载图片等外部文件。
                页面加载完毕。
                    window.onload()

            执行时间不同。
                window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
                如果不写 window.onload  代码的执行顺序是 从上到下
                $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

            编写个数不同
                window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
                $(document).ready()可以同时编写多个，并且都可以得到执行

            简化写法不同
                window.onload没有简化写法
                $(document).ready(function(){})可以简写成$(function(){});

        * */

    </script>
</html>

三、jquery基础选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery基础选择器</title>
    <style type="text/css">
        /*#brother{color: red;}*/
    </style>
</head>
<body>
    <ul>
        <li id="brother">路飞学城1</li>
        <li><a href="https://www.luffycity.com">路飞学城2</a></li>
        <li class="li3">路飞学城3</li>
        <li>路飞学城4</li>
        <li>路飞学城5</li>
    </ul>

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

        //使用jquery的时候 要有入口函数 回调函数
        $(document).ready(function () {

            //基础选择器
            //1.id选择器
            console.log($('#brother'));
            $('#brother').css('color','red');

            //2.标签选择器
            // $('a').css('color','yellow');  // 设置一个值
            $('a').css({'color':'green','font-size':'24px'}); // 设置多个值 使用对象 key:value
            console.log($('li'));

            //3.类选择器
            $('.li3').css('background','yellow');

            //4.通配符选择器 使用不频繁
            console.log($('*'));

            // $('*').html(''); // 清空整个界面的dom元素
            $('a').val();
            console.log($('a').val()); //清空a的val值

        })

    </script>

</html>

四、jquery层级选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery层级选择器</title>
    <style type="text/css">
        /*#brother{color: red;}*/
    </style>
</head>
<body>
    <ul>
        <li id="brother">路飞学城1</li>
        <li><a href="https://www.luffycity.com">路飞学城2</a></li>
        <li class="li3">路飞学城3</li>
        <li>路飞学城4</li>
        <li>路飞学城5</li>
    </ul>
    <div id="box">
        <p id="father">天王盖地虎</p>
        <p>我是你老母</p>
        <p>宝塔镇河妖</p>
        <p>蘑菇放香蕉</p>
        <div id="box2">
            <p>小鸡炖磨菇</p>
        </div>
    </div>

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

        //使用jquery的时候 要有入口函数 回调函数
        $(document).ready(function () {

            //层级选择器
            //1.后代选择器 div p
            $('#box p').css('color','red');

            //2.子代选择器 div>p
            $('#box>p').css('color','green');

            //3.毗邻选择器 匹配所有的紧接着选中元素的兄弟
            $('#father+p').css('font-size','30px');

            //4.兄弟选择器
            $('#father~p').css('background','gray');

            console.log($('li'));
            //5.获取第一个元素
            $('li:first').css('font-size','50px');

            //6.获取最后一个元素
            $('li:last').css('font-size','80px');

            //7.取其他的元素
            $('li:eq(2)').css('background','red');

        })

    </script>

</html>

五、jquery基本过滤选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery基本过滤选择器</title>
</head>
<body>
    <ul>
        <li>哈哈哈，基本过滤选择器</li>
        <li>嘿嘿嘿</li>
        <li>天王盖地虎</li>
        <li>小鸡炖蘑菇</li>
    </ul>
</body>
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">

        $(function () {

            //获取第一个 :first  获取最后一个 :last
            $('li:first').css('background','gray');
            $('li:last').css('background','yellow');

            // 获取奇数
            $('li:odd').css('color','red');
            // 获取偶数
            $('li:even').css('color','green');

            // 选中索引值为1的元素 用的比较多
            $('li:eq(1)').css('font-size','32px');
            //   > 1   大于索引值1
            $('li:gt(1)').css('font-size','60px');
            //   < 1   小于索引值1
            $('li:lt(1)').css('font-size','10px');
        })

    </script>
</html>

六、jquery属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery属性选择器</title>
</head>
<body>
    <div id="box">
            <h2 class="title">属性元素器</h2>
            <p class="p1">我是一个段落</p>
            <ul>
                <li id="li1">分手应该体面</li>
                <li class="what" id="li2">分手应该体面</li>
                <li class="what">分手应该体面</li>
                <li class="heihei">分手应该体面</li>

            </ul>

            <form action="" method="post">

                <input name="username" type='text' value="1" checked="checked"></input>
                <input name="username1111" type='text' value="1"></input>
                <input name="username2222" type='text' value="1"></input>
                <input name="username3333" type='text' value="1"></input>
                <button class="btn-default">按钮1</button>
                <button class="btn-info">按钮1</button>
                <button class="btn-success">按钮1</button>
                <button class="btn-danger">按钮1</button>

            </form>
    </div>
</body>
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">

        $(function () {

             //标签名[属性名] 查找所有含有id属性的该标签名的元素
            $('li[id]').css('color','red');

            //匹配给定的属性 是what值得   //[attr=value] 匹配给定的属性是某个特定值的元素
            $('li[class=what]').css('font-size','30px');

            //没有class 也会发生变化 //[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
            $('li[class!=what]').css('font-size','50px');

             //匹配给定的属性是以某些值开始的元素
            $('input[name^=username]').css('background','gray');

            //匹配给定的属性是以某些值结尾的元素
            $('input[name$=222]').css('background','green');

            //匹配给定的属性是以包含某些值的元素
            $('button[class*=danger]').css('background','orange');

        })

    </script>
</html>

七、jquery筛选选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery筛选选择器</title>
</head>
<body>
    <div id="box">
        <p class="p1">
            <span>我是第一个span标签</span>
            <span>我是第二个span标签</span>
            <span>我是第三个span标签</span>
        </p>
        <button>按钮</button>
    </div>
    <ul>
        <li class="list">2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
  
</body>
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {

            //获取第n 个元素 数值从0 开始
            // $('span:eq(0)')
            $('span').eq(1).css('color','red');

            //获取一个元素 .first .last   . 语法 包含get set
            $('span').last().css('color','greenyellow'); // set
            console.log($('span').last());  // get
            console.log($('span')); // 对象 对象才有方法

            //.parent() 选择父亲元素
            console.log($('span').parent());
            $('span').parent('.p1').css({'width':'300px',height:'400px','background':'red'});

            //.siblings()选择所有的兄弟元素
            $('.list').siblings('li').css('color','red');

            //.find()
            //查找所有的后代元素
            $('div').find('button').css('background','gray');

        })

    </script>
</html>

八、jquery对象和Dom对象的转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery对象和Dom对象得转换</title>
    <style type="text/css">
        #box{ width: 200px; height: 200px;background-color: red;}
    </style>
</head>
<body>
    <div id="box">
        天王盖地虎
    </div>
    <button>隐藏</button>
</body>
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">

        // Dom --》 jquery
        var oDiv = document.getElementById('box');
        console.log(oDiv);
        console.log($(oDiv));

        $(oDiv).click(function () {  // 回调函数
            alert(111)
        });

        // jquery --》 dom
        console.log($('button'));
        console.log($('button')[0]);
        console.log($('button').get(0));

        var isShow = true;
        $('button')[0].onclick = function () {
            // alert(222)
            if(isShow){
                $(oDiv).hide();
                // this.innerText = '显示'
                // console.log($(this))
                $(this).text('显示');
                isShow = false;
            } else{
                $(oDiv).show();
                $(this).text('隐藏');
                isShow = true;
            }
        }

    </script>
    <!--
        总结：
            DOM对象转换成jquery对象
                var box = document.getElementById('box');
                console.log($(box));   .click

            jquery对象转化成DOM对象
                第一种方式：
                $('button')[0]        .onclick

                第二种方式：
                $('button').get(0)    .onclick

    -->
</html>

九、jquery效果 show hide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery效果显示隐藏</title>
    <style type="text/css">
        #box{width: 100px;height: 100px;border: 1px solid red;display: none;}
    </style>

</head>
<body>
    <div id="box">

    </div>
    <button id="btn">隐藏</button>
</body>
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">

        //.css 控制属性
        $('#btn').click(function () {
            $('#box').css('display','block');
        });

        //2.jquery 提供了一些方法 show() hide()
        var isShow = true;
        $('#btn').click(function () {
            if(isShow){
                $('#box').show('slow',function () {
                    // alert(1)
                    $(this).text('盒子出来了');
                    isShow = false;
                    $('#btn').text('显示');
                })
            }else{
                $('#box').hide(2000,function () {
                    $(this).text('');
                    isShow = true;
                    $('#btn').text('隐藏');

                })
            }
        })

        //3.toggle 开关 如果元素显示则隐藏 反之亦然
        $('#btn').click(function () {
            $('#box').toggle(3000,function () {
                alert(111)
            });
        })


    </script>
</html>

十、jquery效果 slide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slide</title>
    <style type="text/css">
        #box{width: 100px;height: 100px;border: 1px solid red;display: none;}
    </style>
</head>
<body>
    <div id="box">

    </div>
    <button id="btn">隐藏</button>
</body>
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {

            $('#btn').hover(function () {
                $('#box').slideDown(2000);
            },function () {
                $('#box').slideUp(3000);
            })

            $('#btn').click(function () {
                $('#box').slideToggle('slow');
            })

        })

    </script>
</html>

十一、jquery效果 fade 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fade</title>
    <style type="text/css">
        #box{width: 100px;height: 100px;border: 1px solid red;background-color: yellow;}
    </style>
</head>
<body>
    <div id="box">

    </div>
    <button id="btn">隐藏</button>
</body>
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                $('#box').fadeOut(2000);
            });

            
            $('#box').mouseover(function () {
                $('#box').fadeOut(2000);
            });
            $('#btn').mouseout(function () {
                // $('#box').fadeIn(3000);
                $('#box').fadeTo(2000,0.3)
            });
            

            $('#btn').click(function () {
                $('#box').fadeToggle(3000);
            })

        })

    </script>
</html>

十二、jquery效果 animate  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画效果 animate</title>
    <style type="text/css">
        #box{width: 100px;height: 100px;border: 1px solid red;background-color:
                yellow;position: absolute;}

    </style>
</head>
<body>
    <button id="btn">动画吧</button>
    <button id="stop">停止吧</button>
    <div id="box">
        hello luffy
    </div>

</body>
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {

                //同时执行
                $('#box').animate({
                    width:'200px',
                    height:'300px'
                })
                
                $('#box').animate({left:'100px',top:'200px'});

                /* 执行完一个在执行一个 */  // jquery 链式调用
                $('#box').animate({left:'100px',top:'200px'}).delay(2000).animate({top:'400px'});

                $('#box').animate({left:'100px',top:'200px'},5000);

            });

            $('#stop').click(function () {
                $('#box').stop();
            })

        })

    </script>
</html>

十三、右下角弹出小广告  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出小广告</title>
</head>
<body>
    <div id="box" style="width: 330px;height: 480px; position: absolute;right: 10px;bottom: 0;display: none;">
        <img src="广告.png" alt="" style="width: 100%;height: 100%;">
    </div>    

</body>
    <script src="jquery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            //jquery 链式调用
            $('#box').slideDown('normal').slideUp('fast').fadeIn(1000).click(function () {
                $(this).fadeOut(1000);
            });

        })

    </script>
</html>
posted @ 2018-05-13 11:27  Alice的小屋  阅读(194)  评论(0)  编辑  收藏  举报