1. jQuery 能做什么?
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器,这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。能用更少的代码实现更多的功能。
2. jQuery 对象和 DOM 原生对象有什么区别?如何转化?
jQuery对象即用jQuery类库的选择器获得的对象;
DOM原生对象即用原生JavaScript方法获得的对象。
转化:
//DOM转jQuery
$(document.querySelectorAll("li"))
//jQuery转DOM
$("li")[0]或者$("li").get(0)
3.jQuery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?
bind是为一个元素绑定一个事件处理
unbind从元素上删除一个以前附加事件处理程序。
live是附加一个事件处理器到匹配目前选择器的所有元素。
delegate:为所有匹配选择器的元素绑定一个或多个事件处理函数,基于一个指定的根元素的子集
on:在选定的元素上绑定一个或多个事件处理函数
off:移除一个事件处理函数
推荐使用on和off 因为之前的版本中都已经丢弃了bind,delegate等
实例:$("elem").on('click',function(){....})
使用on绑定事件使用事件代理
$("elem").on('click',"ele2",function(){....})
ele作为ele2的事件代理
4.jQuery 如何展示/隐藏元素?
.show( [duration ] [, easing ] [, complete ] )展示元素
.hide([duration ] [,easing ] [,complete ])隐藏元素
- duration:动画持续多久
- easing:表示过渡使用哪种缓动函数,jQuery自身提供"linear"和"swing".
- complete:在动画完成时执行的函数。
.toggle([duration][,easing][,complete])
事件处理套件也有一个名为.toggle()方法。哪一个被调用取决于传递的参数的设置。
用来切换元素的隐藏。显示,类似于toggleClass,用法和show、hide类似。
5. jQuery 动画如何使用?
.animate( properties [, duration ] [, easing ] [, complete ] )
properties一个CSS属性和值的对象,动画将根据这组对象移动。
- duration (默认: 400):一个字符串或者数字决定动画将运行多久。默认值: "normal", 三种预定速度的字符串("slow", "normal", 或 "fast"或表示动画时长的毫秒数值(如:1000) )
- easing (default: swing):一个字符串,表示过渡使用哪种缓动函数。jQuery自身提供"linear" 和 "swing",其他效果可以使用jQuery Easing
- complete:在动画完成时执行的函数
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});
.clearQueue
:清除动画队列中未执行的动画
.finish
:停止当前动画,并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态
.stop( [clearQueue ] [, jumpToEnd ] )
停止当前正在运行的动画
6.如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?
<ul class="wrap">
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(".wrap).html()//获取元素内部HTML内容
$(".wrap).text("321")//获取并设置元素内部文本为123
</script>
7.如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?
.val()//获取input的value值
.var(string)//设置input的value的值
.attr('attrbuteName')//获取元素属性
.attr('attrbuteName','newAttribute')//设置元素属性