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. PHP操作MySQL数据库的相关函数

    首先,要分清SQL语句的类型: SQL语句的分类 (1)DDL:Data Define Language,数据定义语言--定义表的列结构 CREATE.DROP.ALTER.TRUNCATE (2)D ...

  2. [CSS] CSS Transitions: Delays and Multiple Properties

    <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery- ...

  3. 数据库的四种语言(DDL、DML、DCL、TCL)

    1.DDL (Data Definition Language )数据库定义语言 statements are used to define the database structure or sch ...

  4. [HeadFirst-HTMLCSS学习笔记][第十三章表格]

    表格 -table 块 tr 行 table row th 表头 table head td 表数据 table data; caption 表格标题 <table> <captio ...

  5. [置顶] highcharts封装使用总结

    Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.目前High ...

  6. 创建ListView的基本步骤

    参考<疯狂android讲义>第2.5节P94 1.创建一个或者多个ListView <LinearLayout xmlns:android="http://schemas ...

  7. spring3+hibernate3+（dbcp+oracle+拦截器事务配置）整合（一）

    1.applicationContext-base.xml文件 <?xml version="1.0" encoding="UTF-8"?>< ...

  8. web 前端 shopnc项目 首页分类一开始做前端,我是拒绝的

    看图别说话 经过几小时的折腾 主要还是靠耐心

  9. linux创建SVN客户端,服务器

    1- linux基本都自带svn 2-创建svn服务器 新创建服务器代码仓库 # svnadmin create serversvn 这样,我们就在~/目录下新建了版本库serverSvn. 3-修改 ...

  10. 正则表达式及re模块

    正则表达式使用的特殊符号与字符 元字符 描述 \ 将下一个字符标记符.或一个向后引用.或一个八进制转义符.例如,“\\n”匹配\n.“\n”匹配换行符.序列“\\”匹配“\”而“\(”则匹配“(”.即 ...