jquery DOM&事件

库和框架的区别？

• 库就是提供了很多方法，相当于仓库里有各种小工具，需要什么工具的时候就直接用。
• 框架就是搭好了一个架子，大的主体已经确定，只需要往里面填充各种工具。

---

jquery 能做什么？ jquery 对象和 DOM 原生对象有什么区别？如何转化？

• jquery可以遍历HTML文本、DOM节点的操作、事件的处理、动画也以及ajax功能，让你不用考虑兼容性在更多的平台去使用它。
  特点是：轻量级（32kb）、兼容css3、跨浏览器、
• jquery 对象和 DOM 原生对象的区别是jqery对象是原生对象经过包装后的对象，它拥有的是jquery对象专属的一些方法，使用起来很方便。
• query直接使用数组的方法([索引数下标])将转化为原生DOM对象，如果使用eq方法则结果还为query对象。而原生对象转化为jquery对象只需要用$()包裹住就可以了。
  如：
• jquery对象转原生 > $(#head)[0]
• 原生对象转jquery > $(原生对象)

---

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

在jquery中可以绑定事件用如下写法：

$("button").click(function() {
    alert(1);
} );
$("button").bind('click', function(e){
    console.log(e);
    alert(2);
});
$("button").on('click', function(){
    console.log(e);
    console.log(this);
    console.log($(this));
});

• bind 为元素添加一个绑定事件 （1.7版本之后建议使用on代替bind）
• unbind 解除一个元素绑定事件 （1.7版本前使用的方法）
• delegate 相当于事件代理（可指定元素）为元素添加一个或多个绑定事件 （1.7版本之后建议用on代替）
• live 相当于使用了事件代理（对于根节点），为元素添加一个或多个绑定事件 （在1.7版本之后被废除，用on代替）
• on 在被选元素及子元素上添加一个或多个事件处理程序 （最建议使用的方法）
• off 是用来移除.on()方法添加的事件处理程序

on()的方法把上面几种方法统一了，所以现在推荐使用.on()的方法，写法为：

$( "#members" ).on( "click","li a",function( e ) {} );
这里注意子元素的位置在click之后，代表使用了事件代理

---

jquery 如何展示/隐藏元素？ jquery 动画如何使用？

• 展示元素: $(selector).show(speed,callback);
• 隐藏元素: $(selector).hide(speed,callback);
• 展示和隐藏切换: $(selector).toggle(speed,callback);
• 淡入淡出:

$(selector).fadeIn(speed,callback); //淡入
$(selector).fadeOut(speed,callback); //淡出
$(selector).fadeToggle(speed,callback); //淡入淡出切换
$(selector).fadeTo(speed,opacity,callback);  //渐变到透明度

• 滑入滑出:

$(selector).slideDown(speed,callback);  //滑入
$(selector).slideUp(speed,callback);  //滑出
$(selector).slideToggle(speed,callback); //切换

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

• jquery动画 $(selector).animate({parmas},speed,callback);

params为必选参数，是动画的css属性。speed是可选参数，规定动画效果的时长，取slow、fast、或毫秒值。classback为动画完成后所执行的函数。

---

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

• 设置或者获取HTML内容：$(selector).html()
• 设置或者获取文本内容：$(selector).text()

有参数代表设置，没有参数代表获取。

---

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

• 设置或者获取表单用户输入内容$('#input').val()
• 设置或者获取表单选择内容$('input:checked')或$(':checked')
• 设置或者获取元素属性 $("div").attr(e,d) e代表获取，d代表需要设置的属性，为空时代表获取
• 获取带有某个属性的元素$('[data-img]')或者$('[data-img="xxx“]')

---

代码题

代码1

---

代码2

• 问题： 点奢侈品2的时候页面跳到了顶部，可能是什么原因？如何解决?

主要是因为a的默认事件点击跳转，可以使用e.preventDefault()取消浏览器的默认事件（e为函数的参数）

---

代码3

---

• 本博客版权归羞涩的涩和饥人谷所有，转载请注明出处