jquery DOM&事件

问答

• 说说库和框架的区别？

• 库为 Library ( 简写 Lib )，框架为 Framework。

• 库是将代码集合成的一个产品，供程序员调用。面向对象的代码组织形式而成的库也叫类库。面向过程的代码组织形式而成的库也叫函数库。在函数库中的可直接使用的函数叫库函数。开发者在使用库的时候，只需要使用库的一部分类或函数，然后继续实现自己的功能。

• 框架则是为解决一个(一类)问题而开发的产品，框架用户一般只需要使用框架提供的类或函数，即可实现全部功能。可以说，框架是库的升级版。开发者在使用框架的时候，必须使用这个框架的全部代码。

• jquery 能做什么？

• jquery可以做到存取文档元素、修改页面的展现样式、修改文档内容、对用户的交互作出反应、为文档添加动画改变、无刷新的从服务器取回数据、完成简单的js任务如迭代和数组控制。

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

• 区别：
  1 jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型；
  2 jQuery无法使用DOM对象的任何方法，DOM对象不能使用jQuery里的方法.。

• 转化方法：

• jQuery对象转成DOM对象(两种方法)：
  1 jQuery对象是一个数据对象，通过[index]的方法，如：
  var $jq = $("#id") ; //jQuery对象　　
  var dom = $jq[0]; //DOM对象
  2 jQuery本身提供，通过.get(index)方法,如：
  var $jq = $("#id"); //jQuery对象　　
  var dom = $jq.get(0); //DOM对象

• DOM对象转成jQuery对象:
  1 对于DOM对象，只需用$()把DOM对象包装起来，就可得到jQuery对象,如：
  var dom=document.getElementById("id"); //DOM对象　　
  var $jq=$(dom); //jQuery对象

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

• jquery中可以使用bind()、delegate()、live()、on()四种方法绑定事件。

• 各种方法的作用：

• bind:会给所有匹配的元素都绑定一次事件，当元素很多时性能会变差。 而且后来动态新增的元素不会被绑定。

• live:附加一个事件处理器到匹配目前选择器的所有元素，现在和未来。把 事件 和 选择的元素 作为函数的参数。有事件冒泡到document节点的时候，检查这个事件是不是 所绑定的 事件，target element能不能匹配 选择元素的 css选择器，如果两个条件都是true，处理函数执行。

• delegate:是另一种绑定事件的方式。它将事件处理函数绑定在指定的根元素上， 由于事件会冒泡，它用来处理指定的子元素上的事件。与bind不同它可以自动绑定动态添加的元素。因为事件处理函数绑定在#root上，新加的子元素事件也会冒泡到#root。性能好于.bind()只绑定一个事件处理函数，绑定速度相当快。它与live() 方法很相似，但运行速度快于live()。

• on：on()才是jQuery事件的提供者。其他的事件绑定方法都是通过.on()
  来实现的。所以推荐使用on(0

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
}
unbind: function( types, fn ) {
    return this.off( types, null, fn );
}
live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
}
die: function( types, fn ) {
    jQuery( this.context ).off( types, this.selector || "**", fn );
    return this;
}
delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
}
undelegate: function( selector, types, fn ) {
    return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
}

通过on()实现其他绑定：

//bind
$( "#id" ).bind( "click", function( e ) {} );
$( "#id" ).on( "click", function( e ) {} ); 
// delegate
$( "#id" ).delegate( "a", "click", function( e ) {} );
$( "#id" ).on( "click", "a", function( e ) {} );

*  unbind：从元素上删除一个以前附加事件处理程序。每个用.bind()

方法绑定的事件处理程序可以使用.unbind()
移除。

$('#id').unbind();
$('#id').unbind('click');//更加精确
$("#id").unbind( "click", handler );//指定阻止事件绑定的函数

var timesClicked = 0;
$( "#id" ).bind( "click", function( event ) {
alert( "The quick brown fox jumps over the lazy dog." );
timesClicked++;
if ( timesClicked >= 3 ) {
$( this ).unbind( event );
}
});//从自身内部处理程序时解除

*  off()：移除一个事件处理函数。off()

方法移除用.on()
绑定的事件处理程序。

$("p").off()//移除所有段落上的事件
$("p").off( "click", "**" )//移除所有段落上的click事件

$("body").on("click", "p", func);
$("body").off("click", "p", func);//通过传入的第三个参数，仅移除先前绑定的事件处理函数

• jquery 如何展示/隐藏元素？
• show():显示匹配的元素。

show();//直接显示
show(speed);//第一个参数显示所花费的时间
show(speed, function);//第二个参数显示完成后执行的函数

• hide():隐藏匹配的元素。

hide();//直接隐藏
hide(speed);//第一个参数隐藏所花费的时间
hide(speed, function);//第二个参数隐藏完成后执行的函数

$("#hidr").click(function () {
        $("span:last-child").hide("fast", function () {
          $(this).prev().hide("fast", arguments.callee);
});//当点击后选择最后一个元素进行隐藏，并使用递归和arguments.callee继续执行这个函数使隐藏元素的上一个元素也进行隐藏

• toggle()：显示或隐藏匹配元素。
• jquery 动画如何使用？
• 动画使用animate()方法：根据一组 CSS 属性，执行自定义动画。所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。属性值的单位像素（px）,单位em和%需要指定使用。background-color需要使用jQuery.Color插件。
• 语法1：animate(styles,[speed],[easing],[callback])， 这里第2，3，4参数是可选值，为动画执行的速度、缓动方式、完成时执行的函数
• 语法2：animate(styles,[options])，第2个参数为指定动画的额外选项，如：
  设定queue为布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始。
  设定step。指定每步动画执行后调用的回调函数。

$('li').animate({
opacity: .5,
height: '50%'
},
{
step: function() {
//todo
}
});

动画--参考
动画的完成finish()和停止stop()--参考

• 如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
• html()：获取集合中第一个匹配元素的HTML内容.不加参数时和innerHTML相似。当有参数时html(str),修改元素的innerHTML为参数值。
• text()：得到匹配元素集合中每个元素的合并文本和innerText方法类似。只能匹配到文本不能匹配标签，当有参数时text(str)，修改元素的文本为参数值。
• 如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
• val():获取匹配的元素集合中第一个元素的当前值value。val(str):设置str为元素的value
• attr(str):获取匹配的元素集合中的元素特定属性的值。attr(str，value)为元素特定属性赋值。.removeAttr()可以删除属性与JS中removeAttribute()函数相似

代码

• 使用 jquery实现如下效果参考
  
  代码1
• 使用 jquery 实现如下效果参考
  
  代码2
  问题： 点奢侈品2的时候页面跳到了顶部，可能是什么原因？如何解决
• 可能是因为a链接href指向#，可以给a链接指向链接设置为javascript:;、javascript:null、javascript:void(0)或者给a链接的点击事件执行的函数加入一个event的参数，设置event.preventDefault()取消它的默认点击事件。
• 实现如下效果参考
  
  代码3
  提示
  1.使用代理
  2.当点击按钮时使用如下数据

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'
    }
];

本博客版权归 本人和饥人谷所有，转载需说明来源