一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

分享

jQuery——jQuery基本概念

 流楚丶格念 2022-01-14

文章目錄

jQuery基本概念

學習目標:學會如何使用jQuery,掌握jQuery的常用api,能夠使用jQuery實現(xiàn)常見的效果。

為什么要學習jQuery?

【01-讓div顯示與設置內(nèi)容.html】

使用javascript開發(fā)過程中,有許多的缺點:

1. 查找元素的方法太少,麻煩。
2. 遍歷偽數(shù)組很麻煩,通常要嵌套一大堆的for循環(huán)。
3. 有兼容性問題。
4. 想要實現(xiàn)簡單的動畫效果,也很麻煩
5. 代碼冗余。

jQuery初體驗

【02-讓div顯示與設置內(nèi)容.html】

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      height: 200px;
      margin-bottom: 10px;
      background-color: #a43035;
      display: none;
    }
  </style>
  
  <!--1. 需要引入jQuery文件-->
  <script src="jquery-1.12.4.js"></script>
  <script>
    
    //2. 入口函數(shù)的標準
    $(document).ready(function(){
      //注冊事件,把on去掉,是一個方法
      $("#btn1").click(function () {
        //隱式迭代:偷偷的遍歷,jQuery會自動的遍歷,不需要我們遍歷。
        $("div").show(2000);
      });
      
      $("#btn2").click(function () {
        $("div").text("我是內(nèi)容");
      });
    });
  </script>
  
</head>
<body>
<input type="button" value="展示完美身材" id="btn1">
<input type="button" value="設置內(nèi)容" id="btn2">

<div></div>
<div></div>
<div></div>
<div></div>

</body>
</html>

優(yōu)點總結(jié):

1. 查找元素的方法多種多樣,非常靈活
2. 擁有隱式迭代特性,因此不再需要手寫for循環(huán)了。
3. 完全沒有兼容性問題。
4. 實現(xiàn)動畫非常簡單,而且功能更加的強大。
5. 代碼簡單、粗暴。

沒有對比,就沒有傷害,有了對比,處處戳中要害。

什么是jQuery?

jQuery的官網(wǎng) http:///
jQuery就是一個js庫,使用jQuery的話,會比使用JavaScript更簡單。

js庫:把一些常用到的方法寫到一個單獨的js文件,使用的時候直接去引用這js文件就可以了。(animate.js、common.js)

我們知道了,jQuery其實就是一個js文件,里面封裝了一大堆的方法方便我們的開發(fā),其實就是一個加強版的common.js,因此我們學習jQuery,其實就是學習jQuery這個js文件中封裝的一大堆方法。

jQuery的版本

官網(wǎng)下載地址:http:///download/
jQuery版本有很多,分為1.x 2.x 3.x

大版本分類:

1.x版本:能夠兼容IE678瀏覽器
2.x版本:不兼容IE678瀏覽器
1.x和2.x版本jquery都不再更新版本了,現(xiàn)在只更新3.x版本。

3.x版本:不兼容IE678,更加的精簡(在國內(nèi)不流行,因為國內(nèi)使用jQuery的主要目的就是兼容IE678

關(guān)于壓縮版和未壓縮版

jquery-1.12.4.min.js:壓縮版本,適用于生產(chǎn)環(huán)境,因為文件比較小,去除了注釋、換行、空格等東西,但是基本沒有顆閱讀性。
jquery-1.12.4.js:未壓縮版本,適用于學習與開發(fā)環(huán)境,源碼清晰,易閱讀。

jQuery的入口函數(shù)

使用jQuery的三個步驟:

1. 引入jQuery文件
2. 入口函數(shù)
3. 功能實現(xiàn)

關(guān)于jQuery的入口函數(shù):

//第一種寫法
$(document).ready(function() {

});
//第二種寫法
$(function() {

});

jQuery入口函數(shù)與js入口函數(shù)的對比

 js的入口函數(shù)執(zhí)行要比jQuery的入口函數(shù)執(zhí)行得晚一些。
1.JavaScript的入口函數(shù)要等到頁面中所有資源(包括圖片、文件)加載完成才開始執(zhí)行。
2.jQuery的入口函數(shù)只會等待文檔樹加載完成就開始執(zhí)行,并不會等待圖片、文件的加載。

jQuery對象與DOM對象的區(qū)別(重點)

1. DOM對象:使用JavaScript中的方法獲取頁面中的元素返回的對象就是dom對象。
2. jQuery對象:jquery對象就是使用jquery的方法獲取頁面中的元素返回的對象就是jQuery對象。
3. jQuery對象其實就是DOM對象的包裝集(包裝了DOM對象的集合(偽數(shù)組))
4. DOM對象與jQuery對象的方法不能混用。

DOM對象轉(zhuǎn)換成jQuery對象:

【聯(lián)想記憶:花錢 money】

var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM對象轉(zhuǎn)jQuery對象

jQuery對象轉(zhuǎn)換成DOM對象:

var $li = $(“l(fā)i”);
//第一種方法(推薦使用)
$li[0]
//第二種方法
$li.get(0)

練習:隔行變色案例

在這里插入圖片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<ul>
  <li>我是第1個li</li>
  <li>我是第2個li</li>
  <li>我是第3個li</li>
  <li>我是第4個li</li>
  <li>我是第5個li</li>
  <li>我是第6個li</li>
  <li>我是第7個li</li>
  <li>我是第8個li</li>
  <li>我是第9個li</li>
  <li>我是第10個li</li>
</ul>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    
    //就這么寫,會不會報錯,會不會有效果
    var lis = $("li");
    for (var i = 0; i < lis.length; i++) {
      if (i % 2 == 0) {
        
        // lis:jq對象
        // lis[i]:DOM對象,通過下標取出來了
        lis[i].style.backgroundColor = "pink";
      } else {
        lis[i].style.backgroundColor = "hotpink";
      }
    }
    
  });
</script>
</body>
</html>

    轉(zhuǎn)藏 分享 獻花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多

    黄片在线免费看日韩欧美| 激情五月激情婷婷丁香| 夜夜嗨激情五月天精品| 午夜资源在线观看免费高清| 日韩美女偷拍视频久久| 国产精品不卡一区二区三区四区| 日本精品中文字幕在线视频| 国产精品午夜视频免费观看| 丁香七月啪啪激情综合| 大胆裸体写真一区二区| 美女露小粉嫩91精品久久久| 日韩一区二区三区有码| 我要看日本黄色小视频| 尤物天堂av一区二区| 欧美日韩国产午夜福利| 翘臀少妇成人一区二区| 亚洲另类欧美综合日韩精品 | 久久国产精品亚州精品毛片| 在线免费国产一区二区三区| 草草视频福利在线观看| 国产精品乱子伦一区二区三区| 男女一进一出午夜视频| 国产欧美日韩综合精品二区| 一区二区三区日韩中文| 伊人久久五月天综合网| 中文字幕人妻一区二区免费| 国产女性精品一区二区三区| 最新国产欧美精品91| 久久精品久久久精品久久| 中文字幕中文字幕在线十八区| 欧美日不卡无在线一区| 在线亚洲成人中文字幕高清| 中文字幕熟女人妻视频| 色一情一伦一区二区三| 欧美性猛交内射老熟妇| 亚洲欧美黑人一区二区| 免费黄片视频美女一区| 亚洲少妇一区二区三区懂色| 精品日韩视频在线观看| 亚洲精品国产精品日韩| 日韩三级黄色大片免费观看|