题目1： jQuery 能做什么？
jquery是一个丰富的js库，内部对js的很多复杂的方法进行了封装和加工，比如js很多方法名很冗长，jquery封装后方法就变得简便了，也考虑到了跨浏览器兼容问题，这样我们用js时需要考虑的很多问题它都帮我们解决了，这样我们使用时就比js代码要方便，高效的多
- 取得文档中的元素。
- 修改页面外观。
- 改变文档内容。
- 响应用户的交互操作。
- 为页面添加动态效果。
- 无需刷新页面从服务器获取信息。
- 简化常用的JavaScript任务,封装部分JavaScript代码，API友好
- 统一Ajax操作
题目2： jQuery 对象和 DOM 原生对象有什么区别？如何转化？
- DOM 原生对象：根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API），是我们用传统的方法(javascript)获得的对象。
- jQuery 对象：是通过jQuery包装DOM对象后产生的对象，它是一个JavaScript的数组
- 原生DOM对象转jQuery对象：
var button = document.getElementById('btn');
var button = document.querySelector('#btn');
var $button = $('#btn');
- jQuery对象转原生DOM对象：
$("wrap li")[0];
$("wrap li").eq(0);
$("wrap li").get(0);
题目3：jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
| 绑定事件 | 作用 |
|---|---|
bind |
用于直接附加一个事件处理程序到元素上（注：在jQuery3.0中，.bind()已被标记为弃用） |
unbind |
用于移除.bind()绑定的事件处理程序（注：在jQuery3.0中，.unbind()已被标记为弃用） |
delegate |
为所有匹配选择器（selector参数）的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集（匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素）（注：在jQuery3.0中，.delegate()已被标记为弃用） |
live |
将委托的事件处理程序附加到一个页面的document元素，从而简化了在页面上动态添加的内容上事件处理的使用（注：在jQuery1.7中，.live()已被标记为弃用） |
on |
在选定的元素上绑定一个或多个事件处理函数（推荐使用.on()方法进行事件绑定） |
off |
移除.on()上绑定的事件处理函数（推荐使用.off()方法进行事件移除） |
on绑定事件使用事件代理的写法：.on( events [,selector ] [,data ], handler(eventObject) )
例子：
html：
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<div class="wrap">
<ul>
<li>content 1</li>
<li>content 2</li>
<li>content 3</li>
</ul>
</div>
<input id='ipt' type='text' value=''>
<button id='btn'>添加</button>
<div id="box"></div>
</body>
</html>
js：
$('.wrap>ul').on('click','li',function(){
// 事件代理，通过input添加的li标签中的内容也会出现在#box的div中
var str=$(this).text();
$('#box').text(str);
})
$('#btn').on('click',function(){
var content=$('#ipt').val();
$('.wrap>ul').append('<li>'+content+'</li>')
})
题目4：jQuery 如何展示/隐藏元素？
- 展示元素：.show( [duration ] [, easing ] [, complete ] )
- 隐藏元素：.hide([duration ] [,easing ] [,complete ])
题目5： jQuery 动画如何使用？
.animate()是一种根据一组 CSS 属性，执行自定义动画的方法，其语法如下：
.animate(properties[,duration][,easing][,complete])
.animate( properties, options )
properties：一个CSS属性和值的对象,动画将根据这组对象移动
duration：一个字符串或者数字决定动画将运行多久
easing：一个字符串，表示过渡使用哪种缓动函数
complete：在动画完成时执行的函数。
示例：
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<button id="btnHide">隐藏</button>
<button id="btn-show">显示</button>
<button id="btn-tog">切换</button>
<button id="btn-in">渐变-淡入</button>
<button id="btn-out">渐变-淡出</button>
<button id="btn-up">滑动-向上</button>
<button id="btn-down">滑动-向下</button>
<button id="btn-ani">动画</button>
<button id="btn-stp">暂停</button>
<button id="btn-fnh">归位</button>
<div id="box"></div>
</body>
</html>
css：
#box {
margin: 10px;
width: 50px;
height: 50px;
background-color: #aaa;
position: relative;
}
button {
margin-bottom: 10px;
}
js：
var $box=$('#box');
$('#btnHide').on('click',function(){
$box.hide();
});
$('#btn-show').on('click',function(){
$box.show(2000);
})
$('#btn-tog').on('click',function(){
$box.toggle(1000);
})
$('#btn-in').on('click',function(){
$box.fadeIn(2000);
})
$('#btn-out').on('click',function(){
$box.fadeOut();
})
$('#btn-up').on('click',function(){
$box.slideUp();
})
$('#btn-down').on('click',function(){
$box.slideDown();
})
$('#btn-ani').on('click',function(){
$box.css({left:'0px',top:'0px'})
//链式调用
$box.animate({width:'100px',height:'100px'}).animate({left:'200px'}).animate({top:'200px'})
$box.animate({left:'0px'})
.animate({top:'0px'})
$box.animate({width:'50px',height:'50px'})
// var actions=[
// {left:'0px',top:'0px'},
// {width:'100px',height:'100px'},
// {left:'200px'},
// {top:'200px'},
// {left:'0px'},
// {top:'0px'},
// {width:'50px',height:'50px'}
// ]
// actions.forEach(function(action,idx){
// $box.animate(action)
// })
})
$('#btn-stp').on('click',function(){
$box.stop();
})
$('#btn-fnh').on('click',function(){
$box.finish();
})
动画.png
题目6：如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
- $(‘selector’).html():获取元素内部HTML。
- $(‘selector’).html(‘…’):设置元素内部HTML。
- $(‘selector’).text():获取元素内部文本。
- $(‘selector’).text(‘…’):设置元素内部文本。
题目7：如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
- .val()获取表单用户输入的内容
- .val(value)设置表单用户输入的内容
- .attr('name')获取元素属性
- .attr('name','value')设置元素属性的值
网友评论