JS Project problem set

1.获取url传过来的数据的值

1⃣️实际项目运用

        
            var index = window.location.search.indexOf('data=');
            if(index>=0){
                var str = window.location.search.slice(index+5);
                $('.release_demand_nav li').removeClass('on');
                $('.w'+str).addClass('on');
                $('.release_demand_box .release_demand_list') .hide();
                $('.release_demand_box .release_demand_list') .eq(+str).show();
            }

2⃣️拓展

        
            // 如果有url参数返回一个json，url参数key对应key，value对应value，没有参数返回false
            function getQuery() {
                var url = decodeURI(location.href);
                // 等于-1证明没有参数
                var index = url.indexOf('?');
                if (index === -1) return false;
                var query = url.substring(index + 1);
                var arr = query.split('&');
                var obj = {};
                 for (var i = 0;i < arr.length;i++) {
                 var pair = arr[i].split('=');
                obj[pair[0]] = pair[1];
             }
                // var obj = arr.reduce(function(initObj, v) {
                // var pair = v.split('=');
                // initObj[pair[0]] = pair[1];
                // return initObj;
                // }, {});
                return obj;
                }
                console.log(getQuery());
                console.log(getQuery().name)
                console.log(getQuery().data)

2.jQuery实现对话效果

页面加载定时显示对象，点击任意地方让对话继续下去

    
        const arr =['小爱同学','在呢','帮我点一份外卖','好的'];
        let index=0;
        setTimeout(()=>{
          console.log('auto',`这句话要渲染到第${index % 2} 个p元素上`,arr[index]);    
          $('.p1').text(arr[index])
          document.addEventListener('click',bindClick);
        },1000);
        
        function bindClick(){
          if(index>=arr.length) return 
          index ++;
          if(index ===arr.length){
            return
          }
          if(index %2===0){
            $('.p1').text(arr[index])
          }else{
            $('.p2').text(arr[index])
          }      
          console.log('click',`这句话要渲染到第${index % 2}个 p元素上`,arr[index]);
        }

3.jQuery实现导航过多出现更多点击显示更多

用定位的方式，添加背景色

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3.jquery实现导航过多出现更多点击显示更多</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    div {
        width: 80%;
        height: 300px;
        margin: 100px auto;
    }

    .uu {
        overflow: hidden;
        height: 88px;
        position: relative;
    }

    .uu li {
        list-style: none;
        float: left;
        margin-left: 30px;
        margin-bottom: 20px;
    }

    .more {
        position: absolute;
        bottom: 5px;
        right: 48px;
        display: inline-block;
        width: 71px;
        background: #fff;

    }
</style>

<body>
    <div>
        <ul class="uu">
            <li>骑上我心爱的小摩托</li>
            <li>不在</li>
            <li>那女孩对我说</li>
            <li>夜半</li>
            <li>和你一样</li>
            <li>嗜好</li>
            <li>骑上我心爱的小摩托</li>
            <li>不在</li>
            <li>那女孩对我说</li>
            <li>夜半</li>
            <li>和你一样</li>
            <li>嗜好</li>
            <li>骑上我心爱的小摩托</li>
            <li>不在</li>
            <li>那女孩对我说</li>
            <li>夜半</li>
            <li>和你一样</li>
            <li>嗜好</li>
            <li>骑上我心爱的小摩托</li>
            <li>不在</li>
            <li>那女孩对我说</li>
            <li>夜半</li>
            <li>和你一样</li>
            <li>嗜好</li>
            <li style="color:green;" class="more">更多 >></li>
        </ul>
    </div>
    <script src="jquery.min.js"></script>
    <script>
      $('.more').click(function(){
          $(this).hide();
          $('.uu').css('height','auto');
      })

    </script>
</body>

</html>

4.jQuery判断内核

判断用户是通过pc,还是安卓还是ios,还是微信客户端访问

    
        var log = {
            versions:function(){
                var u = navigator.userAgent, app = navigator.appVersion;
                    return {
                        trident: u.indexOf('Trident') > -1, //IE内核
                        presto: u.indexOf('Presto') > -1, //opera内核
                        webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                        gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
                        mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                        //android终端或者uc浏览器
                        android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, 
                        iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
                        iPad: u.indexOf('iPad') > -1, //是否iPad
                        webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
                        weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
                        qq: u.match(/\sQQ/i) == " qq" //是否QQ
                        };
                    }(),
                    
        }
        console.log(log)
        if(log.versions.weixin==true){ 
            $('.wxImg').hide()
           $('.qqImg').css('margin','0 auto');
    }

5.jQuery实现点击显示再点击隐藏效果

用toggle()方法实现效果

    
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>jquery实现点击显示再点击消失</title>
        </head>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .instructions{
                display: none;
            }
        </style>
        <body>
            <div class="box">
                <p class="title">糖糖？</p>
                <p class="instructions">2019年糖糖开始戒了糖</p>
            </div>
            <script src="jquery.min.js"></script>
            <script>
                $('.title').toggle(function(){
                   
                    $('.instructions').css('display','block')
                },
                function(){
                    $('.instructions').css('display','none')
                    }
                )
            </script>
        </body>
        </html>

6.jQuery实现留言板留言及删除功能

用live()方法让后面动态添加的元素也绑定之前对应类绑定的方法

    
        <!doctype html>
        <html>
        
        <head>
            <meta charset="utf-8">
            <title>index</title>
            <style>
                * {
                    font-family: 微软雅黑;
                    margin: 0px;
                    padding: 0px;
                }
        
                .main {
                    width: 1300px;
                    margin: 0 auto;
                }
        
                .mess {
                    margin-top: 15px;
                }
        
                textarea {
                    width: 98%;
                    height: 50px;
                    resize: none;
                    border-radius: 20px;
                    padding: 15px;
                    font-size: 30px;
                    font-weight: bold;
                }
        
                textarea:focus {
                    outline: none;
                }
        
                button {
                    width: 100px;
                    height: 30px;
                    background: #272822;
                    font-weight: bold;
                    border: 2px solid #ccc;
                    border-radius: 10px;
                    color: #fff;
                }
        
                button:hover {
                    border-color: #00f;
                }
        
                button:focus {
                    outline: none;
                }
        
                .show {
                    margin-top: 20px;
                    border: 2px solid #272822;
                    border-radius: 10px;
                    height: 50px;
                }
        
                .close {
                    float: right;
                    margin-right: 10px;
                    font-size: 30px;
                    cursor: pointer;
                }
            </style>
            <script src="jquery.min.js"></script>
        </head>
        
        <body>
            <div class="main">
                <h1>糖糖留言板:</h1>
                <div class='mess'>
                    <textarea></textarea>
                </div>
                <br>
                <button>我要留言</button>
            </div>
        </body>
        <script>
            $('textarea').focus(function () {
                this.value = '';
            });
            $('button').click(function () {
                let val = $('textarea').val();
                let str = "<div class='show'>";
                str += "<div class='close'>×</div>";
                str += val;
                str += "</div>";
                $('.main').append(str);
            });
        
            $('.close').live('click', function () {
                $(this).parent().hide(1000);
            });
        </script>
        
        </html>

7.CSS给ul下的li标签内元素添加显示隐藏效果

当鼠标划过li标签，给当前li标签添加显示删除按钮

        
            <div>
                <ul class="uu">
                    <li>
                        <img src="./delete.png" class="delImg">
                        <img src="./38068523.jpeg">
                    </li>
                    <li>
                        <img src="./delete.png" class="delImg">
                        <img src="./38068523.jpeg">
                    </li>
                    <li>
                        <img src="./delete.png" class="delImg">
                        <img src="./38068523.jpeg">
                    </li>
                    <li>
                        <img src="./delete.png" class="delImg">
                        <img src="./38068523.jpeg">
                    </li>
                    <li>
                        <img src="./delete.png" class="delImg">
                        <img src="./38068523.jpeg">
                    </li>
                </ul>
            </div>

            
                <style>
                    .uu{
                        width: 1200px;
                        height: 300px;
                        display: flex;
                        overflow: hidden;
                        
                    }
                    li{
                        list-style: none;
                        position: relative;
                    }
                    .delImg{
                        position: absolute;
                        right: 0;
                        display: none;
                    }
                    .uu li:hover .delImg{
                        position: absolute;
                        right: 0;
                        display: block;
                    }
                </style>

8.jQuery多图片上传

        
 <style>

    .add_div {
        width: 400px;
        height: 500px;
        border: solid #ccc 1px;
        margin-top: 40px;
        margin-left: 170px;
        padding-left: 20px;
    }
                    
    .file-list {
        display: none;
        list-style-type: none;
        overflow: hidden;
    }

    .file-list img {
        max-width: 70px;
        vertical-align: middle;
    }

    .file-list .file-item {
        margin-bottom: 10px;
        float: left;
        margin-left: 20px;
    }


    .file-list .file-item .file-del {
        display: block;
        margin-left: 20px;
        margin-top: 5px;
        cursor: pointer;
    }


</style>

<div class="add_div">
    <p>
            <span>图片：</span>
            <input type="file" name="" id="choose-file" multiple="multiple"/>
    </p>
    <p>
    <ul class="file-list ">
    </ul>
    </p>
    </div>
    <button style="cursor: pointer;margin-left: 150px;" href="javascript:;" id="upload">上传</button>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
    <script>

    $(function () {
        ////////////////////////////////////////////////图片上传//////////////////////////////////////////////
        //声明变量
        var $button = $('#upload'),
            //选择文件按钮
            $file = $("#choose-file"),
            //回显的列表
            $list = $('.file-list'),
            //选择要上传的所有文件
            fileList = [];
        //当前选择上传的文件
        var curFile;
        // 选择按钮change事件，实例化fileReader,调它的readAsDataURL并把原生File对象传给它，
        // 监听它的onload事件，load完读取的结果就在它的result属性里了。它是一个base64格式的，可直接赋值给一个img的src.
        $file.on('change', function (e) {
            //上传过图片后再次上传时限值数量
            var numold = $('li').length;
            if(numold >= 6){
                layer.alert('最多上传6张图片');
                return;
            }
            //限制单次批量上传的数量
            var num = e.target.files.length;
            var numall = numold + num;
            if(num >6 ){
                layer.alert('最多上传6张图片');
                return;
            }else if(numall > 6){
                layer.alert('最多上传6张图片');
                return;
            }
            //原生的文件对象，相当于$file.get(0).files;//files[0]为第一张图片的信息;
            curFile = this.files;
            //curFile = $file.get(0).files;
            //console.log(curFile);
            //将FileList对象变成数组
            fileList = fileList.concat(Array.from(curFile));
            //console.log(fileList);
            for (var i = 0, len = curFile.length; i < len; i++) {
                reviewFile(curFile[i])
            }
            $('.file-list').fadeIn(2500);
        })


        function reviewFile(file) {
            //实例化fileReader,
            var fd = new FileReader();
            //获取当前选择文件的类型
            var fileType = file.type;
            //调它的readAsDataURL并把原生File对象传给它，
            fd.readAsDataURL(file);//base64
            //监听它的onload事件，load完读取的结果就在它的result属性里了
            fd.onload = function () {
                if (/^image\/[jpeg|png|jpg|gif]/.test(fileType)) {
                    $list.append('删除').children(':last').hide().fadeIn(2500);
                } else {
                    $list.append('' + file.name + '删除')
                }

            }
        }

        //点击删除按钮事件：
        $(".file-list").on('click', '.file-del', function () {
            let $parent = $(this).parent();
            console.log($parent);
            let index = $parent.index();
            fileList.splice(index, 1);
            $parent.fadeOut(850, function () {
                $parent.remove()
            });
            
        });
        //点击上传按钮事件：
        $button.on('click', function () {
            var name = $('#name').val();
        
        
                if(fileList.length > 6){
                    layer.alert('最多允许上传6张图片');
                    return;
            } else {
                var formData = new FormData();
                for (var i = 0, len = fileList.length; i < len; i++) {
                    formData.append('upfile[]', fileList[i]);
                }
                formData.append('name', name);
                
            
            }
        })
    })


    </script>

发布时间：2019-11-19

1.获取url传过来的数据的值

2.jQuery实现对话效果

3.jQuery实现导航过多出现更多点击显示更多

4.jQuery判断内核

5.jQuery实现点击显示再点击隐藏效果

6.jQuery实现留言板留言及删除功能

7.CSS给ul下的li标签内元素添加显示隐藏效果

8.jQuery多图片上传

2.jQuery实现对话效果