jQury选择器_Dom操作_样式_事件处理（进阶14）
2017-02-02 本文已影响0人
饥人谷_js_chen
题目1： 说说库和框架的区别？
库是很多工具的集合，类似于jquery，封装了很多简化的方法；而框架类似一个架子，我们一般只需在这个架子里面填充代码就可以了（如React、Angular）
题目2： jquery 能做什么？
jquery帮我们封装了常用的方法，并且具有不错的兼容性（1.12可以兼容到IE6+，当前版兼容IE9+），它封装的方法有
- 获取元素：通过类似于css选择器的方式获取元素（为了方便使用者jQuery刻意和CSS选择器使用相同的语法，几乎支持所有类型的CSS3选择器，当然也有一些其特定的选择器）
- DOM操作
- 操作属性/css
- 常用函数（如each、map等）
- 事件处理
- 动画
- Ajax
- JSONP
题目3： jquery 对象和 DOM 原生对象有什么区别？如何转化？
- 区别：
- 操作方法不一样：如dom对象.innerHtml 类似于 jq对象.html
- 绑定事件不一样：addEventListener/removeEventListener类似于jq对象的on/off
- 可以使用jquery特有的方法：如toggleClass,trigger，它们封装了一段常用代码
- jquery的代码和操作更为简便
- jquery兼容性更好
- 转化
- $(原生DOM对象) => jquery对象
- $(jquery对象)[index] => 原生DOM对象（表示：获取jquery选中的元素集合中的第index个元素，这个元素是dom对象）
题目4：jquery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
- jquery通过on方法绑定事件
- bind、unbind、delegate和live都是jquery1.7以前的方法，现在已经废弃，被on和off代替
- bind和on都是绑定事件；
- unbind和off都是解绑事件；
- delegate和on都可以实现事件代理（让父元素代理子元素的事件）；
- live绑定事件和用.bind()来绑定事件是一样的，但.live()方法会绑定相应的事件到document元素上
题目5：jquery 如何展示/隐藏元素？
- 通过增删class（display:none;）来实现展示/隐藏元素
.display{
display: none;
}
$('#btn').on('click',()=>{
let $box2 = $('.box2');
//method1
if($box2.hasClass('display')){
$box2.removeClass('display');
}else {
$box2.addClass('display');
}
//method2===method1
// $box2.toggleClass('.display');
});
- 通过jquery动画方法show()和hide()来实现
let $box2 = $('.box2');
$box2.hide();
$box2.show();
- 通过设置css的display属性来实现
let $box2 = $('.box2');
$box2.css('display','none');
$box2.css('display','block');
题目6： jquery 动画如何使用？
- 基础：
- 控制显示/隐藏：
- 隐藏元素: $node.show([duration ] [,easing ] [,complete ]);
- 显示元素: $node.hide([duration ] [,easing ] [,complete ]);
- 切换元素的隐藏、显示: $node.toggle([duration ] [,easing ] [,complete ]);
3个参数的含义：
duration:动画时长
easing:表示过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"
complete:在动画完成时执行的函数
- 渐变
- 通过淡入的方式显示匹配元素: $node.fadeIn( [duration ] [, easing ] [, complete ] )
- 通过淡出的方式隐藏匹配元素: $node.fadeOut( [duration ] [, easing ] [, complete ] )
- 调整匹配元素的透明度: $node.fadeTo( duration, opacity [, easing ] [, complete ] )
- 通过匹配的元素的不透明度动画，来显示或隐藏它们:
$node.fadeToggle( [duration ] [, easing ] [, complete ] ) - 滑动
- .slideDown( [duration ] [, easing ] [, complete ] )
用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式 - .slideUp( [duration ] [, easing ] [, complete ] )
用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，display 样式属性被设置为none - .slideToggle( [duration ] [, easing ] [, complete ] )
用滑动动画显示或隐藏一个匹配元素 - 自定义：
- .animate( properties [, duration ] [, easing ] [, complete ] ):自己设定动画
- .stop( [clearQueue ] [, jumpToEnd ] )：暂停动画
- finish：结束动画
题目7：如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
- 设置元素内部 HTML 内容：$('#box').html('<h1>Hello world</h1>');
- 获取元素内部 HTML 内容：let content = $('#box').html();
- 设置元素内部文本：$('h1').text('Hello world');
- 获取元素内部文本：let title = $('h1').text();
题目8：如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
- 设置表单用户输入或者选择的内容: $('#username").value="陈龙";
- 获取表单用户输入或者选择的内容: let username = $('#username").value;
- 设置元素属性: $('.box').attr('color','red');$('box').attr({'color':'red','width':'100px'});
- 获取元素属性: let color = $('.box').attr('color');
