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

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 强大，还可以记录鼠标的键值，返回 123 即左中右;
    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>