jQuery节点操作、jQuery操作元素的尺寸、位置及案例实践

Devil
179 阅读2分钟

jQuery节点操作

创建元素

  • 语法
$('<li></li>')

追加元素1

  • 公共的结构
<ul class="box">
    <li>这是原本的标签1</li>
    <li class="old">这是原本的标签2</li>
    <li>这是原本的标签3</li>
</ul>
<script src="../js/jquery.min.js"></script>
<script>
    // 获取元素
    var $ul = $(".box");
    // 新元素
    var $newLi = $('<li>这是新的标签</li>');
    // 获取所有的li元素
    var $li = $(".old");
</script>

向父元素最后追加

  • 语法(写法1): 父元素jQuery对象.append(新创建的jQuery对象);
  • 语法(写法2): 新创建的jQuery对象.appendTo(父元素jQuery对象 或 '父元素选择器');
// 追加元素
// 向父元素追加
// 1.向父元素最后追加
// 写法1
$ul.append(newLi);
// 写法2
$newLi.appendTo($ul);
$newLi.appendTo(".box");

向父元素最前面追加

  • 语法(写法1)：父元素jQuery对象.prepend(新创建的jQuery对象);
  • 语法(写法2)：新创建jQuery对象.prependTo('父元素选择器' 或 父元素jQuery对象);
// 2.向父元素前面追加
// 写法1
$ul.prepend($newLi);
// 写法2：父元素jQuery对象
$newLi.prependTo($ul);
// 父元素选择器
$newLi.prependTo('.box');

追加元素2

向元素后面追加新的兄弟

  • 语法(写法1)：jQuery对象.after(新创建的jQuery对象);
  • 语法(写法2)：新创建jQuery对象.insertAfter('选择器' 或 jQuery对象);
// 1.向元素后面追加兄弟
// 写法1
$li.after($newLi);
// 写法2
$newLi.insertAfter($li);
$newLi.insertAfter(".old");

向元素前面追加新的兄弟

  • 语法(写法1)：jQuery对象.before(新创建的jQuery对象);
  • 语法(写法2)：新创建jQuery对象.insertBefore('选择器' 或 jQuery对象);
// 2.向元素前面追加兄弟
// 写法1
$li.before($newLi);
// 写法2
$newLi.insertBefore($li);
$newLi.insertBefore(".old");

删除元素(直接删除元素节点)

  • 语法：jQuery对象.remove();
  • 删除谁就让谁调用这个方法
// 删除元素 谁要被删除就谁调用
$li.remove();

清空元素(清空元素节点的内容)

清空方法1：jQuery对象.empty();

  • 推荐使用,清空内部的所有元素及元素相关的事件。
// 清空元素
// 方法1
$ul.empty();

清空方法2

  • 仅仅清空内部的元素，不清理内存中的元素的事件。
// 方法2
$ul.html('');

克隆元素

  • 语法：jQuery对象.clone(布尔值);
  • 返回值：返回克隆好的元素
  • 参数：默认是false,表示仅仅克隆内容。true，克隆内容和事件
// 克隆元素：clone()方法
/* 直接使用append方法，
   会将之前的元素直接剪切到新的位置去（剪切操作）
   因此，我们使用克隆方法才行（复制操作）   
*/
// 返回值：克隆好的元素
$("body").append($ul.clone(true));
// 参数：false（默认值，可不写）表示：只克隆内容
// true:克隆内容和事件

jQuery操作元素的尺寸

  • 直接获取的就是数值，不需要进行字符串转换(css).
  • 回顾：border及以内是可视的区域。
    • border可以添加颜色
    • padding和内容可以添加背景颜色

width()和height()方法

  • 操作的大小仅仅是内容部分
  • 设置：
    • 语法：jQuery 对象.width(数字);
  • 获取：
    • 语法：jQuery 对象.width();

innerWidth()和innerHeight()方法

  • 操作的大小是内容部分 + padding
  • 设置：
    • 语法：jQuery 对象.innerWidth(数字);
  • 获取：
    • 语法：jQuery 对象.innerWidth()

outerWidth()和outerHeight()方法

  • 操作的大小是内容部分 + padding + border
  • 设置：
    • 语法：jQuery 对象.outerWidth(数字);
  • 获取：
    • 语法：jQuery 对象.outerWidth();

jQuery操作元素的位置

  • 公共结构
<style>
.out {
    position: relative;
    left: 20px;
    top: 20px;
    width: 300px;
    height: 300px;
    background-color: pink;
}
.out .in {
    position: absolute;
    left: 50px;
    /* right: 50px; */
    top: 50px;
    width: 100px;
    height: 100px;
    background-color: salmon;
}
</style>
<body>
    <div class="out">
        <div class="in"></div>
    </div>
    <script src="../js/jquery.min.js"></script>
    <script>
        // 获取jQuery对象
        var $out = $(".out");
        var $in = $(".in");
    </script>
</body>

获取元素距离文档的位置

  • 语法：jQuery 对象.offset();
  • 返回一个对象，对象中包含了元素的位置
  • 注意：offset() 方法获取的元素的位置，永远参照文档,和定位没有关系.
  • 演示代码
// 获取元素距离文档的位置
// 返回一个对象，包含了元素的位置:top\left
console.log($in.offset());
console.log($in.offset().top);  //70
console.log($in.offset().left); //70

距离上级定位参考元素的位置

  • 语法：jQuery 对象.position();
  • 返回的一个对象，对象中包含了元素的位置
  • 注意：position() 方法获取的元素的位置,参照最近的定位元素（和定位有关系）
  • 演示代码
// 距离上级定位参考元素的位置
// 返回一个对象，包含了元素的位置，top、left
console.log($in.position());
console.log($in.position().top); // 50
console.log($in.position().left); // 50

操作卷去的页面间距

  • 获取
    • 语法：jQuery 对象.scrollTop();
    • 返回数字
  • 设置
    • 语法：jQuery 对象.scrollTop(数字)
  • 出现滚动条的情况
    • 元素的宽高是固定的，但是内容比较多，可能会出现水平方向或者垂直方向的滚动条。
    • 整个页面的高度比较高，也会出现垂直方向的滚动条。
  • 演示代码
<style>
    body {
        height: 4000px;
    }
    .box {
        width: 300px;
        height: 300px;
        border: 1px solid #333;
        margin: 50px auto;
        font: 16px/32px "宋体";
        overflow: auto;
    }
    input {
        position: fixed;
        bottom: 50px;
        right: 50px;
    }
</style>

<div class="box">
  <p>段落内容</p>
  <p>段落内容</p>
  <p>段落内容</p>
  <p>段落内容</p>
  <p>段落内容</p>
  <p>段落内容</p>
  <p>段落内容</p>
  <p>段落内容</p>
  <p>段落内容</p>
  <p>段落内容</p>
  <p>段落内容</p>
  <p>段落内容</p>
  <p>段落内容</p>
  <p>段落内容</p>
  <p>段落内容</p>
  <p>段落内容</p>
  <p>段落内容</p>
  <p>段落内容</p>
  <p>段落内容</p>
  <p>段落内容</p>
  <p>段落内容</p>
  <p>段落内容</p>
</div>
<input type="button" value="返回顶部" class="backTop">

// 获取jQuery对象
var $box = $(".box");
var $backTop = $(".backTop");
// 绑定事件
// 给元素添加滚动事件
$box.scroll(function (){
    // 获取滚动条卷走的距离
    console.log($(this).scrollTop());
});
// 给文档设置滚动事件
$(document).scroll(function (){
    // 获取滚动条卷走的距离
    console.log($(this).scrollTop());
});
// 通过点击按钮，直接返回到顶部
$backTop.click(function (){
    $(document).scrollTop(0);
});

综合案例

固定导航

// 固定导航
// 3.获取今日团的位置
var group = $box2.offset().top; 
// 1.给整个文档绑定滚动事件
$(document).scroll(function (){
    // 2.获取滚动top值
    var s = $(this).scrollTop();
    // 4.判断值是否大于等于 今日团的位置
    if(s >= group){
        // 5.是 -> 添加类名 显示返回顶部按钮
        $box2.addClass("active");
        $backTop.show();
    }else {
        // 6.当位置小于今日团的位置时,删除类名,隐藏返回顶部按钮
        $box2.removeClass("active");
        $backTop.hide();
    }
});

返回顶部

  • 注意:直接使用document.scrollTop是会报错的.
  • 源代码
// 回到顶部
$backTop.click(function (){
    // 直接跳回0
    // $(document).scrollTop(0);
    // 制作一个向上的动画
    // 报错:Cannot read property 'defaultView' of null
    // 因为直接使用document,它是没有scrollTop属性的
    // $(document).animate({"scrollTop":0},500);
    // 修改如下
    $("html,body").animate({"scrollTop":0},500);
});

楼梯效果

avatar
文章
阅读
粉丝