jquery DOM&事件

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

• 库：库里面有很多方法，当你需要时就可以到库里面拿去调用。
• 框架：就是一个模型，相当于一个空壳，里面没有内容，需要你自己往框架里面填充东西。

2.jquery 能做什么？

• 获取HTML元素
• 操作HTML元素
• 操作CSS
• 为页面添加动态效果
• 简化常见的JavaScript任务
• 统一AJAX操作

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

• 区别：jquery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法。
• 转化：

jquery 对象转化成DOM 对象：

var $a = $("#header");
var a = $a[0];

DOM 对象转化成jquery 对象：

var a = document.getElementById("header");
var $a = $(a);

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

• 事件绑定：

$('button').on('click', function(){
  console.log($(this));
});

(1)bind()向匹配元素添加一个或多个事件处理器，绑定单个事件的使用方法：

$(selector).bind(event,data,function(){});

(2)live:向当前或未来的匹配元素添加一个或多个事件处理器，绑定单个事件的使用方法：

$(selector).live(event,data,function(){});

(3)delegate:为指定的元素（被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

$(selector).delegate(childSelector,event,data,function(){});

(4)on:其实是将以前的绑定事件方法作了统一

$("div").on("click", "p", function(){
    alert($(this).text());
});

• 推荐使用on()
• 使用on绑定事件使用事件代理:

  
  
  


  
头部
  

    
inner1
    
inner2
    
inner3
  
  添加最后
  添加最前

  

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

• 展示：

$(".btn1").on("click", function(){
  $("#ct").show();
});

• 隐藏：

$(".btn2").on("click", function(){
  $("#ct").hide();
});

6.jquery 动画如何使用？

$(".btn").on("click", function(){
  $("#ct").animate({width: 100px});
});

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

  
  
  


  
头部

结果

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

使用.val() （括号里不包含任何参数）来获取表单用户输入或者选择的内容；当.val()括号里面有值时则是设置匹配的元素集合中每个元素的值。
使用.atrr() （括号里为属性名时）可获取元素的属性；

获取元素属性

举例：

  
  
  


  
头部
  ![](https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png)

  

运行结果

设置元素属性

举例：

  
  
  


  
头部
  ![](https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png)
  链接
  

结果