JQ

布满荆棘的人生 2021-11-09 10:02 297阅读 0赞

# jq引入 #

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Title</title>
    </head>
    <body>
    
    </body>
    <script src="js/jquery-3.4.1.js"></script>
    <script>
        // js - ES语法 | 浏览器(BOM) window.* | 文档(DOM window.document) document.*
    
        // window.alert('js code');
        // window.document.write(123)
        // window.print()
    
        // 如何写jq代码
        console.log(jQuery);
    
        window.owen = 'Owen';
        console.log(window.owen);
        console.log(owen);
        console.log($);
        console.log($owen);
    
    </script>
    </html>

# 操作页面 #

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <h1>标题</h1>
        <p class="p1">p11111111111111111111111111</p>
        <p class="p2">p22222222222222222222222222</p>
        <div>
            <b>div的加粗内容</b>
        </div>
        <form action="">
            <input type="text">
        </form>
    </body>
    <script src="js/jquery-3.4.1.js"></script>
    <script>
        // 1.jq选择器 - 得到的是jq对象 - jq对象可以调用jq库的所有功能
        // $('css语法选择器')
    
        let h1 = $('h1');
        console.log(h1);
    
        let p1 = $('.p1');
        let p2 = $('p:nth-of-type(2)');
        console.log(p1, p2);
    
    
        // 想通过js对象获取第2个p的文本内容
        let ps = $('p');
        console.log(ps);
    
        let _p2 = ps[1];  // jq对象可以理解为存放了js对象的数组
        console.log(_p2.innerText);
    
        // 想通过jq对象获取第2个p的文本内容
        p2 = $(_p2);
        console.log(p2.text());
    
        // 总结：
        `
        1. $('css3选择器语法') 就是jq选择器，获得的是jq对象，jq对象可以理解为存放了js对象的数组 （存放了几个js对象不需要关心）
        2. jq对象转换为js对象 - jq对象[js对象所在索引] - 可以使用js的语法
        3. js对象转换为jq对象 - $(js对象) - 可以使用jq的语法
        `;
    
    </script>
    
    <script>
        // 操作页面的三步骤
        // 1.获取标签
        // 2.绑定事件
        // 3.操作标签
    
        // $('h1').click(function (ev) {
          
        //     // jq的事件对象，但对js事件对象做了完全兼容
        //     console.log(ev);
        //     console.log(ev.clientX);
        //     console.log(ev.clientY);
        // })
    
        // $('h1').on('click', function (ev) {
          
        //     console.log(ev);
        // })
    
        $('p').click(function () {
            // 在jq事件中的this还是js对象，如果要使用jq功能，需要将this转换为jq对象
            console.log($(this));
            console.log($(this).text());
        });
    
        // 文本
        // $div.text()  文本内容
        // $div.html()  标签内容
        // $inp.val()  表单内容
    
        // 需求1：点击h1获取 自身文本内容、div的标签内容、input的表单内容
        $('h1').click(function () {
            console.log($(this).text());
            console.log($('div').html());
            console.log($('input').val());
        })
    
    
    </script>
    
    </html>

# 常用操作 #

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Title</title>
        <style>
            h1 {
          
                font-size: 36px;
                text-align: center;
            }
            .box {
          
                width: 200px;
                height: 200px;
                background-color: orange;
            }
            .red {
          
                background-color: red;
                border-radius: 50%;
            }
            .yellow {
          
                width: 400px;
                border-radius: 100px;
                background-color: yellow;
            }
            .blue {
          
                width: 400px;
                border-radius: 50%;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <h1 id="h1" style="color: red">标题</h1>
        <img src="" alt="">
        <button class="btn1">红</button>
        <button class="btn2">黄</button>
        <button class="btn3">蓝</button>
        <div class="box"></div>
        
    </body>
    <script src="js/jquery-3.4.1.js"></script>
    <script>
        // 一、文本操作
        // $div.text()  文本内容
        // $div.html()  标签内容
        // $inp.val()  表单内容
    
        // 二、样式操作
        // 获取样式: $div.css('css中的样式属性名')
        // 设置样式:
        `
        $div.css('css中的样式属性名', '属性值');  // 单一设置
        $div.css({
            '属性1': '值1',
            ...
            '属性n': '值n',
        });
        $div.css('属性', function (index, oldValue) {
            console.log(oldValue);
            // $(this) 可以拿到调用者对象
            return 返回值就是要设置的值(可以与自身其他属性，或是页面其他标签，或是自定义逻辑有关系);
        })
        `;
        `
        $('h1').click(function () {
            let $this = $(this);
            let color = $this .css('color');
            let fs = $this.css('font-size');
            let ta = $this.css('text-align');
            console.log(color, parseInt(fs), ta);
    
            $this.css('background-color', 'orange');
            $this.css({
                'background-color': 'pink',
                'border-radius': '10px',
                'width': '200px',
            });
    
            $this.css('height', function (index, oldValue) {
                console.log(oldValue);
                let w = $(this).width();
                return w / 2;
            })
        })
        `;
    
        // 三、类名 - 可以一次性获取提前设置好的一套样式
        `
        增加类名：$div.addClass('类名')
        删除类名：$div.removeClass('类名')
        切换类名：$div.toggleClass('类名')
        `;
        `
        $('.btn1').click(function () {
            $('.box').addClass('red');
            $('.box').removeClass('yellow');
            $('.box').removeClass('blue');
    
            // $('.box').toggleClass('red');  // 无red类添加，反之去除
        });
        $('.btn2').click(function () {
            let $box = $('.box');
            $box[0].className = 'box';
            $box.addClass('yellow');
        });
        $('.btn3').click(function () {
            $('.box').addClass('blue');
        });
        `;
    
        // 四、属性
        `
        获取属性值：$div.attr('属性名')
        设置属性值：$div.attr('属性名', '属性值或函数')
        删除属性值：$div.attr('属性名', '')
        `;
        // https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=705ffa145fda81cb51e685cd6267d0a4/4bed2e738bd4b31c5a30865b89d6277f9f2ff8c6.jpg
        $('h1').click(function () {
            let h1_id = $(this).attr('id');
            console.log(h1_id);
    
    
            $('img').attr('src', function () {
                return 'https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=705ffa145fda81cb51e685cd6267d0a4/4bed2e738bd4b31c5a30865b89d6277f9f2ff8c6.jpg'
            });
            $(this).attr('id', '');
        })
    
    
    
    </script>
    </html>

# 链式操作 #

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Title</title>
    </head>
    <body>
        <h1>标题</h1>
    </body>
    <script src="js/jquery-3.4.1.js"></script>
    
    
    <script>
        `
        let _self = $('h1').css('color', 'orange');
    
        _self = _self.click(function () {
            console.log(this)
        });
    
        _self = _self.css('background', 'red');
        `;
    
        $('h1').css('color', 'orange').css('background', 'red').click(function () {
            console.log(this)
        }).text('修改标题');
    
    </script>
    </html>

# 操作文档 #

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>操作文档</title>
        <style>
            .d {
          
                width: 50px;
                height: 50px;
                background-color: orange;
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
    
        内容：<input type="text">
        行：<input type="text">
        列：<input type="text">
        <p>表格</p>
        <div>
            <div class="d d1"></div>
            <div class="d d2">
                <div class="sub"></div>
                <div class="sub"></div>
                <div class="sub"></div>
            </div>
            <div class="d d3"></div>
            <div class="d d4"></div>
        </div>
    </body>
    <script src="js/jquery-3.4.1.js"></script>
    
    <script>
    
        // 一、快速定位到某一个jq对象
        `
        // 1）在jq集合中快速拿到某一个jq对象: jq对象.eq(index)
        // $('.d:eq(1)')  ==  $('.d').eq(1)
        // $('.d').eq(1).click(function () {
          
        //     alert(123)
        // })
        // 2）在jq集合中都具有系统事件，在事件中如何区别每一个jq对象
        // $(this) | 索引
        $('.d').click(function () {
            // 标签所在层级的索引，不是在jq对象数组中的索引
            let index = $(this).index();
            console.log(index)
        });
        `;
    
    
        // 二、通过自身快速定位到 "亲戚"
        `上兄弟(们) prev(All)
        下兄弟(们) next(All)
        兄弟们 siblings
        孩子们 children
        父亲(们)
        `;
        `
        let $d2 = $('.d2');
        console.log($d2);
        let next = $d2.next();
        console.log(next);
        let nexts = $d2.nextAll();
        console.log(nexts);
        let prev = $d2.prev();
        console.log(prev);
        let siblings = $d2.siblings();
        console.log(siblings);
        let children = $d2.children();
        console.log(children);
        let parent = $d2.parent();
        console.log(parent);
        `;
        
    
        // 三、动态生成页面结构
        let $table = $('<table></table>');
        $table.css({
           border: '1px'
        });
        $('body').append($table);  // 加入到body最后
        $('body').prepend($table);  // 加入到body最后
        $('p').before($table);  // 加入到p之前
        $('p').after($table);  // 加入到p之后
    
    
        // 需求：点击表格，在之后插入指定宽高的表格
        $('p').click(function () {
            let inps = $('input');
    
            // 表
            let table = $('<table border="1"></table>');
    
            let row = inps.eq(1).val();
            console.log(typeof(inps.eq(1).val()));
            let col = inps.eq(2).val();
            // 行
            for (let i = 0; i < row; i++) {
                let tr = $('<tr></tr>');
                table.append(tr);
                // 列
                for (let j = 0; j < col; j++) {
                    let td = $('<td>' + inps.eq(0).val() + '</td>');
                    tr.append(td);
                }
    
            }
    
            $(this).after(table);
        })
    </script>
    
    </html>

# 案例1 #

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Title</title>
        <style>
            body, ul {
          
                margin: 0;
                padding: 0;
                list-style: none;
            }
            .login {
          
                width: 300px;
                height: 400px;
                border: 1px solid black;
                margin: 0 auto;
            }
            ul:after {
          
                content: "";
                display: block;
                clear: both;
            }
            li {
          
                width: 150px;
                height: 50px;
                float: left;
                font: 20px/50px 'Arial';
                text-align: center;
                cursor: pointer;
            }
            li:hover {
          
                /*background: orange;*/
                color: orange;
            }
            li.live {
          
                /*background: orange;*/
                color: orange;
            }
            .login-box, .scan-box {
          
                height: calc(400px - 50px);
                background-color: red;
                display: none;
            }
            .scan-box {
          
                background-color: pink;
            }
            .box.live {
          
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="login">
            <ul>
                <li class="live">登录</li>
                <li>扫码</li>
            </ul>
            <div>
                <div class="box login-box live"></div>
                <div class="box scan-box"></div>
            </div>
        </div>
    </body>
    <script src="js/jquery-3.4.1.js"></script>
    <script>
        // $('li').mouseover(function () {
          
        //     $(this).addClass('live').siblings().removeClass('live');
        //     let index = $(this).index();
        //     $('.box').eq(index).addClass('live').siblings().removeClass('live');
        // })
    
        $('li').click(function () {
            $(this).addClass('live').siblings().removeClass('live');
            let index = $(this).index();
            $('.box').eq(index).addClass('live').siblings().removeClass('live');
        })
    </script>
    </html>

# 案例2 #

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Title</title>
        <style>
            body, ul, h2 {
          
                margin: 0;
                padding: 0;
                list-style: none;
            }
            .box {
          
                width: 120px;
            }
            h2 {
          
                height: 36px;
                background-color: brown;
                color: white;
                font: 20px/36px 'Arial';
                text-align: center;
            }
            ul {
          
                overflow: hidden;
                height: 0;
                border: none;
                transition: 0.2s;
            }
            ul.live {
          
                border: 1px solid black;
                /*height: 100px;*/
            }
            li {
          
                height: 30px;
                font: 16px/30px 'Arial';
                text-align: center;
                border-bottom: 1px solid black;
            }
    
        </style>
    </head>
    <body>
        <div class="box">
            <h2>菜单</h2>
            <ul>
                <li>菜单1</li>
                <li>菜单2</li>
                <li>菜单3</li>
            </ul>
        </div>
    </body>
    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $('h2').click(function () {
            $('ul').toggleClass('live').css('height', function (i, o) {
                console.log(o);
                let c = $(this).children().length;
                if (o !== '0px') {
                    return 0;
                } else {
                    let h = $(this).children().css('height');
                    h = parseInt(h);
                    return h * c + 'px';
                }
            })
        })
    
    </script>
    </html>

转载于:https://www.cnblogs.com/HZLS/p/11140655.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211109/44d6821e820d4e00a27a9921b2bdf584.png