库和框架的区别？
- 库：对开发者来说就是操作方便，简化流程，提高效率，代码简洁。
- 框架 : 框架就是一个大的整体结构，包含多个库的集合，根据框架提供的类或函数，即可实现全部功能，这就是框架。
jquery 能做什么？
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。
常见实用方法
创建
var obj = $('<div class="test"><p><span>Done</span></p></div>');
取值和赋值
$('.box').html(); // 取值
$('#username').val(); // 取值
$('.box').html('给box赋值'); // 赋值
$('#username').val('给ipnput赋值'); // 赋值
事件操作
$('.box').on('click', function(){
console.log( $(this).html() );
})
动画效果
$(".btn").click(function(){
$(".box").animate({
width: "70%",
opacity: 0.4,
marginLeft: "60px",
fontSize: "30px"
}, 1500 );
});
AJAX
$.ajax({
type: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
添加样式和删除样式
$(".box").addClass("active");
$(".box").removeClass("active");
添加元素和删除元素
$( ".box" ).append( "<p>Test</p>" ); // 添加元素
$('.box').empty(); // 清空元素
$('.box').remove(); // 删除被选元素
jquery 对象和 DOM 原生对象有什么区别？如何转化？
- 区别：
jQuery对象操作简单，兼容性强。
DOM原生对象代码复杂，兼容性差。 - 转化：
DOM原生对象转化jQuery对象：$(node)，用$()包起来实现
jQuery对象转化DOM原生对象：$(node)[index]，以下标来实现
jquery中如何绑定事件？
// 1
$('#foo').on('click', function() {
alert('User clicked on "foo."');
});
// 2
$('#foo').bind('click', function() {
alert('User clicked on "foo."');
});
bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？
bind 方法用于直接附加一个事件处理程序到元素上，在.bind()绑定事件的时候，这些元素必须已经存在。
unbind 从元素上删除一个以前附加事件处理程序。
delegate 对于早期版本，它仍然是使用事件代理（委派）最有效的方式
$("table").delegate("td", "click", function() {
$(this).toggleClass("chosen");
});
等价于下面使用.on()的代码
$("table").on("click", "td", function() {
$(this).toggleClass("chosen");
});
从jQuery 1.7开始，.delegate()已经被.on()方法取代
live 从jQuery1.7开始， .live() 方法已经过时了。使用.on()附加事件处理程序。 旧版本的jQuery中用户，应优先使用.delegate()来取代.live()。
$("a.offsite").live("click", function(){ alert("Goodbye!"); }); // jQuery 1.3+
$(document).delegate("a.offsite", "click", function(){ alert("Goodbye!"); }); // jQuery 1.4.3+
$(document).on("click", "a.offsite", function(){ alert("Goodbye!"); }); // jQuery 1.7+
on 在选定的元素上绑定一个或多个事件处理函数，在jQuery 1.7中，.on()方法提供绑定事件处理的所有功能。
$('.box').on('click', function(){
console.log( $(this).html() );
});
$("form").on("submit", function(event) {
event.preventDefault();
});
off 移除一个事件处理函数。
$("form").off(".validator");
$("form").on("click.validator", "button", validate);
在jquery-1.7之后建议使用 on() 来 绑定事件
使用on绑定事件使用事件代理的写法？
// 事件委托或者事件代理，想让div 下面所有的span绑定事件，可以把事件绑定到div上
$('div').on('click', 'span', function(e){
console.log(this);
console.log(e);
});
jquery 如何展示/隐藏元素？
// 方法1
$('.box').css('display','block');
$('.box').css('display','none');
// 方法2
$('.box').show();
$('.box').hide();
// 方法3
$('.box').fadeIn();
$('.box').fadeOut();
jquery 动画如何使用？
自定义动画
$(selector).animate(styles,speed,easing,callback)
参数说明
styles 必需。规定产生动画效果的 CSS 样式和值。
speed 可选。规定动画的速度。默认是 normal。可能的值：毫秒 （比如 1500） slow normal fast
easing 可选。规定在不同的动画点中设置动画速度的 easing 函数。内置的 easing 函数： swing linear
callback 可选。animate 函数执行完之后，要执行的函数。
代码事例
$(".box").animate({
width: "70%",
opacity: 0.4,
marginLeft: "60px",
fontSize: "30px"
}, 'slow' , 'linear' , function(){
$(".box").css('color','blue');
});
如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
// HTML
var str = $('.box').html(); // 获取
$('.box').html('给box赋值'); // 设置
// 文本
var str = $('.box').text(); // 获取
$('.box').text('给box赋值'); // 设置
如何设置和获取表单用户输入或者选择的内容？
.val([string]) 无参数时，获取表单输入值，有参数时，设置表单的输入值。
$('.ipt').val('1231321'); //设置
$('.ipt').val(); // 获取
如何设置和获取元素属性？
.attr(attributeName, value) 参数vulue可设置元素的属性值
.attr(attributeName) 获取元素特定属性的值
$('.box').attr({'data-img':'./icon.jpg','data-id':'20'}); // 设置
$('.box').attr('data-img'); // 获取 data-img 的值
以下是三个小demo
菜单切换
https://boloog.github.io/demos/jQuery/index-1.html
tabs切换
https://boloog.github.io/demos/jQuery/index-2.html
事件委托
https://boloog.github.io/demos/jQuery/index-3.html
网友评论