说说库和框架的区别?
库:是一个很多小工具的集合,可以用此工具简化你的代码。
框架:为解决一个(一类)问题而开发的产品,开发者按照框架的设计去做一些事
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>