1、说说库和框架的区别?
- 库是一个数据仓库,里面放了各种可以利用的API,由于库的内部已经做了各种底层的封装和各种兼容实现,因此可以调用提供的API接口来实现我们需要的功能,而不需要复杂的代码和加工,因此使代码得到优化,效率提高。
- 框架则是为解决一个(一类)问题而开发的产品,框架用户一般只需要使用框架提供的类或函数,即可实现全部功能。可以说,框架是库的升级版。开发者在使用框架的时候,必须使用这个框架的全部代码。
- 不同点
- 库是工具的集合,框架是一整套的解决方案。
- 库可以被我任意调用,而框架是我解决问题要遵守的规则(简化:我控制和我被控制的区别)。
2、jQuery 能做什么?
jQuery是一个兼容多浏览器的JavaScript库,核心理念是write less,do more,它的语法设计可以使开发更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax等。除此之外,jQuery还提供API让开发者编写插件。总之,使用jQuery能使开发者很轻松的开发出功能强大的静态或动态页面
3、jQuery 对象和 DOM 原生对象有什么区别?如何转化?
区别:
- jQuery对象是在DOM原生对象上做了一层包装,只能使用jQuery对象方法,不能使用DOM原生对象方法
- DOM原生对象只能使用DOM原生对象方法,不能使用jQuery对象方法
转换:
- jQuery对象转原生JS
- $('#btn')[0]
- $('#btn').get(0)
- 原生JS转jQuery对象
- $(this)
- $(document.getElementById('btn'))
4、jQuery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?
- jQuery中如何绑定事件?
jQuery 提供了四种事件监听的方式,分别为bind、live、delegate、on
对应的四种解绑方式是unbind、die、undelegate、off
- bind、unbind、delegate、live、on、off都有什么作用?
- bind() 为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。执行bind()时,事件处理函数会绑定到每个匹配元素上。使用bind()所有button元素绑定了click事件,是为当时文档中存在的每个button元素绑定click事件。如果之后你向文档中添加了新的button元素,绑定事件不会对其生效。
$(selector).bind(event,data,function)
event 必需。规定添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
data 可选。规定传递到函数的额外数据。
function 必需。规定当事件发生时运行的函数。 - unbind() 方法移除被选元素的事件处理程序。
$(selector).unbind(event,function)
event 可选。规定删除元素的一个或多个事件由空格分隔多个事件值.如果只规定了该参数,则会删除绑定到指定事件的所有函数。
function 可选。规定从元素的指定事件取消绑定的函数名。 - delegate() 函数用于为指定元素的一个或多个事件绑定事件处理函数。
此外,你还可以额外传递给事件处理函数一些所需的数据。即使是执行delegate()函数之后新添加的元素,只要它符合条件,绑定的事件处理函数仍然对其有效。
$(selector).delegate(childSelector,event,data,function)
childSelector 必需。规定要附加事件处理程序的一个或多个子元素。
event 必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data 可选。规定传递到函数的额外数据。
function 必需。规定当事件发生时运行的函数。 - live() 为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。执行live()函数之后新添加的元素,只要它匹配当前jQuery对象的选择器,绑定的事件处理函数仍然对其有效。
$(selector).live(event,data,function)
event 必需。规定附加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
data 可选。规定传递到该函数的额外数据。
function 必需。规定当事件发生时运行的函数。 - on() 在选定的元素上绑定一个或多个事件处理函数,提供绑定事件处理的所有功能。
$(selector).on(type, [selector], [data], fn )
没有selector时,就和bind一样
有selector时,就像delegate一样 - off()函数用于移除元素上绑定的一个或多个事件的事件处理函数,主要用于解除由on()函数绑定的事件处理函数
- 从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind()、 delegate()、 live()等事件函数。on()支持直接在目标元素上绑定事件,也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下,即使是执行on()函数之后新添加的元素,只要它符合条件,绑定的事件处理函数也对其有效。推荐使用on()方法和 off()方法
- on()事件代理
$('.ct').on('mouseleave','li',function(){
//$(this).removeClass('hover')
$(this).find('.cover').css('display','none')
})
5、jquery 如何展示/隐藏元素?
- 展示元素有 .show() 和 .css("display", "block") 方法
- 隐藏元素有 .hide() 和.css("display", "none") 方法
- 展示/隐藏 相互切换: .toggle()方法
6、 jquery 动画如何使用?
$(selector).animate({styles},speed,easing,callback)
必须参数 styles 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 easing 可选。规定在动画的不同点中元素的速度。默认值是 "swing"。"swing" - 在开头/结尾移动慢,在中间移动快。"linear" - 匀速移动
可选的 callback 参数是动画完成后所执行的函数名称。
注意:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "backgroundColor:red")
7、如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?
- $('p').html() 获取p元素html内容
$('p').html('内容') 设置p元素html内容
- $('p').text() 获取p元素文本内容
$('p').text('内容') 设置p元素text内容
8、如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?
- $('input').val() 获取输入内容
$('input').val('内容') 设置内容
- $('div').attr('name')获取元素属性
$('div').attr('name','haha')设置元素属性 - $('div').css('display')获取样式属性
$('div').css('display','block')设置样式属性