学习jQuery第一天：演示jQuery层次选择器

最新推荐文章于 2022-11-06 08:33:01 发布

fangcaixia498602700

最新推荐文章于 2022-11-06 08:33:01 发布

阅读量642

点赞数

分类专栏： jQuery学习文章标签： jquery function input stylesheet class button

本文链接：https://blog.csdn.net/fangcaixia498602700/article/details/6860319

版权

jQuery学习专栏收录该内容

0 篇文章 0 订阅

订阅专栏

body{
		    font: 0.8em "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
			color: #4F4A4A
			background: #F4FFDF;
			margin: 0;
			padding: 0;
}

#wrapper{
			width: 710px;
			margin: 30px auto;
			background: #dbf5ab url (../images/logo.jpg) center  top  no-repeat;
			padding: 25px 25px 25px 25px;
			border: 12px solid #7fbf10;
			position: relative;


}
h1 {
			text-transform: capitalize;
			text-align: center;
			margin: 0;
			padding: 0.3em 0;
			text-indent:60px;
}

h2{
			margin: 0;
			padding: 0.5em 0;
			color:#568945;
			font-family:Helvetica, Arial, Sans-serif;
}

p {
			margin: 0;
			padding: 0.4em 0;
			color:#4F4A4A;
			line-height:1.4em;
}

#nav {
			list-style: none;
			padding: 0;
			margin: 10px 0 20px 0;
			background: #7fbf10;
			display:block;                       
			overflow: hidden;
			font-size: lem;
}

#nav li {
			display: inline;
}

#nav li  a {
			display: block;
			float: left;
			padding: 10px 20px;
			color: white;
			text-decoration: none;
}

#nav li a.current {

		    	background:#449F00;
}

#nav li a:hover {
				background:#449F00;			
}

#content img.right {
				float: right;
				margin: 0 0 8px 8px;
}

#foot {

		padding: 15px;
		color: #7fbf10;
		text-align: center;
		margin: 30px 0 0 0;
		border-top :1px solid #7fbf10;
}

.red {
	  background-color: red;

}
.green {
		background-color: blue;
}

#content #first {
		color: white;
		background-color: green;
		width:240px;
		height:100px;
		margin:10px 0px 0px 0px;
		padding: 10px;
}




 
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>jQuery Playground</title>
	<link title="style" media="screen" href="css/green.css" type="text/css" rel="stylesheet" />
	<script type="text/JavaScript" src="js/jquery.js"></script>
	
	<script type="text/JavaScript">
	
	
	$(document).ready(function(){
         //onclic事件触发
          $("#testbutton").click(function(){
	      $("label + input").addClass("green");	
	     }
	  );
	});
	
	$(document).ready(function(){
	//onclic事件触发
	  $("#testbutton").click(function(){
	     $("label + input ").addClass("red");	
	     }
	  );
	});
    </script>
</head>


<body>
	<div id="wrapper">
		<h1>jQuery Playground</h1>
		<ul id="nav">
			<li><a class="current" href="index.html">Test Page</a></li>
			<li><a class="current" href="#">about</a></li>
		</ul>
		<div id="content">
			<h2>演示jQuery层次选择器</h2>
			<input id="testbutton" type=button value="单击测试按钮" /> </p>
			<form>
			<label>Name:</label>
			<input name="name" />
			<fieldset>
			<label>Newsletter:</label>
			<input  name="newsletter" />
			</fieldset>			
			</form>
			<label>Others:</label>
			<input name="others" />
		</div>
		<div id="foot">Powered By Dennis Ji.</div>
	</div>
</body>
</html>






我是这么理解的  $(" ")  这个东西呢，就是jQuery用来放选择器的地方，而jQuery的选择器有很多都跟CSS很像。
还有 
$(document).ready(function(){
		//onclic事件触发
		$("#testbutton").click(function(){
			$("label + input ").addClass("green");	
		    }

);
	});
这个 函数 是页面DOM加载完成后执行，就是说如果你在这个函数下方又写了这个函数，那么他是会执行两次，为了看出效果，在第一次绑定时给 label之后的所有兄弟元素input添加类型，背景色改为绿色，第二次绑定时，背景色该为红色。最后点击“testbutton”，背景色是为红色。。。。
 window.οnlοad=function(){};
 window.οnlοad=function(){};这样只会执行最后一个

fangcaixia498602700

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习jQuery第一天：演示jQuery层次选择器

body{ font: 0.8em "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif; color: #4F4A4A background: #F4FFDF;
复制链接

扫一扫