jquery是完全支持css的，我们举个例子来看看使用jquery的方便之处，这功劳是属于选择器的：

例1：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="jquery-1.10.1.js"></script>

<script type="text/javascript">

   $(function()

   {

      $("li.abc").css("color","red");

	   });

</script>

</head>

<body>

<div id="hello">

  <ul>

    <li>niujiabin</li>

    <li class="abc">maybe</li>

    <li>gossipgo</li>

  </ul>

</div>

</body>

</html>

我们想要做到改变maybe字体颜色为红色

 $("li.abc")

利用选择器可以直接获取到，非常方便，如果利用javascript获取就很麻烦

.css("color","red");

<li>之间的文本就会变成红色

运行结果：

例2:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="jquery-1.10.1.js"></script>

<script type="text/javascript">

   $(function()

   {

      $("#hello ul li:even").css("background","grey").css("color","red");

	   });

</script>

</head>

<body>

<div id="hello">

  <ul>

    <li>niujiabin</li>

	<li class="abc">maybe</li>

	<li>gossipgo</li>

  </ul>

</div>

</body>

</html>
$("#hello ul li:even")

选取id为hello下的ul下的li的奇数行。

.css("color","red");

改变奇数行的颜色

运行结果：

例3：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<style type="text/css">

.bg{

background:#f00;

color:#fff;

}

</style>

<script type="text/javascript" src="jquery-1.10.1.js"></script>

<script type="text/javascript">

   $(function()

   {

     $("li").mouseover(setColor).mouseout(setColor);

	 function setColor()

	 {

		 $(this).toggleClass("bg");

	 }

	   });

</script>

</head>

<body>

<div id="hello">

  <ul>

    <li>niujiabin</li>

	<li class="abc">maybe</li>

	<li>gossipgo</li>

  </ul>

</div>

</body>

</html>
<style type="text/css">

.bg{

background:#f00;

color:#fff;

}

</style>

css样式，设置背景色和颜色

$("li").mouseover(setColor).mouseout(setColor);
为li添加事件

运行结果是鼠标放到哪就会显示变化，离开就会消失。

jquery第二期:三个例子带你走进jquery的更多相关文章

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

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

  2. 初探JavaScript（三）——JS带我"碰壁"带我飞

    已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScrip ...

  3. [转]一个简单的Linux多线程例子 带你洞悉互斥量 信号量 条件变量编程

    一个简单的Linux多线程例子 带你洞悉互斥量 信号量 条件变量编程 希望此文能给初学多线程编程的朋友带来帮助,也希望牛人多多指出错误. 另外感谢以下链接的作者给予,给我的学习带来了很大帮助 http ...

  4. 老司机带你解读jQuery插件开发流程

    jquery插件开发模式 jquery插件一般有三种开发方式: 通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部 ...

  5. 《Java从入门到失业》第四章：类和对象（4.3）：一个完整的例子带你深入类和对象

    4.3一个完整的例子带你深入类和对象 到此为止,我们基本掌握了类和对象的基础知识,并且还学会了String类的基本使用,下面我想用一个实际的小例子,逐步来讨论类和对象的一些其他知识点. 4.3.1需求 ...

  6. 618技术特辑（三）直播带货王，“OMG买它”的背后，为什么是一连串技术挑战？

    [本期推荐]为什么一到大促,我们的钱包总是被掏空?是大家自制力不够,还是电商平台太会读懂人心,从技术维度,抽丝剥茧一探究竟. 摘要:动辄几十上百万人同时在线的直播间,让所有人能同时公平的去抢购,并且还 ...

  7. 小丁带你走进git的世界三-撤销修改

    一.撤销指令 git checkout还原工作区的功能 git reset  还原暂存区的功能 git clean  还没有被添加进暂存区的文件也就是git还没有跟踪的文件可以使用这个命令清除他们 g ...

  8. css通用小笔记02——浮动、清除（三个例子）

    css中通常会用到浮动与清除,也是一个必须掌握的知识点,概念性的东西不多说,下面举几个例子,来说明它的用法:1.文字环绕效果  2.多个div并排显示 3.清除浮动(默认显示) 一.文字环绕效果: h ...

  9. jQuery阻止事件冒泡的例子

    下面给给各位朋友稍加整理了一jquery中阻止事件冒泡的一些例子,我们知道JQuery 提供了两种方式来阻止事件冒泡,但我们简单的利用它来做一些应用可能不深入或不理解,下面整理了更详细的方法,有兴趣的 ...

随机推荐

  1. Spring Tool Suit 在Eclipse上的安装

    登录http://spring.io/tools/sts/all 下载所需的Spring Tool Suit安装包 我用的是springsource-tool-suite-3.6.1.RELEASE- ...

  2. The Frog's Games（二分）

    The Frog's Games Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65768/65768 K (Java/Others) ...

  3. android学习--TabHost选项卡组件

    TabHost是一种非常有用的组件,TabHost能够非常方便地在窗体上放置多个标签页,每一个标签页获得了一个与外部容器同样大小的组件摆放区域.在手机系统的应用类似"未接电话".& ...

  4. sql注入数据库修复方法

    1.第一种情况是 需要将指定的 注入字符串全部替换掉(仅替换注入的字符串为空) declare @delStr nvarchar(500) set @delStr='<script src=ht ...

  5. 零拷贝概念 -- linux内核

    零拷贝(zero-copy) 备快速网络接口的主要技术. 零拷贝技术通过降低或消除关键通信路径影响速率的操作,降低传输数据的操作系统开销和协议处理开销,从而有效提高通信性能,实现快速传输数据. 零拷贝 ...

  6. poj3358数论（欧拉定理）

    http://poj.org/problem?id=3358 (初始状态为分数形式)小数点进制转换原理:n / m ; n /= gcd( n , m ) ; m/= gcd( n , m ) ; n ...

  7. UIAlertController(警告栏) 自学之初体验

    UIAlertController有两种样式  preferredStyle: UIAlertControllerStyleAlert (位于屏幕的中部) UIAlertControllerStyle ...

  8. jquery之stop()的用法

    // 为了看效果,随意写的动画 $('#animater').animate({ 'right':-800 }, 3000).animate({'font-size':'16px'},'normal' ...

  9. SQL SERVER中如何格式化日期

    1. SELECT convert(varchar, getdate(), 100) -- mon dd yyyy hh:mmAM (or PM)    -- Oct 2 2008 11:01AM  ...

  10. 在 Canvas 中绘制扇形

    在 HTML5 Canvas 中,我们可以通过 arc 方法来绘制圆形: // context.arc(x, y, r, sAngle, eAngle, counterclockwise); var ...