JQuery

时间：2019-07-05 22:20:01 阅读：117 评论：0 收藏：0 [点我收藏+]

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

所谓是工具包就是因为他可以说是许多函数的集合体

通过jq对象来调用

它能够更快速的使用js，另外再能使用js的地方都可以使用jq

安装环境：

1.官网下载：https://jquery.com/download/

2.在需要jq环境的页面中使用jq

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

    // 总结：
    `
    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>

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

jq常用操作

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

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(‘修改标题‘);

</script>
</html>

jq操作文档

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

JQuery

原文：https://www.cnblogs.com/xinfan1/p/11140894.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)