jquery $(document).ready() 与window.onload的区别
-
执行时间
-
window.onload
必须等到页面内包括图片的所有元素加载完毕后才能执行。 -
$(document).ready()
是DOM结构绘制完毕后就执行,不必等到加载完毕。
-
-
编写个数不同
-
window.onload
不能同时编写多个,如果有多个window.onload方法,只会执行后面一个 -
$(document).ready()
可以同时编写多个,并且都可以得到执行
-
-
简化写法
-
window.onload
没有简化写法 -
$(document).ready(function(){})
可以简写成$(function(){})
;
-
原生JS的forEach和jquery的each的区别
- 原生
forEach
方法只能遍历数组,不能遍历伪数组
arr.forEach(function (index,value) {
console.log(index.value);
})
-
jquery
的each
方法可以遍历伪数组
$.each(arr1,function (index1,value1) {
console.log(index1,value1);
})
$.trim();
- 作用:去掉字符串首位的空格
- 参数:带有空格的字符串
- 返回值:去掉空格后的字符串
$.isWindow();
- 作用:判断传入的对象是不是window对象
- 返回值:true/false
$.isArray();
- 作用:判断传入的对象是不是真数组
- 返回值:true/false
$.isFunction();
- 作用:判断传入的对象是不是函数
- 返回值:true/false
jquery-holdReady方法
$.holdReady();
- 暂停ready事件
- 参数:true暂停/false开启
js操作属性节点
- 设置属性
setAttribute()
- 获取属性
getAttribute()
jquery的attr方法
attr
- 作用:获取或者设置属性节点的值
- 如果传递一个参数就是获取属性节点的值,如果传递两个参数就是设置属性节点
removeAttr
- 作用:删除所传入的属性节点
jquery操作属性的方法
prop
不仅能够操作属性,也能操作属性节点
removeProp
- 官方推荐在操作属性节点时,具有true和false两个属性的属性节点,如checked,selected或者disabled,使用prop(),其他的使用attr();
获取滚动偏移位
console.log($('.scroll').scrollTop());
取网页滚动偏移位
为了保证浏览器兼容,需要使用
$('body').scrollTop()+$('html').scrollTop()
jquery
事件绑定
$('button').click(function () {
alert('第一种')
});
$('button').on('click',function () {
alert('第2种')
})
取消绑定事件
off();
方法
- 1.不传参,取消所有的绑定事件
- 2.传一个,(参数是事件的名称)
什么是事件冒泡
- 事件从事件目标(
target
)开始,往上冒泡直到页面的最上一级标签。 - 阻止事件冒泡方法1
return false;
方法2
event.stopPropagation();
例子:
$('.son').click(function (event) {
alert('son');
//阻止事件冒泡方法1
// return false;
//方法2
event.stopPropagation();
});
什么是默认行为
比如a标签,点击之后默认会跳转
如何阻止默认行为
- 方法1
return false;
- 方法2
event.preventDefault();
例子:
$('a').click(function (event) {
alert('点击了a');
//如何阻止默认行为
//方法1
return false;
//方法2
// event.preventDefault();
})
自动触发事件方法1
trigger();
$('.father').trigger('click')
自动触发事件方法2
$('.father').triggerHandler('click');
trigger和triggerHandler的区别
- 1.
triggerHandler
可以阻止事件冒泡,trigger
不可以 - 2.
trigger
会自动触发默认事件,triggerHandler
不会
想要自定义事件,必须要满足两个条件
- 1.事件必须通过on来绑定
- 2.事件必须通过trigger来触发
$('.son').on('myClick',function () {
alert('son')
});
事件委托 delegate()
事件委托就是,可以找一个在入口函数之前就存在的元素来监听动态添加的元素的事件
-
mouseover
/mouseout
子元素移入和移出也会被触发父元素事件 -
mouseente
r/mouseleave
不会(推荐使用)
内部插入元素
append()
将新增元素添加到指定元素内部的最后
prepend()
将新增元素添加到指定元素内部的最前
外部插入元素
``after()将新增元素添加到指定元素外部的后面
after()`
将新增元素添加到指定元素外部的前面
删除节点
remove()
删除指定元素
empty()
删除指定元素的内容和子元素,指定元素本身不会被删除
复制节点
clone()
的值为false
时,可以复制节点,但是不能复制节点的事件,clone()
的值为true
时,可以复制节点也可以复制节点的事件