欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

选择器——基本选择器

程序员文章站 2022-07-14 22:13:48
...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.8.0.js"></script>
	</head>
	<body>
		<h1>DOM 对象转成 jQuery 对象 示例</h1>
		<script type="text/javascript">
			$(document).ready(function() {
				//基本选择器     5个
				var $div2=$("#myid");
				$div2.click(function(){
					alert($("#myid").size() +"   1"); 
					alert($(".basketball").size() +"   2");
					alert($("span") +"   3");
					alert($("*") +"   4");
//					alert($("#myid" +"   1"));   //联合选择器 
				});		
				//1、 通配符选择器 $("*")               
				$("*").css("background","#CCFFCC");
				//2、类选择器  $(".类名")
				$(".myclass").css("background","lightpink").css("color","blue").css("font-size","30px");
				//3、标签选择器
				$("h2").css("color","mediumvioletred");
				//4、#id选择器
				$("#btid").css("color","brown").css("font-size","30px");
				//5、联合选择器
   				$("#ftid,.vollegball").css("color","blueviolet");

			});		
		</script>	
		
		<div id="myid" title="myid">
			<h2>兴趣爱好</h2>
			<p class="basketball" id="btid">篮球</p>
			<span class="football" id="ftid">足球</span>
			<div class="vollegball">排球</div>
		</div>
		
		<div class="myclass" title="myclass">
			<h2>编程语言有哪些</h2>
			<p>java</p>
			<span>c#</span>
			<div>php</div>		
		</div>
	</body>
</html>