學習jQuery基礎語法,並通過一個案例引出jQuery的核心

来源:https://www.cnblogs.com/chenyingying0/archive/2020/02/16/12316910.html
-Advertisement-
Play Games

jquery是一個快速、小巧,功能強大的javascript函數庫。 jquery主要用來替代原生的javascript,簡化代碼。 前端最頭疼的就是相容:IE6/7/8相容的最高版本是jQuery1.9.1 jQuery的操作在一個類中,不會污染頂級變數 基本不用考慮瀏覽器的相容性 支持鏈式操作方 ...


jquery是一個快速、小巧,功能強大的javascript函數庫。

jquery主要用來替代原生的javascript,簡化代碼。

前端最頭疼的就是相容:IE6/7/8相容的最高版本是jQuery1.9.1

 

 

jQuery的操作在一個類中,不會污染頂級變數

基本不用考慮瀏覽器的相容性

支持鏈式操作方式

隱式迭代

行為層和結構層分離

豐富的插件支持


 

jQuery符號:

jQuery=function jQuery(arg){
    alert(arg);
}
$=window.jQuery=jQuery;

$(arg)=jQuery(arg);

window.jQuery === window.$ 

$ === jQuery

typeof $   ->  function

絕大多數情況下,直接使用 $ ,如果 $ 被占用,就使用 jQuery

jQuery.noConflict()  釋放 $,但不釋放 jQuery

$   //jQuery(selector,context)
jQuery.noConflict()   //釋放 $,但不釋放 jQuery
$   //undefined
jQuery   //jQuery(selector,context)

下麵兩句是等價的

$("div").addClass("div");
jQuery("div").addClass("div");

HTML載入完成的三種書寫方式

//html載入完成
$(document).ready(function(){
    $("div").addClass("div");
});

//簡寫方式1
$().ready(function(){
    $("div").addClass("div");
});

//簡寫方式2
$(function(){
    $("div").addClass("div");
});

jquery 行為層方法簡介:

.css({}) 改變元素樣式

以下是原生js寫法與jquery寫法對比

    // 原生js
    var alinks=$("a");
    for(var i=0;i<alinks.length;i++){
        alinks[i].style.color="pink";
        alinks[i].style.backgroundColor="#abcdef";
        alinks[i].style.border="1px solid #fff";
    }

    // jquery
    var alinks=$("a");
    for(var i=0;i<alinks.length;i++){
        alinks.eq(i).css({
            "color":"pink",
            "background-color":"#abcdef",
            "border":"1px solid #fff"
        });
    }

.text() 改變元素內的文本

以下是原生js寫法與jquery寫法對比

    // 原生js
    var alinks=$("a");
    for(var i=0;i<alinks.length;i++){
        alinks[i].innerHTML="喵喵"+i;
    }

    // jquery
    var alinks=$("a");
    for(var i=0;i<alinks.length;i++){
        alinks.eq(i).text("喵喵"+i);
    }

.html() 改變元素內的內容,可以帶HTML標簽

以下是原生js寫法與jquery寫法對比

    // 原生js
    var alinks=$("a");
    for(var i=0;i<alinks.length;i++){
        alinks[i].innerHTML="喵喵"+i;
    }

    // jquery
    var alinks=$("a");
    for(var i=0;i<alinks.length;i++){
        alinks.eq(i).text("喵喵"+i);
        alinks.eq(i).html("<strong>"+"喵喵"+i+"</strong>");
    }

小案例:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery</title>
    <link rel="stylesheet" href="style.css">
    <script src="jquery.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <span class="top"></span>
    <nav>
        <a href="#">banner1</a>
        <a href="#">banner2</a>
        <a href="#">banner3</a>
        <a href="#">banner4</a>
    </nav>
    <div class="img-box">
        <img src="image/cat1.jpg">
        <img src="image/cat2.jpg">
        <img src="image/cat3.jpg">
        <img src="image/cat4.jpg">
    </div>
</body>
</html>

style.css

* { margin: 0; padding: 0; border: none; }
html, body { overflow: hidden;/*解決因為盒模型溢出造成的垂直方向滾動條*/ height: 100%; background-color: rgb(145, 176, 200); }
span.top { display: block; width: 16px; height: 16px; margin: 30px auto 40px; border-radius: 50%; background-color: #fff; }
nav { position: relative; display: flex;/*彈性盒模型*/ width: 40%; margin: 0 auto 45px; justify-content: space-between;/*實現元素在容器內左右均勻分佈*/ }
nav:before { position: absolute; top: 20px; display: block; width: 100%; height: 10px; content: '';/*激活偽元素*/ background-color: #fff; }
nav > a { font-size: 14px; position: relative;    /*預設是static定位,會被絕對定位覆蓋 修改為相對定位之後,會覆蓋前面的元素*/ padding: 10px 20px; text-decoration: none; color: rgb(144, 146, 152); border: 2px solid rgb(144, 146, 152); background-color: #fff; }
.img-box { position: relative; overflow: hidden; width: 250px; height: 250px; margin: 0 auto; background-color: #fff; box-shadow: 0 0 30px 0 rgba(144, 146, 152, .3); }
.img-box img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 98%; margin: auto;/*以上5句實現絕對定位的居中*/ }
/*# sourceMappingURL=style.css.map */

script.js

$(function(){
    $("a").click(function(){
        $("img").eq($(this).index()) // 獲取當前點擊的a的index
                .css({"opacity":"1"})
                .siblings()
                .css({"opacity":"0"});
    });
});

效果圖

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1、雲資料庫 一、介紹 雲開發提供了一個 JSON 資料庫,顧名思義,資料庫中的每條記錄都是一個 JSON 格式的對象。一個資料庫可以有多個集合(相當於關係型數據中的表),集合可看做一個 JSON 數組,數組中的每個對象就是一條記錄,記錄的格式是 JSON 對象。 關係型資料庫和 JSON 資料庫的 ...
  • 1、工具下載 官方鏈接:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 我選用的是穩定版 macOS 2、項目創建 一、掃碼登錄開發工具 二、點擊小程式創建項目 我這裡選擇是小程式雲開發,appid是登錄 ...
  • 現在Chrome瀏覽器已經很好的支持ES6了,但有些低版本的瀏覽器或其他瀏覽器還是不支持ES6的語法,因此實際項目開發或上線過程中就需要把ES6的語法轉變成ES5的語法。項目開發過程中 Webpack 有自動編譯轉換功能,因此免去了環境搭建這一步。但除了Webpack自動編譯外,我們還可以用Babe ...
  • 滑鼠事件 .click 滑鼠單擊 .dblclick 滑鼠雙擊 // 單擊事件 $("a").click(function(){ $("img").eq($(this).index()) // 獲取當前點擊的a的index .css({"opacity":"1"}) .siblings() .css ...
  • 一、var和let var已經在JavaScript中存在很長一段時間了,但是它存在了一些不足的地方,接下來我們就來看看吧 首先var存在變數提升,這是怎麼一回事呢,我們看下麵代碼 為什麼是它呢,是因為變數a提升到前面去了,所以輸出了這個結果 接下來我們再看let 初始化無法訪問到 a let是不是 ...
  • 由於程式都是自上向下的順序執行的,所以通過流程式控制制語句可以改變程式執行的順序,或者反覆的執行某一段的程式。 語句的分類 1. 條件判斷語句 2. 條件分支語句 3. 迴圈語句 條件判斷語句 條件判斷語句也稱為if語句 語法一: if(條件表達式){ 語句... } 執行流程:if語句執行時,會先對條 ...
  • java的基本數據類型一共有 byte short int long float double char boolean js中定義變數使用關鍵字 var js的原始類型(五個) String: 字元串 在字元串中我們可以使用\作為轉移符號。比如 \" ",\' ',\\ \,\n 表示換行 Num ...
  • 選擇器是jquery的核心 jquery選擇器返回的對象是jquery對象,不會返回undefined或者null,因此不必進行判斷 基本選擇器: ID選擇器 $("#ID") element選擇器(標簽選擇器)$("標簽") 如 $("div") 獲取具體的標簽,使用數組下標的方式 $("div" ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...