2019-04-29

作者: 北街九条狗 | 来源:发表于2019-04-29 21:10 被阅读0次

day25
好工作不是定位出来的，而是不断校准、调试出来的
【每日经济学人】2019-04-29
卖萌的ScalersTalk第四轮新概念朗读持续力训练Day18
java基础知识学习（四）
Java基础知识学习（三）
1. Iterator模式-一个一个遍历
荆的ScalersTalk第四轮新概念朗读持续力训练Day200
Notion 新增了数据库模板 Database Templat
2019-4-29晨间日记

使用JQ是需要先引包：

<script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>

$()可以直接获取元素如：$('div')获取div元素
.css()可以直接添加样式
可以省略循环

$(document).on('click','li',function(){
        console.log($(this).html());
})

.eq(0) 索引
.hide()隐藏
.show()显示
.html()相当于.innerHTML
.attr()添加属性如：.attr('class','test')添加一个名为class的属性，属性值为test
属性选择器
.attr()传一个值的时候是获取属性的值

    •   [=] 
    •   [^=] 以……起始 
    •   [$=] 以……结束 
    •   [*=] 包含……的 
    •   引号的问题
input[type='text']{
                    color:aqua;
}

添加class

$('#box').addClass('class_one');

删除class_one

$('#box').removeClass('class_two');

切换类,有就加上,没有就删除

$('#box').toggleClass('class_two');

节点操作

append追加节点
$('#box').append($('p'));
appendTo把子节点追加到哪个父级中
$('p').appendTo($('#box'));

prev() 上一个兄弟节点 
next() 下一个兄弟节点
prevAll() 上面所有兄弟节点 
nextAll() 下面所有兄弟节点 
siblings() 所有兄弟节点

<--关于父节点-->
parent() 直接父节点
parents() 所有父节点
closest() 最近父节点（包括自己）closest('div')找离自己最近的div父节点
closest()：找指定的一个最近的祖先元素（包括自身）（该函数必须加参数）；它只能选择到一个唯一的元素
•   精准的查找能力，实战开发之王
•   找的是最近的唯一一个元素
•   例子：点击查找指定节点 

<--创建添加节点-->
append末尾追加子节点,prepend是开头追加子节点
 before/after在某个元素前/后添加兄弟节点

<--克隆节点-->
clone默认只克隆结构,参数设为true,事件也一起克隆
相当于复制

<--在xx前后插入节点-->
.insertAfter();
.insertBefore();

.index()
不添加参数返回的是所在位置的索引值
添加参数表示是指定参数代表元素中的索引 如：$('div').index($('#div3'))表示id为div3的在div中的索引

<--each循环-->
i是循环变量 elem是便利出来的量
$('li').each(function(i,elem){
    console.log($(elem).html());
    $(elem).css('background','red');
})

<--元素尺寸-->
$(window).height();//可视区高
$(document).height()//文档高度(夜面高度)

<--滚动-->
$(document).scrollTop() 纵向的滚动距离
 滚动条事件
$(document).scroll(function(){
        console.log(1);
})

<--查找子节点-->
 children() 找直接子节点
find() 必须指定参数,找后代节点

取消事件
.off();

练习1-点击文字div切换颜色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            span{
                margin-right:20px ;
                cursor: pointer;
            }
            div{
                width: 100px;
                height: 100px;
                border:1px solid #000;
                display: inline-block;
            }
        </style>
        <script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                let color = '';
                $('span').click(function(){
                    color = $(this).html();
                })
                // 
//              $('div').click(function(){
//                  $(this).css('background',color);
//              })
                $(document).on('click','div',function(){
                    $(this).css('background',color);
                })
            })
        </script>
    </head>
    <body>
        <p>
            <span>red</span>
            <span>yellow</span>
            <span>blue</span>
            <span>green</span>
        </p>
        
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

练习2-删除指定颜色方块

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            span{
                margin-right:20px ;
                cursor: pointer;
            }
            div{
                width: 100px;
                height: 100px;
                border:1px solid #000;
                display: inline-block;
            }
        </style>
        <script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                let color = '';
                $('span').click(function(){
                    color = $(this).html();
                })
                // 
//              $('div').click(function(){
//                  $(this).css('background',color);
//              })

                $(document).on('click','div',function(){
                    $(this).css('background',color);
                })
                
                $('button').click(function(){
                    $('div[style*=red]').css('background','#fff')
                })
            })
        </script>
    </head>
    <body>
        <p>
            <span>red</span>
            <span>yellow</span>
            <span>blue</span>
            <span>green</span>
            <button type="button">清除红色</button>
        </p>
        
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

练习3-追加节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            ul{
                list-style: none;
                padding:0;
                margin:0;
            }
            li{
                cursor: pointer;
            }
            div{
                width: 200px;
                height: 200px;
                border:1px solid #000;
                display: inline-block;
                vertical-align: middle;
            }
            .red{
                background: #FF0000;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            <ul>
                <li>111</li>
                <li>222</li>
                <li>333</li>
            </ul>
        </div>
        <button type="button">>></button>
        <button type="button"><<</button>
        <div id="box2">
            <ul>
                <li>444</li>
                <li>555</li>
                <li>666</li>
            </ul>
        </div>
        <script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $('li').click(function(){
                $(this).toggleClass('red');
            })
                
            $('button').eq(0).click(function(){
//              $('#box1 li[class=red]').appendTo($('#box2 ul'));
//              $('li').removeClass('red');
                $('#box1').hide();
            })
            
            $('button').eq(1).click(function(){
//              $('#box2 li[class=red]').appendTo($('#box1 ul'));
//              $('li').removeClass('red');
                $('#box1').show();
            })
        </script>
    </body>
</html>

练习4-切换菜单显示隐藏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .hide{
                display: none;
            }
        </style>
    </head>
    <body>
        <input type="button" value="显示/隐藏">
        <ul>
            <li>1111</li>
            <li>2222</li>
            <li>3333</li>
            <li>4444</li>
        </ul>
        <script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $('input').click(function(){
                $(this).next().toggleClass('hide');
            })
        </script>
    </body>
</html>

练习5-closest练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul>
            <li>水电费水电费水电费是1 <a href="javascript:;">删除</a></li>
            <li>水电费水电费水电费是2 <a href="javascript:;">删除</a></li>
            <li>水电费水电费水电费是3 <a href="javascript:;">删除</a></li>
            <li>水电费水电费水电费是4 <a href="javascript:;">删除</a></li>
            <li>水电费水电费水电费是5 <a href="javascript:;">删除</a></li>
        </ul>
        <script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $('a').click(function(){
                $(this).closest('li').remove();
            })
        </script>
    </body>
</html>

练习6-上移下移

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul>
            <li>1.<input type="button" value="上移"><input type="button" value="下移"></li>
            <li>2.<input type="button" value="上移"><input type="button" value="下移"></li>
            <li>3.<input type="button" value="上移"><input type="button" value="下移"></li>
            <li>4.<input type="button" value="上移"><input type="button" value="下移"></li>
            <li>5.<input type="button" value="上移"><input type="button" value="下移"></li> 
        </ul>
        <script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let prev = null;
            $('input[value="上移"]').click(function(){
                // 获取点击input所在li的上一个li兄弟节点
                prev = $(this).closest('li').prev();
                $(this).closest('li').insertBefore(prev);
            })
        </script>
    </body>
</html>

练习7-选项卡切换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #div1 div {
                width: 200px;
                height: 200px;
                border: 1px #000 solid;
                display: none;
            }
            .active {
                background: red;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <input type="button" value="1" class="active">
            <input type="button" value="2">
            <input type="button" value="3">
            <div style="display: block;">111</div>
            <div>222</div>
            <div>333</div>
        </div>
        <script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $('input').click(function(){
                // 清除所有active
                $('input').removeClass('active');
                // 给自己添加active
                $(this).addClass('active');
                // 隐藏div
                $('#div1 div').hide();
                // 显示指定div
                $('#div1 div').eq($(this).index('input')).show();
            })
        </script>
    </body>
</html>

练习8-懒加载

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            body{
                margin: 0;
                background: darkcyan;
            }
            #list{
                list-style: none;
                padding: 0;
                margin: 0;
                width: 800px;
                margin:0px auto;
                position: relative;
            }
            #list li{
                height: 150px;
                border-bottom: 1px dashed darkgray;
                background: #fff;
            }
        </style>
    </head>
    <body>
        
        <ul id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ul>
        <!-- $('#list').children("li:last-child") -->
        <script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(document).scroll(function(){
                // position()就是到有定位的祖先节点的距离
                // console.log($('#list').children("li:last-child").position().top);
                // if($(document).height() == $(window).height()+$(document).scrollTop())
                if($('#list').children("li:last-child").position().top < $(window).height()+$(document).scrollTop()){
                    let $aLi = $('<li>8</li><li>9</li><li>10</li>');
                    $('#list').append($aLi);
                }
            })
        </script>
    </body>
</html>

day25
2019-04-29
好工作不是定位出来的，而是不断校准、调试出来的
职业发展特训营：第六天 2019-04-29 00:00 至 2019-04-29 23:59 今日课程音频已更新...
【每日经济学人】2019-04-29
2019-04-29 Spoiling the moodRising oil prices could yet p...
卖萌的ScalersTalk第四轮新概念朗读持续力训练Day18
练习材料： [Day 1677 2019-04-29] L50-3: New Year resolutions T...
java基础知识学习（四）
title: java基础知识学习（四）date: 2019-04-29 14:25:58tags: javaca...
Java基础知识学习（三）
title: Java基础知识学习（三）date: 2019-04-29 14:25:49tags: javaca...
1. Iterator模式-一个一个遍历
时间: 2019-04-29 1.1 Iterator模式概念 Iterator模式: 用于在数据集合中按照顺序遍...
荆的ScalersTalk第四轮新概念朗读持续力训练Day200
20190429 周一 Day200 练习材料：原文[Day 200 2019-04-29]L50-2:...
Notion 新增了数据库模板 Database Templat
Notion 更新 2019-04-29 数据库模板 Database Template 例如，假设要标准化错误报...
2019-4-29晨间日记
2019-04-29 【践行人员】袁顺娟【践行天数】180/1000 【今日天气】晴【昨日早睡】22:30 【...