一、说说库和框架的区别?
- <strong>库</strong>的概念和意义是用来提供一些方法的集合,避免定义重复功能的函数并具有一定的模式兼容性。类似于一个工具箱,里面有很多的工具,比如jQuery,就封装了很多js代码,让你使用起来更加方便快捷。
- <strong>框架</strong>更应该是规范开发者按照框架的设计去做一些事情,并非简单的工具集的概念,框架可以提供相应的库或者基于库来实现,但是库一般不具备框架的规范性。
二、JQuery 能做什么?
- 取得文档中的元素。
$('div.content').find('p'); - 修改页面的外观,而且,即使在页面已经呈现之后,jQuery仍然能够改 变文档中某个部分的类或者个别的样式属性。
$('ul > li:first').addClass('active'); - 改变文档的内容。可以改变文本、插入或翻转图像、列表重新排序,甚至对 HTML文档的整个结构都能重写和扩充
$('#container').append('<a href="more.html">more</a>'); - 响应用户的交互操作。jQuery提供了截获形形色色的页面事件(比如用户单击某个链接) 的适当方式,而不需要使用事件处理程序拆散HTML代码。
$('button.show-details').click(function() {
$('div.details').show();
}); - 为页面添加动态效果。
$('div.details').slideDown(); - 简化常见的JavaScript任务。改进了对基本的JavaScript数据结构的操作(例如迭代和数组操作等)。
$.each(obj, function(key, value) { total += value;});
三、jQuery 对象和 DOM 原生对象有什么区别?如何转化?
- jquery对象返回的是类数组对象,而且jquery对象只能用他自己的方法。
-
DOM原生对象只可以用ES中的方法和属性,不能用jquery中的方法。
<b>如何转换:</b>
//转换成DOM原生对象,因为是类数组对象,直接访问下标即可
var ct=$('#ct').children();
var p1=$('#ct').children()[0];
$(p1);//转换成Jq对象
四、jquery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?
- <b>bind()</b>可以为被选元素绑定一个或者多个监听事件,因为是直接绑定在被选元素上,所以没有事件代理功能,会使事件监听程序积累很多。
$(".btn").bind("click",function(){
$("p").slideToggle();
}); - <b>unbind()</b>取消被选元素的事件监听程序
$(.btn").click(function(){
$("p").unbind();
}); - <b>delegate()</b>方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
$('#container').delegate('a', 'click', function() {
alert("1") ;
}); - <b>on()</b>方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。
$('#ct li a').on('click',function(){
alert("1");
});//被选元素
$('#ct').on('click','li a',function(){
}//子元素
提示:如需移除事件处理程序,请使用off()方法。
$("button").click(function(){
$("p").off("click");
});
提示:如需添加只运行一次的事件然后移除,请使用one() 方法。
$("p").one("click",function(){
$(this).animate({fontSize:"+=6px"});
});
五、jquery 如何展示/隐藏元素?
$(.hide).on('click',function(){
$("p").hide(); //隐藏
})
$(.hide).on('click',function(){
$("p").show(); //显示
})
$(.hide).on('click',function(){
$("p").toggle(); //显示的隐藏,隐藏的显示
})
六、如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?
- 获取HTML内容:
$(".wrap").html() - 设置HTML内容:
- 获取文本内容:
$(".wrap").text( ); - 设置文本内容:
$(".wrap").text("<div>1</div>");
实例:
$(".wrap").html("<div>1</div>")
$('.btn1').on('click',function(){
alert($('.ct').html());
});
$('.btn2').on('click',function(){
var val=$('.input2').val();
if(val){
$('.ct').html(val);
}
});
$('.btn3').on('click',function(){
alert($('.ct').text());
});
$('.btn4').on('click',function(){
var val = $('.input3').val();
if(val){
$('.ct').text(val);
} else{
$('.input3').val('请输入内容!!');
}
});
七、如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?
- 获取内容:
$(".selector").val(); - 获取属性值:
$(".selector").attr("href"); - 设置属性值:
$(".selector").attr("class","active");
实例:
<a href="http://www.baidu.com">百度</a>
<input class="name" type="text" placeholder="输入你的名字" value=''>
<button class="btn1">获取姓名</button>
<button class="btn2">修改链接href属性</button>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
$('.btn1').on('click',function(){
alert('你输入的名字是:'+$('.name').val());
})
$('.btn2').on('click',function(){
$('a').attr('href','http://www.google.com')
})
</script>