55 jquery

JQ

jquery

是js进行的二次封装的工具包

二次封装:比js使用起来便捷了,操作比综合(写一句jq可以实现多句逻辑),底层是原生is

工具包:jq就是一堆函数的集合体,通过jq对象来调用(jq)

目的是更快速使用js

在使用js的地方都可以使用jq

安装(环境)

1.官网下载：https://jquery.com/download/
   jquery-3.4.1.js | jquery-3.4.1.min.js
   
2.在 需要jq环境的页面中 使用jq
<script src="js/jquery-3.4.1.js"></script>
<script>
    $ 就是jQuery对象，可以使用jQuery的所有功能
</script>

3.根据API学习jq：http://jquery.cuishifeng.cn

jq操作页面


    <!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());


</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>

$('css3选择器语法') 就是jq选择器，获得的是jq对象，jq对象可以理解为存放了js对象的数组（存放了几个js对象不需要关心）
jq对象转换为js对象 - jq对象[js对象所在索引] - 可以使用js的语法
js对象装换为jq对象 -$(js对象) - 可以使用jq的语法

jq常用操作

文本操作

$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 返回值就是要设置的值(可以与自身其他属性，或是页面其他标签，或是自定义逻辑有关系);
})

类名 - 可以一次性获取提前设置好的一套样式

增加类名：$div.addClass('类名')
删除类名：$div.removeClass('类名')
切换类名：$div.toggleClass('类名')

属性

获取属性值：$div.attr('属性名')
设置属性值：$div.attr('属性名', '属性值或函数')
删除属性值：$div.attr('属性名', '')

例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <style>
        h1 {
            font-size: 36px;
            text-align: center;
        }
        .box {
             200px;
            height: 200px;
            background-color: orange;
        }
        .red {
            background-color: red;
            border-radius: 50%;
        }
        .yellow {
             400px;
            border-radius: 100px;
            background-color: yellow;
        }
        .blue {
             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>

jq的链式操作

<!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>
<!-- CDN服务器 | 官网服务器 -->
<!--<script src="https://code.jquery.com/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('修改标题');
.text()返回内容
.width()返回宽
.height()赶回高
修改值在括号里填,不传参数就返回参数,传参就设置参数
()里不需要参数的返回值不是自身
</script>
</html>

jq操作文档

一、快速定位到某一个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);
    })

相关阅读:
P1121 环状最大两段子段和
 无题
 cdoj 1485 柱爷搞子串 sam treap
自然数幂和
 Gym 100341C AVL Trees NTT
线性筛分解质因子
 codeforces 366 Ant Man dp
UVALive 6914 Maze Mayhem 轮廓线dp
hdu 5790 Prefix 字典树主席树
 莫比乌斯反演个人小结
原文地址：https://www.cnblogs.com/komorebi/p/11143642.html