目錄
1.$(function(){});和jQuery(function(){});
6.1 val()/value text()/innerText html()/innerHtml ★
6.2屬性操作 attr(),removeAttr(),prop()
6.3 class/css [addClass()/removeClass()/toggleClass() css()]
1.jquery引入
下載複製粘貼js文件到js文件夾下，需要時在頁面內引入對應js文件即可，未引用的不會起作用
爲了兼容xp系統的IE5 IE6，企業開發大多都用很老的1.11.0
自己練習的時候可以引入高版本
<script src="../js/jquery-3.3.1.min.js"></script>
2、jquery基本語法
1.$(function(){});和jQuery(function(){});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">/*寫js代碼區域*/
/*寫jquery代碼之前必須先調用一個jquery核心方法 面向對象思想
核心函數jQuery() 的參數內傳遞一個參數，此參數爲自己編寫的匿名函數
★會在頁面加載完成後調用匿名函數
核心函數名可以簡寫爲$
*/
jQuery( function(){
/*寫jquery代碼*/
alert("hello");
} );
/*核心函數名可以簡寫爲$*/
$( function(){
/*寫jquery代碼*/
alert("hello2");
} );
</script>
</head>
<body>
</body>
</html>
2.jquery與onload比較
1.都是頁面加載完成時被調用執行
2.window.οnlοad=function(){}函數只能寫一個 jquery(function(){});能寫多個
3、DOM對象和jQuery對象
DOM對象
document對象獲取的頁面元素,稱爲DOM對象, document.getElementById()
var user=document.getElementById("user"); alert(user.value);//正確 /*alert(user.val());//dom對象調用jquery屬性無效*/
jQuery對象
使用jQuery方式獲取的頁面元素,稱爲jQuery對象, $("#id")
var $user=$("#user"); alert($user.val()); /*alert($user.value);//error jquery對象不可以調用dom對象屬性(雖然代碼提示有)*/補:jquery對象也可以不加$前綴
var u=$("#user"); alert(u.val());
注意: DOM對象和jQuery對象不通用的。需要採取特殊方法相互轉化
4、dom對象和jQuery對象互轉
dom對象轉爲Jquery對象
DOM對象轉成jQuery對象,穿馬甲
var user=document.getElementById("user");
var $user=$("#user");
alert($(user).val());
Jquery對象轉dom對象
jQuery對象轉成DOM對象,脫馬甲
jQuery對象本質上是個數組,數組存儲的元素是DOM對象,其實$("#user")獲取所有id爲user的元素 是一個數組
var user=document.getElementById("user");
var $user=$("#user");
alert($user[0].value);
5、選擇器
快速精準獲取頁面中的html元素 和css選擇器一致
5.1 基本選擇器 (★ 最重要)
元素選擇器 $("標籤名")
id選擇器 $("#id屬性值")
class選擇器 $(".class屬性值")
<script type="text/javascript">
//<input type="button" value="改變 id 爲 one 的元素的背景色爲 紅色" id="b1"/>
//jQuery對象調用函數(事件函數) jQuery派發事件，不需要在元素內寫onclick了
$("#b1").click(function (){//注意寫法 .click()函數內傳入匿名函數
//Jquery的CSS函數操作樣式表,兩個參數，CSS屬性和屬性值
//$("").css(css屬性,屬性值)
$("#one").css("background-color","red");
});
// <input type="button" value=" 改變元素名爲 <div> 的所有元素的背景色爲 紅色" id="b2"/>
$("#b2").click(function (){
$("div").css("background","red");
});
//<input type="button" value=" 改變 class 爲 mini 的所有元素的背景色爲 紅色" id="b3"/>
$("#b3").click(function (){
$(".mini").css("background","red");
});
// <input type="button" value=" 改變所有的<span>元素和 id 爲 two 的元素的背景色爲紅色" id="b4"/>
$("#b4").click(function (){
/*$("span").css("background","red");
$("#two").css("background","red"); */
//多個選擇器可以用","分離 jQuery元素本來就是數組 兩個數組自然可以合併
$("span,#two").css("background","red");
});
</script>
練習UI:
<!DOCTYPE html> <html> <head> <title>基本選擇器</title> <meta charset="utf-8" /> <style type="text/css"> div,span{ width: 180px; height: 180px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div .mini{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div .mini01{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } </style> <script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" /> <input type="button" value="改變 id 爲 one 的元素的背景色爲 紅色" id="b1"/> <input type="button" value=" 改變元素名爲 <div> 的所有元素的背景色爲 紅色" id="b2"/> <input type="button" value=" 改變 class 爲 mini 的所有元素的背景色爲 紅色" id="b3"/> <input type="button" value=" 改變所有的<span>元素和 id 爲 two 的元素的背景色爲紅色" id="b4"/> <h1>有一種奇蹟叫堅持</h1> <h2>自信源於努力</h2> <div id="one"> id爲one </div> <div id="two" class="mini" > id爲two class是 mini <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini" >class是 mini</div> <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini01" >class是 mini01</div> <div class="mini" >class是 mini</div> </div> <div id="mover" > div 動畫 </div> <span class="spanone">class爲spanone的span元素</span> <span class="mini">class爲mini的span元素</span> </body> <script type="text/javascript"> //<input type="button" value="改變 id 爲 one 的元素的背景色爲 紅色" id="b1"/> //jQuery對象調用函數(事件函數) jQuery派發事件，不需要在元素內寫onclick了 $("#b1").click(function (){//注意寫法 .click()函數內傳入匿名函數 //Jquery的CSS函數操作樣式表,兩個參數，CSS屬性和屬性值 //$("").css(css屬性,屬性值) $("#one").css("background-color","red"); }); // <input type="button" value=" 改變元素名爲 <div> 的所有元素的背景色爲 紅色" id="b2"/> $("#b2").click(function (){ $("div").css("background","red"); }); //<input type="button" value=" 改變 class 爲 mini 的所有元素的背景色爲 紅色" id="b3"/> $("#b3").click(function (){ $(".mini").css("background","red"); }); // <input type="button" value=" 改變所有的<span>元素和 id 爲 two 的元素的背景色爲紅色" id="b4"/> $("#b4").click(function (){ /*$("span").css("background","red"); $("#two").css("background","red"); */ //多個選擇器可以用","分離 jQuery元素本來就是數組 兩個數組自然可以合併 $("span,#two").css("background","red"); }); </script> </html>
5.2 層次選擇器
$("A B")獲取A元素的所有後代B元素 (後代:在A內部就叫A的後代,不管隔幾代) ★ 重點記住這一個
$("A>B")獲取A元素的所有後代子元素B (後代子元素:只有兒子,沒有孫子。也即不能隔代)
$("A+B")獲取A元素的同級的後面的下一個B元素 (同級的後面的第一個弟弟元素)
$("A~B")獲取A元素後面的所有B元素 (同級的後面所有弟弟)
<script type="text/javascript">
//<input type="button" value=" 改變 <body> 內所有 <div> 的背景色爲紅色" id="b1"/>
$("#b1").click(function(){
$("body div").css("background","red");
})
//<input type="button" value=" 改變 <body> 內子 <div> 的背景色爲 紅色" id="b2"/>
$("#b2").click(function(){
$("body>div").css("background","red");
});
//<input type="button" value=" 改變 id 爲 one 的下一個 <div> 的背景色爲 紅色" id="b3"/>
$("#b3").click(function(){
$("#one+div").css("background","red");
});
//<input type="button" value=" 改變 id 爲 two 的元素後面的所有兄弟<div>的元素的背景色爲 紅色" id="b4"/>
$("#b4").click(function(){
$("#two~div").css("background","red");
});
//<input type="button" value=" 改變 id 爲 two 的元素所有 <div> 兄弟元素的背景色爲紅色" id="b5"/>
$("#b5").click(function(){
//$("#two")的所有div哥哥與div弟弟(不包括自己) jQuery也有強大的函數
//查API得知siblings可以找到所有同輩元素
$("#two").siblings("div").css("background","red");
});
</script>
練習UI:
<!DOCTYPE html> <html> <head> <title>層次選擇器</title> <meta charset="UTF-8"> <script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script> <style type="text/css"> div,span{ width: 180px; height: 180px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div .mini{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div .mini01{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } </style> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" /> <input type="button" value=" 改變 <body> 內所有 <div> 的背景色爲紅色" id="b1"/> <input type="button" value=" 改變 <body> 內子 <div> 的背景色爲 紅色" id="b2"/> <input type="button" value=" 改變 id 爲 one 的下一個 <div> 的背景色爲 紅色" id="b3"/> <input type="button" value=" 改變 id 爲 two 的元素後面的所有兄弟<div>的元素的背景色爲 紅色" id="b4"/> <input type="button" value=" 改變 id 爲 two 的元素所有 <div> 兄弟元素的背景色爲紅色" id="b5"/> <h1>有一種奇蹟叫堅持</h1> <h2>自信源於努力</h2> <div id="one"> id爲one </div> <div id="two" class="mini" > id爲two class是 mini <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini" >class是 mini</div> <div class="mini" >class是 mini</div> </div> <div class="one"> class是 one <div class="mini01" >class是 mini01</div> <div class="mini" >class是 mini</div> </div> <div id="mover" > 動畫 </div> <span class="spanone"> span </span> </body> <script type="text/javascript"> //<input type="button" value=" 改變 <body> 內所有 <div> 的背景色爲紅色" id="b1"/> $("#b1").click(function(){ $("body div").css("background","red"); }) //<input type="button" value=" 改變 <body> 內子 <div> 的背景色爲 紅色" id="b2"/> $("#b2").click(function(){ $("body>div").css("background","red"); }); //<input type="button" value=" 改變 id 爲 one 的下一個 <div> 的背景色爲 紅色" id="b3"/> $("#b3").click(function(){ $("#one+div").css("background","red"); }); //<input type="button" value=" 改變 id 爲 two 的元素後面的所有兄弟<div>的元素的背景色爲 紅色" id="b4"/> $("#b4").click(function(){ $("#two~div").css("background","red"); }); //<input type="button" value=" 改變 id 爲 two 的元素所有 <div> 兄弟元素的背景色爲紅色" id="b5"/> $("#b5").click(function(){ //$("#two")的所有div哥哥與div弟弟(不包括自己) jQuery也有強大的函數 //查API得知siblings可以找到所有同輩元素 $("#two").siblings("div").css("background","red"); }); </script> </html>
對函數有印象，然後要會查api：
5.3過濾選擇器
獲得選擇的元素中的第一個元素： :first
獲得選擇的元素中的最後一個元素： :last
不包括指定內容的元素例如： :not(selecter)
偶數，從 0 開始計數： :even (記住這兩個奇偶即可)
奇數，從 0 開始技術： :odd
指定第幾個： :eq(index)
大於n個： :gt(index)
小於n個： :lt(index)
獲得標題 （<h1> /<h2> ....） :header --- 固定寫法
獲得動畫的 :animated ---固定寫法 正在執行的動畫
<script type="text/javascript">
// <input type="button" value=" 改變第一個 div 元素的背景色爲 紅色" id="b1"/>
$("#b1").click(function(){
$("div:first").css("background-color","red");
});
// <input type="button" value=" 改變最後一個 div 元素的背景色爲 紅色" id="b2"/>
$("#b2").click(function(){
$("div:last").css("background-color","red");
});
// <input type="button" value=" 改變class不爲 one 的所有 div 元素的背景色爲 紅色" id="b3"/>
$("#b3").click(function(){
$("div:not(.one)").css("background-color","red");
});
// <input type="button" value=" 改變索引值爲偶數的 div 元素的背景色爲 紅色" id="b4"/>
$("#b4").click(function(){
$("div:even").css("background-color","red");
});
// <input type="button" value=" 改變索引值爲奇數的 div 元素的背景色爲 紅色" id="b5"/>
$("#b5").click(function(){
$("div:odd").css("background-color","red");
});
// <input type="button" value=" 改變索引值爲大於 3 的 div 元素的背景色爲 紅色" id="b6"/>
$("#b6").click(function(){
$("div:gt(3)").css("background-color","red");
});
// <input type="button" value=" 改變索引值爲等於 3 的 div 元素的背景色爲 紅色" id="b7"/>
$("#b7").click(function(){
$("div:eq(3)").css("background-color","red");
});
// <input type="button" value=" 改變索引值爲小於 3 的 div 元素的背景色爲 紅色" id="b8"/>
$("#b8").click(function(){
$("div:lt(3)").css("background-color","red");
});
// <input type="button" value=" 改變所有的標題元素的背景色爲 紅色" id="b9"/>
$("#b9").click(function(){
//所有標題,特指的h1-h6標籤 選擇器有固定寫法 ":header"
$(":header").css("background-color","red");
});
// <input type="button" value=" 改變當前正在執行動畫的所有元素的背景色爲 紅色" id="b10"/>
$("#b10").click(function(){
//選擇正在執行動畫的,選擇器有固定寫法 ":animated"
$(":animated").css("background-color","red");
});
function abc(){
$("#mover").slideUp(3000);//3s滑動完畢
}
abc();//script裏寫一個定義了的方法，就是調用，就會執行
</script>
練習UI:
<!DOCTYPE html> <html> <head> <title>過濾選擇器</title> <meta charset="UTF-8"> <script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script> <style type="text/css"> div,span{ width: 180px; height: 180px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div .mini{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div .mini01{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } </style> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" /> <input type="button" value=" 改變第一個 div 元素的背景色爲 紅色" id="b1"/> <input type="button" value=" 改變最後一個 div 元素的背景色爲 紅色" id="b2"/> <input type="button" value=" 改變class不爲 one 的所有 div 元素的背景色爲 紅色" id="b3"/> <input type="button" value=" 改變索引值爲偶數的 div 元素的背景色爲 紅色" id="b4"/> <input type="button" value=" 改變索引值爲奇數的 div 元素的背景色爲 紅色" id="b5"/> <input type="button" value=" 改變索引值爲大於 3 的 div 元素的背景色爲 紅色" id="b6"/> <input type="button" value=" 改變索引值爲等於 3 的 div 元素的背景色爲 紅色" id="b7"/> <input type="button" value=" 改變索引值爲小於 3 的 div 元素的背景色爲 紅色" id="b8"/> <input type="button" value=" 改變所有的標題元素的背景色爲 紅色" id="b9"/> <input type="button" value=" 改變當前正在執行動畫的所有元素的背景色爲 紅色" id="b10"/> <h1>有一種奇蹟叫堅持</h1> <h2>自信源於努力</h2> <div id="one"> id爲one </div> <div id="two" class="mini" > id爲two class是 mini <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini" >class是 mini</div> <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini01" >class是 mini01</div> <div class="mini" >class是 mini</div> </div> <div id="mover" > 動畫 </div> </body> <script type="text/javascript"> // <input type="button" value=" 改變第一個 div 元素的背景色爲 紅色" id="b1"/> $("#b1").click(function(){ $("div:first").css("background-color","red"); }); // <input type="button" value=" 改變最後一個 div 元素的背景色爲 紅色" id="b2"/> $("#b2").click(function(){ $("div:last").css("background-color","red"); }); // <input type="button" value=" 改變class不爲 one 的所有 div 元素的背景色爲 紅色" id="b3"/> $("#b3").click(function(){ $("div:not(.one)").css("background-color","red"); }); // <input type="button" value=" 改變索引值爲偶數的 div 元素的背景色爲 紅色" id="b4"/> $("#b4").click(function(){ $("div:even").css("background-color","red"); }); // <input type="button" value=" 改變索引值爲奇數的 div 元素的背景色爲 紅色" id="b5"/> $("#b5").click(function(){ $("div:odd").css("background-color","red"); }); // <input type="button" value=" 改變索引值爲大於 3 的 div 元素的背景色爲 紅色" id="b6"/> $("#b6").click(function(){ $("div:gt(3)").css("background-color","red"); }); // <input type="button" value=" 改變索引值爲等於 3 的 div 元素的背景色爲 紅色" id="b7"/> $("#b7").click(function(){ $("div:eq(3)").css("background-color","red"); }); // <input type="button" value=" 改變索引值爲小於 3 的 div 元素的背景色爲 紅色" id="b8"/> $("#b8").click(function(){ $("div:lt(3)").css("background-color","red"); }); // <input type="button" value=" 改變所有的標題元素的背景色爲 紅色" id="b9"/> $("#b9").click(function(){ //所有標題,特指的h1-h6標籤 選擇器有固定寫法 ":header" $(":header").css("background-color","red"); }); // <input type="button" value=" 改變當前正在執行動畫的所有元素的背景色爲 紅色" id="b10"/> $("#b10").click(function(){ //選擇正在執行動畫的,選擇器有固定寫法 ":animated" $(":animated").css("background-color","red"); }); function abc(){ $("#mover").slideUp(3000);//3s滑動完畢 } abc();//script裏寫一個定義了的方法，就是調用，就會執行 </script> </html>
5.4屬性選擇器
獲得有屬性名的元素：$("A[屬性名]") 記住前兩個即可
獲得屬性名 等於 值 元素：$("A[屬性名=值]")
獲得屬性名 不等於 值 元素：$("A[屬性名!=值]")
獲得屬性名 以 值 開頭 元素：$("A[屬性名^=值]")
獲得屬性名 以 值 結尾 元素：$("A[屬性名$=值]")
獲得屬性名 含有 值 元素：$("A[屬性名*=值]")
複合屬性選擇器，多個屬性同時過濾：$("A[屬性名!=值][屬性名!=值][屬性名!=值]")
<script type="text/javascript">
//<input type="button" value=" 含有屬性title 的div元素背景色爲紅色" id="b1"/>
$("#b1").click(function(){
//屬性選擇器,選擇帶有title
$("div[title]").css("background","red");
});
// <input type="button" value=" 屬性title值等於test的div元素背景色爲紅色" id="b2"/>
$("#b2").click(function(){
//獲取屬性值是test的元素
$("div[title='test']").css("background","red");
});
// <input type="button" value=" 屬性title值不等於test的div元素(沒有屬性title的也將被選中)背景色爲紅色" id="b3"/>
$("#b3").click(function(){
//屬性值不等於test
$("div[title!='test']").css("background","red");
});
// <input type="button" value=" 屬性title值 以te開始 的div元素背景色爲紅色" id="b4"/>
$("#b4").click(function(){
//屬性值以te開始的
$("div[title^='te']").css("background","red");
});
// <input type="button" value=" 屬性title值 以est結束 的div元素背景色爲紅色" id="b5"/>
$("#b5").click(function(){
//屬性值是est結束的
$("div[title$='est']").css("background","red");
});
// <input type="button" value="屬性title值 含有es的div元素背景色爲紅色" id="b6"/>
$("#b6").click(function(){
//屬性值含有es的
$("div[title*='es']").css("background","red");
});
// <input type="button" value="選取有屬性id的div元素，然後在結果中選取屬性title值含有“es”的 div 元素背景色爲紅色" id="b7"/>
$("#b7").click(function(){
//兩個屬性連着寫
$("div[id][title*='es']").css("background","red");
});
</script>
練習UI:
<!DOCTYPE html> <html> <head> <title>屬性選擇器</title> <meta charset="UTF-8"> <script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script> <style type="text/css"> div,span{ width: 180px; height: 180px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div .mini{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div .mini01{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div.visible{ display:none; } </style> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" /> <input type="button" value=" 含有屬性title 的div元素背景色爲紅色" id="b1"/> <input type="button" value=" 屬性title值等於test的div元素背景色爲紅色" id="b2"/> <input type="button" value=" 屬性title值不等於test的div元素(沒有屬性title的也將被選中)背景色爲紅色" id="b3"/> <input type="button" value=" 屬性title值 以te開始 的div元素背景色爲紅色" id="b4"/> <input type="button" value=" 屬性title值 以est結束 的div元素背景色爲紅色" id="b5"/> <input type="button" value="屬性title值 含有es的div元素背景色爲紅色" id="b6"/> <input type="button" value="選取有屬性id的div元素，然後在結果中選取屬性title值含有“es”的 div 元素背景色爲紅色" id="b7"/> <div id="one"> id爲one div </div> <div id="two" class="mini" title="test"> id爲two class是 mini div title="test" <div class="mini" >class是 mini</div> </div> <div class="visible" > class是 one <div class="mini" >class是 mini</div> <div class="mini" >class是 mini</div> </div> <div class="one" title="test02"> class是 one title="test02" <div class="mini01" >class是 mini01</div> <div class="mini" style="margin-top:0px;">class是 mini</div> </div> <div class="visible" > 這是隱藏的 </div> <div class="one"> </div> <div id="mover" > 動畫 </div> </body> <script type="text/javascript"> //<input type="button" value=" 含有屬性title 的div元素背景色爲紅色" id="b1"/> $("#b1").click(function(){ //屬性選擇器,選擇帶有title $("div[title]").css("background","red"); }); // <input type="button" value=" 屬性title值等於test的div元素背景色爲紅色" id="b2"/> $("#b2").click(function(){ //獲取屬性值是test的元素 $("div[title='test']").css("background","red"); }); // <input type="button" value=" 屬性title值不等於test的div元素(沒有屬性title的也將被選中)背景色爲紅色" id="b3"/> $("#b3").click(function(){ //屬性值不等於test $("div[title!='test']").css("background","red"); }); // <input type="button" value=" 屬性title值 以te開始 的div元素背景色爲紅色" id="b4"/> $("#b4").click(function(){ //屬性值以te開始的 $("div[title^='te']").css("background","red"); }); // <input type="button" value=" 屬性title值 以est結束 的div元素背景色爲紅色" id="b5"/> $("#b5").click(function(){ //屬性值是est結束的 $("div[title$='est']").css("background","red"); }); // <input type="button" value="屬性title值 含有es的div元素背景色爲紅色" id="b6"/> $("#b6").click(function(){ //屬性值含有es的 $("div[title*='es']").css("background","red"); }); // <input type="button" value="選取有屬性id的div元素，然後在結果中選取屬性title值含有“es”的 div 元素背景色爲紅色" id="b7"/> $("#b7").click(function(){ //兩個屬性連着寫 $("div[id][title*='es']").css("background","red"); }); </script> </html>
5.5表單選擇器
可用： :enabled
不可用： :disabled
選中（單選radio ，多選checkbox）： :checked
選擇（下列列表 <select>）： :selected （記住後兩個即可）
<script type="text/javascript">
// <input type="button" value=" 利用 jQuery 對象的 val() 方法改變表單內可用 <input> 元素的值" id="b1"/>
$("#b1").click(function(){
//獲取多個input標籤屬性值是 enabled, type屬性值是text 返回數組
var inputs=$("input[type='text']:enabled");
//jQuery本質是個數組，自然可以遍歷
for(var i=0;i<inputs.length;i++){
//但是注意jQuery是數組，存的是dom對象 遍歷出來的元素是dom對象
//alert(inputs[i].val());//error:錯把dom對象當做jQuery對象使用了
alert(inputs[i].value);
}
});
// <input type="button" value=" 利用 jQuery 對象的 val() 方法改變表單內不可用 <input> 元素的值" id="b2"/>
$("#b2").click(function(){
//獲取多個input標籤屬性值是disabled,返回數組
var inputs=$("input[type=text]:disabled");
for(var i=0;i<inputs.length;i++){
$(inputs[i]).val("改變後的值"+i);//這裏是將dom對象轉爲jQuery對象
}
});
/*************★★************/
// <input type="button" value=" 利用 jQuery 對象的 length 屬性獲取多選框選中的個數" id="b3"/>
$("#b3").click(function(){
var inputs=$("input:checked");//input[type=checkbox]:checked
alert(inputs.length);
});
// <input type="button" value=" 利用 jQuery 對象的 text() 方法獲取下拉框選中的內容" id="b4"/>
/*
* html()==DOM對象的innerHTML
* text()==DOM對象的innerText
*/
/*************★★************/
$("#b4").click(function(){
//有兩個<select><option></option></select> 因此返回數組多個元素
var inputs=$("option:selected");//或者: option[id='xxx']:selected
for(var i=0;i<inputs.length;i++){
alert($(inputs[i]).text());//.text()獲取選中內容
}
});
</script>
練習UI:
<!DOCTYPE html> <html> <head> <title>表單屬性過濾選擇器</title> <meta charset="UTF-8"> <script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script> <style type="text/css"> div,span{ width: 180px; height: 180px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div .mini{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div .mini01{ width: 50px; height: 50px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } #job{ margin: 20px; } #edu{ margin-top:-70px; } </style> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" /> <input type="button" value=" 利用 jQuery 對象的 val() 方法改變表單內可用 <input> 元素的值" id="b1"/> <input type="button" value=" 利用 jQuery 對象的 val() 方法改變表單內不可用 <input> 元素的值" id="b2"/> <input type="button" value=" 利用 jQuery 對象的 length 屬性獲取多選框選中的個數" id="b3"/> <input type="button" value=" 利用 jQuery 對象的 text() 方法獲取下拉框選中的內容" id="b4"/> <br><br> <!--屬性值等於屬性名的直接寫個屬性即可--> <input type="text" value="不可用值1" disabled> <input type="text" value="可用值1" > <input type="text" value="不可用值2" disabled="disabled"> <input type="text" value="可用值2" > <br><br> <input type="checkbox" name="items" value="美容" >美容 <input type="checkbox" name="items" value="IT" >IT <input type="checkbox" name="items" value="金融" >金融 <input type="checkbox" name="items" value="管理" >管理 <br><br> <input type="radio" name="sex" value="男" >男 <input type="radio" name="sex" value="女" >女 <br><br> <select name="job" id="job" multiple="multiple" size=4> <option>程序員</option> <option>中級程序員</option> <option>高級程序員</option> <option>系統分析師</option> </select> <select name="edu" id="edu"> <option>本科</option> <option>博士</option> <option>碩士</option> <option>大專</option> </select> <br/> <div id="two" class="mini" > id爲two class是 mini div <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini" >class是 mini</div> <div class="mini" >class是 mini</div> </div> <div class="one" > class是 one <div class="mini01" >class是 mini01</div> <div class="mini" >class是 mini</div> </div> </body> <script type="text/javascript"> // <input type="button" value=" 利用 jQuery 對象的 val() 方法改變表單內可用 <input> 元素的值" id="b1"/> $("#b1").click(function(){ //獲取多個input標籤屬性值是 enabled, type屬性值是text 返回數組 var inputs=$("input[type='text']:enabled"); //jQuery本質是個數組，自然可以遍歷 for(var i=0;i<inputs.length;i++){ //但是注意jQuery是數組，存的是dom對象 遍歷出來的元素是dom對象 //alert(inputs[i].val());//error:錯把dom對象當做jQuery對象使用了 alert(inputs[i].value); } }); // <input type="button" value=" 利用 jQuery 對象的 val() 方法改變表單內不可用 <input> 元素的值" id="b2"/> $("#b2").click(function(){ //獲取多個input標籤屬性值是disabled,返回數組 var inputs=$("input[type=text]:disabled"); for(var i=0;i<inputs.length;i++){ $(inputs[i]).val("改變後的值"+i);//這裏是將dom對象轉爲jQuery對象 } }); /*************★★************/ // <input type="button" value=" 利用 jQuery 對象的 length 屬性獲取多選框選中的個數" id="b3"/> $("#b3").click(function(){ var inputs=$("input:checked");//input[type=checkbox]:checked alert(inputs.length); }); // <input type="button" value=" 利用 jQuery 對象的 text() 方法獲取下拉框選中的內容" id="b4"/> /* * html()==DOM對象的innerHTML * text()==DOM對象的innerText */ /*************★★************/ $("#b4").click(function(){ //有兩個<select><option></option></select> 因此返回數組多個元素 var inputs=$("option:selected");//或者: option[id='xxx']:selected for(var i=0;i<inputs.length;i++){ alert($(inputs[i]).text());//.text()獲取選中內容 } }); </script> </html>
6、jQuery的DOM操作
jQuery函數的特點:
函數支持方法的調用鏈,鏈式編程
函數支持多種調用方式, eg:css(屬性名,屬性值)=》賦值, css(屬性名)=》取值
注1:在頁面頭部寫jQuery事件必須寫$(function(){})，使得這段代碼等到頁面加載完成再調用方法執行，
因爲html/js頁面是解釋型從上往下解釋的，不寫$(function(){})的話，某些元素尚未加載你就取了，肯定出錯
但若js代碼寫在頁面尾部 則不用加$(function(){}) 甚至可以直接在尾部js塊裏寫 funname()調用方法,因爲元素都加載完了注2：jQuery永遠沒有屬性只有函數 (dom即有屬性又有函數 一大堆 很亂)
6.1 val()/value text()/innerText html()/innerHtml ★
★一定要會區別 val()/text()/html()三者區別
//獲取張三 ★獲取value屬性值 val()
//dom對象獲取值,value屬性, jQuery獲取值val()函數 （jQuery沒有屬性只有函數）
alert($("#myinput").val());//獲取標題文本 ★獲取標籤中間的文本值 text()
//dom對象使用屬性innerText,jQuery使用的是text()函數
alert($("#mydiv").text());//獲取mydiv中間的所有內容 ★:獲取標籤中間的所有文本 (子標籤也當做文本處理)
//dom對象使用屬性innerHTML,jQuery使用的是html()函數
alert($("#mydiv").html());
練習UI:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>標籤文本操作</title> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> /*★★★ * 在頁面頭部寫jQuery事件必須寫$(function(){})，使得這段代碼等到頁面加載完成再調用方法執行， 因爲html/js頁面是解釋型從上往下解釋的，不寫$(function(){})的話，某些元素尚未加載你就取了，肯定出錯 但若js代碼寫在頁面尾部 則不用加$(function(){}) 甚至可以直接在尾部js塊裏寫 funname()調用方法 */ //頁面加載完成 $(function() { //獲取張三 ★value值 val() //dom對象獲取值,value屬性, jQuery獲取值val()函數 （jQuery沒有屬性只有函數） //alert($("#myinput").val()); //獲取標題文本 ★標籤中間的文本 text() //dom對象使用屬性innerText,jQuery使用的是text()函數 //alert($("#mydiv").text()); alert($("#mydiv")[0].innerText); //dom對象 //獲取mydiv中間的所有內容 ★:標籤中間的所有文本 (子標籤也當做文本處理) //dom對象使用屬性innerHTML,jQuery使用的是html()函數 alert($("#mydiv").html()); }); </script> </head> <body> <input id="myinput" type="text" name="username" value="張三" /><br /> <div id="mydiv"> <p> <a href="#">標題標籤</a> </p> </div> </body> </html>
6.2屬性操作 attr(),removeAttr(),prop()
prop和attr ★★
jQuery新增函數(prop property)
prop函數適用於,固有屬性(寫法固定的屬性 也即值只能取自己的屬性):
checked=checked selected=selected
attr函數適用於其他的屬性(也即其他屬性建議用attr 固有屬性建議用prop)
//獲取北京節點的name屬性值
alert($("#bj").attr("name"));//設置北京節點的name屬性的值爲dabeijing
$("#bj").attr("name","dabeijing");//新增北京節點的discription屬性 屬性值是didu
//attr設置本身沒有的屬性會自動添加
$("#bj").attr("discription","didu");//刪除北京節點的name屬性
$("#bj").removeAttr("name");//獲得hobby的的選中狀態
//alert($("#hobby").attr("checked"));/直接這樣返回的是從checked和undefined 不好
alert($("#hobby").prop("checked"));
練習UI:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>獲取屬性</title> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <style type="text/css"> div, span { width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float: left; font-size: 17px; font-family: Roman; } div.mini { width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family: Roman; } div.visible { display: none; } </style> </head> <body> <ul> <li id="bj" name="beijing" xxx="yyy">北京</li> <li id="tj" name="tianjin">天津</li> </ul> <input type="checkbox" id="hobby" checked="checked" /> </body> <script type="text/javascript"> /** * 屬性操作: * DOM對象函數 setAttribute(),getAttribute() * jQuery中函數 設置:attr(屬性名,屬性值) 取值:attr(屬性名) */ //獲取北京節點的name屬性值 //alert($("#bj").attr("name")); //設置北京節點的name屬性的值爲dabeijing $("#bj").attr("name", "dabeijing"); //新增北京節點的discription屬性 屬性值是didu //attr設置本身沒有的屬性會自動添加 $("#bj").attr("discription", "didu"); //刪除北京節點的name屬性 $("#bj").removeAttr("name"); //獲得hobby的的選中狀態 //alert($("#hobby").attr("checked"));/直接這樣返回的是從checked和undefined 不好 alert($("#hobby").prop("checked")); /** * jQuery新增函數 * prop property * prop函數適用於,固有屬性(寫法固定 也即值只能取自己): * checked=checked selected=selected * * attr函數適用於其他的屬性 */ </script> </html>
6.3 class/css [addClass()/removeClass()/toggleClass() css()]
addClass("xxclass") 添加樣式
removeClass("xxclass") 移除樣式
toggleClass("xxclass") 切換樣式css("attrname") 取css樣式值
css("attrname","attrvalue") 設置css樣式值 (注意只對css樣式屬性有效)
//attr直接設置class屬性(也即設置樣式)，沒有新增屬性
$("#one").attr("class","second");//addClass添加樣式
$("#one").addClass("second");//移除second樣式
$("#one").removeClass("second");//原來的one樣式和現在的second樣式之間切換 兩個按鈕的功能變成一個按鈕了
$("#one").toggleClass("second");//獲取css樣式
alert($("#one").css("background-color"));//設置css樣式
$("#one").css("background-color","green");
練習UI:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>樣式操作</title> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <style type="text/css"> .one { width: 200px; height: 140px; margin: 20px; background: red; border: #000 1px solid; float: left; font-size: 17px; font-family: Roman; } div, span { width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float: left; font-size: 17px; font-family: Roman; } div .mini { width: 40px; height: 40px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family: Roman; } div .mini01 { width: 40px; height: 40px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family: Roman; } /*待用的樣式*/ .second { width: 300px; height: 340px; margin: 20px; background: yellow; border: pink 3px dotted; float: left; font-size: 22px; font-family: Roman; } </style> </head> <body> <input type="button" value="保存" class="mini" name="ok" class="mini" /> <input type="button" value="採用屬性增加樣式(改變id=one的樣式)" id="b1" /> <input type="button" value=" addClass" id="b2" /> <input type="button" value="removeClass" id="b3" /> <input type="button" value=" 切換樣式" id="b4" /> <input type="button" value=" 通過css()獲得id爲one背景顏色" id="b5" /> <input type="button" value=" 通過css()設置id爲one背景顏色爲綠色" id="b6" /> <h1>有一種奇蹟叫堅持</h1> <h2>自信源於努力</h2> <div id="one"> id爲one </div> <div id="two" class="mini"> id爲two class是 mini <div class="mini">class是 mini</div> </div> <div class="one"> class是 one <div class="mini">class是 mini</div> <div class="mini">class是 mini</div> </div> <div class="one"> class是 one <div class="mini01">class是 mini01</div> <div class="mini">class是 mini</div> </div> <div id="mover"> 動畫 </div> <span class="spanone"> span </span> </body> <script type="text/javascript"> //<input type="button" value="採用屬性增加樣式(改變id=one的樣式)" id="b1"/> $("#b1").click(function() { //attr直接設置class屬性(也即設置樣式)，沒有新增屬性 $("#one").attr("class", "second"); }); //<input type="button" value=" addClass" id="b2"/> $("#b2").click(function() { //addClass添加樣式 $("#one").addClass("second"); }); //<input type="button" value="removeClass" id="b3"/> $("#b3").click(function() { //移除second樣式 $("#one").removeClass("second"); }); //<input type="button" value=" 切換樣式" id="b4"/> $("#b4").click(function() { //原來的one樣式和現在的second樣式之間切換 兩個按鈕的功能變成一個按鈕了 $("#one").toggleClass("second"); }); //<input type="button" value=" 通過css()獲得id爲one背景顏色" id="b5"/> $("#b5").click(function() { alert($("#one").css("background-color")); }); // <input type="button" value=" 通過css()設置id爲one背景顏色爲綠色" id="b6"/> $("#b6").click(function() { $("#one").css("background-color", "green"); }); </script> </html>
6.4 append()/prepend()
append() 添加到標籤內最後面一個子標籤
prepend() 添加標籤內到最前面一個子標籤
/*將反恐放置到city的後面*/
$("#city").append($("#fk"));/*將反恐放置到city的最前面*/
$("#city").prepend($("#fk"));效果都是移動了整個反恐標籤
練習UI:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元素操作</title> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <style type="text/css"> div, span { width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float: left; font-size: 17px; font-family: Roman; } div .mini { width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family: Roman; } div.visible { display: none; } </style> </head> <body> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="tj" name="tianjin">天津</li> <li id="cq" name="chongqing">重慶</li> </ul> <ul id="love"> <li id="fk" name="fankong">反恐</li> <li id="xj" name="xingji">星際</li> </ul> <div id="foo1">Hello1</div> </body> <script type="text/javascript"> /**將反恐放置到city的後面*/ $("#city").append($("#fk"));//將反恐整個標籤移到上面去了 /**將反恐放置到city的最前面*/ $("#city").prepend($("#fk")); </script> </html>
6.5 remove
remove：刪除一整個標籤
DOM中,刪除節點,需要父節點刪除子節點(瀏覽器支持) 而jQuery支持自殺
//刪除<li id="bj" name="beijing">北京</li>
$("#bj").remove();//刪除所有的子節點 清空元素中的所有後代節點(不包含(本身)屬性節點).
$("#city").empty();
練習UI:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>刪除節點</title> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <style type="text/css"> div, span { width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float: left; font-size: 17px; font-family: Roman; } div.mini { width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family: Roman; } div.visible { display: none; } </style> </head> <body> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="tj" name="tianjin">天津</li> <li id="cq" name="chongqing">重慶</li> </ul> <p class="hello">Hello</p> how are <p>you?</p> </body> <script type="text/javascript"> //刪除<li id="bj" name="beijing">北京</li> /** * DOM中,刪除節點,需要父節點刪除子節點(瀏覽器支持) * jQuery支持自殺 */ $("#bj").remove(); //刪除所有的子節點 清空元素中的所有後代節點(不包含屬性節點). //測試(id='city')並沒有被刪除 $("#city").empty(); </script> </html>
7、jQuery動畫(自帶的極其簡單的動畫)
$("div").show(3000);//3s顯示
$("#div").fadeIn(3000);//3s淡出現
$("#div").fadeOut(3000);//3s淡消失
$("div").hide(3000)//3s隱藏
練習UI:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; height: 300px; background: #00FF00; /*display: none;*/ } </style> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function() { $("div").show(3000); //3s顯示 //$("#div").fadeIn(3000);//3s淡出現 //$("#div").fadeOut(3000);//3s淡消失 $("div").hide(3000) //3s隱藏 }); </script> </head> <body> <div id="div"></div> </body> </html>
8.案例
8.1隔2行換色
$("tr:gt(1):even").css("background-color","blanchedalmond")
$("tr:gt(1):odd").css("background-color","#FFC0CB");兩行代碼足矣
練習UI:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格隔行變色</title> <script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script> <script type="text/javascript"> $(function(){ /** * 偶數行背景色: even * 奇數行背景色: odd * * 注意早的就是行標籤 tr 而不是table * 表頭不能設置 所以ge(1) 從大於1行開始設置 */ //jQuery支持方法鏈 $("tr:gt(1):even").css("background-color","blanchedalmond").css("font-size","20px"); $("tr:gt(1):odd").css("background-color","#FFC0CB"); }); </script> </head> <body> <table id="tab1" border="1" width="800" align="center" > <tr> <td colspan="5"><input type="button" value="刪除"></td> </tr> <tr style="background-color: #999999;"> <th><input type="checkbox"></th> <th>分類ID</th> <th>分類名稱</th> <th>分類描述</th> <th>操作</th> </tr> <tr> <td><input type="checkbox"></td> <td>1</td> <td>手機數碼</td> <td>手機數碼類商品</td> <td><a href="">修改</a>|<a href="">刪除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>2</td> <td>電腦辦公</td> <td>電腦辦公類商品</td> <td><a href="">修改</a>|<a href="">刪除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>3</td> <td>鞋靴箱包</td> <td>鞋靴箱包類商品</td> <td><a href="">修改</a>|<a href="">刪除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>4</td> <td>家居飾品</td> <td>家居飾品類商品</td> <td><a href="">修改</a>|<a href="">刪除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>5</td> <td>牛奶製品</td> <td>牛奶製品類商品</td> <td><a href="">修改</a>|<a href="">刪除</a></td> </tr><tr> <td><input type="checkbox"></td> <td>6</td> <td>大豆製品</td> <td>大豆製品類商品</td> <td><a href="">修改</a>|<a href="">刪除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>7</td> <td>海蔘製品</td> <td>海蔘製品類商品</td> <td><a href="">修改</a>|<a href="">刪除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>8</td> <td>羊絨製品</td> <td>羊絨製品類商品</td> <td><a href="">修改</a>|<a href="">刪除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>9</td> <td>海洋產品</td> <td>海洋產品類商品</td> <td><a href="">修改</a>|<a href="">刪除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>10</td> <td>奢侈用品</td> <td>奢侈用品類商品</td> <td><a href="">修改</a>|<a href="">刪除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>4</td> <td>家居飾品</td> <td>家居飾品類商品</td> <td><a href="">修改</a>|<a href="">刪除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>4</td> <td>家居飾品</td> <td>家居飾品類商品</td> <td><a href="">修改</a>|<a href="">刪除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>4</td> <td>家居飾品</td> <td>家居飾品類商品</td> <td><a href="">修改</a>|<a href="">刪除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>10</td> <td>奢侈用品</td> <td>奢侈用品類商品</td> <td><a href="">修改</a>|<a href="">刪除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>4</td> <td>家居飾品</td> <td>家居飾品類商品</td> <td><a href="">修改</a>|<a href="">刪除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>4</td> <td>家居飾品</td> <td>家居飾品類商品</td> <td><a href="">修改</a>|<a href="">刪除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>4</td> <td>家居飾品</td> <td>家居飾品類商品</td> <td><a href="">修改</a>|<a href="">刪除</a></td> </tr> </table> </body> </html>
8.2全選全不選
$("input[type=checkbox]").prop("checked",$("#zong").prop("checked"));
或者:$(".itemSelect").prop("checked", $("#zong").prop("checked"));一行代碼足矣
練習UI:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全選和全不選</title> <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> /** * 點擊事件實現功能 * 全選和全不選: * 所有的分選框的屬性 checked = 總選框的屬性checked * checked屬於固有屬性,函數prop */ function selectAll() { //$("input[type=checkbox]").prop("checked", $("#zong").prop("checked")); $(".itemSelect").prop("checked", $("#zong").prop("checked")); } </script> </head> <body> <table id="tab1" border="1" width="800" align="center"> <tr> <td colspan="5"><input type="button" value="刪除"></td> </tr> <tr> <th><input type="checkbox" id="zong" οnclick="selectAll()"></th> <th>分類ID</th> <th>分類名稱</th> <th>分類描述</th> <th>操作</th> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>1</td> <td>手機數碼</td> <td>手機數碼類商品</td> <td> <a href="">修改</a>| <a href="">刪除</a> </td> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>2</td> <td>電腦辦公</td> <td>電腦辦公類商品</td> <td> <a href="">修改</a>| <a href="">刪除</a> </td> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>3</td> <td>鞋靴箱包</td> <td>鞋靴箱包類商品</td> <td> <a href="">修改</a>| <a href="">刪除</a> </td> </tr> <tr> <td><input type="checkbox" class="itemSelect"></td> <td>4</td> <td>家居飾品</td> <td>家居飾品類商品</td> <td> <a href="">修改</a>| <a href="">刪除</a> </td> </tr> </table> </body> </html>
8.3 定時廣告
<script type="text/javascript">
/**
* 頁面打開後3秒,顯示廣告
* 動畫效果,觀看3秒中
*/
$(function(){
//setTimeout只執行一次 且延遲3s執行
setTimeout(function(){
$(".ad").slideDown(3000);
},3000);
setTimeout(function(){
$(".ad").slideUp(3000);//3s滑上去 就是隱藏了
},9000);
});
</script>
練習UI:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .ad { width: 1200px; margin: 0 auto; display: none; } </style> <script src="../js/jquery-3.3.1.min.js" type="text/javascript"> </script> <script type="text/javascript"> /** * 頁面打開後3秒,顯示廣告 * 動畫效果,觀看3秒中 */ $(function() { //setTimeout只執行一次 且延遲3s執行 setTimeout(function() { $(".ad").slideDown(3000); }, 3000); setTimeout(function() { $(".ad").slideUp(3000); //3s滑上去 就是隱藏了 }, 9000); }); </script> </head> <body> <div class="ad" id="guanggao"> <img src="img/mm.jpg" width="1200" height="500" /> </div> <!-- 頭部,黑馬logo,正品保證,登錄註冊 表格:1*3 1行3列 --> <table width="1200" cellpadding="0" cellspacing="0" align="center"> <tr> <!-- 黑馬logo --> <td> <img src="img/logo2.png" /> </td> <!-- 正品保障圖片--> <td> <img src="img/header.jpg" /> </td> <!-- 登錄註冊--> <td> <a href="#">登錄</a> <a href="#">註冊</a> <a href="#">購物車</a> </td> </tr> </table> <!-- 導航菜單 1*1 --> <table width="1200" height="30" cellpadding="0" cellspacing="0" align="center" bgcolor="black"> <tr> <td> <a href="#">首頁</a> <a href="#">手機數碼</a> <a href="#">電腦辦公</a> <a href="#">實用家居</a> <a href="#">戶外用品</a> </td> </tr> </table> <br /> <!-- 廣告輪播圖 1*1 --> <table width="1200" cellpadding="0" cellspacing="0" align="center"> <tr> <td> <img src="img/1.jpg" width="1200" /> </td> </tr> </table> <!-- 熱門商品文字 圖片 1*1 --> <table width="1200" cellpadding="0" cellspacing="0" align="center"> <tr> <td> <h3>熱門商品 <img src="img/title2.jpg" /></h3> </td> </tr> </table> <!-- 熱門商品的展示區域 2*7表格 2行,7列 --> <table width="1200" cellpadding="0" cellspacing="0" align="center"> <tr> <!-- 跨行操作,2行,0元大牌購物 --> <td rowspan="2"> <img src="img/big01.jpg" /> </td> <!--跨列操作,3列,投影神券 --> <td colspan="3"> <img src="img/middle01.jpg" /> </td> <!--<td></td> <td></td>--> <!--冬瓜, 圖片,文字 --> <td align="center"> <img src="img/small03.jpg" /><br /> 冬瓜 <br /> <font color="red">$299</font> </td> <td align="center"> <img src="img/small03.jpg" /><br /> 冬瓜 <br /> <font color="red">$299</font> </td> <td align="center"> <img src="img/small03.jpg" /><br /> 冬瓜 <br /> <font color="red">$299</font> </td> </tr> <tr> <!--<td></td>--> <td align="center"> <img src="img/small03.jpg" /><br /> 冬瓜 <br /> <font color="red">$299</font> </td> <td align="center"> <img src="img/small03.jpg" /><br /> 冬瓜 <br /> <font color="red">$299</font> </td> <td align="center"> <img src="img/small03.jpg" /><br /> 冬瓜 <br /> <font color="red">$299</font> </td> <td align="center"> <img src="img/small03.jpg" /><br /> 冬瓜 <br /> <font color="red">$299</font> </td> <td align="center"> <img src="img/small03.jpg" /><br /> 冬瓜 <br /> <font color="red">$299</font> </td> <td align="center"> <img src="img/small03.jpg" /><br /> 冬瓜 <br /> <font color="red">$299</font> </td> </tr> </table> <!-- 寵物糧廣告 1*1 --> <table width="1200" cellpadding="0" cellspacing="0" align="center"> <tr> <td> <img src="img/ad.jpg" /> </td> </tr> </table> <!-- 熱門商品文字 圖片 1*1 --> <table width="1200" cellpadding="0" cellspacing="0" align="center"> <tr> <td> <h3>熱門商品 <img src="img/title2.jpg" /></h3> </td> </tr> </table> <!-- 熱門商品的展示區域 2*7表格 2行,7列 --> <table width="1200" cellpadding="0" cellspacing="0" align="center"> <tr> <!-- 跨行操作,2行,0元大牌購物 --> <td rowspan="2"> <img src="img/big01.jpg" /> </td> <!--跨列操作,3列,投影神券 --> <td colspan="3"> <img src="img/middle01.jpg" /> </td> <!--<td></td> <td></td>--> <!--冬瓜, 圖片,文字 --> <td align="center"> <img src="img/small03.jpg" /><br /> 冬瓜 <br /> <font color="red">$299</font> </td> <td align="center"> <img src="img/small03.jpg" /><br /> 冬瓜 <br /> <font color="red">$299</font> </td> <td align="center"> <img src="img/small03.jpg" /><br /> 冬瓜 <br /> <font color="red">$299</font> </td> </tr> <tr> <!--<td></td>--> <td align="center"> <img src="img/small03.jpg" /><br /> 冬瓜 <br /> <font color="red">$299</font> </td> <td align="center"> <img src="img/small03.jpg" /><br /> 冬瓜 <br /> <font color="red">$299</font> </td> <td align="center"> <img src="img/small03.jpg" /><br /> 冬瓜 <br /> <font color="red">$299</font> </td> <td align="center"> <img src="img/small03.jpg" /><br /> 冬瓜 <br /> <font color="red">$299</font> </td> <td align="center"> <img src="img/small03.jpg" /><br /> 冬瓜 <br /> <font color="red">$299</font> </td> <td align="center"> <img src="img/small03.jpg" /><br /> 冬瓜 <br /> <font color="red">$299</font> </td> </tr> </table> <!-- 頁面底部 廣告圖片,超鏈接 2*1 --> <table width="1200" cellpadding="0" cellspacing="0" align="center"> <tr> <td> <img src="img/footer.jpg" width="1200" /> </td> </tr> <tr> <td align="center"> <a href="#">關於我們</a> <a href="#">聯繫我們</a> <a href="#">招賢納士</a> <a href="#">友情鏈接</a> <a href="#">法律聲明</a> <a href="#">支付方式</a> <a href="#">配送方式</a> <a href="#">服務聲明</a> <a href="#">廣告聲明</a> <br /><br /> Copyright © 2005-2016傳智播客版權所有 </td> </tr> </table> <br /> <br /> </body> </html>
