您的位置: 首页  >  IT文章  >  Day050--jQuery表单事件 轮播图 插件库 ajax

Day050--jQuery表单事件 轮播图 插件库 ajax

分类: IT文章 • 2025-01-22 18:27:02

表单控件的事件

　　change()表单元素发生改变时触发事件
　　select()文本元素发生改变时触发事件
　　submit()表单元素发生改变时触发事件

　　

.focus() 获取焦点
.blur()  释放焦点
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<input type="text">
<script src="./libs/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //如果有回调函数参数,表示输入框获取焦点的额时候会触发
        //如果没有回调函数,当调用focus() 立马会获取焦点
        // $('input[type=text]')[0].focus()
        $('input[type=text]').focus(function () {
            console.log(111);
        });

        //3秒后释放焦点
        var timer = setTimeout(function () {
            $('input[type=text]').blur();
            clearTimeout(timer);
        },3000);

    })
</script>

</body>
</html>
jQuery事件, 焦点的获取与释放

　　合成事件  .hover(fn1,fn2)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box"></div>
<script src="libs/jquery-3.3.1.js"></script>
<script>
    $(function () {
        $('.box').hover(function () {
            $(this).css('backgroundColor','green')
        }, function () {
            $(this).css('backgroundColor', 'red')
        })
    })
</script>

</body>
</html>
View Code

 

　　表单事件

　　change(), select()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
男<input type="radio" checked name="gender" value="1">
女<input type="radio" name="gender" value="0">

<select name="" id="">
    <option value="a">alex</option>
    <option value="b">wusir</option>
    <option value="c">xiaomage</option>
</select>

<input type="text" id="text">
<script src="./libs/jquery-3.3.1.js"></script>
<script>
    $(function () {
        $('input[type=radio]').change(function (e) {
            console.log('被选中了');
            console.log(e.target);
            console.log($(this).val());
        });

        $('select').change(function (e) {
            console.log('选中了',$(this).find('option:selected').text());
            console.log($(e.target).find('option:selected').val());
            console.log(e.target);

        });

        // 只有在选中输入框中文字的时候才能触发事件
        $('#text').select(function (e) {
            console.log('被选中了');
            console.log(e.target);
        });



    })
</script>

</body>
</html>
View Code

事件代理

　　应用条件

　　应用原理

　　通过冒泡事件处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<button id="append">追加</button>
<div class="box">
    <ul>
        <li>alex</li>
        <li id="box">wusir</li>
    </ul>
</div>

<script src="./libs/jquery-3.3.1.js"></script>
<script>
    $(function () {
        $('ul li').click(function () {
            alert($(this).text());
        });

        //事件委托,用on(事件,子元素选择器,fn)
        $('.box').on('click','li',function () {
            console.log($(this));
        });

        //未来追加的元素  是没有事件 我们通过事件委托  当你出现点击页面中的DOM没有任何反应
        //1.DOM是否undefined  2.考虑事件代理
        $('#append').click(function () {
            var val = $('input[type=text]').val();
            $('ul').append(`<li>${val}</li>`);
        })

    })
</script>
</body>
</html>
未来追加的元素时没有事件的,需要使用事件代理

　　选项卡--小米轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;}
        ul,ol{ list-style: none;}
        .wrapper{
            width: 1226px;
            height: 460px;
            margin: 100px auto;
            /*overflow: hidden;*/
            position: relative;
        }
        .wrapper ul{
            width: 100%;
            height: 460px;
            overflow: hidden;

        }
        .wrapper ul li{
            float: left;
            width: 100%;
            /*height: 240px;*/
        }
        ol{
            position: absolute;
            right: 0;
            bottom: 10px;
            width: 290px;
        }
        ol li{
            float: left;
            width: 20px;
            height: 20px;
            margin: 0 5px;
            text-align: center;
            border-radius: 50%;
            cursor: pointer;
            background-color: #abc;
        }
        ol li.current{
            background-color: pink;
        }
        img{
            width: 1226px;
        }
    </style>
    <script src="libs/jquery-3.3.1.js"></script>
    <script>
        $(function () {
            // 根据ol下li的索引号，匹配ul下相对应li的索引号
            $('.wrapper ol li').mouseenter(function () {
                $(this).addClass('current').siblings('li').removeClass('current');
                $('.wrapper ul li').eq($(this).index()).stop().fadeIn(100).siblings('li').stop().fadeOut(300);
            })
        })
    </script>
</head>
<body>
    <div class="wrapper">
        <ul>
            <li><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
            <li><img src="images/4.jpg" alt=""></li>
            <li><img src="images/5.jpg" alt=""></li>
        </ul>
        <ol>
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>

    </div>
</body>
</html>
View Code

ajax技术(XHR === XMLHTTPRequest)

参考:https://www.cnblogs.com/majj/p/9134922.html

　　作用 :与后端交互,局部作用域刷新页面.

Day050--jQuery表单事件 轮播图 插件库 ajax

Day050--jQuery表单事件 轮播图 插件库 ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>

    </ul>

    <script src="libs/jquery-3.3.1.js"></script>
    <script>
        //天气图片地址,数字是json文件中的cond_code
    // https://cdn.heweather.com/cond_icon/104.png
        $(function () {
            function getWeather() {
                clearInterval(timer);

                $.ajax({
                url:'https://free-api.heweather.com/s6/weather/now?location=beijing&key=84d13f49fcc1474aba06d11c28e36a74',
                type:'get',
                success:function (data) {
                    console.log(data);
                    var code = data.HeWeather6[0].now.cond_code;

                    $('ul').html(`<img><img src="https://cdn.heweather.com/cond_icon/${code}.png"></li>`)
                },
                error:function (err) {
                    console.log(err);
                }
            })
            }

            getWeather();

            var timer = setInterval(function () {
                getWeather();
            },5000);


            })


    </script>

</body>
</html>
View Code 
{
    "HeWeather6":[
        {
            "basic":{
                "cid":"CN101010100",
                "location":"北京",
                "parent_city":"北京",
                "admin_area":"北京",
                "cnty":"中国",
                "lat":"39.90498734",
                "lon":"116.4052887",
                "tz":"+8.00"
            },
            "update":{
                "loc":"2018-11-15 18:45",
                "utc":"2018-11-15 10:45"
            },
            "status":"ok",
            "now":{
                "cloud":"0",
                "cond_code":"104",
                "cond_txt":"阴",
                "fl":"5",
                "hum":"18",
                "pcpn":"0.0",
                "pres":"1029",
                "tmp":"9",
                "vis":"29",
                "wind_deg":"4",
                "wind_dir":"北风",
                "wind_sc":"3",
                "wind_spd":"14"
            }
        }
    ]
}
weather.json

相关推荐