JavaScript课程——Day21（jQuery下class操作css操作元素宽高元素的位置滚动条创建.添加.替换.删除.克隆节点事件滑上事件的区别）

Posted 2021-05-17 别动我咖喱

1、class操作

• jQuery对象.addClass(\'class名\');　　添加，一次可以添加多个
• jQuery对象.removeClass(\'class名\');　　删除，一次可以删除多个
• jQuery对象.toggleClass(\'class名\');　　切换，如果有这个class名，则删除；没有则添加
• jQuery对象.hasClass(\'class名\');　　查找，是否有这个class名，返回布尔值

$(\'#box\').addClass(\'def aaa eee\');
$(\'#box\').removeClass(\'abc aaa eee\');
$(\'#box\').toggleClass(\'a123\');

console.log($(\'#box\').hasClass(\'a123\'));

 

2、css操作

• jQuery对象.css(\'样式属性\', \'值\');　　设置
• jQuery对象.css(\'样式属性\');　　获取
• jQuery对象.css({\'样式属性1\':\'值1\',\'样式属性2\':\'值2\',\'样式属性2\':\'值2\',.....});　　参数为对象，可以一次设置多个

　　注意：

　　1、如果是数字，将会自动转化为像素值。

　　2、在css方法中，如果属性中带有‘-’符号，例如font-size和background-color属性，如果在设置这些值时，不带引号，那么就要用驼峰式写法。如果带上引号，可以写成font-size也可以写成fontSize。加上引号是良好的习惯。

 

3、元素宽高

var box = $(\'#box\');

// jquery比原生强大体现在还可以获取隐藏元素的宽高
// 返回值没有单位

// 获取
console.log(box.width()); // 100 width
console.log(box.innerWidth()); // 120 width+padding
console.log(box.outerWidth()); // 122 width+padding+border
console.log(box.outerWidth(true)); // 142 width+padding+border+margin

// 设置
box.width(200);
box.innerWidth(200);
box.outerWidth(200);
box.outerWidth(200, true);

// --------------------------------
// 可视区的宽高
alert($(window).width());
alert($(window).height());

// 文档的宽高
alert($(document).width());
alert($(document).height());

 

4、元素的位置

• jQuery对象.offset();

　　返回的是一个对象{left:xx, top:xx}

　　返回元素到文档的距离，与原生封装的getPos等同

var o = $(\'.box3\').offset();
console.log(o);
console.log(o.left);
console.log(o.top);

 

5、滚动条

• 获取滚动条
• jQuery对象.scrollTop();
• jQuery对象.scrollLeft();
• 设置滚动条
  • jQuery对象.scrollTop(值);
  • jQuery对象.scrollLeft(值);

// 滚动事件
$(window).scroll(function () {
    var top = $(window).scrollTop(); // 获取滚动条的高度
    console.log(top);
});

// 点击设置滚动条的位置
$(document).click(function () {
    $(window).scrollTop(500); // 设置高度
});

 

6、创建节点

• $(html片段);

$(\'<p>\').appendTo(\'body\'); // 创建空的p标签
$(\'<p></p>\').appendTo(\'body\'); // 创建空的p标签
$(\'<p>hello</p>\').appendTo(\'body\'); // 创建有内容p标签
$(\'<p id="box" class="abc" title="小张吃不饱">hello</p>\').appendTo(\'body\'); // 创建有内容，有属性的p标签

 

7、添加节点

　　7.1、将元素插入目标中，作为子元素，放在最后

• 元素.appendTo(目标);
• 目标.append(元素);

　　7.2、将元素插入目标中，作为子元素，放在最前

• 元素.prependTo(目标);
• 目标.prepend(元素);

　　7.3、将元素插入到目标元素的后面，作为兄弟元素

• 元素.insertAfter(目标);
• 目标.after(元素);

　　7.4、将元素插入到元素目标的前面，作为兄弟元素

• 元素.insertBefore(目标);
• 目标.before(元素);

 

8、替换节点

• 被替换的元素.replaceWith(新的替换的元素);
• 新的替换的元素.replaceAll(被替换的元素);

 

9、删除节点

• jQuery对象.remove();　　返回被删除的元素的引用，不保留之前的事件
• jQuery对象.detach();　　返回被删除的元素的引用，保留之前的事件
• jQuery对象.empty();　　严格来讲它不是删除元素，而是清空元素

<button>remove</button>
<button>detach</button>
<button>empty</button>
<ul>
    <li>吃饭</li>
    <li>睡觉</li>
    <li>打豆豆</li>
</ul>

var btn = $(\'button\');
var ul = $(\'ul\');

// 1、给ul绑定一个事件
ul.click(function () {
    console.log(123);
});

// remove
btn.eq(0).click(function () {
    var v = ul.remove();
    setTimeout(function () {
        v.appendTo(\'body\');
    }, 3000);
});

// detach
btn.eq(1).click(function () {
    var v = ul.detach();
    setTimeout(function () {
        v.appendTo(\'body\');
    }, 3000);
});

// empty
btn.eq(2).click(function () {
    ul.empty(); // 推荐使用
    // ul.html(\'\');
});

 

10、克隆节点

• jQuery对象.clone(true);　　参数true可以克隆之前的事件

var btn = $(\'button\');
var ul = $(\'ul\');

ul.click(function () {
    console.log(123);
});

btn.click(function () {
    // ul.clone().appendTo(\'body\');
    ul.clone(true).appendTo(\'body\');
});

 

11、事件

　　11.1、事件对象

$(\'#box\').click(function (ev) {
    console.log(ev); // jQuery封装过以后的事件对象
    console.log(ev.originalEvent); // 返回原生的事件对象

    console.log(ev.clientX, ev.clientY); // 到可视区的距离
    console.log(ev.pageX, ev.pageY); // 到文档的距离

    console.log(ev.which); // 相当于 keyCode，但比 keyCode 强大，还可以记录鼠标的键值，返回 1\\2\\3 即左\\中\\右;
    console.log(ev.target); // 事件源
    console.log(ev.delegateTarget); // 事件绑定的对象
    console.log(ev.type); // 事件类型

    console.log(ev.altKey); // alt键是否按下
    console.log(ev.ctrlKey);
    console.log(ev.shiftKey);

    ev.preventDefault(); // 阻止默认事件
    ev.stopPropagation(); // 阻止冒泡的操作
    return false; // 阻止默认事件 + 阻止冒泡的操作
});

 

　　11.2、事件的绑定

• 格式：$(selector).on(event, callback);

// 基本效果
$(\'#box\').on(\'click\', function () {
    console.log(this);
    console.log(\'点击我了\');
})

// 一次绑定多个事件
$(\'#box\').on(\'mouseover mouseout click\', function (ev) {
    console.log(ev.type);
})

// 写成对象的形式
$(\'#box\').on({
    mouseover: function () {
        console.log(\'滑上了\');
    },
    mouseout: function () {
        console.log(\'滑离了\');
    },
    click: function () {
        console.log(\'点击了\');
    }
})

// 绑定自定义事件，必须使用trigger调用
$(\'#box\').on(\'abc\', function () {
    console.log(\'abc执行了\');
});
$(\'#box\').trigger(\'abc\');

 

　　11.3、事件的取消

• 格式：(selector).off(event);　　没有参数，取消该元素上所绑定的全部事件

$(\'#box\').on({
    mouseover: function () {
        console.log(\'滑上了\');
    },
    mouseout: function () {
        console.log(\'滑离了\');
    },
    click: function () {
        console.log(\'点击了\');
    }
})

// $(\'#box\').off(); // 取消所有的事件
// $(\'#box\').off(\'click\'); // 取消click事件
$(\'#box\').off(\'click mouseover\'); // 取消click和mouseover事件

 

　　11.4、事件的命名空间

// 事件的命名空间
$(\'#box\').on(\'click.a\', function () {
    console.log(\'a\');
})

$(\'#box\').on(\'click.b\', function () {
    console.log(\'b\');
})

// 需求：取消打印a的事件绑定
$(\'#box\').off(\'click.a\');
// $(\'#box\').off(\'.a\');

 

　　11.5、事件代理

• jQuery对象.on(\'事件名\', \'子孙节点\', 函数);

$(\'ul\').on(\'click\', \'li.abc\', function (ev) {
    // console.log(this); // this是触发的子孙节点

    console.log(ev.target); // 事件源
    console.log(ev.delegateTarget); // 事件绑定的对象
    $(this).css(\'background\', \'red\');
})

 

　　11.6、一次性事件

• jQuery对象.one(\'事件名\', 函数);

$(\'#box\').one(\'click\', function () {
    console.log(\'点我了\');
})

 

　　11.7、合成事件

• jQuery对象.hover(滑上执行的函数, 滑离执行的函数);

　　hover采用的是onmouseenter 和 onmouseleave

$(\'#box\').hover(function () {
    // 滑上执行
    $(this).css(\'background\', \'green\');
    $(this).html(\'滑上了\');
}, function () {
    // 滑离执行
    $(this).css(\'background\', \'red\');
    $(this).html(\'\');
});

 

12、滑上事件的区别

<div id="box">
    <span></span>
</div>
<script>
    var box = document.getElementById(\'box\');
    var n = 0;

    // 会冒泡
    box.onmouseover = function () {
        n++;
        console.log(n);
    }

    // 不冒泡
    box.onmouseenter = function () {
        n++;
        console.log(n);
    }
</script>