整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          關(guān)于JQuery引用及基本用法

          關(guān)于JQuery引用及基本用法

          在JQuery文件中下載,并將其引入html文件。在使用jQuery之前,我們需要到j(luò)Query的官方網(wǎng)站:“https://jquery.com/download/”

          把下載好的文件放到工程根目錄下,然后在這個根目錄下創(chuàng)建index.html文件。最后,將下載的JQuery文件引入index.html文件,其代碼如下:

          <!DOCTYPE html>
          
          <html lang="en">
          
          
          
          <head>
          
          <meta charset="UTF-8">
          
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          
          <title>Document</title>
          
          <script src="jquery-3.5.1.min.js"></script>
          
          </head>
          
          
          
          <body>
          
          </body>
          
          
          
          </html>
          
          1234567891011121314151617181920212223242526272829復(fù)制代碼類型:[html]

          通過引入script標簽,JQuery被引入到subject的subject中,subject是:

          接下來,我們將研究JQuery的基本語法,并對其進行一些介紹。

          示例1:$("div").hide();此行表示隱藏div元素;

          例子2:$(".box1").hide();這行代碼意味著class屬性隱藏在box1的元素中;

          示例3:$("#wrap").hide();這行代碼表示隱藏元素id的值為wrap;

          示例4:$("hide.box1").hide();這一行代碼意味著,隱藏帶有box1的cycle屬性的hv元素;

          從上面的例子中可以看出,JQuery語法非常簡單,只需要一個美元符號$,后面跟著一個html的元素選擇符(與我們之前學(xué)到的css選擇符高度一致),然后在后面加上JQuery的方法,例如hide(show等等)。

          無論顯示或隱藏元素時,都需要一個事件來觸發(fā)該動作,我們常用的觸發(fā)方式是鼠標點擊,比如你用鼠標點擊一個按鈕,然后頁面上就會彈出一個提示框,通過點擊來觸發(fā)效果,我們稱之為“事件”。點擊JQuery中事件的書寫方式為:$("div").click(function(){...}),此代碼意味著在div標簽被點擊之后觸發(fā)事件,具體事件內(nèi)容以函數(shù)形式寫入。除單擊事件外,JQuery還可以通過鼠標移動事件、雙擊事件、元素獲取焦點事件等方式進行學(xué)習(xí),后面我們將一一介紹,并查看JQuery如何使用。

          <head>
          
          <meta charset="UTF-8">
          
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          
          <title>Document</title>
          
          <script src="jquery-3.5.1.min.js"></script>
          
          </head>
          
          <style>
          
          .box1 {
          
          width: 100px;
          
          height: 100px;
          
          background-color: red;
          
          }
          
          </style>
          
          
          
          <body>
          
          <button id="btn1">點我隱藏元素</button>
          
          <div class="box1"></div>
          
          </body>
          
          <script>
          
          $(document).ready(function(){
          
          $("#btn1").click(function(){
          
          $(".box1").hide();
          
          })
          
          })
          
          </script>
          
          </html>
          
          1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253復(fù)制代碼類型:[html]

          在以上代碼中,我們定義了一個button元素,一個div元素,然后點擊按鈕button,這個div元素就會被隱藏起來,各位同學(xué)可以嘗試一下。在代碼的最后一部分,包含了一段script標簽,這段是JavaScript代碼,所有的JavaScript代碼都將被放置在script標簽中以執(zhí)行。

          接下來是代碼的第一句話:$(document).ready(function){...},這是JQuery的固定寫法,意思是頁面加載后立即執(zhí)行,執(zhí)行代碼被寫入function函數(shù)的方法中(即{}內(nèi))。我們已經(jīng)看到了這一方法。

          $("#btn1").click(函數(shù)){

          $(".box1").hide();

          })

          這個代碼就是我們前面提到的click事件,當單擊id值為btn1的按鈕時,會引發(fā)一個click元素的隱藏事件,click元素的名字叫做box1。

          .JQuery

          JQuery 是將 JS 的一些代碼塊進行封裝,方便使用。

          1.JQ的引入

          (1)link 導(dǎo)入

          先進入 https://www.bootcdn.cn/ 網(wǎng)站進行查找,找到后復(fù)制到一個 js 中,進行引用。

          (2)直接復(fù)制標簽

          <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

          二.JQ JS 相互轉(zhuǎn)換

          1. JQ 獲取元素

          $('.p1').eq(1).text('今天天氣真好')
              $('.p1').html('<h>天氣真熱</h>')

          2.JS 轉(zhuǎn) JQ

          $(ap1).text('天好冷')

          3. JQ 轉(zhuǎn) JS

          	var ap3=$('.p1')
              ap3[0].innerText='金地是'
              ap3.get(1).innerText='多少金幣' //get() 傳下標

          4. JQ JS 都可用

          $('ul li').each(function (){
                  console.log($(this).text());
                  // console.log(this.innerText);
                  console.log($(this).index()); //jq 獲取下標
          
              })

          三.JQ 操作 HTML 屬性

          <button>添加</button>
          <button>刪除</button>

          1. 添加 class

          //添加class
              $("button").eq(0).click(function (){
                  $("div").addClass("div1")
              })

          2. 刪除 class

          (1)removeClass

          //刪除class
              $("button").eq(1).click(function (){
                  $("div").removeClass("div1")
              })

          (2)removeAttr

          //刪除屬性和屬性值
              $("button").eq(1).click(function (){
          $("div").removeAttr("class")

          3. 修改 class

          (1)toggleclass

          //無則增 有則增
           $("button").eq(0).click(function (){
           	$("div").toggleClass("div1")

          (2)attr

          //無則增 有則改
          $("button").eq(0).click(function (){
                  $("div").attr("class","div1")
                  $("div").attr("class","div2")
              })

          4.獲取 value

          $("input").eq(0).val('666');

          四.JQ 操作 CSS 樣式

          1. 獲取盒子寬高

          (1)獲取寬

          console.log($("div").width());

          (2)獲取內(nèi)邊框加寬

          $("div").innerWidth()

          (3)獲取內(nèi)邊框,邊框外邊距和寬的寬度

          $("div").outerWidth()

          2. JQ 修改 CSS

          // jq修改css
             $("div").css("background","blue")
             $("div").css({
                 "background":"pink",
                 "width":"150px"
             })

          3.定位元素(父級元素一定要有定位)

          $(".div2").position()

          4.定位瀏覽器窗口

          $(".div2").offset()

          五. JQ 事件

          1.單擊事件

          $("div").click(function (){
                  console.log(1);
              })

          2.雙擊事件

          $("div").dblclick(function (){
                  console.log(2);
              })

          3.劃入事件

          $("div").mouseenter(function (){
                  console.log(3);
              })

          4.劃出事件

          $("div").mouseout(function (){
                  console.log(4);
              })

          5.劃入劃出事件

          $("div").hover(
                  function (){
                      console.log(3);
                  },function (){
                      console.log(5);
                  }
              )

          6.綁定事件

          $("button").click(function (){
                  $("p").on("click",function (){
                      $("p").css('background','red')
                  })
              })

          7.綁定多個事件

          $("p").on({
                   "mouseenter":function (){
                       $(this).css('background','yellow')
                   },
                   "mouseout":function (){
                       $(this).css('background','blue')
                   }
               })

          8.清除事件

          $("button").click(function (){
                  $("p").off()
              })

          六. JQ 動畫

          1. 隱藏

          $("button").eq(0).click(function (){
                  // $("div").hide(1000)
                  $("div").slideUp(1000)
          
              })

          2.顯示

          $("button").eq(1).click(function (){
                  $("div").show(1000)
                  // $("div").slideDown(1000)
              })

          3.取反

          $("button").eq(2).click(function (){
                  $("div").slideToggle(1000)
                  // $("div").slideDown(1000)
              })

          4.淡出事件

          $("button").eq(3).click(function (){
                  $("div").fadeOut(1000)
              })

          5.淡入事件

          $("button").eq(4).click(function (){
                  $("div").fadeIn(1000)
              })

          6.淡入淡出取反事件

          $("button").eq(5).click(function (){
                  $("div").fadeToggle(1000)
              })

          7.動畫效果

          $("button").eq(6).click(function (){
                  $("div").delay(100).animate({
                      "width":"130px",
                      "height":"130px",
                      "top":"50px",
                      "left":"20px",
                  })
              })

          8.停止

          $("button").eq(7).click(function (){
                  $("div").stop(1000)
              })

          附(今日份學(xué)習(xí)):

          了執(zhí)行Javascript,需要在HTML文件內(nèi)以特定的方式書寫JavaScript的代碼,JavaScript的書寫方法有多種,其執(zhí)行的流程也各不相同:

          1 <script>標簽嵌入

          此種嵌入方法無法操作<script>之后的DOM元素。因為<script>之后的DOM元素還未構(gòu)造,因此在<script>標簽內(nèi)就無法取得位于其后的DOM元素。

          2 讀取外部JavaScript文件

          此種嵌入方法可以指定defer、async屬性。defer可以推遲執(zhí)行,async可以異步執(zhí)行。

          3 onload嵌入

          此種嵌入方法在頁面讀取完后再對其執(zhí)行,所以可以對所有的DOM元素操作。

          <body onload="alert('hello')">
          window.onload=function(){alert('hello');};

          當window.onload事件觸發(fā)時,頁面上所有的DOM、樣式表、腳本、圖片、flash都已經(jīng)加載完成了。

          //window.onload不能同時編寫多個。
          //以下代碼無法正確執(zhí)行,結(jié)果只輸出第二個。
          window.onload=function(){
            alert("test1");
          };
          
          window.onload=function(){
            alert("test2");
          };
          
          //$(document).ready()能同時編寫多個
          //結(jié)果兩次都輸出
          $(document).ready(function(){ 
             alert("Hello World"); 
          }); 
          $(document).ready(function(){ 
             alert("Hello again"); 
          }); 

          window.onload和body中onload也有些許區(qū)別:

          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
              <title></title>
              <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
              <script language="javascript">
                  window.onload=haha;
                  function haha(){console.log("window.onload");}
          
                  if(document.addEventListener){
                      function DOMContentLoaded(){
                          console.log("DOMContentLoaded");
                      }
                      document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
                  }</script>
          </head>
          <body onload="console.log('bodyonload');">
                  <div id="div1">a</div>
          </body>
          </html>

          在IE10和FireFox下,結(jié)果為 :

          "DOMContentLoaded"
          "bodyonload"

          說明body中的onload會覆蓋window.onload

          在chrome下,結(jié)果為:

          DOMContentLoaded
          window.onload
          bodyonload

          然后,如果把javascript代碼移到最下面,結(jié)果又會是什么樣呢?

          chrome和IE10、FireFox的結(jié)果竟然是一樣的:

          DOMContentLoaded
          window.onload

          IE 10、Fire Fox可以理解,window.on load和body中的 on load 誰在下面就是誰覆蓋誰,只會執(zhí)行后面的那個。

          4 DOM ContentLoaded嵌入

          onload方法可能需要等待時間,而本方法可以在完成HTML解析后發(fā)生的事件,減少等待時間。

          在chrome、IE10和FireFox中,執(zhí)行結(jié)果是:DOMContentLoaded然后才是onload的輸出。所以說一般情況下,DOMContentLoaded事件要在window.onload之前執(zhí)行,當DOM樹構(gòu)建完成的時候就會執(zhí)行DOMContentLoaded事件。

          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
              <title></title>
              <script type="text/javascript" src="jquery2.js"></script>
              <script language="javascript">
                  window.onload=haha;
                  function haha(){console.log(document.getElementById("div1"));}
                  if(document.addEventListener){
                      function DOMContentLoaded(){
                          console.log("DOMContentLoaded");
                      }
                      document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
                  }
              </script>
          </head>
          <body>
              <div id="div1">a</div>
          </body>
          </html>

          如果你是個jQuery使用者,你可能會經(jīng)常使用$(document).ready();或者$(function(){}),這都是使用了DOMContentLoaded事件

          5 動態(tài)載入JavaScript文件

          5.1 使用原生js方法

          動態(tài)創(chuàng)建script標簽,并指定script的src屬性

          function loadJs(url, callback) {
              var script=document.createElement('script');
              script.type="text/javascript";
              if (typeof(callback) !="undefined") {
                  if (script.readyState) {
                      script.onreadystatechange=function() {
                          if (script.readyState=="loaded" || script.readyState=="complete") {
                              script.onreadystatechange=null;
                              callback();
                          }
                      }
                  } else {
                      script.onload=function() {
                          callback();
                      }
                  }
              }
              script.src=url;
              document.body.appendChild(script);
          }
          loadJs("test.js", function() {
              alert('done');
          });

          還可以使用同樣的原理動態(tài)加載css文件,只不過插入的的父節(jié)點是head標簽。

          5.2 使用document.write/writeln()方式

          該種方式可以實現(xiàn)js文件的動態(tài)加載,原理就是在重寫文檔流,這種方式會導(dǎo)致整個頁面重繪。

          document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");

          需要注意的是特殊字符的轉(zhuǎn)義。

          5.3 使用jQuery

          使用getScript(url,callback)方法實現(xiàn)動態(tài)加載js文件

          $.getScript('test.js',function(){
              alert('done');
          });

          -End-


          主站蜘蛛池模板: 国产色情一区二区三区在线播放| 中文字幕一区二区在线播放| 免费观看日本污污ww网站一区| 在线电影一区二区三区| 日韩一区二区三区电影在线观看 | 国产免费一区二区三区VR| 秋霞日韩一区二区三区在线观看| 偷拍精品视频一区二区三区| 国产成人高清精品一区二区三区| 欧洲精品无码一区二区三区在线播放 | 日本一区二区三区爆乳| 日本一区高清视频| 亚洲乱码一区二区三区在线观看| 国产福利微拍精品一区二区 | 日韩有码一区二区| 亚洲一区二区三区夜色| 日本一区二区三区久久| 日本一区二区免费看| 精品国产一区二区三区av片| 日产一区日产2区| 色国产在线视频一区| 国产一区二区精品久久91| 精品少妇一区二区三区视频| 久久精品无码一区二区三区免费 | 成人区精品人妻一区二区不卡| 最新中文字幕一区| 国产成人一区二区三区视频免费| 麻豆va一区二区三区久久浪| 国产精品美女一区二区视频| 精品乱码一区二区三区在线| 日韩精品一区二区三区老鸭窝| 一区三区三区不卡| 国产精品乱码一区二区三| 久久精品动漫一区二区三区| 亚洲美女高清一区二区三区| 人妻av综合天堂一区| 91福利一区二区| 91麻豆精品国产自产在线观看一区 | 日本一区二区免费看| 精品亚洲一区二区三区在线观看 | 亚洲综合无码一区二区|