zoukankan      html  css  js  c++  java
  • 前端 JQ事件操作

    jq API

    http://jquery.cuishifeng.cn/
    

    jq初始

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>jq初始</title>
    </head>
    <body>
        <h1>jQuery就是js的工具库 - 一系列功能的集合体</h1>
        <h2>jq内部语法采用的就是原生js</h2>
        <h2>jq环境如何搭建 - 在需要使用jq的html中引入jquery.js即可</h2>
        <h2>jq就是优化了原生js鱼页面进行交互的逻辑</h2>
    </body>
    
    <!-- CDN 连接 外部资源 -->
    <!--<script src="https://code.jquery.com/jquery-3.4.1.js"></script>-->
    <!--<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>-->
    
    <script src="js/jquery-3.4.1.js"></script>
    <script>
        // jQuery对象
        console.log(jQuery);
        console.log($);
        console.log(Owen);
    
        console.log($('h1'));
        $('h1').click(function () {
            $('h1').css('color', 'red')
        })
    </script>
    </html>
    

    jq选择器

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Title</title>
    </head>
    <body>
        <div id="d" class="box"></div>
        <input type="text" id="d2" class="box" />
        <h3 class="h3"></h3>
    </body>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        // jq选择器:$('css选择器语法')
        let $div = $('#d');
        console.log($div);
    
        let $boxs = $('.box');
        console.log($boxs);
    
        // jq对象如何转换为js对象 - jq对象可以理解为装有js对象的数组
        // 就是通过索引取值
        let div = $div[0];
        console.log(div);
    
        console.log(document.getElementsByClassName('box')[0]);
        console.log(document.querySelectorAll('.box')[0]);
        console.log($div[0]);
        console.log($boxs[0]);
        console.log($boxs[1]);
    
        // js如何转换为jq对象
        let $newDiv = $(div);
        console.log($newDiv);
    
    </script>
    </html>
    

    jq事件

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>jq事件</title>
        <style>
            .box {
                 200px;
                height: 200px;
                background-color: orange;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <div class="box">1</div>
        <div class="box">2</div>
    </body>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        let $box = $('.box');
        // $box.click(function () {
        //     // this就是被点击的标签 - js对象
        //     console.log(this);
        //     console.log($(this));
        // });
    
        // jq对象可以完成事件的批量绑定
        $box.on('click', function () {
            console.log(this);
            console.log(this.innerText);
            console.log($(this));
        });
    
        // js必须手动循环 绑定
        // let boxs = document.querySelectorAll('.box');
        // for (box of boxs) {
        //     box.onclick = function () {
        //         console.log(this);
        //         console.log($(this));
        //     }
        // }
    
    </script>
    </html>
    

    jq内容操作

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>jq内容操作</title>
    </head>
    <body>
        <h1 class="title">标题</h1>
        <input type="text" class="title">
        <button class="btn">改标题</button>
    </body>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        // js - jsObj.value | jsObj.innerText | jsObj.innerHTML
        // jq - jqObj.val() | jqObj.text() | jqObj.html()
        // 取值:jqObj.text() | jqObj.text('新值') | jqObj.text(fn)
    
        let $btn = $('.btn');
        let $inp = $('input.title');
        let $h1 = $('h1.title');
    
        $btn.click(function () {
            let val = $inp.val();
            if (val) {
                // $h1.text(val);
                $h1.html(val);
                $inp.val(function (index, oldValue) {
                    // return oldValue.toUpperCase()
                    return ''
                })
            }
        })
    </script>
    </html>
    

    jq样式操作

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>jq样式操作</title>
        <style>
            .box {
                /* 200px;*/
                height: 200px;
                background-color: pink;
            }
            .sup-box {
                /* 400px;*/
                height: 100px;
                background-color: orange;
                border-radius: 50%;
                line-height: 100px;
                text-align: center;
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="box" style=" 600px">文本</div>
    </body>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        let $box = $('.box');
    
        $box.click(function () {
            // 获取
            let width = $box.css('width');
            console.log(width);
    
            // 单个设置
            $box.css('background-color', function (i, o) {
                console.log(o);
                return 'red'
            });
    
            // 多条设置
            $box.css({
                 '100px',
                height: '100px',
                backgroundColor: 'blue',
            });
    
            if ($box.hasClass('sup-box')) {
                $box.removeClass('sup-box')
            } else {
                $box.addClass(function (i, o) {
                    console.log(i, o);
                    return 'sup-box'
                })
            }
        })
        
    </script>
    <script>
        // localStorage['name'] = 'owen';
        // sessionStorage['age'] = 18;
    </script>
    </html>
    
  • 相关阅读:
    thrift学习
    Spring Bean的生命周期
    无聊的编程题
    jpa双向多对多关联映射
    jpa单向多对多关联映射
    jpa双向一对多关联映射
    jpa单向一对多关联映射
    【计导作业】链表——差集与交集
    【计导作业】链表——成绩统计2
    C语言中访问结构体成员时用‘.’和‘->’的区别
  • 原文地址:https://www.cnblogs.com/bladecheng/p/11304825.html
Copyright © 2011-2022 走看看