jQuery快速入门知识重点
1、jquery中attr与prop的区别
attr:是通过setAttribute 和 getAttribute来设置的使用的是DOM属性节点
prop:是通过document.getElementById()[name] = value 来实现的,通常用来设置checked selected
2、window.onload、window.onresize、window.onscroll、$(document).ready(function(){})四者的区别
1、window.onload:当文档加载完毕以后 包括html,js,img,css
2、window.onresize:当窗口发送改变的时候,高频率出发事件
3、window.onscroll:当滚动条滚动的时候,高频率出发事件
4、$(document).ready(function()({})
3、jquery中动画的形式有哪几种?
1、基本动画
show()
hide()
toggle()
2、滑动动画
slideUp()
slideDown()
slideToggle()
3、淡入淡出动画
fadeIn()
fadeOut()
fadeTo()
fadeToggle()
4、自定义动画
animate()
4、如何停止动画和延迟动画
.stop():停止动画
.delay():延迟动画
5、jquery中节点的操作有哪些?
children():获取所有子节点
find():查找后代元素
next():下一个元素
prev():上一个元素
parent():获取父级元素
siblings():获取同级元素
6、jquery中ajax的书写方式及参数
$.ajax({
type:请求方式,
url:"接口地址",
data:"传递的参数",
dataType:"数据类型",
success:成功的回调,
error:失败回调
})
7、jquery中 width()、innerWidth、outerWidth的区别
width():只会获取content内容区的宽度
innerWidth():会获取content+padding的宽度
outerWidth():会获取content+padding+border的宽度
8、jquery中offset()、position()、scrollTop()
offset():获取当前元素距离页面之间的偏移量
position():获取当前元素距离以定位的父元素的偏移量
scrollTop():获取滚动条滚动的距离
116、$(document).height() 与 $(window).height()的区别
$(documemt).height():获取整个页面的高度 类似于原生js里面的document.body.clientHeight
$(window).height():获取可视区的高度 类似于原生js里面的document.documentElement.clientHeight
9、jquery中事件绑定、委托中 bind() live() delegate()、on()之间的区别
bind:为每个元素绑定事件处理函数
解绑事件:unbind()
缺点:
无法对未来元素实现事件绑定
live:为所有匹配的元素添加事件处理函数,未来元素也可以绑定事件处理函数
解绑事件:die()
缺点:
1、1.7版本后不再支持该方法
2、阻止事件冒泡不管用
live:是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。一旦事件冒泡到document上,jQuery将会查找selector/event metadata,然后决定那个handler应该被调用
delegate:为指定的元素(子元素)添加一个或多个事件处理函数
解绑事件:undelegate()
在某些浏览器下是有兼容性问题
更精确的小范围使用事件代理,性能优于.live()。它不会把所有的event全部绑定到document,而是由你决定把它放在哪儿
on: 为匹配的元素绑定一个活多个事件处理函数
解绑事件:off()
缺点:
on不能取代live
整合了之前的三种方式的新事件绑定机制。.bind(), .live(), .delegate()都是通过.on()来实现的,.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的。
10、如何对一个jquery对象扩展方法?
$.extend():扩展jquery对象本身
例:
$.extend({
min:function(a,b){
return a>b?b:a;
},
max:function(a,b){
return a>b?a:b;
}
})
$.min();
11、如何对一个jquery元素扩展方法?
$.fn.extend():扩展jquery元素方法
例:
$.fn.extend({
zyh:function(info){
return this.each(function(){this.innerHTML = info})
}
})
$("p").zyh("你好");
12、jquery中 trigger()的作用及用法
trigger:触发元素身上的某类事件
例:
$("p").on("zyh",function(){
alert(1)
})
$("p").trigger("zyh");
简单来说trigger就是自动执行某一个事件不需要手动触发
13、jquery中$.proxy()的作用及用法
$.proxy():返回一个新的函数,并且这个函数始终保持了特定的作用域
参数1:要改变作用域的函数
参数2:一个Object,参数1的作用域会被设置到这个Object上面
作用:可以解决this的指向问题,以及回调函数嵌套的问题
14、$(this) 和 this 关键字在 jQuery 中有何不同
$(this) 返回一个 jQuery 对象,你可以对它调用多个 jQuery 方法
而 this 代表当前元素,它是 JavaScript 关键词中的一个,表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法
15、jQuery 中的方法链是什么?使用方法链有什么好处
方法链是对一个方法返回的结果调用另一个方法,这使得代码简洁明了,同时由于只对 DOM 进行了一轮查找,性能方面更加出色。
16、哪种方式更高效:document.getElementbyId("myId") 还是 $("#myId")?
第一种,因为它直接调用了 JavaScript 引擎。
17、JQ中find()、has()和filter()区别?
filter()方法,条件作用于自身
has()方法条件是作用于它的后代元素中
find():当前选中元素的上下文中找到符合条件的后代,返回的是子元素