<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.3.1.js"></script>
无标题文档</title>
<style type="text/css" >
.div1{ width:100px; height:100px; background:#30C;}
.div2{ width:100px; height:100px; background:#30C;}
</style>
</head>
<body>
<div class="div1" id="once"></div>
<p>
<div class="div2" id="once2"></div>
<p>
<div class="div2" id="once3"></div>
<p>
<div class="div2" id="once4"></div>
<p>
<div class="div2" id="once5"></div>
</body>
<script>
/*
jquery的id选择器和按钮绑定一个事件
$('#b1')表示选中b1这个控件
$('#b1').click给b1这个按钮绑定click事件
function(){}{
window.alert();
}表示点击b1按钮究竟做了什么
*/
$('#b1').click(
function(){
$('#once').css("background","red");
//window.alert('aa');
}
);
/*********改变class为div2所有元素背景色为#ff0033*************/
$('#b2').click(
function(){
$('.div2').css("background",'yellow');
}
);
/*******改变元素名<div>的所有元素背景色为*******/
$('#b3').click(
function(){
$('input').css("background",'pink');
}
);
/*改变所有元素*/
$('#b4').click(
function(){
$("*").css("background","#00ff33");
}
);
/***改变所有p元素和id为once2的元素背景为#3399ff***/
$('#b5').click(
function (){
$('input,#once2').css("background","red");
}
);
</script>
</html>
网友评论