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

题目1： 说说库和框架的区别？

• 库
  是一个数据仓库，里面放了各种可以利用的API，由于库的内部已经做了各种底层的封装和各种兼容实现，因此可以调用提供的API接口来实现我们需要的功能，而不需要复杂的代码和加工，因此使代码得到优化，效率提高
• 框架相当于一个模板，用来搭建一个项目的最基层的部分，框架内部可以根据不同项目的需要填入不同的内容。

框架和库的比较可以想像为:

假如我们要买一台电脑。框架为我们提供了已经装好的电脑，我们只要买回来就能用，但你必须把整个电脑买回来。这样用户自然轻松许多，但会导致很多人用一样的电脑，或你想自定义某个部件将需要修改这个框架。而库就如自己组装的电脑。库为我们提供了很多部件，我们需要自己组装，如果某个部件库未提供，我们也可以自己做。库的使用非常灵活，但没有框架方便。

题目2： jquery 能做什么？

• jquery是javascript的一个类库，说到底jquery就是javascript
• jquery主要是用来简化javascript的各种操作以及解决各种浏览器之间的兼容性
• 用jquery能办到的用javascript都能办到。

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

DOM原生对象：w3c标准用于操作文档的API.
jQuery对象：包装DOM对象产生的对象。
区别：DOM原生对象使用DOM原生对象的方法，jQuery对象使用jQuery对象的方法。
转化：
DOM原生对象转化为jQuery对象：$div = $(document.getElementsByTagName(‘div’));
jQuery对象转化为DOM原生对象：div = $div[index];

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

• bin():为一个元素绑定一个或多个事件。
• $(‘button’).bind(‘click’,function(){console.log(this)});
• $(‘p’).bind(‘mouseenter mouseleave’,function(){$(this).toggleClass(‘change’)})；
• unbind():$(‘p’)解除该元素绑定的事件。
• delegate():为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数；适用于当前或未来的元素（比如由脚本创建的新元素）。
• live():这种方法是将页面的document元素作为事件代理元素，太消耗资源，已经过时。在新版本中推荐用.on()法，即时在旧版本中，也推荐使用.delegate()方法来取代.live()方法。
• on():在选定的元素上绑定一个或多个事件处理函数，提供绑定事件处理的所有功能。

$('button').on('click',function(){
    $('.test').append('<p>新增内容'+ ($('p').length+1) +'</p>')
     console.log($('p').length)
   })

• off():用来移除on绑定的事件处理函数。

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

   $(".ct").on("click", "li", function{
        console.log($(this));
   })
   //事件绑定在父元素class为ct 上，通过事件代理点击子元素为 li 的时候触发事件

题目5：jquery 如何展示/隐藏元素？

• 通过增删class（display:none;）来实现展示/隐藏元素

.display{
         display: none;
     }
$('#btn').on('click',()=>{
     let $box2 = $('.box2');

     //method1
     if($box2.hasClass('display')){
         $box2.removeClass('display');
     }else {
         $box2.addClass('display');
     }

     //method2===method1
     // $box2.toggleClass('.display');
 });

• 通过jquery动画方法show()和hide()来实现

let $box2 = $('.box2');
$box2.hide();
$box2.show();

• 通过设置css的display属性来实现

let $box2 = $('.box2');
$box2.css('display','none');
$box2.css('display','block');

题目6： jquery 动画如何使用？

• 基础：
• 控制显示/隐藏：
• 隐藏元素: $node.show([duration ] [,easing ] [,complete ]);
• 显示元素: $node.hide([duration ] [,easing ] [,complete ]);
• 切换元素的隐藏、显示: $node.toggle([duration ] [,easing ] [,complete ]);
• 3个参数的含义：

duration:动画时长
easing:表示过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"
complete:在动画完成时执行的函数

• 渐变
• 通过淡入的方式显示匹配元素: $node.fadeIn( [duration ] [, easing ] [, complete ] )
• 通过淡出的方式隐藏匹配元素: $node.fadeOut( [duration ] [, easing ] [, complete ] )
• 调整匹配元素的透明度: $node.fadeTo( duration, opacity [, easing ] [, complete ] )
• 通过匹配的元素的不透明度动画，来显示或隐藏它们:
• $node.fadeToggle( [duration ] [, easing ] [, complete ] )
• 滑动
• .slideDown( [duration ] [, easing ] [, complete ] )
  用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式
• .slideUp( [duration ] [, easing ] [, complete ] )
  用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，display 样式属性被设置为none
• .slideToggle( [duration ] [, easing ] [, complete ] )
  用滑动动画显示或隐藏一个匹配元素
• 自定义：
• .animate( properties [, duration ] [, easing ] [, complete ] ):自己设定动画
• .stop( [clearQueue ] [, jumpToEnd ] )：暂停动画
• finish：结束动画

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

• 设置元素内部 HTML 内容：$('#box').html('<h1>Hello world</h1>');
• 获取元素内部 HTML 内容：var content = $('#box').html();
• 设置元素内部文本：$('h1').text('Hello world');
• 获取元素内部文本：var title = $('h1').text();

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

• 设置表单用户输入或者选择的内容: $('#username").value="萧雪圣";
• 获取表单用户输入或者选择的内容: var username = $('#username").value;
• 设置元素属性: $('.box').attr('color','red');$('box').attr({'color':'red','width':'100px'});
• 获取元素属性: var color = $('.box').attr('class');

题目9： 使用 jquery实现如下效果

demo68

导航代码

题目10：. 使用 jquery 实现如下效果

Tab效果

代码

题目11：实现如下效果

添加Li效果

代码

Ps:当点击按钮时使用如下数据

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