<div class="tab-head">
<h2 id="tab1" class="selected">JQGrid</h2>
<h2 id="tab2" >Uploadify</h2>
<h2 id="tab3" >Angularjs</h2>
</div>
<div class="tab-content">
<div id="c1" class="div-content show">
<table id="list1"></table>
<div id="pager1"></div> </div>
<div id="c2" class="div-content"><input type="file" id="uploadify" name="uploadify" /></div>
<div id="c3" class="div-content">content3</div>
</div>

定义三个tab横向排列,切换tab会显示不同的内容。
css样式定义如下:

div.tab-head h2 {
border: solid cornflowerblue 1px;
width: 100px;
height: 25px;
margin:;
float: left;

text-align: center;
list-style:none;
} .tab-content {
border: solid cornflowerblue 1px;
width: 100%;
height: 100%;
} .div-content {
display: none;

margin-top:30px;
} .selected {
background-color: cornflowerblue;
} .show{
display: block;
}

Jquery 定义mouseover事件:

$(this).ready(function () {
var tabs = $('.tab-head h2');
tabs.mousemove(function () {
tabs.removeClass("selected");
$(this).addClass("selected");
var index = $(this).index();
$('.div-content').removeClass('show');
$('.div-content').eq(index).addClass('show');
});
});

1.选择器

元素选择器:$('div')   $('div .tab-head')   $('ul li:first')

id选择器:$('#id')

class选择器:$('#class')

属性选择器:$("[id=choose]")

input选择器::input, :Button, :text

2.Css类

  • addClass() - 向被选元素添加一个或多个类  空格区分多个样式
  • removeClass() - 从被选元素删除一个或多个类
  • toggleClass() - 对被选元素进行添加/删除类的切换操作
  • css() - 设置或返回样式属性 $("p").css({"background-color":"yellow","font-size":"200%"});

JQuery 操作CSS的几种方式:

1.$("#div").attr("class","divClass")

2.$("div").css("color","red")

3.$('div').addClass('divClass')

3.遍历

first();

last();

eq(index);

filter(".intro");方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回

not() 方法与 filter() 相反;

each() 方法规定为每个匹配元素规定运行的函数

$("button").click(function(){
   $("li").each(function(){
     alert($(this).text())
   });
 });

小例子 熟悉jquery的更多相关文章

  1. php+jquery+ajax+json简单小例子

    直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...

  2. bootstrap 模态 modal 小例子

    bootstrap 模态 modal  小例子 <html> <head> <meta charset="utf-8" /> <title ...

  3. 【zTree】 zTree使用的 小例子

    使用zTree树不是第一次了  但是 还是翻阅着之前做的 对照着 使用起来比较方便  这里就把小例子列出来   总结一下使用步骤 这样方便下次使用起来方便一点 使用zTree树的步骤: 1.首先  在 ...

  4. jetty 介绍以及小例子

    Jetty 是一个开源的servlet容器,它为基于Java的web容器,例如JSP和servlet提供运行环境.Jetty是使用Java语言编写的,它的API以一组JAR包的形式发布.开发人员可以将 ...

  5. bootstrap 模态 modal 小例子【转】

    bootstrap 模态 modal  小例子 <html> <head> <meta charset="utf-8" /> <title ...

  6. Python-学习-小例子练习

    网上了点小例子,练习一下下,都是特别简单的.而且这些代码也都是找的网上的代码,目的是在于练习一下Python和熟悉下Python的编码风格等等 学习一门语言,最快的方法就是把它用在世界的开发中,这样才 ...

  7. 试试 IEnumerable 的 10 个小例子

    IEnumerable 接口是 C# 开发过程中非常重要的接口,对于其特性和用法的了解是十分必要的.本文将通过10个小例子,来熟悉一下其简单的用法. 全是源码 以下便是这10个小例子,响应的说明均标记 ...

  8. 试试 IEnumerable 的另外 6 个小例子

    IEnumerable 接口是 C# 开发过程中非常重要的接口,对于其特性和用法的了解是十分必要的.本文将通过6个小例子,来熟悉一下其简单的用法. <!-- more --> 阅读建议 在 ...

  9. springmvc入门的第一个小例子

    今天我们探讨一下springmvc,由于是初学,所以简单的了解一下 springmvc的流程,后续会持续更新... 由一个小例子来简单的了解一下 springmvc springmvc是spring框 ...

随机推荐

  1. C#在Dictionary中使用枚举作为键

    Enum类型没有实现IEquatable接口,Dictionary中使用Enum作为键时,将发生装箱,使效率降低. 此时可用Dictionary中一个接收IEqualityComparer<T& ...

  2. mysql用户名密码忘记了解决方法

    今天想用一下实验室服务器的mysql,发现不记得用户名密码了. 解决方法如下: 1. 保证服务器处于安全的状态,如果可以请拔掉网线...(不过我跳过了这一步,额) 2. 修改/etc/my.cnf文件 ...

  3. 控制面板中java设置项如何删除

    卸载jdk或者jre后,如果控制面板中仍然有java项,重新安装可能仍然无法设置,提示找不到"javacpl.exe" 解决办法:删除C:\windows\system32\下的j ...

  4. Dubbo学习 概念定义

    Dubbo是什么? Dubbo[]是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案. 其核心部分包含: 远程通讯: 提供对多种基于长连接的NIO框架抽象封 ...

  5. case when 用法

    1.  case.group by组合用法 首先看看表中的内容  (COUNTRY . POPULATION.  SEX) COUNTRY POPULATION SEX 中国 中国 美国 美国 加拿大 ...

  6. Halcon pick_and_place_scara_stationary_cam.hdev程序学习

    此示例显示如何基于由SCARA手眼校准确定的校准信息,使用SCARA机器人执行拾取和放置应用程序. 在第一步骤中,根据模型图像定义形状模型. 然后,基于该形状模型,在每个图像中搜索对象. 对于一个选定 ...

  7. 解决Oracle在scott用户下创建视图(VIEW)权限不足的方法

    问题描述:在scott用户下创建视图的时候,报错:权限不足.(其他用户以此类推)解决方法: 以dba用户登录 sqlplus / as sysdba 赋予scott用户创建VIEW的权限 grant  ...

  8. equals()和hashCode()隐式调用时的约定

    package com.hash; import java.util.HashMap; public class Apple { private String color; public Apple( ...

  9. C# .Net中七层架构浅析

    Model实体层,DBUtility数据访问抽象类,IDAL数据访问接口层,SQLServerDAL数据访问层,DALFactory数据访问工厂类,BLL业务逻辑层,UI界面层 一.项目名称及描述:( ...

  10. C的文件操作

    文件文件的基本概念 所谓“文件”是指一组相关数据的有序集合. 这个数据集有一个名称,叫做文件名. 实际上在前面的各章中我们已经多次使用了文件,例如源程序文件.目标文件.可执行文件.库文件 (头文件)等 ...