jquery第二期:三个例子带你走进jquery
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的更多相关文章
- php+jquery+ajax+json简单小例子
直接贴代码: <html> <title>php+jquery+ajax+json简单小例子</title> <?php header("Conte ...
- 初探JavaScript（三）——JS带我"碰壁"带我飞
已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScrip ...
- [转]一个简单的Linux多线程例子 带你洞悉互斥量 信号量 条件变量编程
一个简单的Linux多线程例子 带你洞悉互斥量 信号量 条件变量编程 希望此文能给初学多线程编程的朋友带来帮助,也希望牛人多多指出错误. 另外感谢以下链接的作者给予,给我的学习带来了很大帮助 http ...
- 老司机带你解读jQuery插件开发流程
jquery插件开发模式 jquery插件一般有三种开发方式: 通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部 ...
- 《Java从入门到失业》第四章：类和对象（4.3）：一个完整的例子带你深入类和对象
4.3一个完整的例子带你深入类和对象 到此为止,我们基本掌握了类和对象的基础知识,并且还学会了String类的基本使用,下面我想用一个实际的小例子,逐步来讨论类和对象的一些其他知识点. 4.3.1需求 ...
- 618技术特辑（三）直播带货王，“OMG买它”的背后，为什么是一连串技术挑战？
[本期推荐]为什么一到大促,我们的钱包总是被掏空?是大家自制力不够,还是电商平台太会读懂人心,从技术维度,抽丝剥茧一探究竟. 摘要:动辄几十上百万人同时在线的直播间,让所有人能同时公平的去抢购,并且还 ...
- 小丁带你走进git的世界三-撤销修改
一.撤销指令 git checkout还原工作区的功能 git reset 还原暂存区的功能 git clean 还没有被添加进暂存区的文件也就是git还没有跟踪的文件可以使用这个命令清除他们 g ...
- css通用小笔记02——浮动、清除（三个例子）
css中通常会用到浮动与清除,也是一个必须掌握的知识点,概念性的东西不多说,下面举几个例子,来说明它的用法:1.文字环绕效果 2.多个div并排显示 3.清除浮动(默认显示) 一.文字环绕效果: h ...
- jQuery阻止事件冒泡的例子
下面给给各位朋友稍加整理了一jquery中阻止事件冒泡的一些例子,我们知道JQuery 提供了两种方式来阻止事件冒泡,但我们简单的利用它来做一些应用可能不深入或不理解,下面整理了更详细的方法,有兴趣的 ...
随机推荐
- AngularJs登录
AngularJs 登录的简单实现 多数AngularJs应用离不开登录操作,最近阅读了一篇关于AngularJs登录的博客,博客中实现的登录系统demo能够应用于多数小型AngularJs应用,实现 ...
- （36）JS运动之使物体向右运动
基本思路:样式要是绝对定位,不然的话根本走不起来.当开启一个定时器的时候.必须先清除定时器.这是为了防止鼠标连续点击button而开启多个定时器,导致物体的速度加快等原因,其次要控制好物体的运动和停止 ...
- iOS8 Core Image In Swift：自动改善图像以及内置滤镜的使用
iOS8 Core Image In Swift:自动改善图像以及内置滤镜的使用 iOS8 Core Image In Swift:更复杂的滤镜 iOS8 Core Image In Swift:人脸 ...
- Android应用程序资源的查找过程分析
文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/8806798 我们知道,在Android系统中, ...
- 状态模式----C++实现
状态模式 定义: 允许一个对象在其内部状态改变时改变它的行为.对象看起来似乎修改了它的类. 实用性: 1. 一个对象的行为取决于它的状态,并且它必须在运行时刻根据状态改变它的行为. 2. 一个操作中含 ...
- 基于avalon1.4.x ----分页组件编写
avalon分页组件 (1.4.x版本) 随着avalon2的推出,avalon1的官网已经不再维护了,现在似乎是找不到avalon 1.4版本的官方文档了,所以本文章所有的内容均不保证正确性,只能保 ...
- 经典SQL语句大全(转载)
原文http://www.cnblogs.com/yubinfeng/archive/2010/11/02/1867386.html#top 一.基础 1.说明:创建数据库CREATE DATABAS ...
- 使用C#创建自定义背景色/形状的菜单栏与工具栏
C#对于菜单栏与工具栏都提供了统一的背景色,形状的渲染类,即ToolStripRenderer类,同时根据不同的情形,提供了多个继承类,分别是ToolStripProfessionalRender,T ...
- Asp.net数据库缓存依赖
Asp.net数据库缓存依赖 更多的时候,我们的服务器性能损耗还是在查询数据库的时候,所以对数据库的缓存还是显得特别重要,上面几种方式都可以实现部分数据缓存功能.但问题是我们的数据有时候是在变化的,这 ...
- ongl三种符号的使用
1.#符号 访问非根对象属性,由于Struts2中值栈被视为根对象,所以访问其他非根对象时,需要加#前缀.实际上,#相当于ActionContext.getContext(): 用于过滤和投影(pro ...