jquery DOM&事件

作者: 饥人谷_徐小坤 | 来源:发表于2016-10-14 15:22 被阅读0次

jquery DOM&事件
jquery DOM&事件
jquery DOM&事件
jquery DOM&事件
jQuery、DOM&事件
jquery DOM&事件
jquery DOM&事件
jquery DOM&事件
jQuery DOM&事件
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绑定事件使用事件代理:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jquery</title>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
</head>
<body>
  <div id="header">头部</div>
  <div class="ct">
    <div class="inner">inner1</div>
    <div class="inner">inner2</div>
    <div class="inner">inner3</div>
  </div>
  <button class="btn1">添加最后</button>
  <button class="btn2">添加最前</button>

  <script>
    $('.btn1').on('click', function(){
      $('.ct').append('<div class="inner">inner...</div>');
    });
    $('.btn2').on('click', function(){
      $('.ct').prepend('<div class="inner">inner...</div>');
    });
  </script>
</body>
</html>

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 内容？如何设置和获取元素内部文本？

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jquery</title>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
</head>
<body>
  <div id="header">头部</div>
</body>
</html>

结果

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

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

获取元素属性

举例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jquery</title>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
</head>
<body>
  <div id="header">头部</div>
  ![](https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png)

  <script>
    console.log($('#ct-img').attr('src'));
  </script>
</body>
</html>

运行结果

设置元素属性

举例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jquery</title>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
</head>
<body>
  <div id="header">头部</div>
  ![](https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png)
  <a href="http://www.jirengu.com">链接</a>
  <script>
    console.log($('#ct-img').attr('src'));
  </script>
</body>
</html>

结果