標籤：background display border title
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana;}div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px;}div.hide { display: none;}</style><script type="text/javascript" src="js/jquery-1.7.2.js"></script><script type="text/javascript">$(function(){//相當於window.onload//使用id選取器選擇id=btn1的元素$("#btn1")，並且添加點擊事件$("#btn1").click(function(){//alert("btn1 click...");$("#one").css("background", "#ffbadb");//選擇id為one的元素並改變其背景顏色});$("#btn2").click(function(){$(".mini").css("background", "#ffbadb");//選擇class為mini的元素並改變其背景顏色});$("#btn3").click(function(){$("div").css("background", "#ffbadb");//選擇元素名為div的元素並改變其背景顏色});$("#btn4").click(function(){$("*").css("background", "#ffbadb");//選擇所有的元素並改變其背景顏色});$("#btn5").click(function(){$("span, #two").css("background", "#ffbadb");//選擇span元素和id為two的元素並改變其背景顏色});})</script></head><body><input type="button" value="選擇 id 為 one 的元素" id="btn1" /><input type="button" value="選擇 class 為 mini 的所有元素" id="btn2" /><input type="button" value="選擇 元素名是 div 的所有元素" id="btn3" /><input type="button" value="選擇 所有的元素" id="btn4" /><input type="button" value="選擇 所有的 span 元素和id為two的元素" id="btn5" /><br><br><div class="one" id="one">id 為 one,class 為 one 的div<div class="mini">class為mini</div></div><div class="one" id="two" title="test">id為two,class為one,title為test的div<div class="mini" title="other">class為mini,title為other</div><div class="mini" title="test">class為mini,title為test</div></div><div class="one"><div class="mini">class為mini</div><div class="mini">class為mini</div><div class="mini">class為mini</div><div class="mini"></div></div><div class="one"><div class="mini">class為mini</div><div class="mini">class為mini</div><div class="mini">class為mini</div><div class="mini" title="tesst">class為mini,title為tesst</div></div><div style="display:none;" class="none">style的display為"none"的div</div><div class="hide">class為"hide"的div</div><div>包含input的type為"hidden"的div<input type="hidden" size="8"></div><span id="span">^^span元素^^</span></body></html>
本文出自 “阿凡達” 部落格，請務必保留此出處http://shamrock.blog.51cto.com/2079212/1564880
JQuery學習筆記-基本選取器
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
