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))
网友评论