jquery DOM&事件

1.說說庫和框架的區(qū)別煮盼？

庫：庫里面有很多方法，當你需要時就可以到庫里面拿去調(diào)用带污。
框架：就是一個模型僵控，相當于一個空殼，里面沒有內(nèi)容鱼冀，需要你自己往框架里面填充東西报破。

2.jquery 能做什么？

獲取HTML元素
操作HTML元素
操作CSS
為頁面添加動態(tài)效果
簡化常見的JavaScript任務
統(tǒng)一AJAX操作

3.jquery 對象和 DOM 原生對象有什么區(qū)別千绪？如何轉(zhuǎn)化充易？

區(qū)別：jquery無法使用DOM對象的任何方法，同理DOM對象也不能使用jQuery里的方法荸型。
轉(zhuǎn)化：

jquery 對象轉(zhuǎn)化成DOM 對象：

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

DOM 對象轉(zhuǎn)化成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:為指定的元素（被選元素的子元素）添加一個或多個事件處理程序柬脸，并規(guī)定當這些事件發(fā)生時運行的函數(shù)。使用 delegate() 方法的事件處理程序適用于當前或未來的元素（比如由腳本創(chuàng)建的新元素）毙驯。

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

(4)on:其實是將以前的綁定事件方法作了統(tǒng)一

$("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.如何設置和獲取元素內(nèi)部 HTML 內(nèi)容爆价？如何設置和獲取元素內(nèi)部文本垦巴？

<!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>

結(jié)果

8.如何設置和獲取表單用戶輸入或者選擇的內(nèi)容？如何設置和獲取元素屬性铭段？

使用.val() （括號里不包含任何參數(shù)）來獲取表單用戶輸入或者選擇的內(nèi)容骤宣；當.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>

運行結(jié)果

設置元素屬性

舉例：

<!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 >鏈接</a>
  <script>
    console.log($('#ct-img').attr('src'));
  </script>
</body>
</html>