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

時間 2020-02-17

標籤學習 jquery 基礎語法並經一個案例引出核心欄目 JQuery 简体版

原文原文鏈接

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

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

前端最頭疼的就是兼容：IE6/7/8兼容的最高版本是jQuery1.9.1html

jQuery的操做在一個類中，不會污染頂級變量前端

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

支持鏈式操做方式jquery

隱式迭代瀏覽器

行爲層和結構層分離app

豐富的插件支持函數

jQuery符號：flex

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"});
    });
});

效果圖