问答
1.说说库和框架的区别？
- 库:一个提供了很多方法的API.
- 框架:相当于一个已经构建好的实体房子，而用户只需在这个房子里添加自己想要的家具等。而框架对于开发者来说，开发者只需在这个框架中添加自己的东西而实现具体的功能。常见的框架有Angular, React等。
2.jquery 能做什么？
- 操作dom节点
- 动态修改页面样式
- 为页面添加动态效果（如：淡入淡出）
- 统一AJAX操作
3.jquery 对象和 DOM 原生对象有什么区别？如何转化？
- DOM对象是通过原声JS代码来获取的对象，也只能用原生JS进行操作；
- Jquery对象就是在原生Dom对象上做一层包装.
区别:经过包装后我们可以使用jquery对象的一个方法,这个方法就是对原生对象的一个封装.
如何转化:
- jquery 对象转化成DOM 对象：
var $wrap=$("#wrap")
var wrap=$wrap[0];
- DOM对象转化为jquery对象：
var wrap=document.getElementById("wrap");
var $wrap=$(wrap);
4.jquery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
- 事件绑定:
$('button').on('click',function(){
console.log($(this));
});
- (1)bind()向匹配元素添加一个或多个事件处理器，绑定单个事件的使用方法：
$(selector).bind(event,data,function(){});
- (2)unbind：是 bind对应的取消绑定
- (3)delegate:为指定的元素（被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
$(selector).delegate(childSelector,event,data,function(){});
- (4)live:向当前或未来的匹配元素添加一个或多个事件处理器，绑定单个事件的使用方法：
$(selector).live(event,data,function(){});
- (5)on:其实是将以前的绑定事件方法作了统一
$("div").on("click", "p", function(){
alert($(this).text());
});
- (6)off:是on对应的取消绑定事件
推荐使用on
使用on绑定事件使用事件代理的写法如下:给ul绑定click事件 当触发的元素为li时触发
$("ul").on("click", "li", function(e){
console.log(1)
});
5.jquery 如何展示/隐藏元素？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>隐藏显示</title>
</head>
<body>
<div class="ct">
<div class="row">row1
<p>标题</p>
</div>
<div class="row">row2
<p>段落</p>
</div>
</div>
<button id="btn">点我hide</button>
<button id="btn2">点我show</button>
<script src="../js/jquery-1.11.1.min.js"></script>
<script>
$(function () {
$('#btn').on('click', function () {
$('.ct').hide(500);
});
$('#btn2').on('click', function () {
$('.ct').show(500);
});
})
</script>
</body>
</html>
浏览效果如下:
6.jquery 动画如何使用？
$(selector).animate({params},speed,callback)
第一个参数：必需的 params 参数定义形成动画的 CSS 属性。
第二个参数：可选 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
第三个参数：可选 回调 是动画完成后所执行的函数名称。
7.如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
设置HTML内容
$(selector).html(content)
获取HTML内容
$(selector).html()
设置文本内容
$(selector).text(content)
获取文本内容
$(selectoe).text()
8.如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
-
表单内容：$(el).val()
-
元素属性：$(el).attr()
网友评论