元素宽高
client: 可视宽高
innerWidth/innerHeight: 内容+内边距
offset: 占位宽高
outerWidth/outerHeight(布尔值):
false/不传: 内容 + 内边距 + 边框
true: 内容 + 内边距 + 边框 + 外边距
scroll: 滚动距离
console.log($('div').width(), $('div').height()); // 内容宽 内容高 console.log($('div').innerWidth(), $('div').innerHeight()); // 可视宽 可视高 console.log($('div').outerWidth(), $('div').outerHeight()); // 占位宽 占位高 console.log($('div').outerWidth(true), $('div').outerHeight(true)); // 占位宽 占位高 $(window).scroll(function () { // console.log($('body,html').scrollTop(), $('body,html').scrollLeft()); console.log($(window).scrollTop(), $(window).scrollLeft()); }); /* 取赋值一体化 */ console.log($('div').width(500), $('div').height(200)); console.log($('div').innerWidth(500), $('div').innerHeight(200)); console.log($('div').outerWidth(500), $('div').outerHeight(200)); console.log($('div').outerWidth(500, true), $('div').outerHeight(200, true)); $('button').click(function () { console.log($(window).scrollTop(500), $(window).scrollLeft(500)); });
元素的位置
position: 获取到的结果是当前元素的定位距离 以对象方式返回
{
left: 0,
top: 0
}
offset: 获取的元素距离body的一个偏移距离
/* position: 获取到的结果是当前元素的定位距离 以对象方式返回 { left: 0, top: 0 } */ console.log($('div').position()); // {top: 33, left: 8} console.log($('div').position().left); /* offset: 获取的元素距离body的一个偏移距离 */ console.log($('div').offset()); console.log($('div').offset().left);
添加节点
-
创建节点: $('标签节点');
var li = $('<li>12344</li>'); console.log(li);
-
父元素末尾:
父.append(子);
子.appendTo('选择器');
$('ul').append('<li>a1234</li>'); $('<li>b1234</li>').appendTo('ul');
-
父元素开头:
父.prepend(子);
子.prependTo('选择器');
$('ul').prepend('<li>c1234</li>'); $('<li>d1234</li>').prependTo('ul');
-
插入某个元素之前:
参考节点.before(新节点);
新节点.insertBefore(参考节点);
$('.box').before('<li>新Li1</li>'); $('<li>新Li2</li>').insertBefore('.box');
-
插入到某个元素之后:
参考节点.after(新节点);
新节点.insertAfter(参考节点);
$('.box').after('<li>新Li3</li>'); $('<li>新Li4</li>').insertAfter('.box');
删除节点
remove: 删除当前元素 返回被删除掉的元素 不包含原来元素的行为
detach: 删除当前元素 返回被删除掉的元素 包含原来元素的行为
empty: 清空元素 删除当前元素中所有子节点
$('li').click(function () { console.log($(this).html()); }); /* remove: 删除当前元素 返回被删除掉的元素 不包含原来元素的行为 detach: 删除当前元素 返回被删除掉的元素 包含原来元素的行为 empty: 清空元素 删除当前元素中所有子节点 */ // $('ul').empty(); $('button').click(function () { // var li = $(this).parent().remove(); var li = $(this).parent().detach(); console.log(li); $('ul').append(li); });
克隆节点
clone(布尔):
false/不传: 不克隆行为 不保留事件函数
$('li').click(function () { console.log($(this).html()); }); /* clone(布尔): false/不传: 不克隆行为 不保留事件函数 */ // var li = $('li').eq(0).clone().appendTo('ul'); var li = $('li').eq(0).clone(true).appendTo('ul'); console.log(li);
替换节点
参考节点.replaceWith(新节点);
新节点.replaceAll(参考节点);
/* 参考节点.replaceWith(新节点); 新节点.replaceAll(参考节点); */ // $('li').replaceWith('<p>1234</p>'); $('<hr>').replaceAll('li');
事件对象
/* 以事件处理函数的第一个形参 */ $(window).click(function (ev) { console.log(ev); // jQuery.Event console.log(ev.originalEvent); // js原生事件对象 console.log(ev.type); // 事件类型 console.log(ev.target); console.log(ev.keyCode); // 键盘编码 console.log(ev.which); // 跟keyCode一致 比keyCode强大 左中右 123 console.log(ev.pageX, ev.pageY); // 距离页面 console.log(ev.clientX, ev.clientY); // 可视区域左上角 console.log(ev.screenX, ev.screenY); // 屏幕 console.log(ev.offsetX, ev.offsetY); // 触发源内容左上角 边框会出现负数 });
on
-
给一个元素绑定一个事件
jq对象.on(事件类型, 事件处理函数);
$('div').on('click', function () { console.log(this); });
-
给一个元素的多个事件添加同一处理函数
jq对象.on('事件 事件 事件...', 事件处理函数)
$('div').on('click mousedown mouseup', function (ev) { console.log(ev.type); });
-
给不同事件添加不同处理函数
jq对象.on({
事件: 函数,
事件: 函数
});
$('div').on({ mousemove: function (ev) { console.log(ev.clientX); }, contextmenu: function () { console.log('contextmenu'); } });
-
绑定自定义事件:
由程序员自己定义的事件
$('div').on('call', function () { console.log('okk'); }); // 手动触发自定义事件: jq对象.trigger('自定义事件名称'); setTimeout(function () { $('div').trigger('call'); }, 3000);
-
事件委托
jq对象(父).on(事件类型, '子选择器', 事件处理函数);
this指向的就是每一个子元素
$('ul').on('click', 'li', function () { console.log(this); }); $('ul').append('<li>1234</li>');
one
one: 与on是一样的 只会触发一次
$('div').one('click', function () { console.log(1); });
off
// div添加事件 function aa() { console.log(1); } $('div').click(aa); $('div').click(function () { console.log(2); }); $('div').mousedown(function () { console.log('down'); }); // $('div').off(); // 取消所有的事件 // $('div').off('click'); // 取消所有的click的事件 // $('div').off('click', aa); // 取消click中名字为aa的事件 // $('div').off('click mousedown'); // 取消所有的click和mousedown所有事件 // jq中事件具有命名空间 事件.名 设置命名空间 避免全局变量的影响 $('div').on('click.cc', function () { console.log(3); }); $('div').off('click.cc mousedown');
合成事件
jq对象.hover()
一个函数: 滑入滑出都触发
两个函数: 第一个滑入 第二个滑出
// $('div').hover(function (ev) { // console.log(ev.type); // }); $('div').hover(function (ev) { console.log(ev.type); }, function (ev) { console.log(ev.type, '1-----'); });
阻止冒泡和取消默认行为
$('p').click(function (ev) { console.log('p'); // 阻止冒泡 // ev.stopPropagation(); // 取消默认行为 // ev.preventDefault(); // 阻止冒泡 + 取消默认行为 return false; }); $('div').click(function () { console.log('div'); });