jQuery
原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行
jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行
原生的JS如果编写了多个入口函数,后面编写的会覆盖前面编写的
jQuery中编写多个入口函数,后面的不会覆盖前面的
1.释放$的使用权
注意点:释放操作必须写在编写其他jQuery代码之前编写,释放之后就不能再使用$,改为使用jQuery
2.自定义一个访问符号
var nj = jquery.noConflict();
原生的forEach方法只能遍历数组,不能遍历伪数组
jQuery的forEach方法能遍历数组,也能遍历伪数组
原生的map方法只能遍历数组,不能遍历伪数组
jQuery的map方法能遍历数组,也能遍历伪数组
jQuery中的each静态方法和map静态方法的区别:
each静态方法默认的返回值就是,遍历谁就返回谁
map静态方法默认的返回值是一个空数组
each静态方法不支持在回调函数中对遍历的数组进行处理
map静态方法可以在回调函数中通过return对遍历的数组进行处理,然后生成一个新的数组返回
$.trim():
作用:去除字符串两端的空格
参数:需要去除空格的字符串
返回值:去除空格之后的字符串
$.isWindow():
作用:判断传入的对象是否是window对象
返回值:true/false
$.isArray():
作用:判断传入的对象是否是真数组
返回值:true/false
$.isFunction():
作用:判断传入的对象是否是函数
返回值:true/false
$.holdReady(true)
作用:暂停ready执行
:empty
作用:找到既没有文本内容也没有子元素的指定元素
:parent
作用:找到有文本内容或有子元素的指定元素
:contains(text)
作用:找到包含指定文本内容的指定元素
:has(selector)
作用:找到包含指定子元素的指定元素
attr(name|pro|key,val|fn)
作用:获取或者设置属性节点的值
可以传递一个参数,也可以传递两个参数
如果传递一个参数,代表获取属性节点的值
如果传递两个参数,代表设置属性节点的值
注意点:
如果是获取:无论找到多少个元素,都只会返回第一个元素指定的属性节点的值
如果是设置:找到多少个元素就会设置多少个元素
如果是设置:如果设置的属性节点不存在,那么系统会自动新增
removeAttr(name)
注意点:
会删除所有找到元素指定的属性节点
prop方法
特点和attr方法一致
removeProp
特点和removeAttr方法一致
prop方法不仅能够操作属性,还能操作属性节点
官方推荐在操作属性节点时,具有true和false两个属性的属性节点,如checked,selected或者disabled使用prop(),其他的使用attr()
addClass(class|fn)
作用:添加一个类
如果要添加多个,多个类名之间用空格隔开即可
removeClass([class|fn])
作用:删除一个类
如果要添加多个,多个类名之间用空格隔开即可
toggleClass(class|fn[,sw])
作用:切换类
有就删除,没有就添加
html([val|fn])
和原生JS中的innerHTML一模一样
text([val|fn])
和原生JS中的innerText一模一样
val[val|fn|arr]
和原生JS中的value一模一样
逐个设置
$("div").css("width", "100px");
链式设置
$("div").css("width", "100px").css("height", "100px");
批量设置
$("div").css({
width: "100px",
height: "100px"
});
获取css样式
console.log($("div").css("width"));
获取元素的宽度
console.log($(".father").width());
设置元素的宽度
$(".father").width("500px");
offset([coordinates])
作用:获取元素距离窗口的偏移位
console.log($(".son").offset().left)
$(".son").offset({
letf:10
})
position()
作用:获取元素距离定位元素的偏移位
注意点:position方法只能获取不能设置
获取滚动的偏移位
console.log($(".scroll").scrollTop());
获取网页滚动的偏移位
注意点:为了保证浏览器的兼容,获取网页滚动的偏移位需要按照如下写法
console.log($("body").scrollTop()+$("html").scrollTop());
设置滚动的偏移位
$(".scroll").scrollTop(300);
注意点:为了保证浏览器的兼容,设置网页滚动偏移位的时候必须按照如下写法
$("html body").scrollTop(300);
jQuery中有两种绑定事件方式
eventName(fn);
编码效率略高/部分事件jQuery没有实现,所以不能添加
on(eventName, fn);
编码效率略低/所有js事件都可以添加
注意点:
可以添加多个相同或者不同类型的事件,不会覆盖
off方法如果不传递参数,会移除所有的事件
off方法如果传递一个参数,会移除所有指定类型的事件
off方法如果传递两个参数,会移除所有指定类型的指定事件
如何阻止事件冒泡
return false;
event.stopPropagation();
如何阻止默认行为
return false;
event.preventDefault();
trigger:如果利用trigger自动触发事件,会触发事件冒泡
triggerHandler:如果利用triggerHandler自动触发事件,不会触发事件冒泡
trigger:如果利用trigger自动触发事件,会触发默认行为
triggerHandler:如果利用triggerHandler自动触发事件,不会触发默认行为
想要自定义事件,必须满足两个条件
事件必须通过on绑定的
事件必须通过trigger来触发
想要自定义事件,必须满足两个条件
事件必须是通过on绑定的
事件必须通过trigger来触发
利用trigger触发子元素带命名空间的事件,那么父元素带相同命名空间的事件也会触发,而父元素没有命名空间的事件不会被触发
利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发
mouseover/mouseout事件,子元素被移入移出也会触发父元素的事件
mouseenter/mouseleave事假,子元素被移入移出不会触发父元素的事件
显示动画
show(时间,回调函数)
隐藏动画
hide(时间,回调动画)
切换动画
toggle(时间,回调函数)
监听网页的滚动
$(window).scroll();
展开动画
slideDown(时间,回调函数)
收起动画
slideUp(时间,回调函数)
切换动画
slideToggle(时间,回调函数)
停止当前正在运行的动画
stop();
淡入
fadeIn(时间,回调函数)
淡出
fadeOut(时间,回调函数)
切换
fadeToggle(时间,回调函数)
淡入到
fadeTo(时间,模糊度,回调函数)
自定义动画
animate(修改属性,时间,节奏默认是swing,回调函数)
delay(时间)
作用:告诉系统延迟时长
立即停止当前动画,继续执行后续的动画
stop();
stop(false);
stop(false,false);
立即停止当前和后续所有的动画
stop(true);
stop(true,false);
立即完成当前的,继续执行后续动画
stop(false,true);
立即完成当前的,并且停止后续所有的
stop(true,true)
内部插入
append(content|fn)
appendTo(content)
会将元素添加到指定元素内部的最后
prepend(content|fn)
prependTo(content)
会将元素添加到指定元素内部的最前面
外部插入
after(content|fn)
insertAfter(content)
会将元素添加到指定元素外部的后面
before(content|fn)
insertBefore(content)
会将元素添加到指定元素外部的前面
remove([expr])
删除指定元素
empty()
删除指定元素的内容和子元素,指定元素自身不会被删除
detach([expr])
删除指定元素
替换
replaceWith(content|fn)
replaceAll(selector)
替换所有匹配的元素为指定的元素
clone([Even[,deepEven]])
如果传入false就是浅复制,如果传入true就是深复制
浅复制只会复制元素,不会复制元素的事件
深复制会复制元素,而且还会复制元素的事件