标签：idt jquery screen mon button 添加 命名空间 load obj
// var mn = $(‘.box‘);
// console.log(mn);
// var a = mn.css(‘background‘, ‘red‘);
// console.log(a);
// var b = a.prevAll(); // 前面所有的li
// console.log(b);
// var c = $(‘.box‘).css(‘background‘, ‘red‘).prevAll().css(‘background‘, ‘pink‘).eq(0).html(‘12345‘);
var c = $(‘.box‘)
.css(‘background‘, ‘red‘)
.prevAll()
.css(‘background‘, ‘pink‘)
.eq(0)
.html(‘12345‘);
console.log(c);
内容:
width(); 内容宽
height(); 内容高
client:
content + padding
innerWidth(); 内容 + 内边距
innerHeight(); 内容 + 内边距
offset:
content + padding + border
outerWidth/outerHeight(布尔值);
设置成true: 表示 content + padding + border + margin
false/不传: content + padding + border
outerWidth(值, 布尔值);
scroll:
scrollTop();
获取元素距离具有定位父元素:
position(): 只能获取不能设置
{top: 33, left: 33}
console.log($(‘div‘).width());
// $(‘div‘).width(500); // 将div的内容的宽变成500
?
console.log($(‘div‘).innerWidth()); // 200 + 22 + 3 225
// $(‘div‘).innerHeight(500); // 内容 + 上下内边距 = 500 上下内边距根据样式不变 内容改变
?
console.log($(‘div‘).outerWidth()); // 200 + 22 + 3 + 2 + 5 232
console.log($(‘div‘).outerWidth(true)); // 200 + 22 + 3 + 2 + 5 + 10 + 10 252
?
$(‘div‘).outerHeight(500); // 内容 + 内边距 + 边框 = 500 内容 = 464
$(‘div‘).outerHeight(500, true); // 内容 + 内边距 + 边框 + 外边距 = 500 内容 = 424
?
$(document).scroll(function(){
console.log($(document).scrollTop());
});
?
$(‘button‘).click(function(){
$(document).scrollTop(0);
});
?
console.log($(‘div‘).position());
console.log($(‘div‘).position().top);
var 变量 = $(‘标签+内容‘);
var li = $(‘<li>123456789</li>‘);
console.log(li);
父元素.prepend(新节点);
新节点.prependTo(父元素);
// $(‘ul‘).prepend(li);
// li.prependTo(‘ul‘);
父元素.append(新节点);
新节点.appendTo(父元素);
// $(‘ul‘).append(li);
// li.appendTo(‘ul‘);
// $(‘.box‘).before(li);
li.insertBefore(‘.box‘);
// $(‘.box‘).after(li);
// li.insertAfter(‘.box‘);
如果一个元素已经存在于页面中 再次追加 会发生物理位移
如果页面中符合父元素选择器的元素有多个 追加元素的时候 每个父元素都会加一个
// 如果一个元素已经存在于页面中 再次追加 会发生物理位移
// $(‘div‘).append(li);
?
// 如果页面中符合父元素选择器的元素有多个 追加元素的时候 每个父元素都会加一个
// $(‘ul‘).append(li);
detach: 删除节点, 返回被删除的节点, 保留事件
remove: 删除节点, 返回被删除的节点, 不保留事件
empty: 清空子节点
$(‘li‘).click(function(){
$(this).css(‘background‘, ‘red‘);
});
/*
detach: 删除节点, 返回被删除的节点, 保留事件
remove: 删除节点, 返回被删除的节点, 不保留事件
empty: 清空子节点
*/
// var li = $(‘.box‘).detach();
var li = $(‘.box‘).remove();
console.log(li);
li.appendTo(‘ul‘);
$(‘ul‘).empty();
节点.clone(布尔值);
true: 克隆行为
false/不传: 不克隆行为
$(‘li‘).click(function () {
$(this).css(‘background‘, ‘red‘);
});
/*
克隆节点:
节点.clone(布尔值);
true: 克隆行为
false/不传: 不克隆行为
*/
// var m = $(‘.box‘).clone();
var m = $(‘.box‘).clone(true);
console.log(m);
$(‘ul‘).append(m);
参考节点.replaceWith(新节点);
新节点.replaceAll(参考节点);
var li = $(‘<li>12345</li>‘);
// $(‘.box‘).replaceWith(li);
// li.replaceAll(‘.box‘);
// $(‘li‘).replaceWith(li); // 一次性替换所有的li
事件对象: 事件处理函数的一个形参
$(‘div‘).click(function(ev){
console.log(ev);
console.log(ev.originalEvent); // 原生事件对象
console.log(ev.type); // 事件类型
console.log(ev.target); // 触发源
console.log(ev.delegateTarget); // 事件绑定对象
console.log(ev.which); // 与keyCode类似, 比keyCode强大 输出鼠标的左中右(123)
console.log(ev.ctrlKey, ev.shiftKey, ev.altKey); // 相应的按键是否被按下
console.log(ev.clientX, ev.clientY); // 可视区域的左上角的距离
console.log(ev.pageX, ev.pageY); // 页面的左上角的距离
console.log(ev.screenX, ev.screenY); // 屏幕左上角
console.log(ev.offsetX, ev.offsetY); // 触发源左上角
// 阻止冒泡 stopPropagation cancelBubble = true
// ev.stopPropagation();
// 阻止默认行为: preventDefault returnValue = false
// ev.preventDefault();
// 阻止冒泡 + 阻止默认行为
return false;
});
$(‘a‘).click(function(ev){
// ev.preventDefault();
return false;
});
$(document).click(function(ev){
// console.log(ev.target); // 触发源
// console.log(ev.delegateTarget); // 事件绑定对象
console.log(‘冒泡了‘);
});
jq对象.on(事件类型, 事件处理函数);
jq对象.on({
‘click‘: 函数,
‘mouseenter‘: 函数1
});
元素的一个事件添加一个处理函数
$(‘div‘).on(‘click‘, function(){
console.log(1);
});
元素的一个事件添加多个不同处理函数
$(‘div‘).on(‘click‘, function(){
console.log(2);
});
元素的不同事件添加同一个处理函数
$(‘div‘).on(‘click mouseenter mouseleave‘, function(){
console.log(3);
});
元素的不同事件添加不同处理函数
// 在对象中 如果属性名相同 后面的会覆盖前面的
$(‘div‘).on({
‘click‘: function(){ console.log(4); },
‘mouseenter‘: function(){console.log(5);},
‘mouseleave‘:function(){console.log(6);},
‘click‘: function(){console.log(7);} // 1 2 3 7
});
绑定自定义事件
$(‘div‘).on(‘callme‘, function(){
console.log(‘请给我拨打电话‘);
});
// 触发自定义事件: jq对象.trigger(‘事件类型‘);
// 点击document 触发callme
$(document).click(function(){
$(‘div‘).trigger(‘callme‘);
});
// 对象的处理代码挂在自己元素的自定义事件上 在有需要的时候去触发
事件委托: jq对象.on(事件类型, 子元素选择器, 事件处理函数);
// 隐式迭代
$(‘li‘).click(function(){
$(this).css(‘background‘, ‘red‘);
});
// 6. 事件委托: jq对象.on(事件类型, 子元素选择器, 事件处理函数);
$(‘ul‘).on(‘click‘, ‘li‘, function(){
console.log(this);
$(this).css(‘font-size‘, 30);
});
var li = $(‘<li>这是一个新的</li>‘);
$(‘ul‘).append(li);
事件.变量名
$(‘div‘).on(‘click.a‘, function(){
console.log(2);
});
// 避免全局变量污染
jq对象.off(事件类型, 事件处理函数的名字);
$(‘div‘).on(‘click‘, function(){
console.log(1);
});
$(‘div‘).on(‘click.a‘, function(){
console.log(2);
});
// 避免全局变量污染
function a(){
console.log(3);
}
$(‘div‘).on(‘click‘, a);
/*
解除事件绑定: off
jq对象.off(事件类型, 事件处理函数的名字);
*/
$(‘div‘).off(‘click‘, a); // 移除点击事件的a函数(全局)
$(‘div‘).off(‘click.a‘); // 移除点击事件的a函数
$(‘div‘).off(‘click‘); // 移除所有的点击事件的函数
jq对象.one(事件类型, 事件处理函数);
one用法与on完全一致
$(‘div‘).one({
‘click‘: function (){ console.log(2); },
‘mouseenter‘: function (){ console.log(3); },
});
jq对象.hover(函数1, 函数2);
/*
jq对象.hover(函数1, 函数2);
如果只有一个函数作为参数，移入和移出都会触发这个函数
如果有2个函数作为参数, 第一个函数是移入函数, 第二个是移出函数
*/
// $(‘div‘).hover(function(){
// console.log(1);
// });
// css实现就不用js
$(‘div‘).hover(function(){
console.log(1);
$(this).css(‘background‘, ‘blue‘);
}, function(){
console.log(2);
$(this).css(‘background‘, ‘red‘);
});
会改变target, 将后面对象的属性和值添加到目标源中
浅拷贝中 如果变量的属性名重复 用后面的属性值 覆盖前面的属性值
var obj = {
name: ‘彭于晏‘,
age: 33
};
var obj1 = {
height: 188,
age: 38,
money: [‘银行‘, ‘基金‘, ‘电影‘, ‘私房钱‘]
};
var obj2 = {
beauty: true,
shuai: false
};
// 浅拷贝:
// 1. 会改变target, 将后面对象的属性和值添加到目标源中
// 2. 浅拷贝中 如果变量的属性名重复 用后面的属性值 覆盖前面的属性值
// $.extend(tar, obj1, obj2....);
// var oo = $.extend(obj, obj1, obj2);
// console.log(obj);
// console.log(obj1);
// console.log(obj2);
// console.log(oo); // 返回拷贝以后的对象
// console.log(oo == obj); // true
如果想要保留原对象不改变 将所有内容拷贝到一个空对象中 接收返回值
var oo = $.extend({}, obj, obj1, obj2);
console.log(oo);
console.log(obj);
将extend的第一个参数设置成true, 会进行递归拷贝. 在拷贝的过程中, 如果属性名相同，并且值都是对象, 对比的子属性, 如果属性名相同且都不为对象, 用后面覆盖前面的
var obj = {
name: ‘彭于晏‘,
age: 33
};
var obj1 = {
height: 188,
age: 38,
money: [‘银行‘, ‘基金‘, ‘电影‘, ‘私房钱‘],
zi:{
name: ‘abc‘,
height: 177
}
};
var obj2 = {
money: 1546789765373,
beauty: true,
shuai: false,
zi:{
name: ‘dcb‘,
age: 20
}
};
var oo = $.extend(true, {}, obj, obj1, obj2);
console.log(obj);
console.log(oo);
37 jquery的链式调用原理、元素三大宽高、操作节点、事件对象、事件绑定、命名空间、事件解绑、one、合成事件、extend
标签：idt jquery screen mon button 添加 命名空间 load obj
原文地址：https://www.cnblogs.com/xue666888/p/14742871.html
