1jQuery 能做什么？
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器。
jQuery通常有以下作用：
- 方便快捷获取DOM元素
- 动态修改页面样式
- 动态改变DOM内容
- 响应用户的交互操作
- 为页面添加动态效果
- 统一Ajax操作
2 jQuery 对象和 DOM 原生对象有什么区别？如何转化？
区别：jQuery对象是包装DOM对象后产生的对象，jQuery 对象是 jQuery所独有的，jQuery对象可以使用jQuery里的方法，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法。
// html()是jQuery里的方法
var $test = $('#test').html();
console.log($test);
// 等同于原生对象里的
var test = document.getElementById('test').innerHTML;
console.log(test);
// 两者不能混用
document.getElementById("id").html();
//浏览器会报错
转化：
将jQuery对象转化为原生对象
// jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。
var $test = $('#test');
var test = $test[0];
// jQuery本身提供，通过.get(index)方法，得到相应的DOM对象
var $test = $('#test');
var test = $test.get(0);
将原生对象转化为jQuery对象
var test = document.getElementById('test');
var $test = $(test);
3：jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
jQuery版本1.7后统一使用on/off来绑定和解绑事件。
// 语法
.on( events [,selector ] [,data ], handler(eventObject) )
// 例
$('button').on('click',function(){
console.log(1);
})
bind
bind()方法用于直接附加一个事件处理程序到元素上。在.bind()绑定事件的时候，这些元素必须已经存在.
$('button').bind('click',function(){
console.log(1);
})
//可直接替换为
$('button').click(function(){
console.log(1);
})
unbind
每个用.bind()方法绑定的事件处理程序可以使用.unbind()移除。
// 不带参数移除全部
$('button').unbind()
// 带参数
$('button').unbind('click')
delegate
能动态绑定事件,基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素
$("table").delegate("td", "click", function() {
console.log(1)
});
live
一种动态绑定方法，将委托的事件处理程序附加到一个页面的document元素。有很多限制，比如：不支持链式写法，很花费时间，解除绑定时会移除所有通过live添加的事件，已经被废弃。
on/off
自持静态绑定，也可以使用事件委托动态绑定事件，根元素是父元素或子元素。没有什么限制，是主要的绑定事件的方式
.on( events [, selector ] [, data ], handler(eventObject) )
.on( events [, selector ] [, data ] )
//带命名空间
$('button').on('click.miao',function(){
console.log(1);
})
$('button').off('click.miao');
4 jQuery 如何展示/隐藏元素？
// 隐藏元素 .hide([duration ] [,easing ] [,complete ])
$('#box').hide(300, 'linear', function() {
alert('Animation complete.');
})
// 显示元素 .show( [duration ] [, easing ] [, complete ] )
// 切换元素的显示 .toggle( [duration ] [, easing ] [, complete ] )
5jQuery 动画如何使用？
动画使用：.animate( properties [, duration ] [, easing ] [, complete ] )
其中properties表示一个CSS属性和值的对象,动画将根据这组对象移动。complete表示动画完成后执行的函数
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
console.log(1)
});
});
6如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
html内容用.html()来获取，设置的话在括号里加要添加的内容，原生js用.innerHTML获取html,设置用 = 直接赋值；
text()获取所选元素的文本内容，在括号里添加要加的文本设置文本内容，原生js用.innerText获取，用赋值进行设置；
7如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
.val() 获取表单输入内容，设置也是在括号里添加内容;
.attr('属性名') 获取元素的属性，设置的话$( ).attr('属性名'，'值')
$('input').val()
$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );
网友评论