jQuery学习记录1

jquery 和 js css里面都是坑呀 this.style.backgroundColor 和 css {background:#8df;}
是冲突的,用了前者,再$(this).addClass("css class name");效果显示不出来。

http://youchenglin.iteye.com/blog/685026

前他的一些内容参见下列代码


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>a.html</title>
<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" />aa<div class="content" id="1">1111</div>
<div id="results">11</div>
<div id="results2">23</div>

<table width="200" border="0" cellspacing="1" bgcolor="#eeeeee" class="color">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<br/><hr/><br/>
</center>
<div id="menu">
<div class="divbox">区块A</div>
<div class="divbox">区块B</div>
<div class="divbox">区块C</div>
</div>
</body>
</html>

jQuery学习记录1,布布扣,bubuko.com

时间: 2024-11-10 02:46:11

jQuery学习记录1的相关文章

JQuery 学习记录

在没有接触jQuery之前,总是听到或看到别人讲原生的JS,感到很奇怪,怎么还有原生的JS,现在才明白原来是相对jQuery来讲的.jQuery是一个很好的框架,运用起来比JS简单很多.在学习他的过程中,也学习了AJAX,可以实现与后台交互,学习时间有点短,对AJAX还不是很熟悉,感觉有点难度. 也已经学习大概一周的时间了,学会了留言板.瀑布流及搜索框的制作.相对来说,前端我掌握的比后端好,不知道是不是自己潜意识排斥,呃,但是总归要学的,不要呆在舒适区,要好好的学习,遇到困难才能有收获. 大体来

jquery学习记录

i{margin:21px 0}#header-wrapper .Menu-indicator>i,.wrapper-embed .Menu-indicator>i{margin:13px 0}.Menu-popover{background-color:#f7f7f7;display:none;border:1px solid #b5b5b5;position:absolute;z-index:9998}.Menu-popover.is-active{display:block}.Menu_

jquery学习记录四(操作DOM元素)

jQuery 操作DOM元素主要有: 1.使用attr()方法控制元素的属性 2.操作元素的内容 3.操作元素的样式 4.移除属性和样式 5.使用append()方法向元素内追加内容 6.使用appendTo()方法向被选元素内容插入内容 7.使用before()和after()在元素前后插入内容 8.使用clone()方法复制元素 9.替换内容 10.使用wrap()和wrapinner()方法包裹元素和内容 11.使用each()方法遍历元素 12.使用remove()和empty()方法删

jquery学习记录二(过滤性选择器)

过滤性选择器包括: 1.:first过滤选择器 2.:eq(index)过滤选择器 3.:contains(text)过滤选择器 4.:has(selector)过滤选择器 5.:hidden过滤选择器 6.:visible过滤选择器 7.[attribute=value]属性选择器 8.[attribute!=value]属性选择器 9.[attribute*=value]属性选择器 10.:first-child子元素选择器 11.last-child子元素选择器 过滤性选择器,该类型的选择

jquery学习记录一:jquery动态添加html元素后设置其绑定事件

1. jquery动态添加html元素(例如:) <div id="testdiv"> <ul></ul> </div> 假设我们要给ul动态添加的<li>绑定click事件形成如下结果 <div id="devices_div"> <ul> <li name="apple">apple</li> <li name="pea

jQuery Moblile Demos学习记录Theming、Button、Icons图标,脑子真的不好使。

jQuery Moblile Demos学习记录Theming.Button.Icons图标,脑子真的不好使. 06. 二 / Jquery Mobile 前端 / 没有评论 本文来源于www.ifyao.com禁止转载!www.ifyao.com 一CSS Framework块 Theming 是一个整体了解默认主题和内置的A-E主题各个效果.待解决问题,自定义主题,下边是一个知识点. http://www.w3cschool.cc/jquerymobile/jquerymobile-them

jQuery Moblile Demos学习记录Panel

jQuery Moblile Demos学习记录Panel 11. 二 / Jquery Mobile / 没有评论 本文来源于www.ifyao.com禁止转载!www.ifyao.com 我就简短的总结一下: Panel位置:data-position属性控制:值:left,right, 显示方式:data-display属性   值:reveal默认在页面之下,overlay页面上,push和页面统一,将页面推开. Panel应该放在header,content,footer之前或者之后,

学习记录jQuery的animate函数

很久之前就对jQuery animate的实现非常感兴趣,不过前段时间很忙,直到前几天端午假期才有时间去研究. jQuery.animate的每种动画过渡效果都是通过easing函数实现的.jQuery1.4.2中就预置了两个这样的函数: easing: {linear: function( p, n, firstNum, diff ) {return firstNum + diff * p;},swing: function( p, n, firstNum, diff ) {return ((

jQuery学习之prop和attr的区别

http://blog.sina.com.cn/s/blog_655388ed01017cnc.html .prop() 1..prop( propertyName ) 获取匹配集合中第一个元素的Property的值 2. .prop( propertyName, value ) .prop( map ) .prop( propertyName, function(index, oldPropertyValue) ) 给匹配元素集合设定一个或多个属性 .prop()和 .attr()区别 下面是