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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類