jquery DOM&事件

库和框架的区别？

• 库（Library），可以理解为工具库，里面有可以直接拿来使用的方法和工具，以及可以调用的API。
• 框架（Framework），可以理解为搭好的模型架子，可以直接往里面添加内容或进行装饰。

jquery 能做什么？

操作数据,操作DOM,处理事件,处理Ajax,实现特效和动画,实现HTML模板,实现组件/主题,实现图表,实现App架构

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

• jquery对象是通过jquery选择器选择的累数组对象，而非DOM元素。
• jquery无法使用DOM对象的任何方法，DOM对象不能使用jQuery里的方法。
  jQuery对象 → 原生DOM对象：

$('.cls') //jquery对象
$('.cls')[0] //原生DOM对象

原生DOM对象 → jQuery对象：

var cls =document.querySelector(".cls");//原生DOM对象
$(cls);//jquery对象

jquery中如何绑定事件？on、off、trigger都有什么作用？使用on绑定事件使用事件代理的写法？

在jquery1.7之前的版本中jQuery处理事件有多个方法，作用各不相同，后来统一的使用on/off方法。
on用于绑定事件、off用于解绑事件、trigger用于触发事件（例如模拟click事件）
事件代理的用法如下

    $('.ct').on('click', 'li', function(){
        var str = $(this).text();
        $('.text').text(str);
    })
    $('.ct').on('click.console', 'li', function(){
        console.log($(this).text())
    })
    $('.ct').off('click.console')
// 当一个对象绑定多个同类事件的时候，可以给事件加一个命名空间（如上面的click.console），在解绑时只解绑单个事件。
    $('.ct').trigger('click');
// 触发click事件

jquery事件一览

20150425QQ20150425-2@2x.png

jquery 如何展示/隐藏元素？

• 1,操作CSS
• .css('display', 'none')直接操作CSS
• .addClass添加设置好的CSS
• 2,动画
  显示.show(speed,callback)
  隐藏.hide(speed,callback)
  切换元素的隐藏、显示.toggle(speed,callback)
  speed：可选参数；规定效果的时长。可取值：“slow”、“fast” 或毫秒。
  callback：可选参数；动作完成后所执行的函数。

jquery 动画如何使用？

.animate(style,speed,callback);
style：必须参数，定义形成动画的 CSS 属性。
speed：可选参数；规定效果的时长。可取值：“slow”、“fast” 或毫秒。
callback：可选参数；动画完成后所执行的函数。

<style>
    .box {width: 100px; height: 100px; color: red;}
 </style>
 <div class="box">Pandora</div>
<script>
  $(".box").on("click", function(){
    $(this).animate({
      width: "200px",
      height: "200px"
    }, 600, function(){
      //do something
    });
  });
</script>

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

• .text() 设置或获取所选元素的文本内容。无参数时是获取，有参数时是设置。
• .html() 设置或获取所选元素的 HTML 。无参数时是获取，有参数时是设置。

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

• .val()：设置或获取所表单的value。无参数时是获取。有参数时是设置。
• .attr()：设置或获取元素的属性。.attr("key")为获取;.attr("key","value")为设置。如需设置多个属性可以用.attr("{}")。
• .removeAttr()为删除。