jQuery基础知识
2017-08-03 本文已影响50人
DCbryant
题目1： jQuery 能做什么？
- 选择网页元素
- 改变结果集
- 元素的操作：取值和赋值
- 元素的操作：移动
- 元素的操作：复制、删除和创建
- 工具方法
- 事件操作
- 特殊效果
- AJAX
题目2： jQuery 对象和 DOM 原生对象有什么区别？如何转化？
jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素
jQuery对象转化为DOM对象：
- 利用数组下标的方式读取到jQuery中的DOM对象
var $div = $('div')
var div = $div[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实现如下效果
效果
题目9： 使用 jQuery 实现如下效果
效果
题目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打开即可
