jQuery选择器_Dom操作_样式_事件处理_动画

jQuery 能做什么？

jQuery 是一个 JavaScript 库，它提供了一些方便使用的 API，能让一些繁复的 JavaScript 工作变得简单，比如：HTML 文档元素的遍历和操作、事件的处理、动画效果、Ajax 请求等。jQuery 将这些功能都封装起来，并且这些功能都是跨浏览器的，让你不用再操心那些细节，不用为浏览器兼容性发愁，轻松愉快的完成你的 web application.

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

jQuery对象是一个类似数组的对象，在jQuery对象中无法使用DOM对象的任何方法，DOM对象也不能使用jQuery中的方法。

• 将jQuery对象转化为DOM对象：
• 通过[index]的方法得到响应的DOM对象。如$('#content')[0]是一个DOM对象相
• 通过get(index)方法得到相应的DOM对象。如$('#content').get[0]
• DOM对象转化为jQuery对象：
• 对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。

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

• 可以直接使用.click( handler(eventObject) )的形式来为jQuery对象绑定事件。
• .bind( eventType [, eventData ], handler(eventObject) )
  bind() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。
• $(selector).unbind(event,function,eventObj)
  unbind() 方法移除被选元素的事件处理程序。该方法能够移除所有的或被选的事件处理程序，或者当事件发生时终止指定函数的运行。该方法也可以通过 event 对象取消绑定的事件处理程序。该方法也用于对自身内部的事件取消绑定（比如当事件已被触发一定次数之后，删除事件处理程序）。
• $(selector).delegate(childSelector,event,data,function)
  delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
• $(selector).live(event,data,function)
  live() 方法为被选元素添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。通过 live() 方法添加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。live() 方法在 jQuery 版本 1.7 中被废弃，在版本 1.9 中被移除。请使用 on() 方法代替。
• jQueryObject.on( events [, selector ] [, data ], handler )
  jQueryObject.on( eventsMap [, selector ] [, data ] )
  on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

参数	描述
events	String类型一个或多个用空格分隔的事件类型和可选的命名空间，例如"click"、"focus click"、"keydown.myPlugin"。
eventsMap	Object类型一个Object对象，其每个属性对应事件类型和可选的命名空间(参数events)，属性值对应绑定的事件处理函数(参数handler)。
selector	可选/String类型一个jQuery选择器，用于指定哪些后代元素可以触发绑定的事件。如果该参数为null或被省略，则表示当前元素自身绑定事件(实际触发者也可能是后代元素，只要事件流能到达当前元素即可)。
data	可选/任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。
handler	Function类型指定的事件处理函数。

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

• jQueryObject.off( [ events [, selector ] [, handler ] ] )
  jQueryObject.off( eventsMap [, selector ] )
• off()函数将会移除当前匹配元素上为后代元素selector绑定的events事件的事件处理函数handler。
• 如果省略参数selector，则移除为任何元素绑定的事件处理函数。
• 参数selector必须与通过on()函数添加绑定时传入的选择器一致。
• 如果省略参数handler，则移除指定元素指定事件类型上绑定的所有事件处理函数。
• 如果省略了所有参数，则表示移除当前元素上为任何元素绑定的任何事件类型的任何事件处理函数。

推荐使用on和off，on绑定事件使用事件代理的写法:
$('ul').on('click','li',function(){代理的绑定事件})

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

函数	描述
.show([speed], [callback])	显示元素
.hide([speed], [callback])	隐藏元素
.toggle([speed], [callback])	显示隐藏元素，隐藏显示元素
.fadeIn([speed], [callback])	淡入显示隐藏元素
.fadeOut([speed], [callback])	淡出隐藏显示元素
.fadeToggle([speed], [callback])	淡入淡出的显示隐藏元素，隐藏显示元素
.fadeTo(speed, opacity，[callback])	淡入淡出效果设置为给定的不透明度
.slideUp([speed], [callback])	以滑动的方式隐藏显示的元素
.slideDown([speed], [callback])	以滑动的方式隐藏显示的元素

speed：规定速度，取值：'slow', 'normal', 'fast'或毫秒
callback：显示或隐藏后执行的函数
opacity：透明度（0~1）

题目5： jQuery 动画如何使用？

jquery动画可使用.animate()方法；
(selector).animate({styles},speed,easing,callback)

• 必须参数 styles 参数定义形成动画的 CSS 属性。
• 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
• 可选的 easing 可选。规定在动画的不同点中元素的速度。默认值-
  是"swing"。"swing" - 在开头/结尾移动慢，在中间移动快。"linear" - 匀速移动
• 可选的 callback 参数是动画完成后所执行的函数名称。

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

$(selector).html(HTMLString)
$(selector).html()
$(selector).text(textString)
$(selector).text()

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

$(selector).val(string)
$(selector).val()
$(selector).attr(attributeName, attributeValue)
$(selector).attr(attributeName)

• 设置disabled和checked等这些只添加属性名就能生效的属性时，应该使用prop方法，如$('input').prop('disabled', true)。注意property与attribute区别。
• 对于单选、多选、下拉框
  $(':radio[value=he]').prop('checked', true)等价于$(':radio[name=username]').val(['he'])

1
1
1
1
1
1
11
1
1
1
1
1
1
1
1
1