02-13jq补充

作者: 生命的怒放 | 来源:发表于2019-02-14 20:46 被阅读0次

02-13jq补充
swift笔记:函数补充,枚举补充,属性补充,继承补充
补充
补充
补充
补充
补充
补充
补充
补充

一：jq补充

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js">
            
        </script>
    </head>
    <body>
        <div id="">
            <p>1</p>
            <p>2</p>
            <p>3</p>
        </div>

    </body>
</html>
<script type="text/javascript">
    //1.jquery同时选中多个标签，
    //同时处理 - 直接操作选中的jquery对象，就是操作被选中的所有标签
    //$('p').css('')
    $('p').on('click',function(){
        console.log(this)
        $(this)  //将js对象转换成jq对象
    })
    pNodes=$('p')
    //这个取出来的都是js对象
    
    //jq标签.on（事件名，选择器，回调函数）-- 给父标签添加事件，将事件传递给选择器选中的子标签。函数中的this是子标签
    //jq标签 - 父标签
    //选择器  - 在父标签中去选中子标签
    //给
    
</script>

二：图片轮播

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <style type="text/css">
            div{
                margin: 0 auto;
            }
            #an1a1{     
                width: auto;
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);        
            }
            #an1{
                color: red;
            }
            #num2{
                width: auto;
                position: absolute;
                top: 275px;
                left: 50%;              
                transform: translateX(-50%);
                color: black;   
            }
            #an1{
                color: red;
            }
        </style>
    </head>
    
    <body>
        <div id="">
            <img id='an1a1' src="img/picture-1.jpg"/>
        </div>
        <div id="num2">
            <font id='an1'>●</font>
            <font id='an2'>●</font>
            <font id='an3'>●</font>
        </div>
        
    
    </body>
    
    <script type="text/javascript">
        var fontId = 'an1'
        imgs = {"an1":"img/picture-1.jpg","an2":"img/picture-2.jpg","an3":"img/picture-3.jpg"}
        
        $('body').on('mouseover','font',function(){
            var color1 = $(this).css('color')
            if(color1=='rgb(255, 0, 0)'){
                return
            }
            $(this).css('color','red')
                $('#'+fontId).css('color','black')  
                fontId = this.id
            imgskey = this.id
            $('img').attr('src',imgs[imgskey])
        })
    
    </script>
</html>