class类操作，节点操作，eq，子类节点

01.练习1-删除指定颜色的方块

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

02.class操作

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .class_one{
                width: 100px;
                height: 100px;
                border: 1px solid #000000;
            }
            .class_two{
                background: red;
            }
        </style>
        <script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            // $('#box').attr('class','class_one')
            $('#box').addClass('class_one');
            $('#box').addClass('class_two');
            $('#box').removeClass('class_two');
            let onOff = true;
            $('#box').click(function(){
//              if(onOff){
//                  $('#box').addClass('class_two');
//              }else{
//                  $('#box').removeClass('class_two');
//              }
//              onOff=!onOff
                $('#box').toggleClass('class_two');
            })
        })
    </script>
    </head>
    <body>
        <div id="box">
            
        </div>
    </body>
</html>

03.节点操作-追加节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .class_one{
                width: 100px;
                height: 100px;
                border: 1px solid #000000;
            }
            .class_two{
                background: red;
            }
        </style>
        <script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            $('button').click(function(){
                // append追加子节点
                $('#box').append($('p'));
                // appendTo把子节点追加到哪个父级里
                $('p').appendTo($('#box'));
            })
        })
    </script>
    </head>
    <body>
        <p>123</p>
        <p>321</p>
        <button type="button">去div</button>
        <hr>
        <div id="box">
            
        </div>
    </body>
</html>

04.左右练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            div{
                width: 100px;
                height: 150px;
                border: 1px solid #000000;
                display: inline-block;
                vertical-align: middle;
            }
            p{
                margin: 0;
            }
            .red{
                background: red;
            }
        </style>
        <script type="text/javascript">
            $(function(){
                $('p').click(function(){
                    $(this).toggleClass('red');
                })
                $('button').eq(0).click(function(){
                    $('#box1 p[class=red]').appendTo($('#box2'));
                    $('p').removeClass('red');
                })
                $('button').eq(1).click(function(){
                    $('#box2 p[class=red]').appendTo($('#box1'));
                    $('p').removeClass('red');
                })
                
                
            })
        </script>
    </head>
    <body>
        <div id="box1">
            <p id="p1">111</p>
            <p id="p2">222</p>
            <p id="p3">333</p>
            <p id="p4">444</p>
            <p id="p5">555</p>
            <p id="p6">666</p>
        </div>
        <button type="button" id="btn1">>></button>
        <button type="button" id="btn2"><<</button>
        <div id="box2">
            
        </div>
    </body>
</html>

05.show(),hide()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            div{
                width: 100px;
                height: 150px;
                border: 1px solid #000000;
                display: inline-block;
                vertical-align: middle;
            }
            p{
                margin: 0;
            }
            .red{
                background: red;
            }
        </style>
        <script type="text/javascript">
            $(function(){
                $('p').click(function(){
                    $(this).toggleClass('red');
                })
                $('button').eq(0).click(function(){
                    $('.red').hide();
                })
                $('button').eq(1).click(function(){
                    $('.red').show();
                    $('p').removeClass('red');
                })
                
                
            })
        </script>
    </head>
    <body>
        <div id="box1">
            <p id="p1">111</p>
            <p id="p2">222</p>
            <p id="p3">333</p>
            <p id="p4">444</p>
            <p id="p5">555</p>
            <p id="p6">666</p>
        </div>
        <button type="button" id="btn1">隐藏</button>
        <button type="button" id="btn2">显示</button>
        <div id="box2">
            
        </div>
    </body>
</html>

06.节点操作-兄弟节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        
          <!--  ####prev()上一个兄弟节点 
                ####next()下一个兄弟节点
                ####prevAll() 上面所有兄弟节点
                ####nextAll()下面所有兄弟节点
                ####siblings() 所有兄弟节点 -->
        <h1>Java2</h1>
        <div>
            <p>javascript</p>
            <ul>
                <li>1</li>
                <li>2</li>
                <li id="san">3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
        <script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
//          $('#san').prev().css('background','red');
//          $('#san').next().css('background','blue');
            $('#san').prevAll().css('background','red');
        </script>
    </body>
</html>

07.练习3-切换菜单显示隐藏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .hide{
                display: none;
            }
        </style>
    </head>
    <body>
        <input type="button" value="显示/隐藏">
        <br>
        <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().next().toggleClass('hide');
        })
    </script>
    </body>
</html>

08.节点操作-父节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        
            <!-- 
             ####parent() ★★★       直接父节点
             ####parents() ★        所有父节点
             ####closest() ★★★★★最近的父节点，包括自己
             closest()：找指定的一个最近的祖先元素（包括自身）（该函数必须加参数）；它只能选择到一个唯一的元素
             •  精准的查找能力，实战开发之王
             •  找的是最近的唯一一个元素
             •  例子：点击查找指定节点 
             -->
             <h1>Java2</h1>
             <div>
                <p>javascript</p>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li >3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
                <p>javascript</p>
                <div >
                    999
                    <p id="san">
                        666146546
                    </p>
                </div>
             </div>
        <script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            // alert($('#san').parent().html());
            // alert($('#san').parents().eq(3).html());
            $('#san').closest('div').html('110');
        </script>
    </body>
</html>

09.练习4-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>

10.节点操作-创建，添加节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul id="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let oLi = $('<li id="test">4</li>');
            oLi.css('color','red');
            // append末尾追加子节点,prepend是开头追加子节点
            // $('#list').append(oLi);
            // $('#list').prepend(oLi);
            
            // before/after在某个元素后添加兄弟节点
            // $('#list').before(oLi);
            $('#list').after(oLi);
        </script>
    </body>
</html>

11.克隆节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p id="p1">123</p>
        <button type="button">走你</button>
        <hr>
        <div id="box"></div>
        
        <script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
        
            $('#p1').click(function(){
                alert(1);
            })
            // clone默认只克隆结构,参数为true,事件也克隆
            //相当于复制
                let $p = $('p').clone(true);
            $('button').click(function(){
                // $('p').appendTo($('#box'));
                $p.appendTo($('#box'))
            })
        </script>
    </body>
</html>

12.插入节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul>
            <li id="first">1</li>
            <li id="second">2</li>
            <li>3</li>
        </ul>
        <script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let $li = $('<li>4</li>')
            // $li.insertAfter($('#first'));
            $li.insertBefore($('#second'));
        </script>
    </body>
</html>

13.练习5-上移下移

<!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(){
                prev= $(this).closest('li').prev();
                $(this).closest('li').insertBefore(prev);
            })
            $('input[value="下移"]').click(function(){
                prev= $(this).closest('li').next();
                $(this).closest('li').insertAfter(prev);
            })
        </script>
    </body>
</html>

14.index()索引

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p>p1</p>
        <div>
            div1
            <div>div2</div>
        </div>
        <div id="div3"></div>
        <div>div1</div>
        <p>p2</p>
        <h3>h3-1</h3>
        <script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $('#div3').index();//在兄弟中的索引值
            // 添加参数表示是指定参数代表元素中的索引
            $('#div3').index('div');
            $('div').index($('#div3'));
        </script>
    </body>
</html>

15.练习6-选项卡练习

<!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(){
                $('input').removeClass('active');
                $(this).addClass('active');
                $('#div1 div').hide();
                $('#div1 div').eq($(this).index('input')).show();
            })
        </script>
    </body>
</html>

16.each循环

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
            <li>555</li>
            <li>666</li>
        </ul>
        <script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            // $('li').css('background','red');
            $('li').each(function(i,elem){
                console.log($(elem).html());
                $(elem).css('background','red');
            })
            
        </script>
    </body>
</html>

17.练习7-提交表单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form action="" method="post">
            <p><input type="text" placeholder="用户名" name="" id="" value="" /></p>
            <p><input type="password" name="" id="" value="" /></p>
            <p><input type="date" name="" id="" value="" /></p>
            <p><input type="radio" name="sex" id="" value="" />男</p>
            <p><input type="radio" name="sex" id="" value="" />女</p>
            <button>提交</button>
        </form>
        <script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $('#form').submit(function(){
                
            })
        </script>
    </body>
</html>

18.元素尺寸

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body{
                margin: 0;
            }
        </style>
    </head>
    <body style="height: 3000px;">
        <script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(window).height();//可视区
            $(document).height();//页面高度
        </script>
    </body>
</html>

19.scrollTop()滚动距离

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            button{
                position: fixed;
                right: 0;
                bottom: 0;
            }
        </style>
    </head>
    <body style="height: 3000px;">
        <button type="button">显示</button>
        <script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $('button').click(function(){
                //$(document).scrollTop()纵向滚动距离
                alert($(document).scrollTop())
            })
        </script>
    </body>
</html>

20.滚动事件scroll

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body style="height:3000px;">
        <script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //滚动条事件
            $(document).scroll(function(){
                console.log(1);
            })
        </script>
    </body>
</html>

21.练习8-懒加载

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            body{
                background: dimgray;
                margin: 0;
            }
            #list{
                list-style: none;
                padding: 0;
                margin: 0;
                width: 800px;
                margin: 0px auto;
                position: relative;
            }
            #list li{
                height: 150px;
                border-bottom: 1px dashed darkgrey;
                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(){
                //$(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>0</li>')
                    $('#list').append($aLi);
                }
            })
        </script>
    </body>
</html>

22.off取消事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button type="button">按钮</button>
        <script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            
            $('button').click(function(){
                alert(123);
                $(this).off('click');
            })
        </script>
    </body>
</html>

23.节点操作-子节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        
        <div id="box">
            <p>p1</p>
            <div>
                <p>p2</p>
                <p>p3</p>
                <p>p4</p>
            </div>
            <p>p5</p>
        </div>
        
        <script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //查找子节点
            //children()
            //find()
            console.log($('#box').children('p:last-child').length);
            console.log($('#box').find('p').length);
        </script>
    </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容