addClass_removeClass_toggleClass_hasClass.html

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.myClass{
font-size:30px;
color:red
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<div>无样式</div>
<div class="myClass">有样式</div>
<script type="text/javascript">
//为无样式的DIV添加样式
//$("div:first").addClass("myClass"); //为有样式的DIV删除样式
//$("div:last").removeClass("myClass"); //切换样式,即有样式的变成无样式,无样式的变成有样式
$("div:first").toggleClass("myClass"); /*最后一个DIV是否有样式
var flag = $("div:last").hasClass("myClass");
alert(flag?"有样式":"无样式");
*/
</script>
</body>
</html>

change_photo.html

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.6.js"></script>
</head>
<body>
<div style="width:20%;height:20%;border-style:double;border-color:white">
诸葛亮
</div>
<div style="width:20%;height:20%;border-style:double;border-color:white">
曹操
</div>
<div style="width:20%;height:20%;border-style:double;border-color:white">
孙权
</div>
<div style="position:absolute;top:5%;left:60%;width:20%;height:20%;border-style:dotted">
<img src="../images/zgl.jpg"/>
</div>
<hr/>
<script type="text/javascript">
$("div:lt(3)").mouseover(function(){
$(this).css("border-color","red");
});
$("div:lt(3)").mouseout(function(){
$(this).css("border-color","white");
});
</script>
</body>
</html>

fadeIn_fadeOut.html

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.6.js"></script>
</head>
<body>
<p>
<img src="../images/zgl.jpg" />
<!--
<img src="../images/zgl.jpg"/>
-->
</p>
<div>
<!-- 显示结果 -->
</div>
<script type="text/javascript">
//淡入显示图片
// $("img").fadeIn(5000); //淡出隐蔽图片
//$("img").fadeOut(5000);
</script>
</body>
</html>

show_hide.html

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<p>
<img src="../images/zgl.jpg" style="display:none"/>
<!--
<img src="../images/zgl.jpg"/>
-->
</p>
<div>
<!-- 加载完毕 -->
</div>
<script type="text/javascript">
//图片显示
$("img").show(5000); //图片隐蔽(单位毫秒
//$("img").hide(5000); </script>
</body>
</html>

slideUp_slideDown.html

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../js/jquery-1.8.2.js"></script>
</head>
<body>
<div style="display:none">
中国0<br/>
中国1<br/>
中国2<br/>
中国3<br/>
中国4<br/>
中国5<br/>
中国6<br/>
中国7<br/>
中国8<br/>
中国9<br/>
</div>
<input type="button" value="我的好友"/>
<script type="text/javascript">
//向下滑动
$(":button").click(function(){
$("div").slideDown(200);
}); /*向上滑动
$(":button").click(function(){
$("div").slideUp(100);
});
*/ </script>
</body>
</html>

jquery api 常见api 效果操作例子的更多相关文章

  1. jquery api 常见api 元素操作例子

    append_prepend.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...

  2. jquery使用--常见前端效果实现

    一.选中左右侧内容到另一侧:选中左侧内容到右侧,选中右侧内容到左侧 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional/ ...

  3. JavaScript常见原生DOM操作API总结

    [TOC] 最近面试的时候被这个问题给卡了,所以抽时间好好复习一下. 几种对象 Node Node是一个接口,中文叫节点,很多类型的DOM元素都是继承于它,都共享着相同的基本属性和方法.常见的Node ...

  4. JS中常见原生DOM操作API

    摘自:https://blog.csdn.net/hj7jay/article/details/53389522 几种对象 Node Node是一个接口,中文叫节点,很多类型的DOM元素都是继承于它, ...

  5. Hadoop基础-HDFS的API常见操作

    Hadoop基础-HDFS的API常见操作 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本文主要是记录一写我在学习HDFS时的一些琐碎的学习笔记, 方便自己以后查看.在调用API ...

  6. Hadoop生态圈-Hbase的API常见操作

    Hadoop生态圈-Hbase的API常见操作 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.

  7. 抛弃jQuery:DOM API之选择元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...

  8. jQuery 3.1 API中文文档

    jQuery 3.1 API中文文档 一.核心 1.1 核心函数 jQuery([selector,[context]]) 接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素. jQ ...

  9. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

随机推荐

  1. CSDN 四川大学线下编程比赛第一题:数字填充

    题目意思: http://student.csdn.net/mcs/programming_challenges peter喜欢玩数字游戏,但数独这种游戏对他来说太简单了,于是他准备玩一个难的游戏. ...

  2. Druid 配置_StatFilter

    Druid内置提供一个StatFilter,用于统计监控信息. 1. 别名配置 StatFilter的别名是stat,这个别名映射配置信息保存在druid-xxx.jar!/META-INF/drui ...

  3. Assignment (HDU 2853 最大权匹配KM)

    Assignment Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  4. 使MySQL对表名不区分大小写

    今天郁闷死了,在LINUX下调一个程序老说找不到表,但是我明明是建了表的,在MYSQL的命令行下也可以查到,为什么程序就找不到表呢? 后来请教了一个老师才搞定,原来是LINUX下的MYSQL默认是要区 ...

  5. 《实战突击:PHP项目开发案例整合(第2版)(含DVD光盘1张)》

    <实战突击:PHP项目开发案例整合(第2版)(含DVD光盘1张)> 基本信息 作者: 徐康明    辛洪郁 出版社:电子工业出版社 ISBN:9787121221378 上架时间:2014 ...

  6. HashCode的秘密

    看String源码HashCode的计算方式: public int hashCode() {int h = hash;if (h == 0 && value.length > ...

  7. HDU 1232 (13.10.31)

    畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  8. exchange 升级顺序导致的邮件被发不出的问题?

    最近在做一个项目POC,准备升级过程目前的2007 环境到exchange 2010,由于客户环境是exchange 2007 sp1 不满足升级的基本条件,我们必须将exchange 2007 sp ...

  9. django 实现上传文件功能

    需求:自己写一个文件上传功能 代码: urls.py from django.conf.urls import url from django.contrib import admin from ap ...

  10. C#中的数组【转】

    目录 数组的声明 数组的初始化 数组的访问 数组的常用属性和方法 为方便起见,以下数组均定义为整型 数组的声明 C#声明数组时,方括号[]必须跟在类型后面,而不是标识符后面 1. 声明一维数组 C#数 ...