-jq-显式迭代-each()/-jq-创建元素-`append()`-`prepend()`--兄弟关系-`after()`-`before()`/-jq-尺寸-width()-height()

最新推荐文章于 2021-09-18 08:47:15 发布

喵帕斯_喵太

最新推荐文章于 2021-09-18 08:47:15 发布

阅读量200

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/116569989

版权

jquery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

01-jq-显式迭代-`each()`

<body>
    <ul>
        <li>隔壁老王1</li>
        <li>隔壁老王2</li>
        <li>隔壁老王3</li>
        <li>隔壁老王4</li>
        <li>隔壁老王5</li>
        <li>隔壁老王6</li>
        <li>隔壁老王7</li>
        <li>隔壁老王8</li>
        <li>隔壁老王9</li>
        <li>隔壁老王10</li>
    </ul>

    <script>
        $(function () {

            // each主要还是遍历jq对象
            const $lis = $('li')

            // 1. 遍历jq对象：jq对象.each(function(){})
            $lis.each(function (i, ele) {
                console.log(i, ele)
            })

            // 2. 其他对象遍历：$.each(对象,function(){})
            let lis = document.querySelectorAll('li')

            $.each(lis, function (i, ele) {
                console.log(i, ele)
            })

            // 遍历数组
            $.each([1, 2, 3, 4], function (i, ele) {
                console.log(i, ele)
            })
        })
    </script>
</body>

注意：
在这里插入图片描述

02-jq-创建元素-`append()`-`prepend()`

<body>
    <script>

        $(function () {
            // 创建元素
            const $li1 = $('<li></li>')
            const $li2 = $('<li><a href="#">前端</a></li>')

            const $img = $('<img src="images/1-small.jpg">')

            // console.log($li1, $li2, $img)

            // 添加到父元素：jq对象：父元素

            // append()放到父元素的最后面：appendChilid
            $('body').append($img)

            // prepend()放到父元素的最前面
            $('body').prepend($li2)
        })
    </script>
</body>

注意：
1.append()放到父元素的最后面
2.prepend()放到父元素的最前面

03-jq-创建元素-兄弟关系-`after()`-`before()`

<body>
    <div class="box">前端小白</div>

    <script>
        $(function () {
            // 1. 创建元素
            // 2. 添加元素（外部添加）：after()  before()

            const $box = $('.box')

            $box.after($('<span>我是后来的</span>'))

            $box.before($('<span>我是最大的</span>'))
        })
    </script>
</body>

01-jq-尺寸-`inner-outer-outer(ture)-width||height`

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            border: 10px solid skyblue;

            padding: 50px;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        前端小白
    </div>
    <script>
        $(function () {
            // 如果要多次使用，且不会产生修改：可以先获取
            $box = $('.box')

            // 宽高
            console.log('元素内容宽高', $box.width(), $box.height())

            // 可视区域
            console.log('可视区域', $box.innerWidth(), $box.innerHeight())

            // 真实宽高
            console.log('真实宽高', $box.outerWidth(), $box.outerHeight())

            // 带margin
            console.log('真实宽高带margin', $box.outerWidth(true), $box.outerHeight(true))

            // 修改数据（不会使用一下方式修改元素的宽高样式）

            // $box.width(200) // 带数字参数就可以修改

            // $box.innerWidth(500) // 修改的是元素width部分

            // $box.outerWidth(1000)
            // console.log($box.outerWidth())

            // 提问：如何获取页面的可视宽度？
            // 一般用：html根元素比较多（实际上，谷歌下：document、html、body都可以
            console.log($(document.documentElement).innerWidth())
        })
    </script>
</body>

</html>

示例：
在这里插入图片描述

喵帕斯_喵太

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
-jq-显式迭代-each()/-jq-创建元素-`append()`-`prepend()`--兄弟关系-`after()`-`before()`/-jq-尺寸-width()-height()

01-jq-显式迭代-each()<body> <ul> <li>隔壁老王1</li> <li>隔壁老王2</li> <li>隔壁老王3</li> <li>隔壁老王4</li> <li>隔壁老王5</li> <li>隔壁老王6</li>
复制链接

扫一扫