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. deciaml(十进制浮点运算)

    # -*- coding: utf-8 -*- # ==================== #File: python #Author: python #Date: 2014 #========== ...

  2. IOS 创建一张有颜色的UIImage

    #import <UIKit/UIKit.h> @interface UIImage (ImageWithColor) + (UIImage *)imageWithColor:(UICol ...

  3. java技术学习网址收藏

    Bootstrap:http://www.runoob.com/bootstrap/bootstrap-intro.html AngularJS : http://www.runoob.com/ang ...

  4. C++中malloc/free和new/delete 的使用

    malloc/free 的使用要点 函数malloc的原型如下: void * malloc(size_t size); 用malloc申请一块长度为length的整数类型的内存,程序如下: int ...

  5. ASP.Net请求处理机制初步探索之旅 - Part 1 前奏(转)

        在读本文之前建议先阅读IIS架构:http://www.cnblogs.com/tiantianle/p/5079932.html     不管是ASP.Net WebForm还是ASP.Ne ...

  6. html中把li前面的的小圆点换成小图片的方法

    li { list-style: none; background: url(../img/li_dis.png) no-repeat left; padding-left: 20px; }

  7. 怎么改变Android手机里面文件的打开方式?包括文件管理器或者需要用到文件的APP

    工具-程序-qq-清除默认设置 设置>程序与功能>默认

  8. PHP学习笔记二十三【This】

    <?php Class Person { function test1() { $this->test2();//类里面的方法互相调用要加$this } protected functio ...

  9. 并行查询提高sql查询速度

    新项目在使用Oracle开发中遇到测试库千万级数据导致数据慢,除去加索引和存储过程可以明显提速外,使用并行也可以提速 select /*+parallel(a,8)*/ a.* from a 加上/* ...

  10. PL/SQL 流程控制语句-条件结构，循环结构

    条件结构 一.IF-THEN语句 IF-THEN语句是最简单的IF语句. 语法: IF condition THEN Statements END IF; 例子: declare v_score nu ...