jQuery06 元件選取(html元素+CSS ID)+元件隱藏/顯示(具有時間差)+修改元件的CSS的設定值-改變背景顏色

jQuery06 元件選取(html元素+CSS ID)+元件隱藏/顯示(具有時間差)+修改元件的CSS的設定值-改變背景顏色

jQuery06 元件選取(html元素+CSS ID)+元件隱藏/顯示(具有時間差)+修改元件的CSS的設定值-改變背景顏色

 

 

資料來源http://www.w3school.com.cn/jquery/index.asp

code2html:http://tohtml.com/

 

<!DOCTYPE html>
<html>
<head>
<title>jQuery 元件選取(html元素+CSS ID)+元件隱藏/顯示(具有時間差)+修改元件的CSS的設定值-改變背景顏色</title>
<!--資料來源	http://www.w3school.com.cn/jquery/index.asp-->
<scriptsrc="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
/*透過jQuery來修改元件的CSS的設定值-改變背景顏色*/
/*HTML+id作為選擇器*/
$("button#hide").click(function(){
$("p").css("background-color","red");
$("p").hide(1000);
});
/*HTML+class作為選擇器*/
$("button.show").click(function(){
$("p").css("background-color","blue");
$("p").show(1000);
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<buttontype="button"id="hide">hide</button>
<buttontype="button"class="show">show</button>
</body>
</html>

 

 


發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *