题目1： jQuery 能做什么？
JQuery 是个JS库，一些效果JS要用繁重的代码才能实现，但可以通过jQ一些封装好的方法方便快捷，简单明确的就能实现。jQ缺点是，代码是很多是意大利面条式，修改困难。
题目2： jQuery 对象和 DOM 原生对象有什么区别？如何转化？
- DOM原生对象：w3c标准用于操作文档的API.
- jQuery对象：包装DOM对象产生的对象。
- 区别：DOM原生对象使用DOM原生对象的方法，jQuery对象使用jQuery对象的方法。
转化： - DOM原生对象转化为jQuery对象：
$div = $(document.getElementsByTagName(‘div’)); - jQuery对象转化为DOM原生对象：
div = $div[index];
题目3：jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
- bin():为一个元素绑定一个或多个事件。
$('button').bind(‘click’,function(){console.log(this)});
$(‘p’).bind(‘mouseenter mouseleave’,function(){$(this).toggleClass(‘change’)})；
unbind:为一个元素解绑事件；
unbind():$(‘p’)解除该元素绑定的事件。
delegate：delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或
多个事件处理程序，并规定当这些事件发生时运行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元
（比如由脚本创建的新元素）
//点击时切换隐藏显示状态
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
-
live():这种方法是将页面的document元素作为事件代理元素，太消耗资源，已经过时。在新版本中推荐用.on()法，即时在旧版本中，也推荐使用.delegate()方法来取代.live()方法。
-
on():在选定的元素上绑定一个或多个事件处理函数，提供绑定事件处理的所有功能。
$(selector).on('事件.(这里可以写个标记)'，被代理的子元素，function(){
//代码
})
//事件代理的写法
$('ul').on('click.ul1'，'li'，function(){
//代码
})
- off():用来移除on绑定的事件处理函数。
$(selector).off('事件.(可以写入on的标记来指定清除)')
$('ul').off('click.ul1')
- 推荐使用，on和off
题目4：jQuery 如何展示/隐藏元素？
| 方法 | 效果 |
|---|---|
| .show(可以添加毫秒数，元素会慢慢出现) | 出现 |
| .hide(可以添加毫秒数，元素会慢慢隐藏) | 消失 |
| .fadeIn(index) | 透明度慢慢变高出现 |
| .fadeOut(index) | 透明度慢慢变为0 |
| .slideDown(index) | 高度慢慢向下出现 |
| .slideUp(index) | 高度慢慢向上变为0消失； |
题目5： jQuery 动画如何使用？
animate({"你要改变的属性(要改变颜色，要引入JQ的其他ui库，)":"改变的值"}，毫秒数，function(){回掉函数，动画结束后你要干什么})
$('div').animate({width:"200px"},1000,function(){
console.log('变化完毕')
})
题目6：如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
- $(‘selector’).html():获取元素内部HTML。
- $(‘selector’).html(‘…’):设置元素内部HTML。
- $(‘selector’).text():获取元素内部文本。
- $(‘selector’).text(‘…’):设置元素内部文本。
题目7：如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
- $(‘selector’).val():获取表单用户输入值;
- $(‘selector’).val(‘…’):设置输入值;
- $(‘selector’).attr(‘name’):获取元素属性;
- $(‘selector’).attr(‘name’,’xxx’):设置元素属性的值;
- $(‘selector’).css({width : '200px',height : '300px'})（只可以修改style的属性）
记录一些demo
向上切换轮播图 http://js.jirengu.com/jejileyaci/42/edit?html,css,js,output
导航 http://js.jirengu.com/hodukafopo/32/edit?html,css,output
切换列表 http://js.jirengu.com/lowejokise/11/edit?html,css,output
添加内容 http://js.jirengu.com/dimoropewe/3/edit?html,css,output
网友评论