jquery api 常见api 效果操作例子
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 效果操作例子的更多相关文章
- jquery api 常见api 元素操作例子
append_prepend.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...
- jquery使用--常见前端效果实现
一.选中左右侧内容到另一侧:选中左侧内容到右侧,选中右侧内容到左侧 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional/ ...
- JavaScript常见原生DOM操作API总结
[TOC] 最近面试的时候被这个问题给卡了,所以抽时间好好复习一下. 几种对象 Node Node是一个接口,中文叫节点,很多类型的DOM元素都是继承于它,都共享着相同的基本属性和方法.常见的Node ...
- JS中常见原生DOM操作API
摘自:https://blog.csdn.net/hj7jay/article/details/53389522 几种对象 Node Node是一个接口,中文叫节点,很多类型的DOM元素都是继承于它, ...
- Hadoop基础-HDFS的API常见操作
Hadoop基础-HDFS的API常见操作 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本文主要是记录一写我在学习HDFS时的一些琐碎的学习笔记, 方便自己以后查看.在调用API ...
- Hadoop生态圈-Hbase的API常见操作
Hadoop生态圈-Hbase的API常见操作 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.
- 抛弃jQuery：DOM API之选择元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...
- jQuery 3.1 API中文文档
jQuery 3.1 API中文文档 一.核心 1.1 核心函数 jQuery([selector,[context]]) 接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素. jQ ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
随机推荐
- Codeforces Round #304 (Div. 2) D. Soldier and Number Game 数学 质因数个数
D. Soldier and Number Game Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/conte ...
- kali 执行apt-get upgrade后，终端无法打开的解决办法
今天在kali执行apt-get upgrade命令后,reboot启动,发现进入界面终端无法开启 一波百度,google发现大概应该是语言的配置问题,因为最开始安装kali的时候是选择中文,可能up ...
- MyBatis 错误日志检索
当怀疑是sql语句执行存在错误时,可以用一下关键字检索日志文件: 检索关键字: Cause: SQLException sql原始报错内容: [DEBUG] [2016-05-03 09:37:05 ...
- How to implement *All-Digital* analog-to-digital converters in FPGAs and ASICs
When we engineers look at the complexity of system design these days, we are challenged with crammin ...
- JLInk 各种版本图片收集
所有图片来自网络, 版权归原始所有者拥有. JLink V5 JLink V6 JLink V7 JLink V8 JLink V9 JLink Ultra JLink Pro
- Java垃圾回收精粹 — Part4
Java垃圾回收精粹分4个部分,本篇是第4部分.在第4部分里介绍了G1收集器.其他并发收集器以及垃圾收集监控和调优. Garbage First (G1) 收集器 G1 (-XX:+UseG1GC)收 ...
- Js的在线代码编辑器：CodeMirror
github地址:https://github.com/codemirror/CodeMirror/tree/master/demo 里面包含需要的js.css文件以及大量的示例 官网:https:/ ...
- Spark Streaming：大规模流式数据处理的新贵（转）
原文链接:Spark Streaming:大规模流式数据处理的新贵 摘要:Spark Streaming是大规模流式数据处理的新贵,将流式计算分解成一系列短小的批处理作业.本文阐释了Spark Str ...
- iOS:切换视图时,反向传递数据方法二：代理
代理: 1.发送信息的控制器设置一个代理,并自定义一个代理的方法,用来传递数据 2.接受信息的控制器遵循发送信息的控制器的协议 3.接受信息的控制器设置发送信息的控制器的代理为自己self 4.接受信 ...
- OpenCV学习(5) Mat的基本操作(2)
本章我们学习一下Mat中的常用操作,因为在后面其它的教程中,我们经常要对图像进行各种处理,也要使用这些操作. 一. Mat的复制,就是从一个矩阵A,生成相关的另一个矩阵B. (1)使用赋值 ...