进阶14-jQuery选择器、DOM操作、样式、事件处理

题目1： jQuery 能做什么？

选择网页的元素
改变结果集
元素的操作：取值和赋值
元素的操作：移动、复制、删除、创建
工具方法
事件操作
特殊效果
AJAX

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

区别：

• 在控制台中输入typeof 符号是一个函数
  
  

• 在控制台使用jQuery与DOM都可以选择相同的元素但却不相等
  因为jQuery选择元素时候对元素进行了封装变为了jQuery元素和原生的DOM元素不同

  
  
  

• jQuery和DOM选择元素的时候各自只能用各自的方法，两者不能混用
  例如：

  
  
  
  
  
  
  
  
  

  转换方法：

• jQuery转换为DOM
  以上图的HTML为例：
  $('#container')
$('#container')[0]
  在jQuery对象后面加一个[]和下标
• DOM转换为jQuery
  document.queryCommandState('#container')
$(document.queryCommandState('#container'))
  在整体DOM对象外加一个$()

• 如果想用jQuery选择其中某一个对象的时候在结尾处加eq和下标

  
  
  
  

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

.on( events [,selector ] [,data ], handler(eventObject) )
在选定的元素上绑定一个或多个事件处理函数。
$("p").on("click", function(){
alert( $(this).text() );
});
事件代理写法：
$('ul').on('click', 'li', function() {
console.log($(this).text());
});
事件代理例子：
效果

.off( events [, selector ] [, handler ] )
移除一个事件处理函数
$('.box li').off('click')

.trigger( eventType [, extraParameters ] )
根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为
$('#fo').on('click', function() {
console.log($(this).text())
});
$('#fo').trigger('click')

.bind( eventType [, eventData ], handler(eventObject) )
为一个元素绑定一个事件处理程序。
在jQuery 3.0中，.bind()已被标记为弃用。从jQuery 1.7开始，.on() 方法是将事件处理程序绑定到文（document）的首选方法。所以我们不建议使用该方法。对于早期版本，.bind()方法用于直接附加一个事件处理程序到元素上。处理程序附加到jQuery对象中当前选中的元素，所以，在.bind()绑定事件的时候，这些元素必须已经存在。对于更为灵活的事件绑定，可以查看.on()中事件委派的描述。
$('#foo').bind('click', function() {
alert('User clicked on "foo."');
});

.unbind( [eventType ] [, handler(eventObject) ] )
从元素上删除一个以前附加事件处理程序，用.bind()方法绑定的事件处理程序可以使用.unbind()移除.
在jQuery 3.0中，.unbind()已被标记为弃用。从jQuery 1.7开始，它已经被.off()方法取代。所以不建议使用该方法。
$('#foo').unbind('click');

.delegate( selector, eventType, handler(eventObject) )
函数，基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素。
在jQuery 3.0中，.delegate()已被标记为弃用。从jQuery 1.7开始，它已经被.on()方法取代。
$("table").delegate("td", "click", function() {
$(this).toggleClass("chosen");
});

.live( events, handler(eventObject) )
附加一个事件处理器到匹配目前选择器的所有元素，现在和未来
从jQuery1.7开始， .live() 方法已经过时了。请使用.on()附加事件处理程序。
$("a").live("click", function(event){
event.preventDefault();
});

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

• 隐藏元素：
  .hide([duration][,easing][,complete])
  没有参数的时候等同于直接设置display属性

• 展示元素：
  .show([duration][,easing][,complete])

• 显示或隐藏匹配元素
  .toggle( [duration ] [, complete ] )

duration：动画持续多久
easing：表示过渡使用哪种缓动函数，jQuery自身提供“linear”和“swing”
complete：在动画完成时执行的函数

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

.animate( properties [, duration ] [, easing ] [, complete ] )
properties：样式的属性
使用实例：
代码
效果

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

设置元素内部HTML内容

获取元素内部HTML内容

设置元素内部文本

设置元素内部文本

获取元素内部文本

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

获取输入内容

设置输入内容

获取属性

设置属性

题目8：侧导航

效果
代码

题目9：导航

效果
代码

题目10：加载更多

效果
代码

题目11：tab

效果
代码

额外笔记部分：
api：http://www.css88.com/jqapi-1.9/
jQuery网站：http://youmightnotneedjquery.com/
jQueryDOM操作实验：
http://js.jirengu.com/vanaholepo/2/edit
事件绑定例子：
例1：http://js.jirengu.com/wiqusovipe/3/edit
toggle实验：
http://js.jirengu.com/zoxuwavibe/2/edit
百叶窗实验：
http://js.jirengu.com/muhedekebi/1/edit?html,output
tab上下浮动：
http://js.jirengu.com/tudasiviqu/2/edit