jQuery选择器_Dom操作_样式_事件处理
2017-04-09 本文已影响0人
S级食材咩咩羊
1.说说库和框架的区别？
- 库：将代码集合成一个产品，提供给开发者调用。面向对象的代码组织而成的叫类库，面向过程组织而成的叫函数库。
- 框架：为解决一个(一类)问题而开发的产品，框架用户一般只需要使用框架提供的类或函数，即可实现全部功能。
- 区别：库提供更灵活的选择，需要自己组织。框架更具有针对性，提供一整套完整的代码。
2.jquery 能做什么？
- 封装部分JavaScript代码，API友好
- $(“css选择器”) 代替了 document.getElementsByTagName(“”)、document.getElementById(“”)…
- $(“css选择器”).css(“color”,”red”) 代替了 document.getElementById(“”).style.color = “red”
- $(“css选择器”).text(“”) 一个api同时具有读跟写的功能。($(“div”).text(“你好吗”);)
- $(“css选择器”).on(“click”,function (){}),监听事件
3.jquery 对象和 DOM 原生对象有什么区别？如何转化？
- DOM原生对象：w3c标准用于操作文档的API
- jQuery对象：包装DOM对象产生的对象。
- 区别：对象的方法不同
- 转化：
- DOM原生对象转化为jQuery对象：$();
- jQuery对象转化为DOM原生对象：value[index];
4.jquery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
- bind():为一个元素绑定一个或多个事件$(‘button’).bind(‘click’,function(){console.log(this)})
- unbind()：解除事件绑定
- delegate()：为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数；适用于当前或未来的元素（比如由脚本创建的新元素）
- live()：这种方法是将页面的document元素作为事件代理元素，太消耗资源，已经过时。
- on()：在选定的元素上绑定一个或多个事件处理函数，提供绑定事件处理的所有功能。
- off()：用来移除on绑定的事件处理函数。
$('button').on('click',function(){
$('.test').append('<p>新增内容'+ ($('p').length+1) +'</p>')
console.log($('p').length)
5.jquery 如何展示/隐藏元素？
$(document).ready(function(){
$('.show').on('click',function(){
$('.hide').show();
})
$('.hide').on('click',function(){
$('.hide').hide();
});
})
6.jquery 动画如何使用？
- 语法：$(selector).animate({params},speed,callback);
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
#ct {
border: 1px solid black;
width: 100px;
height: 100px;
background: red;
position: relative;
}
</style>
</head>
<body>
<div id="ct">animate</div>
<button type="button">动画</button>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script>
$('button').on('click', function a() {
$('#ct').animate({
left: '300px',
}, 3000);
$('#ct').animate({
top: '300px',
left: '0'
}, 'slow');
$('#ct').animate({
left: '300'
}, 'slow');
$('#ct').animate({
left: '0',
top: '0'
}, 'slow');
});
</script>
</body>
</html>
7.如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
- $(‘selector’).html():获取元素内部HTML。
- $(‘selector’).html(‘…’):设置元素内部HTML。
- $(‘selector’).text():获取元素内部文本。
- $(‘selector’).text(‘…’):设置元素内部文本。
8.如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
- $(‘selector’).val():获取表单用户输入值;
- $(‘selector’).val(‘…’):设置输入值;
- $(‘selector’).attr(‘name’):获取元素属性;
- $(‘selector’).attr(‘name’,’xxx’):设置元素属性的值;
