jQuery基础知识

题目1： jQuery 能做什么？

• 选择网页元素
• 改变结果集
• 元素的操作：取值和赋值
• 元素的操作：移动
• 元素的操作：复制、删除和创建
• 工具方法
• 事件操作
• 特殊效果
• AJAX

题目2： jQuery 对象和 DOM 原生对象有什么区别？如何转化？

jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素

jQuery对象转化为DOM对象：

1. 利用数组下标的方式读取到jQuery中的DOM对象

var $div = $('div') 
var div = $div[2] 

2. 利用jQuery的get()方法

var $div = $('div') 
var div = $div.get(2) 

DOM对象转化为jQuery对象：*

var div =  document.querySelector('div')
var $div = $('div')

题目3：jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？

• jquery通过on方法绑定事件

• bind、unbind、delegate和live都是jquery1.7以前的方法，现在已经废弃，被on和off代替

  • bind和on都是绑定事件；
  • unbind和off都是解绑事件；
  • delegate和on都可以实现事件代理；
  • live绑定事件和用.bind()来绑定事件是一样的，但.live()方法会绑定相应的事件到document元素上

• 推荐使用on方法绑定事件

• on( events [,selector ] [,data ], handler(eventObject) )
  示例：

// 普通事件绑定，最简单的用法
$('div').on('click', function(e){
    console.log(this);
    console.log(e);
})

// 事件委托或者事件代理，想让div 下面所有的span绑定事件，可以把事件绑定到div上
$('div').on('click', 'span', function(e){
    console.log(this);
    console.log(e);
});

// 可以在绑定的时候给事件处理程序传递一些参数
$('div').on('click', {name: 'Byron', age: 24}, function(e){
    console.log(e.data);
});

• trigger( eventType [, extraParameters ] ):根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

$('#foo').on('click', function() {
  alert($(this).text());
});
$('#foo').trigger('click');

题目4：jQuery 如何展示/隐藏元素？

• 通过设置css的display属性来实现

var $div = $('div')
$div.css('display','none')
$div.css('display','block')

• 通过增加或删除classname来实现

css:
.active{display:block}

js:
var $div = $('div')
$div.addClass('active')
$div.removeClass('active')

• 通过jQuery的show、hide、toggle方法来实现

var $div = $('div')
$div.hide()
$div.show()
$div.toggle()//切换元素的隐藏、显示

题目5： jQuery 动画如何使用？

基础：

.hide([duration ] [,easing ] [,complete ])隐藏元素
.show( [duration ] [, easing ] [, complete ] )显示元素
.toggle( [duration ] [, easing ] [, complete ] )切换元素的显示、隐藏

这三者用法一样，用来隐藏、、显示以及切换元素的隐藏和显示。

duration：动画持续多久
easing：表示过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"
complete：在动画完成时执行的函数

示例：

$('div').hide(200, 'linear', function() {
    console.log('disappear')
});

渐变：

.fadeIn( [duration ] [, easing ] [, complete ] )通过淡入的方式显示
.fadeOut( [duration ] [, easing ] [, complete ] )通过淡出的方式隐藏
.fadeTo( duration, opacity [, easing ] [, complete ] )调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果
.fadeToggle( [duration ] [, easing ] [, complete ] )通过匹配的元素的不透明度动画，来显示或隐藏它们，方法执行匹配元素的不透明度动画。当被可见元素调用时，元素不透明度一旦达到0，display样式属性设置为none ，所以元素不再影响页面的布局

示例：

$('div').fadeIn('slow', function() {}
$('div').fadeOut('slow', function() {}
$('div').fadeTo('slow', 0.5, function() {}//多了一个透明度
$('div').fadeToggle('slow', function() {}

题目6：如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

• 设置元素内部 HTML 内容：$('div').html('\<h1\>Hello world\</h1\>');
• 获取元素内部 HTML 内容：var $content = $('div').html();
• 设置元素内部文本：$('div').text('Hello world');
• 获取元素内部文本：var $title = $('h1').text();

题目7：如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？

• 设置表单用户输入或者选择的内容: $('#username").val('dcbryant')
• 获取表单用户输入或者选择的内容: var $username = $('#username").val();
• 设置元素属性:

$('div').attr('color','red')；
$('div').prop('color','red');

• 获取元素属性:

var  color = $('div').attr('color');
var  color = $('div').prop('color');

attr多用于html自身原有的属性，prop多用于自定义属性

题目8： 使用 jQuery实现如下效果

效果

demo

题目9： 使用 jQuery 实现如下效果

效果

demo

题目10：实现如下效果

(http://jscode.me/uploads/default/optimized/1X/bde2c4f39009ac2dec331e18738988e1c650157b_1_690x446.gif)

Ps:当点击按钮时使用如下数据：

var products = [
    {
        img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',
        name: '珂兰 黄金手 猴哥款',
        price: '￥405.00'
    },{
        img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',
        name: '珂兰 黄金转运珠 猴哥款',
        price: '￥100.00'
    },{
        img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/1446546284/374195/9196ac66/56af0958N1a723458.jpg',
        name: '珂兰 黄金手链 3D猴哥款',
        price: '￥45.00'
    }
];

demo
ps:用jsonp实现的加载更多，直接打开demo没有效果，用server-mock打开即可

题目11： 模仿视频6，完成 左右切换的 Tab 效果

demo