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> </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">区块A</div>
<div class="divbox">区块B</div>
<div class="divbox">区块C</div>
</div>
</body>
</html>
jQuery学习记录1的更多相关文章
- jquery学习记录
1.选择器实例 语法 描述 $(this) 当前 HTML 元素 $("p") 所有 <p> 元素 $("p.intro") 所有 class=&q ...
- 2016.8.16 JQuery学习记录
1.$(document).ready(function(){}); 这个函数会在浏览器加载完页面之后,尽快执行: 2.所有的JQuery函数用有个$开始表示,All jQuery functions ...
- jQuery Moblile Demos学习记录Theming、Button、Icons图标，脑子真的不好使。
jQuery Moblile Demos学习记录Theming.Button.Icons图标,脑子真的不好使. 06. 二 / Jquery Mobile 前端 / 没有评论 本文来源于www.i ...
- jQuery Moblile Demos学习记录Panel
jQuery Moblile Demos学习记录Panel 11. 二 / Jquery Mobile / 没有评论 本文来源于www.ifyao.com禁止转载!www.ifyao.com 我就 ...
- 【jQuery】精细学习记录
[jQuery]精细学习记录 基础 基本语法: $(选择器).action(回调函数); $/jQuery //jQuery核心函数 $(选择器) //获得的jQuery对象 jQuery核心 - j ...
- D3.js学习记录【转】【新】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JQuery学习笔记——基础选择器
第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...
- Echarts学习记录——如何去掉网格线及网格区域颜色
关键属性 splitLine和splitArea,可以设置相关的属性 示例代码 <!DOCTYPE html> <html lang="en"> <h ...
- Echarts学习记录——如何给x轴文字标签添加事件
Echarts学习记录——如何给x轴文字标签添加事件 关键属性 axisLabel下属性clickable:true 并给图表添加单击事件 根据返回值判断点击的是哪里 感觉自己的方法有点变扭,有更好办 ...
随机推荐
- Linux下如何查看JDK安装路径
1:echo $JAVA_HOME 使用$JAVA_HOME的话能定位JDK的安装路径的前提是配置了环境变量$JAVA_HOME,否则如下所示,根本定位不到JDK的安装路径 [root@localho ...
- OpenStack:安装Nova
>安装Nova1. 安装# apt-get install nova-novncproxy novnc nova-api \ nova-ajax-console-proxy nova-cert ...
- c/c++常用代码--使用libcurl下载文件
#pragma once #include <stdio.h>#include <stdlib.h> #include <curl/curl.h> #ifdef ...
- Entity Framework SqlFunctions 教你如何在EF调用sqlserver方法的函数存根
今天算是研究了一天的SqlFunctions,请教了几个群的牛人,居然发现大伙对这个都比较陌生, 有的甚至直指EF中是不能调用sqlserver里的方法的. 因为之前搞过linq to sql 里面的 ...
- C#泛型集合之Dictionary<k, v>使用技巧
1.要使用Dictionary集合,需要导入C#泛型命名空间 System.Collections.Generic(程序集:mscorlib) 2.描述 1).从一组键(Key)到一组值(Value) ...
- AngularJs学习笔记-慕课网AngularJS实战
第1章 快速上手 放弃了IE8以及以下,不支持. 4大核心特性: 1.MVC Model: 数据模型 View:视图 Controller:业务逻辑和控制逻辑 好处:职责清晰,模块化. 2.模块化 3 ...
- Labview实现频率调制（FM）
Labview实现频率调制(FM) 频率调制的原理: 自己的实现为三角函数分解 根据这个公式在Labview中连线则可以得到最终的波形输出 实现效果 从频域图中可以看出,载波信号的频率被调制,原本为双 ...
- 四、VMware Tools 安装 与 问题
解决VMware Tools无法安装的问题 虚拟机上装win2kgho版的系统,安装VMware Tools时,遇到“VMware Tools installation cannot be start ...
- JavaScript构建（编绎）系统大比拼：Grunt vs. Gulp vs. NPM
Nicolas Bevacqua进行了一个比较JavaScript构建(编绎)系统的任务.他对三巨头: Grunt, Gulp and NPM进行了比较,并讨论了每种的优缺点. By Nicolas ...
- JPA学习---第十节：JPA中的一对一双向关联
1.创建实体类,代码如下: 代码清单1: package learn.jpa.entity; import javax.persistence.CascadeType; import javax.pe ...