问答部分
一、说说库和框架的区别？
- 库~是一个提供了封装好很多方法的工具，在这个工具里面，用与不用都是由你决定，控制权在于使用者
- 框架~提供整套的解决方案，你可以往里面填充你的内容，但是你要遵循框架创造一些规则和范例，控制权在于框架
二、jQuery能做什么？
jQuery能做如下操作：
- 获取HTML中的元素，如下代码：
$("ul li");
$("li").next(".s");
$("li").parent();
- dom操作，如下代码：
$("#ct").append(".newdiv");
- css操作，如下代码：
$("p").css("color","red");
- 事件处理，如下代码：
//绑定事件
$("#btn").on("click",function(){
console.log("event handling");
});
//解除事件
$("#btn").off();
- 动画操作，如下代码：
$(".box1").hide(1500,function(){
$(".box2").hide(1500,function(){
$(".box3").hide(1500);
});
});
- ajax操作
三、jQuery对象和DOM原生对象有什么区别？如何转化？
- 二者区别
- jQuery对象是在DOM原生对象上做了一层包装后的对象，只能够使用jQuery对象的方法
- DOM原生对象是通过Javascript方法所获得的的对象，也只能使用Javascript所提供的的方法
- 用法上的不同，如下代码
//DOM原生对象
var btn = document.getElementById("clickme");
btn.innerHTML = "jirengu";
btn.setAttribute("class","btn");
//jQuery对象
var $btn = $("#clickme");
$btn.html("jirengu");
$btn.attr("class","button");
- 两者的转化：
- jQuery对象转化为DOM对象
//数组下标的转化方式
var $li = $("li");//jQuery对象
var li = $li[2];//DOM对象
//jQuery的get(index)方法
//当get()不写参数把所有对象转为DOM对象返回
var $li = $("li");//jQuery对象
var li = $li.get(3);//DOM对象
- DOM对象转化为 jQuery对象
//用$()把DOM原生对象包装起来，就可以转换为jQuery对象，即$(DOM对象)
var li = document.getElementsByTagName("li");//DOM对象
var $li = $(li);//jQuery对象
四、jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
- .bind()~用于直接附加一个事件处理程序到元素上==>（注意：在jQuery3.0中，.bind()已被标记为弃用），用法如下：
$("#btn").bind("mouseenter mouseleave",function(){
console.log(111);
});
-
unbind()~用于移除
.bind()绑定的事件处理程序==>（注意：在jQuery3.0中，.unbind()已被标记为弃用），用法如下：
$("#btn").unbind();//移除#btn上所有绑定的处理程序
$("#btn").unbind("click");//移除#btn上所有绑定的click处理程序
- live()~该方法将委托的事件处理程序附加到一个页面的document元素，从而简化了在页面上动态添加的内容上事件处理的使用==>（注意：在jQuery1.7中，.live()已被标记为弃用），用法如下：
$(".pic").live("click",function(){
$(this).hide("slow");
});
- delegate()~为所有匹配选择器（selector参数）的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集（匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素）==>（注意：在jQuery3.0中，.delegate()已被标记为弃用），用法如下：
$(".content").delegate(".btn","click",function(){
console.log("delegate()");
});
- on()~在选定的元素上绑定一个或多个事件处理函数==>（推荐使用.on()方法进行事件绑定）
//.on()的语法如下
.on(events[,selectors][,data],handler);
- events~一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如
"click"、"mouseenter mouseleave"、"keydown.myPlugin"、".myPlugin"，命名空间时如下代码：
function myHandler(){
console.log(111);
}
//为所有类名为items的元素绑定click事件，定义在test和foo两个命名空间下
$(".items").on("click.test.foo",myHandler);
// 触发所有click事件
$("#btn").trigger("click");
// 触发定义在test命名空间下的click事件
$("#btn").trigger("click.test");
// 触发定义在foo命名空间下的click事件
$("#btn").trigger("click.foo");
// 触发同时定义在test和foo两个命名空间下的click事件
$("#btn").trigger("click.test.foo");
- selectors~一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素；如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件，如下代码：
$("#ct").on("click",".items",function(){
console.log(111);
});
- data~当一个事件被触发时，要传递给事件处理函数的event.data，如下代码：
$("#btn").on("click",{name:"dp",age:25},function(event){
console.log(event.data);
});
- handler~事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false，如下代码：
$("#btn").on("click",function(){
console.log(111);
});
-
off()~移除
.on()上绑定的事件处理函数==>（推荐使用.off()方法进行事件移除）
//.off()的语法如下
.off(events[,selectors][,handler]);
//移除所有事件
$("#btn").off();
//移除元素上所有的代理事件，而不移除任何非代理事件，请使用特殊值 "**"
$("#btn").off("click","**");
//通过命名空间来移除事件
function myHandler(){
console.log(111);
}
$("#btn1").on("click.test.foo",myHandler);
$("#btn1").off("click.test");
$("#btn1").off("clck.test.foo");
五、jQuery如何展示元素和隐藏元素？
- 基础方法
-
.show()~该方法展示元素，用法如下：
$(".pic").show();
$(".pic").show("fast");
$("#btn").on("click",function(){
$(".items").show("slow",function(){
//to do...
});
});
-
.hide()~该方法隐藏元素，用法如下：
$(".pic").hide();
$(".pic").hide("fast");
$("#btn").on("click",function(){
$(".items").hide("slow",function(){
//to do...
});
});
-
.toggle()~该方法显示或隐藏元素，用法如下：
$(".pic").toggle();
$(".pic").toggle(200);
$("#btn").on("click",function(){
$(".items").toggle("slow",function(){
//to do...
});
});
比如如下GIF：
show()/hide()/toggle()
- 渐变（淡入淡出）
-
.fadeIn()~通过淡入的方式显示匹配元素，用法如下：
$(".pic").fadeIn();
$(".pic").fadeIn("fast");
$("button").on("click",function(){
$("div").fadeIn("slow",function(){
//to do...
});
});
-
.fadeOut()~通过淡出的方式隐藏匹配元素，用法如下：
$(".pic").fadeIn();
$(".pic").fadeIn(200);
$("button").on("click",function(){
$("div").fadeOut("slow",function(){
//to do...
});
});
-
.fadeToggle()~通过匹配的元素的不透明度动画，来显示或隐藏它们，方法执行匹配元素的不透明度动画，用法如下：
$(".pic").fadeToggle();
$(".pic").fadeToggle("slow");
$("button").on("click",function(){
$("div").fadeToggle("slow",function(){
//to do...
});
});
-
.fadeTo()~调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果，用法如下：
$("img").fadeTo("slow", 0.5, function() {
// to do...
});
比如如下GIF：
渐变
- 滑动
-
.slideDown()~用滑动动画显示一个匹配的元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式，用法如下：
$(".pic").slideDown();
$(".pic").slideDown("fast");
$("button").on("click",function(){
$("div").slideDown(1000,function(){
//to do...
});
});
-
.slideUp()~用滑动动画隐藏一个匹配的元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局，用法如下：
$(".pic").slideUp();
$(".pic").slideUp("slow");
$("button").on("click",function(){
$("div").slideUp(1500,function(){
//to do...
});
});
-
.slideToggle()~用滑动动画显示或隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面中，在这个元素下面的内容往下或往上滑，用法如下：
$(".pic").slideToggle();
$(".pic").slideToggle("fast");
$("button").on("click",function(){
$("div").slideToggle("slow",function(){
//to do...
});
});
比如如下GIF：
滑动
六、jQuery动画如何使用？
.animate()~是一种根据一组 CSS 属性，执行自定义动画的方法，其语法如下：
.animate(properties[,duration][,easing][,complete])
.animate( properties, options )
- properties~一个CSS属性和值的对象,动画将根据这组对象移动，注意以下几点：
- 所有用于动画的属性必须是数字的，除非另有说明；否则不能使用jQuery的基本功能
- 属性值被视为一个像素数，除非另有说明；em和%需要指定使用
- 除了定义数值，每个属性能使用"show"、"hide"、"toggle"
- 动画属性也可以是一个相对值；如果提供一个+=或-=开始的值，那么目标值就以当前值加上或减去给定的数字来计算
- 如果元素的定位属性是static，那么他们的定位属性（top、right、 bottom、 left)没有明显的效果
- 基本用法如下：
$("#clickme").on("click",function(){
$("div").animate({
left:"+=50",
opacity:0.5,
height:"toggle"
},5000,function(){
console.log(111);
});
});
- options~一组包含动画选项的值的集合，支持的选项如下：
- duration(default:400)~一个字符串或者数字决定动画将运行多久
- easing(default:swing)~一个字符串，表示过渡使用哪种缓动函数
- queue(default:true)~一个布尔值，指示是否将动画放置在效果队列中。如果为false时，将立即开始动画
- step~每步动画执行后调用的回调函数，需要注意的是step函数被每个动画元素的每个动画属性调用；其接受两个参数（now： 每一步动画属性的数字值；fx：jQuery.fx 原型对象的一个引用，其中包含了多项属性）；比如如下代码
$("li").animate({
left:"50",
height:"50%",
opacity:0.5
},{step:function(now,fx){
var data = fx.elem.id + "" + fx.prop + "：" + now;
$("body").append("<div>" + data + "</div>");
}
});
- 其它更多查阅.animate
七 、如何设置和获取元素内部 HTML内容？如何设置和获取元素内部文本？
-
.html()~设置和获取元素内部的HTML内容，用法如下：
//获取元素内部的HTML内容，包括HTML标记
$("#ct").html();
//设置元素内部的HTML内容
$("#demo").html("<div>jirengu<strong>hunger</strong></div>")
-
.text()~设置和获取元素内部的文本内容，用法如下：
//获取元素内部的文本内容
$("#ct").text();
//设置元素内部的文本内容
$("#demo").text("here is jirengu")
八、如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
-
.val()~设置和获取表单用户输入或选择的内容，用法如下：
//获取
$( "input:checkbox:checked" ).val();
//设置
$( "#username" ).val("hunger");
-
.attr()~获取匹配的元素集合中的第一个元素的属性的值，用法如下：
//获取
$( "ims" ).val("src");
//设置，当设置多个属性,包裹属性名的引号是可选的
$( "img" ).attr({
alt:"hunger",
title:"frank"
});
代码部分
一、使用 jquery实现如下效果
二、使用 jquery 实现如下效果，提问：点奢侈品2的时候页面跳到了顶部，可能是什么原因？如何解决
//将href属性里的值设置为javascript:如下代码
<a href="javascript:">奢侈品2</a>
//使用preventDefault()取消其默认行为
$("a").on("click",function(){
event.preventDefault();
});
