jQuery

题目1：jQuery 能做什么？

jQuery是一个丰富的js库, 内部对js的很多复杂的方法进行了封装和加工, 比如js很多方法名很冗长, jQuery封装后方法就简单多了, 也考虑到了跨浏览器兼容问题, 这样我们用js时需要考虑的很多问题它都帮我们解决了, 这样我们使用时就比js代码方便高效
封装部分JS代码, API友好

• 方便快捷的获取DOM元素
• 动态修改页面要样式
• 动态改变DOM内容
• 事件处理
• 动画
• ajax
• JSONP

题目2：Query 对象和 DOM 原生对象有什么区别？如何转化？

• 区别:
  • DOM原生对象: W3C标准用于操作文档的API, 拥有原生对象的属性和方法
  • jQuery对象: 包装DOM原生对象后产生的对象, 拥有jQuery的属性和方法, 类数组对象
  • jQuery对象不能使用DOM对象的任何方法, DOM对象也不能使用jQuery对象的方法
• 转化方法:
  • jQuery对象转化DOM对象
    • jQuery对象是一个数组对象, 通过[index]方法

    var $v = $("#v"); //jQuery对象
    var v = $v[0]; //DOM对象
    

    • jQuery本身提供, 通过.get(index)方法

    var $v = $("#v"); //jQuery对象
    var v = $v.get(0); //DOM对象
    

  • DOM对象转化jQuery对象
    对于DOM对象, 只需要用$()把DOM对象包装起来, 就可以得到jQuery对象

    var v = document.getELementById("v"); //DOM对象
    var $v = $(v); //jQuery对象
    

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

• jQuery事件是DOM事件的封装, 同时支持自定义扩展. 在程序设计中, 事件和代理有着相似的作用: 他们提供了一种机制, 使得行为的实现方式和调用时机可以分离.
• 绑定事件: jQuery封装了很多API, 可以方便的进行事件处理; 咋吃1.7之前的版本jQuery处理十几名有多个方法, 作用各不相同, 后来统一使用 on/off方法
• bind: $(Selector).bing(event, data, function)是最直接的绑定方法, 会绑定事件类型和处理函数到DOM Element上, 这个方法是存在最久的, 而且也很好的解决了浏览器在事件处理中的兼容问题
  优点:
  • 这个方法提供了一种在各种浏览器之间对事件处理的兼容性解决方案, 非常方便简单的绑定事件到元素上
  • .cilck(), .hover().. 这些非常方便的事件绑定, 都是bind的一种简化处理方式
  • 对于利用ID选出来的元素是非常友好的, 不仅仅是很快的可以hock上去(因为一个页面只有一个ID), 而且当事件发生时, handler可以立即被执行(相对于后面的live, delegate)实现方式
    缺点:
  • 它会绑定事件到所有的选出来的元素
  • 它不会绑定到在它执行完后添加的那些元素上
  • 当元素很多时, 会出现效率问题
  • 当页面加载完的时候, 才能进行bind()
• unbind: 解绑事件的方法, 和bind()事件对应
• delegate: $(selector).delegate(childSelector,event,function)可以实现事件代理; 将事件处理函数绑定在指定的跟元素上, 由于事件会冒泡, 它用来处理指定的子元素上的事件,适用于当前或未来的元素(如由脚本创建的元素)
  • 自动绑定动态添加的元素, 因为事件处理函数绑定在#root上, 新加的子元素事件会冒泡到#root
  • 性能优于.bind(), 只绑定一个事件处理函数, 绑定速度相当快
• live: $(Selector).live(event, data, function)方法为被选元素附加一个或多个事件处理程序, 并规定这些事件发生时运行的函数
  通过live()方法添加的事件处理程序适用于匹配选择器的当前及未来的元素
• on: $(Selector).on(event, Selector, data, function)方法将事件处理程序附加到jQuery对象中当前选定的元素集。 从jQuery 1.7开始，.on（）方法提供了附加事件处理程序所需的所有功能.
• off: .off( events [, selector ] [, handler ] )方法删除.on（）附加的事件处理程序。
• 由于在新版本中bind/unbind/delegete/undelegete/live/die 都已经弃用，推荐使用on/off

使用on绑定事件, 使用事件代理的写法:

$(selector ).on( events [, selector ] [, data ], handler )

• event: 一个或多个空格分隔的事件类型或可选的命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"。
• Selector: 一个选择器字符串, 用于过滤被选中的元素中能触发事件的后代元素; 如果选择器是null或者忽略了该选择器, 那么被选中的元素总是能触发事件
• data: 当一个事件被触发时, 要传递给事件处理函数的event.data
• handler: 事件触发时, 执行的函数. 若该函数只是要执行return false, 该位置可以简写为false

<div><a class="name">123</a></div>
$('div').on("click", ".name", function(){
  console.log($(this).text())
})  // 为父元素地址下的每个a绑定点击事件, 即使这个a是新生元素

题目4：jQuery 如何展示/隐藏元素？

• .hide(duration, easing, complete): 用于隐藏元素, 没有参数时等同于设置display属性 .css('display', 'none')

  • duration: 动画持续时间
  • easing: 过渡使用哪种缓动函数, jQuery自身提供linear和swing
  • complete: 动画执行完后执行的函数

• .show(duration, easing, complete): 用于显示元素, 用法和hide类似

• .toggle(duration, easing, complete): 事用来切换元素的隐藏, 显示, 类似于toggleClass, 用法和show, hide类似

• .fadeIn( duration , easing, complete)
  通过淡入的方式显示匹配元素，参数含义和上面相同

• .fadeOut( duration , easing , complete )
  通过淡出的方式隐藏匹配元素

• .fadeTo( duration, opacity , easing, complete )
  调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果。
  第一、二个参数必须，第一个参数设置无意义时会取默认时间；第二个参数设置透明度。

• .fadeToggle( duration ,easing ,complete )
  通过匹配的元素的不透明度动画，来显示或隐藏它们，方法执行匹配元素的不透明度动画。当被可见元素调用时，元素不透明度一旦达到0，display样式属性设置为none ，所以元素不再影响页面的布局。

• .slideDown( duration , easing , complete )
  用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式

• .slideUp(duration , easing , complete )
  用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。 display 样式属性将被设置为none，以确保该元素不再影响页面布局。

• .slideToggle( duration , easing , complete )
  用滑动动画显示或隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面中，在这个元素下面的内容往下或往上滑。display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值。
  如果一个元素的display属性值为inline，然后是隐藏和显示，这个元素将再次显示inline。当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。

题目5：jQuery 动画如何使用？
.animate(properties, duration, easing, step, complete):

• properties: 一个css属性和值得对象, 动画将根据这组对象移动
• duration (default: 400)：一个字符串或者数字决定动画将运行多久。默认值: "normal"， 三种预定速度的字符串("slow", "normal", 或 "fast"或表示动画时长的毫秒数值(如：1000) ）
• easing (default: swing)：一个字符串，表示过渡使用哪种缓动函数。jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件
• step：每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
• complete：在动画完成时执行的函数

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

获取内容
$(".box").html() //获取元素内部的html内容，类似于innerHTML
$(".box").text() //获取元素内部的text文本，类似于innerText
设置内容
$(".box").html("<p>设置了一个段落</p>")//设置了元素内部的html内容,标签生效
$(".box").text("设置了一个文本")//设置了元素内部的text文本，标签不生效

text()、html() 的回调函数
上面的两个 jQuery 方法：text()、html() （以及 下边提到的val())，拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

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

设置/获取表单内容
$("#ipt").val() //获取表单的html内容
$("#ipt").val(content) //更改表单的内容

设置/获取元素属性
 .attr()
获取元素特定属性的值`.attr(attributeName)`
var title = $( "em" ).attr( "title" );
为元素属性赋值`.attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) )`
普通用法：
$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );
属性JSON形式
  $("#baid").attr({
    "href" : "http://www.baid.com.cn",
    "title" : "bai du"
  });
回调函数用法`.attr( attributeName, function(index, attr) )`
jQuery 方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
.removeAttr():  为匹配的元素集合中的每个元素中移除一个属性（attribute）
.removeAttr() 方法使用原生的 JavaScript removeAttribute() 函数,但是它的优点是可以直接在一个 jQuery 对象上调用该方法，并且它解决了跨浏览器的属性名不同的问题。
$('div').removeAttr('id');

• 创建元素
  只需要把DOM字符串传入$方法即可返回一个jQuery对象

var obj = $('<div class="test"><p><span>Done</span></p></div>');

• 添加元素
  .append(content[,content]) / .append(function(index,html))
  可以一次添加多个内容，内容可以是DOM对象、HTML string、 jQuery对象。
  如果参数是function，function可以返回DOM对象、HTML string、 jQuery对象，参数是集合中的元素位置与原来的html值
  appendTo(target):
  把对象插入到目标元素的尾部, 目标元素可以是selector, DOM对象, HTML string, 元素集合, jQuery对象
  .prepend(content[,content]) / .prepend(function(index,html))
  向对象头部追加内容，用法和append类似，内容添加到最开始
  .prependTo(target):
  把对象插入到目标元素头部，用法和prepend类似
  .before([content][,content]) / .before(function):
  在对象前面(不是头部，而是外面，和对象并列同级)插入内容，参数和append类似
  .insertBefore(target)
  把对象插入到target之前（同样不是头部，是同级）
  .after([content][,content]) / .after(function（index）):
  和before相反，在对象后面(不是尾部，而是外面，和对象并列同级)插入内容，参数和append类似
  insertAfter(target):
  和insertBefore相反，把对象插入到target之后（同样不是尾部，是同级）
• 删除元素
  .remove([Selector]):
  删除被选元素(及其子元素)
  .empty()
  清空被选择元素内所有子元素
  .detach()
  detach() 方法移除被选元素，包括所有文本和子节点。这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。
  detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。
• 包裹元素
  wrap(wrappingElement) / .wrap(function(index))
  为每个对象包裹一层HTML结构，可以是selector, element, HTML string, jQuery object
  .wrapAll(wrappingElement)
  把所有匹配对象包裹在同一个HTML结构
  .wrapInner(wrappingElement) / .wrapInner(function(index))
  用选中的元素包裹指定的HTML
  .unwrap()
  把DOM元素的parent移除
  题目8：使用 jQuery实现如下效果

地址
题目9：. 使用 jQuery 实现如下效果

地址
题目10：实现如下效果

地址
题目11：

地址