第二十五彈-jquery基礎(chǔ)

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

  • 庫的的概念和意義是用來提供一些方法的集合，避免重復定義相同功能的函數(shù)并具有一定的模式兼容性。例如jquery
  • 框架的相對于庫更重量級一些，傾向于提供整套的解決方案，傾向于創(chuàng)造一些需要你來遵守的規(guī)則和范例。例如angular.js

2.jquery 能做什么？

jQuery 庫包含以下特性：

  • HTML 元素選取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函數(shù)
  • JavaScript 特效和動畫
  • HTML DOM 遍歷和修改
  • AJAX

HTML 元素選取 跟document.querySelectorAll()用法很相似


$("a")  返回所有的a元素
$(".category")返回所有的含有category類的元素
$("#header") 返回id為header的元素
$("ul li")  返回ul中的所有l(wèi)i
$("ul").find("li")   =$("ul li")
$("ul li").eq(0) 返回ul中的第一個li元素
  • HTML 元素操作
    text() 設(shè)置或返回所選元素的文本內(nèi)容
    html() 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標記）
    val() 設(shè)置或返回表單字段的值
    attr() 設(shè)置或返回元素的屬性
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>class25</title>
    <style>
    a.btn{
      display: inline-block;
      margin: 0 10px;
      padding: 5px;
      text-decoration: none;
      color: black;
      border: 1px solid #ccc;
      border-radius: 3px;

    }
    </style>
  </head>
  <body>
    <ul class="pannel">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <a href="" class="btn">點我</a>
    <form action="#">
      <ul>
        <li>用戶名</li>
        <li><input type="text" name="name"></li>
      </ul>
    </form>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
  <script>
    $(".pannel li").text() //123
    $(".pannel li").html()  //1
    $(".pannel li").text("123")  //[<li>?123?</li>,<li>?123?</li>,<li>?123?</li>?]
    $(".pannel li").html("<a href=''>這是一個鏈接</a>")
    $("a").attr("class") //btn
    $("a").attr("class",$("a").attr("class")+" hehe")   //class="btn hehe"
    $("input").val("xiaohan")  //設(shè)置input元素值
    $("input").val()             //獲取input元素值
</script>
  </body>
</html>
  • CSS 操作
$("a").css("background-color","#ccc")  //直接給元素設(shè)置樣式
//添加和移除CSS
$("a").removeClass("btn")
$("a").removeClass()
$("a").addClass("btn")

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

DOM元素是用原生js獲取的，jquery元素是利用jquery選擇器獲取的
jquery ->DOM ：jquery [0]和jquery.get(0);
DOM->jquery :$(DOM)

4.jquery中如何綁定事件？bind、unbind、delegate、live、on、off都有什么作用？推薦使用哪種？使用on綁定事件使用事件代理的寫法？

事件的綁定：
第一種方法： 直接使用關(guān)鍵字綁定 $(...).click(handler(e))、$(...).keydown(handler(e)) 等

click 鼠標單擊
dbclick 鼠標雙擊
** keydown** 鍵盤按下
** keypress** keypress 事件與 keydown 事件類似。當按鈕被按下時，會發(fā)生該事件
** keyup** 鍵盤彈起
** mouseover ** 不論鼠標指針穿過被選元素或其子元素，都會觸發(fā) mouseover 事件。與mouseout合用
** mouseenter ** 只有在鼠標指針穿過被選元素時，才會觸發(fā) mouseenter 事件。與mouseleave合用
** mouseout ** 不論鼠標指針離開被選元素還是任何子元素，都會觸發(fā) mouseout 事件
** mouseleave** 只有在鼠標指針離開被選元素時，才會觸發(fā) mouseleave 事件。
** change** 當用于 select 元素時，change 事件會在選擇某個選項時發(fā)生。當用于 text field 或 text area 時，該事件會在元素失去焦點時發(fā)生。
** scroll ** 當用戶滾動指定的元素時，會發(fā)生 scroll 事件
** focus** 當元素獲得焦點時，發(fā)生 focus 事件

** blur ** 當元素失去焦點時，發(fā)生 focus 事件
** resize ** $("window").resize(function(e){}) 當瀏覽器窗口大小改變時觸發(fā)
** hover ** 跟CSS中的hover一樣 只不過觸發(fā)函數(shù)要寫兩個

  • mouseover和mouseenter 的區(qū)別
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <style>
    .div{
      width: 500px;
      margin-bottom: 20px;
      padding: 1px;
      background-color: #ccc;
      vertical-align: middle;
      text-align: center;
    }
    .div h2{
      background-color: white;
      display: inline-block;
    }
  </style>
  <body>
      <p>不論鼠標指針穿過被選元素或其子元素，都會觸發(fā) mouseover 事件。</p>
      <p>只有在鼠標指針穿過被選元素時，才會觸發(fā) mouseenter 事件。</p>
      <div class="div over">
        <h2>被觸發(fā)的 Mouseover 事件<span></span></h2>
      </div>
      <div class="div enter">
        <h2>被觸發(fā)的 Mouseenter 事件<span></span></h2>
      </div>
      <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
      <script type="text/javascript">
      $(function(){
        var x=0;
        var y=0;
        $(".over").mouseover(function(e){
          $(this).find("span").text(++x);
        });
        $(".enter").mouseenter(function(e){
          $(this).find("span").text(++y);
        });
      });

      </script>
  </body>
</html>
Paste_Image.png
  • mouseout 和mouseleave的區(qū)別
      <p>不論鼠標指針離開被選元素還是任何子元素，都會觸發(fā) mouseout 事件。</p>
      <p>只有在鼠標指針離開被選元素時，才會觸發(fā) mouseleave 事件。</p>
      <div class="div over">
        <h2>被觸發(fā)的 Mouseout次數(shù) <span></span></h2>
      </div>
      <div class="div enter">
        <h2>被觸發(fā)的 Mouseleave次數(shù)<span></span></h2>
      </div>
      <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
      <script type="text/javascript">
      $(function(){
        var x=0;
        var y=0;
        $(".over").mouseout(function(e){
          $(this).find("span").text(++x);
        });
        $(".enter").mouseleave(function(e){
          $(this).find("span").text(++y);
        });
      });
Paste_Image.png
  • hover 的用法
$('.btn').hover(function () { $(this).addClass('hover');}, function () { $(this).removeClass('hover');});

第二種方法：使用 綁定事件函數(shù)
$(...).on( eventType,handler(e));

bind、unbind、delegate、live、on、off都有什么作用？推薦使用哪種？使用on綁定事件使用事件代理的寫法？

  • bind( events,handler(e)) 為元素逐一綁定事件處理函數(shù)
  • unbind( events) 為元素解綁事件函數(shù)
  • delegate( selector, events, handler(e) ) 事件代理，當元素下面的selector元素觸發(fā)事件執(zhí)行
  • .undelegate( selector, events) 解綁事件代理
  • live( events,handler(e)) 事件代理 ，當事件冒泡到document元素時執(zhí)行，
  • on(events,handler(e)) 為元素逐一綁定事件處理函數(shù)
  • on(events,selector,handler(e)) 事件代理 當元素下面的selector元素觸發(fā)事件執(zhí)行
  • 另外值得一提的是 所有的事件綁定函數(shù) 在1.4版本以后都支持傳入多個event
    推薦使用on函數(shù)
    on既可以為元素逐一綁定事件，又可以使用事件代理
    live函數(shù)在1.7版本以前就過時了（但百度提供的在1.9才不能使用，可能是做了兼容），效率又不高。
    delegate函數(shù)也逐漸使用 on函數(shù)來替代，現(xiàn)在仍然可以用，但不推薦

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

  • hide(speed,callback); //顯示
  • show(speed,callback); //隱藏
  • toggle(speed,callback); //切換
    其中speed 代表執(zhí)行時間，可以是 slow fast normal 三個字符串也可以是毫秒值
    callback是完成后的調(diào)用函數(shù)
  <style>
    .box{
      float: left;
      background-color: #ccc;
      margin-right: 10px;
      padding: 0 5px;
      display: none;
    }
  </style>
  <body>
      <button id="show">show</button>
      <button id="hide">hide</button>
      <button id="toggle">toggle</button>
     <div class="box">hello</div>
     <div class="box">world!</div>
     <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
      <script type="text/javascript">
      $(function(){
        $("#show").on("click",function (){
          $(".box").first().show("fast",function showNext(){
            $(this).next(".box").show("fast",showNext);

          });
        });
        $("#hide").on("click",function(){
          $(".box").last().hide("fast",function hideNext(){
            $(this).prev(".box").hide("fast",hideNext);

          })
        });
        $("#toggle").on("click",function(){
          $(".box").toggle("slow");
        })
      })
      </script>
Paste_Image.png

6.jquery 動畫如何使用？

animate({params},speed,callback);
params 代表css屬性集合
speed 代表 動畫執(zhí)行時間，可以是slow fast normal 三個字符串也可以是毫秒值
callback 是回調(diào)函數(shù)

      <script type="text/javascript">
      $(function(){

        $("#animate").on("click",function(){
          $(".box").animate(
            {
              "margin-left":"100px",
              width: "200px",
              height: "200px",
            },"fast",function(){
              $(".box").animate(
                {
                  "margin-left" :"10px",
                  width: "100px",
                  height: "100px"
                },"fast"
              );
            });
        })
      })
      </script>
Paste_Image.png

7.如何設(shè)置和獲取元素內(nèi)部 HTML 內(nèi)容？如何設(shè)置和獲取元素內(nèi)部文本？

text() 設(shè)置或返回所選元素的文本內(nèi)容,設(shè)置文本傳入字符串參數(shù)
html() 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標記）設(shè)置html傳入字符串參數(shù)

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

  • 獲取表單輸入的內(nèi)容
    $("#name").val();
  • 獲取表單選擇的內(nèi)容
    <select class="" name="year">
        <option value="2015">2015年</option>
        <option value="2016">2016年</option>
      </select>
$("select option:selected").text()  //2015年 獲取選中文本
$("select").val()             //2015 獲取選中的值
  • 設(shè)置和獲取元素屬性
    $(selector).css("background-color"); //獲取樣式
    $(selector).css("background-color","#ccc") //設(shè)置樣式
    $("input").attr("placeholder","hello") //設(shè)置屬性
    $("input").attr("placeholder") //獲取屬性

代碼題：
代碼

本教程版權(quán)歸小韓同學和饑人谷所有，轉(zhuǎn)載須說明來源

參考文檔：
饑人谷課件-jquery基礎(chǔ)
饑人谷課件-jquery基礎(chǔ)2
事件綁定：參考自jquery中文API
常用的事件：參考自w3c事件

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • (續(xù)jQuery基礎(chǔ)(1)) 第5章 DOM節(jié)點的復制與替換 （1）DOM拷貝clone() 克隆節(jié)點是DOM的常...
    凜0_0閱讀 1,528評論 0贊 8
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計者無需花費時間糾纏JS復雜的高級特性。 1....
    LaBaby_閱讀 1,513評論 0贊 2
  • 1.幾種基本數(shù)據(jù)類型?復雜數(shù)據(jù)類型?值類型和引用數(shù)據(jù)類型?堆棧數(shù)據(jù)結(jié)構(gòu)? 基本數(shù)據(jù)類型：Undefined、Nul...
    極樂君閱讀 5,891評論 0贊 106
  • 十二月的到來，伴隨校運會。 所有班級運動健將踴躍而出，他們拼搏，流下汗水，突破自己，贏得勝利！ 而我，也成為了其中...
    爬梯爬梯野閱讀 206評論 6贊 1
  • 不管是學習還是達成某一個成果，我們都需要注意以下三點：目標>方法>行動。 目標，其實行動的一個源動力，是“明燈”。...
    Freedom_財商教育閱讀 574評論 0贊 3

友情鏈接更多精彩內(nèi)容