jQuery基礎系列

来源:https://www.cnblogs.com/dashucoding/archive/2019/04/22/10750368.html
-Advertisement-
Play Games

jQuery 入口函數與 JavaScript 入口函數的區別： jquery的入口函數是在html所有標簽都載入後才執行，而JavaScript的window.onload事件是等到所有內容載入完後才執行。 什麼是事件？ 頁面的響應叫做事件 index返回dom元素 get([index]))返回 ...


jQuery基礎系列

image.png

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

image.png

image.png

jQuery 入口函數:
$(document).ready(function(){
    // 執行代碼
});
或者
$(function(){
    // 執行代碼
});

JavaScript 入口函數:
window.onload = function () {
    // 執行代碼
}

jQuery 入口函數與 JavaScript 入口函數的區別：

jquery的入口函數是在html所有標簽都載入後才執行，而JavaScript的window.onload事件是等到所有內容載入完後才執行。

image.png

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
<script>
 $(function(){
  var DOMObject = document.getElementById('div');
  var jQueryObject = $('#div');
  console.log(DOMObject);
  console.log(jQueryObject);
 })
</script>

$("a[target='_blank']")
$("a[target!='_blank']")
$("tr:even")    選取偶數位置的 <tr> 元素
$("tr:odd") 選取奇數位置的 <tr> 元素

什麼是事件？
頁面的響應叫做事件

dom事件：
click dbclick mouseenter mouseleave
keypress keydown keyup hover
submit change focus blur
load resize scroll unload

image.png

var jqueryObj = $(domObj);
var domObj = jqueryObj.get([index]);

console.log(DOMObject.jquery);
console.log(jQueryObject.nodeType);

<script>
$(function(){
var div = $('<div>hello</div>');
console.log(div);
console.log($('div'));
})
</script>

<script>
 $(function(){
  var link1 = $('<a>', {
   text: 'baidu',
   href: 'http://www.baidu.com',
   target: '_blank',
   title: 'go'
  });
  link1.appendTo('body');
  var link2 = $('<a>baidu</a>').attr({
   text: 'baidu',
   href: 'http://www.baidu.com',
   target: '_blank',
   title: 'go'
  })
  
 });
</script>

image.png

<script>
$(function(){
var elements = $('li');
console.log(elements.length);
console.log(elements.get());
console.log(elements[0]);
})
</script>

index返回dom元素
get([index]))返回dom元素或元素的集合
eq(index)返回jquery對象

children([selector])
contents()
find(selector)
parent([selector])
parents([selector])
parentsUntil([selector])
closest(selector)
<scripts>
$(function(){
 var elements = $('li');
 console.log(elements.eq(0));
 console.log($('li:eq（0）'));
))
</script>

first()和last()和toArray()

操作元素的特性，屬性，和數據

獲取特性的值：attr(name)
設置特性的值：attr(name,value) attr(attributes)

添加類：addClass(name)
removeClass(names)
hasClass(name)
toggleClass(names][,switch])

jquery是一款JavaScript庫，jQuery可以處理HTML，事件，動畫等。jQuery是可以相容多個瀏覽器，下載jQuery。

http://jquery.com/
write less, do more

html表現結構，js表示行為，css表示為表現。

window.jQuery === window.$
$.each()
$.noop
$.toArray()
text('hello')
removeClass('blue')
addClass('blue')
css('color','red')
$('$div').text('hello').removeClass('blue').addClass('bold').css('color','red');
$(document).ready(function(){...})
document.getElementById();
document.getElementsByName();
document.getElementsByTagName();
document.getElementsByClassName();

選擇JavaScript中的元素：

document.querySelector();
document.querySelectorAll();

css選擇器：基本選擇器，屬性選擇器，偽類選擇器，偽元素選擇器。

* 通配符選擇器
E 元素選擇器
.class 類選擇器
#id id選擇器
E F 後代選擇器
E + F 相鄰兄弟選擇器
E ~ F 通用兄弟元素選擇器
E[attr] 只使用屬性名

:link 選擇所有未被訪問的連接
:visited 選擇所有已被訪問的鏈接
:hover 滑鼠指針到其上的鏈接
:active 選擇活動鏈接
:focus 選擇獲得焦點的input元素
:enabled 選擇每個啟用的input元素
:disabled 選擇每個禁用的input元素
:checked 選擇每個選中的input元素
:first-child 選擇某個元素的第一個元素
:last-child 選擇某個元素的最後一個子元素
:nth-child() 從1開始的元素，選擇某個元素
:nth-last-child() 選擇某個元素的一個或多個特定的元素
:nth-of-type() 類似 :nth-child，只有符合type類型
:nth-last-of-type() 和 nth-last-child() 類似，從最後一個子元素開始算
:first-of-type 選擇一個上級元素的第一個同類子元素
:last-of-type 選擇一個上級元素的最後一個同類子元素
:empty 選擇的元素裡面沒有任何內容，這裡沒有內容指的是一點內容都沒有
:not() 否定選擇器
:first-line 用於選取指定選擇器的首行
:first-letter 用於選取首字母
::before 在被選元素的內容前面插入內容
::after 在被選元素的內容後面插入內容
::selection 應用於文檔中被用戶高亮的部分

jQuery中的基本選擇器：id選擇器，類選擇器，元素選擇器，後代選擇器，屬性選擇器。

位置篩選器，子元素篩選器，表單篩選器，內容篩選器，自定義篩選器，其他篩選器。

位置篩選器：

:first
:last
:even
:odd
:eq(n)
:gt(n)
:lt(n)

子元素的篩選器：

:first-child
:last-child
:first-of-type
:last-of-type
:nth-child()
:nth-last-child()
:nth-of-type()
:nth-last-of-type()
:only-child
:only-of-type

表單篩選器：

:checked
:disabled
:enabled
:focus
:button
:checkbox
:file
:image
:input
:password
:radio
:reset
:selected
:submit
:text

內容篩選器

:empty
:contains(text)
:has(selector)
:parent

篩選器

:lang()
:not()
:root
:target
:hidden
:header
:animated

dom對象和jQuery對象：

obj.nodeType
obj.jquery
var jqueryObj = $(domObj);
var domObj = jqueryObj.get([index]);
children([selector])
contents()
find(selector)
parent([selector])
parentsUntil([selector])
closest(selector)
next([selector])
nextAll([selector])
nextUntil([selector])
prev([selector])
prevAll([selector])
prevUntil([selector])
siblings([selector])
add(selector)
not(selector)
filter(selector)
has(selector)
slice(start[,end])
map(callback)
each(iterator)
is(selector)
end()
addBack()
html()
html(content)
text()
text(content)
append
prepend
before
after

appendTo
prependTo
insertBefore
insertAfter

wrap()
wrapAll()
wrapInner()
unwrap()

remove()
datach()
empty()
clone()
replaceWith()
replaceAll()
val()

jQuery常用的函數：

.get() 獲取指定的dom元素
.index() 返回指定元素相對於其他指定元素的index位置
.size() 返回被jQuery選擇器匹配的元素的數量
.toArray() 以數組的形式返回jQuery選擇器匹配的元素
.add() 將元素添加到匹配元素的集合中
.addSelf() 把堆棧中之前的元素添加到當前集合中
.children() 獲取匹配元素集合中每個元素的所有子元素
.closest() 從元素本身開始，逐級向上元素匹配，並返回最先匹配的祖先元素
.contents() 獲得匹配元素集合中每個元素的子元素
.each() 對jQuery對象進行迭代，為每個匹配元素執行函數
.end() 結束當前鏈中最近的一次篩選操作，並將匹配元素集合返回到前一次的狀態
.eq() 將匹配元素集合縮減為位於索引的新元素
.filter() 將匹配元素集合縮減為匹配選擇器或匹配函數返回值的新元素
.find() 獲取當前匹配元素集合中的每個元素的後代，由選擇器進行篩選
.first() 將匹配元素集合縮減為集合中的 第一個元素
.has() 將匹配元素集合縮減為包含特定元素的後代的集合
.is() 是否存在一個匹配元素
.last() 將匹配元素集合縮減為集合中的最後一個元素
.map() 把當前匹配集合中的每個元素傳遞給函數
.next() 獲取下一個元素
.nextAll() 獲得匹配元素集合中每個元素之後的所有同輩元素
.nextUntil() 獲得每個元素之後所有的同輩元素直到遇到匹配選擇器的元素為止
.not() 從匹配元素集合中刪除元素
.offsetParent() 獲得用於定位的第一個父元素
.parent() 獲得當前匹配元素集合中每個元素的父元素
.parents() 獲得當前匹配元素集合中每個元素的祖先元素
.parentsUntil() 獲得當前匹配元素集合中每個元素的祖先元素，直到遇到匹配選擇器的元素為止
.prev() 獲得匹配元素集合中每個元素的前一個同輩元素
.prevAll() 獲得匹配元素集合中每個元素之前的所有同輩元素
.prevUntil() 獲得每個元素之前所有的同輩元素，直到遇到匹配選擇器的元素為止
.siblings() 獲得匹配元素集合中所有元素的同輩元素
.slice() 將匹配元素集合縮減為指定範圍的子集

addClass() 向匹配的元素添加指定的類名
after() 在匹配的元素之後插入內容
append() 向匹配元素集合中的每個元素結尾插入由參數指定的內容
appendTo() 向目標結尾插入匹配元素集合中的每個元素
attr() 設置或返回匹配元素的屬性和值
before() 在每個匹配的元素之前插入內容
clone() 創建匹配元素集合的副本
detach() 從dom中移除匹配元素的集合
empty() 刪除匹配的元素集合中所有子節點
hasClass() 檢查匹配的元素是否擁有指定的類
html() 數組或返回匹配的元素集合中的html內容
insertAfter() 把匹配的元素插入到另一個指定的元素集合的後面
insertBefore() 把匹配的元素插入到另一個指定的元素集合的簽名
prepend() 向匹配元素集合中的每個元素開頭插入由參數指定的內容
prependTo() 向目標開頭插入匹配元素集合中的每個元素
remove() 移除所有匹配的元素
removeAttr() 從所有匹配的元素中移除指定的屬性
removeClass() 從所有匹配的元素中刪除全部或者指定的類
replaceAll() 用匹配的元素替換所有匹配到的元素
replaceWith() 用新內容替換匹配的元素
text() 數組或返回匹配元素的內容
toggleClass() 從匹配的元素中添加或刪除一個類
unwrap() 移除並替換指定元素的父元素
val() 設置或返回匹配元素的值
wrap() 把匹配額元素用指定的內容或元素包裹起來
wrapAll() 把所有匹配的元素用指定的內容或元素包裹起來
wrapinner() 將每一個匹配的元素的子內容用指定的內容或元素包裹起來

jQuery hide() 和 show()隱藏和顯示 HTML 元素

$("#hide").click(function(){
  $("p").hide();
});
 
$("#show").click(function(){
  $("p").show();
});
$("button").click(function(){
  $("p").hide(1000);
});

$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});

toggle() 方法來切換 hide() 和 show() 方法

$("button").click(function(){
  $("p").toggle();
});

image.png

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

image.png

$("#flip").click(function(){
  $("#panel").slideDown();
});

$("#flip").click(function(){
  $("#panel").slideUp();
});

$("#flip").click(function(){
  $("#panel").slideToggle();
});

jQuery 動畫

$(selector).animate({params},speed,callback);

$("button").click(function(){
  $("div").animate({left:'250px'});
});

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

jQuery stop() 方法 停止動畫

$(selector).stop(stopAll,goToEnd);

$("#stop").click(function(){
  $("#panel").stop();
});

$("#panel").stop(true);
停止所有動畫效果而不是只停止當前動畫
使用 callback 實例
$("button").click(function(){
  $("p").hide("slow",function(){
    alert("段落現在被隱藏了");
  });
});

沒有 callback
$("button").click(function(){
  $("p").hide(1000);
  alert("段落現在被隱藏了");
});

jQuery 方法鏈接

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

wrap() wrapAll() 與 wrapInner()的區別

wrap() 方法把每個被選元素放置在指定的 HTML 內容或元素中
wrapAll() 在指定的 HTML 內容或元素中放置所有被選的元素
wrapInner() 方法使用指定的 HTML 內容或元素，來包裹每個被選元素中的所有內容 (inner HTML)

image.png

image.png

image.png

image.png

text(),html(),val()

image.png

獲取屬性：attr()

$("button").click(function(){
  alert($("#runoob").attr("href"));
});

$("button").click(function(){
  $("#runoob").attr("href","http://www..com/");
});

$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www..com/",
        "title" : "111"
    });
});

append() 在被選元素的結尾插入內容
prepend() 在被選元素的開頭插入內容

after() 在被選元素之後插入內容
before() 在被選元素之前插入內容

remove() 刪除被選元素（及其子元素）
empty() 從被選元素中刪除子元素

addClass() 向被選元素添加一個或多個類
removeClass() 從被選元素刪除一個或多個類
toggleClass() 對被選元素進行添加/刪除類的切換操作
css() 設置或返回樣式屬性

$("p").css("background-color");

$("p").css("background-color","yellow");

image.png

遍歷祖先

$(document).ready(function(){
  $("span").parent();
});

image.png

$(document).ready(function(){
  $("span").parents();
});

image.png

$(document).ready(function(){
  $("span").parentsUntil("div");
});

image.png

遍歷後代：
children()
find()

$(document).ready(function(){
  $("div").children();
});

image.png

$(document).ready(function(){
  $("div").find("span");
});

image.png

$(document).ready(function(){
  $("div").find("*");
});

image.png

遍歷同胞：

siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

siblings() 方法返回被選元素的所有同胞元素

image.png

next() 方法返回被選元素的下一個同胞元素

image.png

nextAll() 方法返回被選元素的所有跟隨的同胞元素

image.png

nextUntil() 方法返回介於兩個給定參數之間的所有跟隨的同胞元素

image.png

first() 方法返回被選元素的首個元素
last() 方法返回被選元素的最後一個元素
eq() 方法返回被選元素中帶有指定索引號的元素
索引號從 0 開始

filter() 方法 not() 方法

$(document).ready(function(){
  $("p").filter(".url");
});

$(document).ready(function(){
  $("p").not(".url");
});

ajax簡介

AJAX 是與伺服器交換數據的技術，屬性了不重載情況下，實現對部分網頁的更新。

jQuery load() 方法是簡單但強大的 AJAX 方法

$(selector).load(URL,data,callback);

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").load("/ajax/demo_test.txt");
    });
});
</script>

callback 參數

responseTxt - 包含調用成功時的結果內容
statusTXT - 包含調用的狀態
xhr - 包含 XMLHttpRequest 對象

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部內容載入成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});
$.get() 方法 $.post() 方法

$.get(URL,callback);
$.post(URL,data,callback);

$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("數據: " + data + "\n狀態: " + status);
  });
});

$("button").click(function(){
    $.post("/ajax/demo_test_post.php",
    {
        name:"111",
        url:"http://www..com"
    },
        function(data,status){
        alert("數據: \n" + data + "\n狀態: " + status);
    });
});

jQuery.png

實例：

// html
<html>
<head>
    <meta charset="utf-8">
    <title>課程代碼</title>
    <script type="text/javascript" src="../js/jquery/jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="../js/index.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>

    <div class="header">
        <div class="banner">
            <img src="../images/###.png">
            <span><a href="http://coding.###.com/">實戰</a></span>
            <span><a href="http://www.###.com/course/program">路徑</a></span>
            <span><a href="http://www.###.com/wenda">猿問</a></span>
            <span><a href="http://www.###.com/article">手記</a></span>
        </div>
        <a id="loginLink" href="#">登錄</a>
        <a id="regeLink" href="#">註冊</a>
    </div>

    <div class="swipe">
        <div class="nav">
            <div class="item">
                <p class="title">前端開發</p>
                <p>
                    <span>Html / Css</span>
                    <span>Javascript</span>
                    <span>Html5</span>
                </p>
            </div>
            <div class="item">
                <p class="title">後端開發</p>
                <p>
                    <span>PHP / Nodejs</span>
                    <span>Java</span>
                    <span>C#</span>
                </p>
            </div>
            <div class="item">
                <p class="title">移動開發</p>
                <p>
                    <span>Android</span>
                    <span>iOs</span>
                    <span>Cocos2d-x</span>
                </p>
            </div>
            <div class="item">
                <p class="title">數據處理</p>
                <p>
                    <span>Mysql</span>
                    <span>Oracle</span>
                    <span>MongoDB</span>
                </p>
            </div>
        </div>
        <div class="ppt first"></div>
    </div>

    <div class="lessions">
        <p class="title">❤ 熱門課程</p>
        <ul>
            <li>
                <img src="../images/004.jpg">
                <p>JavaScript快速入門</p>
            </li>
            <li>
                <img src="../images/005.jpg">
                <p>玩轉Photoshop</p>
            </li>
            <li>
                <img src="../images/006.jpg">
                <p>代碼編寫規範</p>
            </li>

            <li style="margin-right:0;">
                <img src="../images/004.jpg">
                <p>JavaScript快速入門</p>
            </li>
            <li>
                <img src="../images/005.jpg">
                <p>玩轉Photoshop</p>
            </li>
            <li>
                <img src="../images/006.jpg">
                <p>代碼編寫規範</p>
            </li>
            <li>
                <img src="../images/004.jpg">
                <p>JavaScript快速入門</p>
            </li>
            <li style="margin-right:0;">
                <img src="../images/005.jpg">
                <p>玩轉Photoshop</p>
            </li>
        </ul>
    </div>

    <div class="lessions">
        <p class="title">☆ 最新發佈</p>
        <ul>
            <li>
                <img src="../images/004.jpg">
                <p>JavaScript快速入門</p>
            </li>
            <li>
                <img src="../images/005.jpg">
                <p>玩轉Photoshop</p>
            </li>
            <li>
                <img src="../images/006.jpg">
                <p>代碼編寫規範</p>
            </li>

            <li style="margin-right:0;">
                <img src="../images/004.jpg">
                <p>JavaScript快速入門</p>
            </li>
            <li>
                <img src="../images/005.jpg">
                <p>玩轉Photoshop</p>
            </li>
            <li>
                <img src="../images/006.jpg">
                <p>代碼編寫規範</p>
            </li>
            <li>
                <img src="../images/004.jpg">
                <p>JavaScript快速入門</p>
            </li>
            <li style="margin-right:0;">
                <img src="../images/005.jpg">
                <p>玩轉Photoshop</p>
            </li>
        </ul>
    </div>

    <div class="footer">
        <div class="site">
            <span>關於我們</span>
            <span>人才招聘</span>
            <span>講師招募</span>
            <span>聯繫我們</span>
            <span>意見反饋</span>
            <span>友情鏈接</span>
        </div>
        <div class="author">
            © 2016 ###.com  京ICP備13046642號
        </div>
    </div>

    <!-- 彈出層遮罩 -->
    <div id="layer-mask" class="layer-mask"></div>
    <!-- 彈出層窗體 -->
    <div id="layer-pop" class="layer-pop">
        <!-- 彈出層關閉按鈕 -->
        <div id="layer-close" class="layer-close">×</div>
        <!-- 彈出層內容區域 -->
        <div id="layer-content" class="layer-content">
            
        </div>
    </div>

    <!-- 登錄窗體 -->
    <div id="loginHtml" style="display:none;">
        <!-- 登錄窗體 -->
        <div class="login">
            <h4 class="title">登 錄</h4>
            <div class="item">
                <label>賬號</label>
                <input id="username" class="input" name="username" type="text"/>
                <p class="error-msg"></p>
            </div>
            <div class="item">
                <label>密碼</label>
                <input id="password" class="input" name="password" type="password"/>
            </div>
            <div class="item">
                <label>&nbsp;</label>
                <input id="loginSubmitBtn" type="submit" class="submit" value="填寫好了"/>
            </div>
        </div>
    </div>

    <!-- 註冊窗體 -->
    <div id="regeHtml" style="display:none;">
        <!-- 註冊窗體 -->
        <div class="login">
            <h4 class="title">註 冊</h4>
            <div class="item">
                <label>賬號</label>
                <input id="username" class="input" name="username" type="text"/>
                <p class="error-msg"></p>
            </div>
            <div class="item">
                <label>密碼</label>
                <input id="password" class="input" name="password" type="password"/>
            </div>
            <div class="item">
                <label>重覆密碼</label>
                <input id="repassword" class="input" name="repassword" type="password"/>
            </div>
            <div class="item">
                <label>&nbsp;</label>
                <input id="regeSubmitBtn" type="submit" class="submit" value="填寫好了"/>
            </div>
        </div>
    </div>

</body>
</html>
// css
@charset "utf8";
*{margin:0;padding:0;}
body
{
    text-align:center;
    font: 14px/1.5 "微軟雅黑",Verdana,Tahoma,Arial,sans-serif,"宋體";
    line-height:30px;
}
ul,li
{
    list-style:none;
}
/*彈出層遮罩*/
.layer-mask
{
    display: none;
    z-index: 99999;
    position: fixed;
    top : 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: #000;
    opacity: 0.5;
}

/*彈出層窗體*/
.layer-pop
{
    display: none;
    z-index : 100000;
    position: fixed;
    top : 0;
    left : 0;
    right : 0;
    bottom: 0;
    margin: auto;

    width: 400px;
    height: 300px;
    background: #fff;
}
/*彈出層關閉按鈕*/
.layer-close
{
    float :right;
    width: 24px;
    height: 24px;
    border: 3px solid #fff;
    text-align: center;
    line-height: 24px;
    border-radius: 50%;
    background: #eee;

    margin-right: -12px;
    margin-top:-12px; 
}
.layer-close:hover
{
    cursor: pointer;
    background: #ccc;
    color: #fff;
}

/*登錄*/
.login
{

}
.login h4
{
    font-size:20px;
    line-height:50px;
}

.login label
{
    margin-right: 5px;
    color: #888;
    display: inline-block;
    width: 60px;
    text-align: right;
}

.login .input
{
    border:1px solid #ccc;
    border-radius:3px;
    padding:10px 5px;
    width:250px;
}

.login .item
{
    margin:20px auto;
}

.login .submit
{
    background: #e40;
    border:1px solid #e40;
    border-radius:5px;
    padding:10px 5px;
    width:250px;
    color:#fff;
}
.login .error-msg
{
    color:#e40;
}

/*慕課網效果*/
/*頂部*/
.header
{
    height:80px;
    line-height:80px;
    text-align : right;
    margin: 0 20px;
    overflow:hidden;
}
.header .banner
{
    float:left; 
}
.header .banner span
{
    font-size:18px;
    margin:0 15px;
    line-height:80px;
}
.header .banner img
{
    width:150px;
    vertical-align: middle;
    margin-right:40px;
}
.header a
{
    color:#666;
    text-decoration:none;
    margin-left:20px;
}
/*輪播*/
.swipe
{
    width: 1200px;
    height: 450px;
    margin : 0 auto;    
    overflow:hidden;
}
.swipe .ppt
{
    width:100%;
    height:100%;
}
.swipe .ppt.first
{
    background:url(../images/001.jpg);
    background-size: cover;
}
.swipe .ppt.second
{
    background:url(../images/002.jpg);
    background-size: cover;
}
/*導航*/
.nav
{
    position:absolute;
    width : 280px;
    height:450px;
    background: #000;
    color:#fff;

    filter:alpha(opacity=50);  /*支持 IE 瀏覽器*/
    -moz-opacity:0.50; /*支持 FireFox 瀏覽器*/
    opacity:0.50;  /*支持 Chrome, Opera, Safari 等瀏覽器*/
}
.nav .item
{
    margin: 5px 20px;
    padding: 10px;
    text-align:left;
    border-bottom:1px solid #aaa;
}
.nav .item:hover
{
    background:#666;
    cursor: pointer;
}
.nav .item .title
{
    font-size:16px;
    margin-bottom:10px;
}
.nav .item span
{
    margin-right : 9px;
}
/*課程排列*/
.lessions
{
    width : 1200px;
    margin : 0 auto;
}
.lessions .title
{
    text-align:left;
    line-height : 45px;
    color:#666;
    font-size:16px;
    margin-top:30px;
}
.lessions ul
{
    overflow:hidden;
}
.lessions li
{
    float : left;
    width : 23%;
    margin-right: 32px;
    margin-top: 32px;
}
.lessions li img
{
    max-width:100%;
}
/*頁腳*/
.footer
{
    margin-top:50px;
    padding:50px 0;
    background: #eee;
    border-top : 1px solid #ddd;
}
.footer .site
{
    line-height:100px;
}
.footer .site span
{
    margin:0 20px;
    color :#888;
}
// js

$(document).ready(function($){

    // 登錄鏈接事件
    // $("#loginLink").click(function(){
    //  // 顯示彈出層遮罩
    //  $("#layer-mask").show();
    //  // 顯示彈出層窗體
    //  $("#layer-pop").show();
    //  // 彈出層關閉按鈕綁定事件
    //  $("#layer-close").click(function(){
    //      // 彈出層關閉
    //      $("#layer-mask").hide();
    //      $("#layer-pop").hide();
    //  });
    // });

    
    // 登錄鏈接事件
    $("#loginLink").click(function(){
        // 獲取登錄窗體代碼
        var loginHtml = $("#loginHtml").html();
        showLayer(loginHtml,500,300,closeCallback);

        // 登錄表單校驗
        $("#loginSubmitBtn").click(function(){
            var username = $("input[name='username']").val();
            var password = $("input[name='password']").val();
            if(username === '123' && password === '123'){
                alert("登錄成功");
            }else{
                $(".error-msg").html("賬號或密碼輸入錯誤");
            }
        });
    });

    // 註冊鏈接事件
    $("#regeLink").click(function(){
        // 獲取註冊窗體代碼
        var regeHtml = $("#regeHtml").html();
        showLayer(regeHtml,500,350,closeCallback);

        // 註冊表單校驗
        $("#regeSubmitBtn").click(function(){
            var username = $("input[name='username']").val();
            var password = $("input[name='password']").val();
            var repassword = $("input[name='repassword']").val();
            if(username === 'imooc' && password === 'imooc' && repassword === password){
                alert("註冊成功");
            }else{
                $(".error-msg").html("賬號或密碼輸入錯誤");
            }
        });
    });


    // 彈出層關閉回調函數
    function closeCallback(){
        $(".error-msg").html("");
    }   

    // 顯示彈出層
    function showLayer(html,width,height,closeCallback){
        // 顯示彈出層遮罩
        $("#layer-mask").show();
        // 顯示彈出層窗體
        $("#layer-pop").show();
        // 設置彈出層窗體樣式
        $("#layer-pop").css({
            width : width,
            height : height
        });
        // 填充彈出層窗體內容
        $("#layer-content").html(html);
        // 彈出層關閉按鈕綁定事件
        $("#layer-close").click(function(){
            // 彈出層關閉
            hideLayer();
            // 關閉的回調函數
            closeCallback();
        });
    }

    // 隱藏彈出層
    function hideLayer(){
        // 彈出層關閉
        $("#layer-mask").hide();
        $("#layer-pop").hide();
    }

});

image.png

image.png

結言

好了，歡迎在留言區留言，與大家分享你的經驗和心得。

感謝你學習今天的內容，如果你覺得這篇文章對你有幫助的話，也歡迎把它分享給更多的朋友，感謝。


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

-Advertisement-
Play Games
更多相關文章
  • 用css實現正方形div
    目標：實現一個正方形，這個正方形邊長等於 方法一：使用單位vw， （ps我覺得這個是最簡單的方法） html結構也很簡單，只有一個div即可 方法二： 使用padding-bottom 要點： html結構： css: 行了吧，兩種就可以了，你也可以使用margin，不過會有塌陷的危險，所以，就這兩 ...
  • 建立多頁面vue.js項目
    介紹 根據需求，我們希望建立一個多頁面的vue.js項目，如何改造單頁面vue.js項目為多頁面項目？跟著我的步伐看下去吧. 1.創建單頁面vue.js項目 簡單的記錄一下創建步驟： 2.配置路由映射 在utils.js文件末尾添加如下代碼，用於自動建立路由映射，如下圖： 修改webpack.bas ...
  • d3.svg.line()錯誤：TypeError: d3.svg.line is not a function
    錯誤：TypeError: d3.svg.line is not a function 原因： 你使用D3 v4 。從版本4開始，沒有 d3.svg ，因此出現錯誤消息。您要查找的行生成器現在定義為 d3.line()。 如果您仍在使用版本3，則會是 d3.svg.line（）。 解決方法： 如果還 ...
  • JavaScript的局部變數和全局變數小知識
    （瞭解一下，避免初學者犯錯，但下麵定義全局變數的做法並不推薦，只是讓你們知道這是怎麼一回事） 如果在函數中使用var定義一個變數，那麼這個變數在函數退出後就會被銷毀，例如： function test () { var message = "Hi"; // 局部變數 （解釋：用var操作符定義的變數 ...
  • web字體
    1.字體格式 不同瀏覽器所支持的字體格式是不一樣的，我們有必要瞭解一下有關字體格式的知識。 1、TureType(.ttf)格式 .ttf字體是Windows和Mac的最常見的字體，是一種RAW格式，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Oper ...
  • js判斷數據類型
    1: typeof 返回數據類型，包含這7種： number、boolean、symbol、string、object、undefined、function。 typeof null 返回類型錯誤，返回object 引用類型，除了function返回function類型外，其他均返回object。 ...
  • vue watch關於對象內的屬性監聽
    vue可以通過watch監聽data內數據的變化。通常寫法是： vue監聽整個對象，如下： deep: true 深度監測 如果監聽對象內的某一具體屬性，可以通過computed做中間層來實現： ...
  • vue beforeRouteEnter 死迴圈的問題
    如果在 vue 組件的 beforeRouteEnter 鉤子函數中調用 API 請求，會出現迴圈執行的問題： 上面的代碼會出現無限迴圈調用的問題，可能是API還沒有請求完成，又一次進入 router，調用了 beforRouterEnter 的原因，解決辦法加一個變數，在調用API之前判斷一下： ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類