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 强大，还可以记录鼠标的键值，返回 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>
