mission-29(jQuery)

Q1.jQuery 能做什么？

1.方便快捷获取DOM元素
如果使用纯JavaScript的方式来遍历DOM以及查找DOM的某个部分编写很多冗余的代码，而使用jQuery只需要一行代码就足够了。例如，找到所有应用了.content class样式的div中所有的P标签，只需要下面的一行代码：

 $('div.content').find('p');
 

2.动态修改页面样式
使用jQuery我们可以动态的修改页面的CSS即使在页面呈现以后。jQuery仍然能够改变文档中某个部分的类或者个别的样式属性。例如，找到页面所有的ul标签的第一个li子标签，然后为它们增加名为active的样式，代码如下：

 $('ul > li:first').addClass('active');
 

3.动态改变DOM内容
使用jQuery我们可以很容易地对页面DOM进行修改，例如，为ID为"container"的元素添加一个链接：

 $('#container').append('more');
 

4.响应用户的交互操作
jQuery提供了截获形形色色的页面事件（比如用户单击某个链接）的适当方式，而不需要使用事件处理程序拆散HTML代码。此外，它的事件处理API也消除了经常困扰Web开发人员浏览器的不一致性。

 $('button.show-details').click(function() {
 $('div.details').show();
 });
 

上面的代码表示：为使用的.show-details样式的button元素添加一个click事件，事件就是：显示使用.details样式的DIV。

5.为页面添加动态效果
　　jQuery中内置的一批淡入、擦除之类的效果，以及制作新效果的工具包，为此提供了便利。

 $(function () {
 $("#btnShow").click(function () {
 $("#msubject").hide("slow");
 });
 });
 

6.统一Ajax操作
jQuery统一了多种浏览器的Ajax操作，使得开发人员更多的专注服务器端开发。

 function (data, type) {
 //对Ajax返回的原始数据进行预处理
 return data // 返回处理后的数据
 }
 

7.简化常见的JavaScript任务。
　　除了这些完全针对文档的特性之外，jQuery也改进了对基本的JavaScript数据结构（例如迭代和数组操作等）。

 $.each(obj, function(key, value) {
 total += value;
 });
 

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

联系：
　　1、jQuery对象：通过jQuery包装DOM对象后产生的对象；
　　2、两者之间可以相互转换；
区别：
　　1、jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型，两者不等价；
　　2、jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法. 乱使用会报错。

例如：
　　$("#id").html();
　　document.getElementById("id").innerHTML;
　　意思是指：获取ID为id的元素内的html代码。这两段代码结果相同，但中间的取值过程不同。
　　即：$("#id").innerHTML、document.getElementById("id").html()之类的写法都是错误的。

相互转换：
　　jQuery对象转成DOM对象---两种转换方式：[index]和.get(index)
　　1、jQuery对象是一个数据对象，通过[index]的方法
　　如：var $v = $("#v") ; //jQuery对象
　　var v = $v[0]; //DOM对象
　　alert(v.checked) //检测这个checkbox是否被选中
　　2、jQuery本身提供，通过.get(index)方法
　　如：var $v = $("#v"); //jQuery对象
　　var v = $v.get(0); //DOM对象
　　alert(v.checked) //检测这个checkbox是否被选中

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

需要注意：jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法. 乱用会影响代码执行。

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

（1）绑定事件

 //第一种 ：一般的简单笼统绑定事件
 $(",ct").on("click",function(){
 console.log(1)
 })
 //第二种：事件代理 ,下面函数里面的this指的是当前点击的li节点
 $("ul").on("click",li,function(){
 console.log(1)
 })
 //第三种：为事件命名
 $("ul").on("click.haha",li,function(){
 console.log(1)
 })
 //第四种 ：只执行一次绑定事件
 $(",ct").one("click",function(){
 console.log(1)
 })
 

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

老版本jQuery:

bind：

绑定事件方法 ，只能把事件绑定在页面上存在的元素，静态绑定

unbind：

解绑事件方法 ，和bind()事件绑定对应

delegate ：

只能动态绑定事件,根元素为父元素，把事件绑定到这个父元素的后代元素上，并且可以过滤要绑定的后代元素，最重要的是可以对未来的后代元素添加绑定事件

live：

动态绑定，旧版本jQuery应优先使用delegate动态绑定事件，因 为在pc端：（1）使用live绑定事件会降低代码处理性能（2）不支持链式写法等限制，（3）$(document).unbind("click") 会移除所有通过 .live() 添加的 click 事件!
移动端：也会有很多的限制，移动端click 事件不会冒泡到文档 body 上，并且如果不满足如下情况之一，就不能和 .live() 方法一起使用：
（1）使用原生的可被点击的元素，例如, a 或 button，因为这两个元素可以冒泡到 document。
（2）在 document.body 内的元素使用 .on() 或 .delegate() 进行绑定，因为移动 iOS 只有在 body 内才能进行冒泡。
（3）需要 click 冒泡到元素上才能应用的 CSS 样式 cursor:pointer (或者是父元素包含 document.documentElement)。但是依需注意的是，这样会禁止元素上的复制/粘贴功能，并且当点击元素时，会导致该元素被高亮显示。

 //bind
 //eventType :事件 eventData ：传入处理函数的数据（对象） handler：处理函数 preventBubble ：阻止冒泡，默认为true events ：传入的一个对象，包含事件及处理函数
 .bind( eventType [, eventData ], handler(eventObject) )
 .bind( eventType [, eventData ], preventBubble )
 .bind( events )
 //unbind
 $('#foo').unbind();//解绑$("#foo")上所有绑定事件
 $('#foo').unbind('click');//只解绑$("#foo")上的单击事件
 $( "#foo" ).unbind( "click", handler );//只解绑$("#foo")上单击事件处理函数是handler的事件，注意这里的handler是函数的引用名称
 $( "#foo" ).unbind( "click.myEvents" );//只解绑$("#foo")上单击事件的名称是myEvents的事件
 $( "#foo" ).unbind( ".myEvents" );//直接解绑事件名称为myEvents的事件
 //在事件绑定里面达到某个条件时，解除自身绑定
 var timesClicked = 0;
 $( "#foo" ).bind( "click", function( event ) {
 alert( "The quick brown fox jumps over the lazy dog." );
 timesClicked++;
 if ( timesClicked >= 3 ) {
 $( this ).unbind( event );
 }
 });
 //delegate
 parent.delegate( selector, eventType, handler(eventObject) )
 parent .delegate( selector, eventType, eventData, handler(eventObject) )
 parent .delegate( selector, events )
 

新版本jQuery:
on：绑定事件方法（可以静态绑定，也可以使用事件委托动态绑定事件，根元素是父元素或子元素）
off：解绑事件方法（和on对应起来实现解绑事件）

 //on
 .on( events [, selector ] [, data ], handler(eventObject) )
 .on( events [, selector ] [, data ] )
 //off
 .off( events [, selector ] [, handler(eventObject) ] )
 .off( events [, selector ] )
 

推荐使用新版jQuery绑定事件和解除事件，因为新版绑定事件可以实现老板.bind()，.delegate()，.live()三个绑定事件的功能，并且性能高效率高，没有什么限制

 $("ul").on("click.haha",li,function(){
 console.log(1)
 })
 

Q4：jQuery 如何展示/隐藏元素？

http://js.jirengu.com/wedicujafa/1/edit

Q5： jQuery 动画如何使用？

http://js.jirengu.com/qowucemevu/1/edit?html,output

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

http://js.jirengu.com/jujonadaji/1/edit?html,console,output

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

.val()设置和获取表单用户输入或者选择的内容
.arr()设置和获取元素属性

Q8： 使用 jQuery实现如下效果

http://js.jirengu.com/bizififucu/1/edit?html,css,js,output

Q9： 使用 jQuery 实现如下效果

http://js.jirengu.com/qisogerale/1
http://js.jirengu.com/fijoxejomo/1/edit

Q10:加载更多

http://js.jirengu.com/faxuziveqi

Q11: tab切换

http://js.jirengu.com/sanigayeze/1/edit?html,css,js,output
http://js.jirengu.com/ticicowore/1/edit?html,css,js,output
http://js.jirengu.com/caremunolu/1/edit?html,css,js,output
http://js.jirengu.com/noqukulaha/1/edit