jQuery学习记录1
2020-12-13 02:46
标签：style blog class code java c jquery 和 js css里面都是坑呀 this.style.backgroundColor 和 css {background:#8df;}
是冲突的，用了前者，再$(this).addClass("css class name");效果显示不出来。 http://youchenglin.iteye.com/blog/685026 前他的一些内容参见下列代码 jQuery学习记录1,搜素材,soscw.com jQuery学习记录1 标签：style blog class code java c 原文地址：http://www.cnblogs.com/mitang/p/3720180.html
DOCTYPE html>
html>
head>
meta charset="UTF-8" />
title>a.htmltitle>
style type="text/css">
div.content {
width: 300px;
border: 1px solid red;
}
.divbox{
height:300px;
width:200px;
background:#ffffff;
border:solid 1px #ccc;
float:left;
margin-right:10px;
}
.divOver{
background:#eff8fe;
border:solid 1px #d2dce3;
}
style>
script type="text/javascript" src="http://code.jquery.com/jquery.min.js">script>
script type="text/javascript">
jQuery (function ()
{
$ ("div.content").click (function ()
{
var $self = $ (this).attr ("id");
var $check = $ ("input#inputid" + $self);
if (!!$check.prop ("checked"))
{
$check.prop ("checked", false);
$ (this).css (
{
"color" : "black"
});
}
else
{
$check.prop ("checked", true);
$ (this).css (
{
"color" : "red"
});
}
});
$(".color").find("tr").each(function(i){this.style.backgroundColor=[‘#fff‘,‘#eee‘][i%2]});//一行为白色，一行为灰色
$(".color").find("tr").mouseover(function(){
$(this).css("backgroundColor","#6699CC");
});
$(".color").find("tr").mouseout(function(){
$("tr:even").css("backgroundColor","#fff"); //偶数行的颜色
$("tr:odd").css("backgroundColor","#eee"); //奇数行的颜色
});
//当鼠标滑入时将div的class换成divOver
$(‘.divbox‘).hover(function(){
$(this).addClass(‘divOver‘);
},function(){
//鼠标离开时移除divOver样式
$(this).removeClass(‘divOver‘);
}
);
});
script>
head>
body>
center>
input id="inputid1" type="checkbox" />aadiv class="content" id="1">1111div>
div id="results">11div>
div id="results2">23div>
table width="200" border="0" cellspacing="1" bgcolor="#eeeeee" class="color">
tr>
td> td>
td> td>
tr>
tr>
td> td>
td> td>
tr>
tr>
td> td>
td> td>
tr>
tr>
td> td>
td> td>
tr>
tr>
td> td>
td> td>
tr>
tr>
td> td>
td> td>
tr>
table>
br/>hr/>br/>
center>
div id="menu">
div class="divbox">区块Adiv>
div class="divbox">区块Bdiv>
div class="divbox">区块Cdiv>
div>
body>
html>