说说库和框架的区别？
库：是一个很多小工具的集合，可以用此工具简化你的代码。
框架：为解决一个(一类)问题而开发的产品，开发者按照框架的设计去做一些事
jQuery 能做什么？
- 可以做和原生js相同的事情，可以简化js代码
- 可以解决ie的兼容性问题
- jQuery库容易扩展而且不断有新插件面世增强它的功能
jquery 对象和 DOM 原生对象有什么区别？如何转化？
jquery对象就是用jQuery的方法进行获取的对象，而原生DOM对象就是用javaScript的方法进行获取的对象。
jQuery对象就只能使用jQuery的方法，原生DOM对象只能使用原生DOM的方法
如何转换
- 获取jQuery对象
$('#btn')
获取DOM对象
document.getElementById('btn') - jQuery转换成DOM
$('#btn')[0]
DOM转换成jQuery
$('dom对象')
jquery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
bind：为一个元素绑定一个或多个事件，并规定当这些事件发生时运行的函数。
unbind：为一个元素解绑其身上所绑定的事件，并规定当这些事件发生时运行的函数。
delegate：为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
live：为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
on和off是以上四种方法的替代品，该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。
on替代了bind，delegate，live
off替代了unbind
<body>
<button id="btn">submit</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
$('#btn').on('click',function(){
console.log(this)
})
</script>
</body>
事件代理：事件委托或者事件代理，想让div 下面所有的span绑定事件，可以把事件绑定到div上
$('div').on('click', 'span', function(e){
console.log(this);
console.log(e);
});
jquery 如何展示/隐藏元素？
<body>
<p>nihao</p>
<button id='show'>show</button>
<button id="hide">hide</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
var $p=$('p')
$('#show').on('click',function(){
$p.show();
})
$('#hide').on('click',function(){
$p.hide();
})
</script>
</body>
jquery 动画如何使用？
$(selector).animate(styles,speed,easing,callback)
<body>
<p style="border:1px solid red";>nihao</p>
<script src="jquery-3.2.1.min.js"></script>
<script>
var $p=$("p")
$p.on('click',function(){
$p.animate({
height:'100px'
},1000)
})
</script>
</body>
如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
使用$().html()获取html内容，$().text()获取文本内容
括号里如果有内容则为设置
如果括号内没有内容则为获取
<body>
<button id="htm">htm</button>
<button id="text">text</button>
<p><span>hello</span>world</p>
<script src="jquery-3.2.1.min.js"></script>
<script>
$('#htm').on('click',function(){
console.log($('p').html())
$('p').html('<span>world</span>')
})
$('#text').on('click',function(){
console.log($('p').text())
$('p').text('nihao world')
})
</script>
</body>
如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
$().val():获取表单用户输入的值，val()中可以更改值
使用attr()可以设置元素的属性，attr接受两个值，第一个值为元素的属性，第二个是属性的值
<head>
<style>
.col{
border: 2px solid red;
}
</style>
</head>
<body>
<input type="text">
<button id="btn">submit</button>
<button id="add">add</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
$('#btn').on('click',function(){
console.log($('input').val())
$('input').val('')
})
$('#add').on('click',function(){
$('input').attr('class','col')
})
</script>
</body>
网友评论