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

1.说说库和框架的区别？

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

2.jquery 能做什么？

jquery帮我们封装了常用的方法，并且具有不错的兼容性（1.12可以兼容到IE6+，当前版兼容IE9+），它封装的方法有

• 获取元素：通过类似于css选择器的方式获取元素（为了方便使用者jQuery刻意和CSS选择器使用相同的语法，几乎支持所有类型的CSS3选择器，当然也有一些其特定的选择器）
• DOM操作
• 操作属性/css
• 常用函数（如each、map等）
• 事件处理
• 动画
• Ajax
• JSONP

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

• 区别：

• 操作方法不一样：如dom对象.innerHtml 类似于 jquery对象.html

• 绑定事件不一样：addEventListener/removeEventListener类似于jquery对象的on/off

• 可以使用jquery特有的方法：如toggleClass,trigger，它们封装了一段常用代码

• jquery的代码和操作更为简便

• jquery兼容性更好

• 转化

• $(原生DOM对象) => jquery对象

• $(jquery对象)[index] => 原生DOM对象（表示：获取jquery选中的元素集合中的第index个元素，这个元素是dom对象）

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

• jquery通过on方法绑定事件

• bind、unbind、delegate和live都是jquery1.7以前的方法，现在已经废弃，被on和off代替

• bind和on都是绑定事件；

• unbind和off都是解绑事件；

• delegate和on都可以实现事件代理（让父元素代理子元素的事件）；

• live绑定事件和用.bind()来绑定事件是一样的，但.live()方法会绑定相应的事件到document元素上

• $('ul').on('click', 'li', function(e){ console.lof(this); })

5.jquery 如何展示/隐藏元素？

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

.display{ display: none; } $('#btn').on('click',function(){ var $box2 = $('.box2'); //method1 if($box2.hasClass('display')){ $box2.removeClass('display'); }else { $box2.addClass('display'); } //method2===method1 // $box2.toggleClass('.display'); });

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

var $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('

  Hello world

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

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

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

9.使用 jquery实现如下效果

代码

10.使用 jquery 实现如下效果:

代码

11.实现如下效果:

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

代码