1. jQuery 能做什么?
首先jQuery是一个简单、精简、功能丰富的JavaScrip工具库,他提供了易于使用且兼容性好的API,使用jQuery可以更加简单的操作例如HTML文档遍历和操作、事件处理、Ajax、动画等。
2. jQuery 对象和 DOM 原生对象有什么区别?如何转化?
区别:
直接利用“===”进行判断,结果为false
选择的不同,jQuery对象要用jQuery方法选择,DOM对象要用原生JS方法选择
操作方法不同,jQuery对象要用jQuery方法操作,DOM对象要用原生JS方法操作
转化:
对jQuery对象使用下标选择可得到DOM原生对象,
例:$('xxx')[0] === document.querySelector('xxx'),结果为true对DOM原生对象使用$()可得到jQuery对象,虽然都是指向同一个对象,但是得到的jQuery对象和直接用jQuery方法选择的对象不同
例:$(document.querySelector('xxx')) === $('xxx'),结果为false
3. jQuery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?
jQuery可以使用bind,live,delegate,on这四种方式进行事件监听,还可以直接绑定例如a.click(function(){}); a.change(function(){})
对应的,移除一个事件的处理函数的方法:unbind,die,undelegate,off
用法:
$(selector).bind(events,[data],fn); 对单个目标元素进行监听
$(selector).live(events,[data],fn); 效果和bind相同,但是运用到事件委托机制
$(selector).delegate(childSelector,events,[data],fn); 实现事件代理
$(selector).on(events,[childSelector],[data],fn); 可以实现以上所有功能,如单个目标元素的监听,监听多个目标
所以,推荐使用on
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
<li>test5</li>
</ul>
<script>
$('ul').on('click','li',function(){
console.log(this)
})
</script> //对ul进行监听,使用childSelector这个参数,对子元素进行事件绑定
</body>
</html>
4. jQuery 如何展示/隐藏元素?
可以使用添加删除元素实现,可用的函数有append,appendTo,prepend,prependTo,before,insertBefor,after,insertAfter, 例:在div添加
$('div').append('<h1>title</h1>')
; 删除div$('div').remove()
使用jQuery动画相关的函数,hide,show,toggel,fadeIn,fadeOut,fadeToggle,slideDown,slideUp,slideToggle, 例:隐藏div,$('div').hide(), 展示div,$('div').show(); 或者直接使用$('div').toggle()即可实现展示和隐藏的切换
写CSS,然后给目标元素添加相应的class达到展示/隐藏效果,$('div').addClass()
5. jQuery 动画如何使用?
写一个demo展示jQuery动画用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style>
.cnt {
width: 100px;
height: 100px;
background: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<div class="cnt"></div>
<button class="hide">hide</button>
<button class="show">show</button>
<button class="toggle">toggle</button>
<button class="animate">自定义动画</button>
<script>
var $cnt = $('.cnt')
$('.hide').click(function(){
$cnt.hide(4000,function(){
elart('已隐藏')
})
})
$('.show').click(function(){
$cnt.show(4000,fucntion(){
elart('已展示')
})
})
$('.toggle').click(function(){
$cnt.toggle(4000,function(){
elart('切换隐藏或展示')
})
})
$('.animate').click(function(){
$cnt.animate(
{
width: '+=100px',
height: '+=100px',
opacity: 0.25
})
.animate({
left: '+=200px'
})
.animate({
top: '+=200px'
})
.animate({
width: '-=100px',
height: '-=100px',
opacity: 1,
left: '-=200px',
top: '-=200px'
},4000)
})
$('.finish').click(function(){
$cnt.finish()
})
$('.stop').click(function(){
$cnt.stop(true,true)
})
</script>
</body>
</html>
6. 如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?
$('xxx').html(),不传递参数时获取所选元素的HTML,当传递参数时,$('xxx').html(string), 则会替换原HTML内容。
$('xxx').text(),不传递参数时获取所选元素的innerText,当传递参数时,$('xxx').text(string), 则会替换原元素下的innerText。
7. 如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?
$('input').val(),不传递参数时,获取表单用户输入或选择的内容,当传递参数时,$('input').val(string), 会修改input的value值为参数值。
获取元素特定属性的值 .attr(attributeName)
为元素属性赋值 .attr(attributeName,value) / .attr(attributesJson) / .attr(attributeName,function(index,attr))