jQuery基礎系列
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
jQuery 入口函數:
$(document).ready(function(){
// 執行代碼
});
或者
$(function(){
// 執行代碼
});
JavaScript 入口函數:
window.onload = function () {
// 執行代碼
}
jQuery 入口函數與 JavaScript 入口函數的區別：javascript
jquery的入口函數是在html全部標籤都加載後才執行，而JavaScript的window.onload事件是等到全部內容加載完後才執行。php
$(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> 元素
什麼是事件？
頁面的響應叫作事件css
dom事件： click dbclick mouseenter mouseleave keypress keydown keyup hover submit change focus blur load resize scroll unload
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>
<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對象html
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()前端
操做元素的特性，屬性，和數據java
獲取特性的值：attr(name) 設置特性的值：attr(name,value) attr(attributes)
添加類：addClass(name)
removeClass(names)
hasClass(name)
toggleClass(names][,switch])node
jquery是一款JavaScript庫，jQuery能夠處理HTML，事件，動畫等。jQuery是能夠兼容多個瀏覽器，下載jQuery。jquery
http://jquery.com/
write less, do more
html表現結構，js表示行爲，css表示爲表現。ajax
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中的元素：sql
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();
});
$("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);
});
$("#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)
text(),html(),val()
獲取屬性：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");
遍歷祖先
$(document).ready(function(){
$("span").parent();
});
$(document).ready(function(){
$("span").parents();
});
$(document).ready(function(){
$("span").parentsUntil("div");
});
遍歷後代：
children()
find()
$(document).ready(function(){
$("div").children();
});
$(document).ready(function(){
$("div").find("span");
});
$(document).ready(function(){
$("div").find("*");
});
遍歷同胞：
siblings() next() nextAll() nextUntil() prev() prevAll() prevUntil()
siblings() 方法返回被選元素的全部同胞元素
next() 方法返回被選元素的下一個同胞元素
nextAll() 方法返回被選元素的全部跟隨的同胞元素
nextUntil() 方法返回介於兩個給定參數之間的全部跟隨的同胞元素
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);
});
});
實例：
// 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> </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> </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();
}
});
結言
好了，歡迎在留言區留言，與你們分享你的經驗和心得。
感謝你學習今天的內容，若是你以爲這篇文章對你有幫助的話，也歡迎把它分享給更多的朋友，感謝。
相關文章
- 1. jQuery小測試系列之jQuery基礎知識
- 2. Android+Jquery Mobile學習系列(2)-HTML5/Jquery Mobile基礎
- 3. 基礎系列：掌握隊列基礎
- 4. 【JQuery】（1）JQuery基礎
- 5. nginx基礎系列
- 6. js基礎系列
- 7. css基礎系列
- 8. JavaScript基礎系列
- 9. .net基礎系列
- 10. ASP.NET基礎系列
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • Kotlin學習（二）基本類型
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Window下Ribbit MQ安裝
- 2. Linux下Redis安裝及集羣搭建
- 3. shiny搭建網站填坑戰略
- 4. Mysql8.0.22安裝與配置詳細教程
- 5. Hadoop安裝及配置
- 6. Python爬蟲初學筆記
- 7. 部署LVS-Keepalived高可用集羣
- 8. keepalived+mysql高可用集羣
- 9. jenkins 公鑰配置
- 10. HA實用詳解
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. jQuery小測試系列之jQuery基礎知識
- 2. Android+Jquery Mobile學習系列(2)-HTML5/Jquery Mobile基礎
- 3. 基礎系列：掌握隊列基礎
- 4. 【JQuery】（1）JQuery基礎
- 5. nginx基礎系列
- 6. js基礎系列
- 7. css基礎系列
- 8. JavaScript基礎系列
- 9. .net基礎系列
- 10. ASP.NET基礎系列