关于明天的事，我们后天就知道了

前言

  学完 javaScript 语言再学习 jQuery ，用起来是真的又方便，又舒服，想要学习 javaScript 基础的同学，后续我会在专门的专栏持续更新 javaScript 的知识，今天继续来操作我们的 jQuery 。😏

一、jQuery 属性操作

1.1 元素固有属性值 prop()

  元素固有属性值的意思就是元素本身自带的属性。

  • 举例

    <a href="#"></a>
<img src="" alt="">

    上述 a 标签的 href 属性和 img 标签的 src、alt 属性就是元素本身自带的属性。

语法

  • 获取属性语法

    prop('属性')

  • 设置属性语法

    prop('属性','属性值')

1.2 元素自定义属性值 attr()

  元素自定义属性值意思就是用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index = “1”。

语法

  • 获取属性语法

    attr('属性')

  • 设置属性语法

    attr('属性','属性值')

该方法也可以获取 H5 自定义属性。

1.3 数据缓存 data()

  data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构，一旦页面刷新，之前存放的数据都将被移除。

语法

  • 附加数据语法

    // 向被选元素附加数据
data('name', 'value')

  • 获取数据语法

    // 向被选元素获取数据
data('name')

代码示例

<body>
    <span>数据缓存</span>


    <script src="./jQuery.js"></script>
    
    <script>
        // 数据缓存
        $('span').data('name', 'abcd')
        console.log($('span').data('name'))
    </script>

</body>

注意：还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。

1.4 jQuery 文本属性值

  常见操作有三种：html() / text() / val() ；主要针对元素的内容还有表单的值操作。

语法

  • 普通元素内容 html()

    // 获取元素的内容
html()
// 设置元素的内容
html('内容')

  • 普通元素文本内容 text()

    // 获取元素的文本内容
text()
// 设置元素的文本内容
text('文本内容')

  • 表单的值 val()

    // 获取表单的值
val()
// 设置表单的值
val('内容')

注意：html() 可识别标签，text() 不识别标签。

二、jQuery 元素操作

  元素操作主要讲的是用 jQuery 方法，操作标签的遍历、创建、添加、删除等操作。

2.1 遍历元素

  jQuery 隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同操作，就需要用遍历。

语法

  • 语法1

    $('div').each(function (index, domEle) {
     xxx;})

  • 参数说明

    • each() 方法遍历匹配的每一个元素，主要用 DOM 处理，each 每一个。
    • 里面的回调函数有 2 个参数：index 是每个元素的索引号; domEle 是每个 DOM 元素对象，不是 jQuery 对象。
    • 若想要使用 jQuery 方法，需要给这个 DOM 元素转换为 jQuery 对象，例： $(domEle) 。

  • 语法2

    $.each(object, function (index, element) {
     xxx;})

  • 参数说明

    • $each() 方法可用于遍历任何对象，主要用于数据处理，比如数组，对象。
    • 里面的函数有 2 个参数：index 是每个元素的索引号， element 遍历内容。

注意：以上方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

代码示例

<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script>
        var colors = ['red', 'blue', 'green', 'orange']
        // each 遍历元素
        $('.box div').each(function (index, item) {
   
            // item 是一个 dom 对象，需要转换 $(item)
            $(item).css('background-color', colors[index])
        })
    </script>
</body>

效果如下

2.2 创建、添加、删除

语法

  • 创建

    // 动态的创建了一个 <li> 标签
$('<li></li>')

  • 内部添加

    // 把内容放入匹配元素内部最后面
element.append('内容')
// 把内容放入匹配元素内容最前面
element.prepend('内容')

  • 外部添加

    // 把内容放入目标元素后面
element.after('内容')
// 把内容放入目标元素前面
element.before('内容')

  • 删除元素

    // 删除匹配的元素（本身）
element.remove()
// 删除匹配的元素集合中所有的子节点
element.empty()
// 清空匹配的元素内容
element.html('')

三、jQuery 尺寸 & 位置操作

3.1 jQuery 尺寸操作

语法 用法
width() / height() 取得匹配元素宽度和高度值，只算 width / height
innerWidth() / innerHeight() 取得匹配元素宽度和高度值 ，包含 padding
outerWidth() / outerHeight() 取得匹配元素宽度和高度值 ，包含 padding、border
outerWidth(true) / outerHeight(true) 取得匹配元素宽度和高度值，包含 padding、border、margin
  • 以上参数为空，则是获取相应值，返回的是数字型。
  • 如果参数为数字，则是修改相应值。
  • 参数可以不必写单位。

代码示例

<body>
    <div class="box"></div>

    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script>
        // 获取元素的宽度
        console.log($('.box').width())
        // 获取元素的宽度，包含内边距
        console.log($('.box').innerWidth())
        // 获取元素的宽度，包含内边距，边框
        console.log($('.box').outerWidth())
        // 获取元素的宽度，包含内边距，边框，外边距
        console.log($('.box').outerWidth(true))
    </script>
</body>

3.2 jQuery 位置操作

语法

  • offset() ：设置或获取元素偏移。
    • offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
    • 该方法有 2 个属性 left，top，offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离。
    • 可以设置元素的偏移: offset({top: 10,left: 30}) 。
  • position() ：获取元素偏移。
    • position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
    • 该方法有 2 个属性 left，top，position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离。
    • 该方法只能获取。
  • scrollTop() / scrollLeft() ：设置或获取元素被卷去的头部和左侧。
    • scrollTop() 方法设置或返回被选元素被卷去的头部。
    • 不写参数是获取，参数为不带单位的数字则是设置被卷去的头部。

代码示例

<body>
    <div class="box">
        <div class="child"></div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>

    <script>
        // 获取相对于文档的偏移坐标
        console.log($('.child').offset())
        // 获取相对于带有定位的父级元素偏移坐标，如果父级没有定位，则以文档为准
        console.log($('.child').position())
        // 获取元素被卷去的头部距离
        $(window).on('scroll', function () {
   
            console.log($(window).scrollTop())
        })
    </script>
</body>

没有动人的情话，只有简单的喜欢，一生热情，次次真心。