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. 【原】Project configuration is not up-to-date with pom.xml

    导入一个Maven项目之后发现有一个如下的错误: Project configuration is not up-to-date with pom.xml. Run project configura ...

  2. ExtJS 表单 submit时错误处理

    这里不提success,提提Extjs 表单提交的failure方法. 在表单的提交中,当发生异常行为时通常分为三种情况 1. 无法连接到服务器 2. 表单验证错误 3. 业务逻辑错误 对应下面的代码 ...

  3. Windows用WinDbg分析蓝屏dump文件查找原因(转)

    WinDbg官方下载: http://msdl.microsoft.com/download/symbols/debuggers/dbg_x86_6.11.1.404.msi http://msdl. ...

  4. Spring bean配置继承

    在 Spring,继承是用为支持bean设置一个 bean 来分享共同的值,属性或配置. 一个子 bean 或继承的bean可以继承其父 bean 的配置,属性和一些属性.另外,子 Bean 允许覆盖 ...

  5. rc_80 tomcat 日志

    1 #!/bin/sh 2 cd /mnt/tomcat/tomcat_8082/logs; 3 tail -f catalina.out;

  6. Maven之——仓库（下）

    Maven之--仓库(下) 1.    快照版本号 Maven世界中不论什么项目或者构件都有自己的版本号. Maven在构建时检測到构件是快照版本号.而且当前构件不是最新版本号的时候.就会自己主动更新 ...

  7. 嵌入式Linux开发

    嵌入式Linux的开发和研究是Linux领域研究的一个热点,目前已开发成功的嵌入式系统有一半以上都是Linux.Linux到底有什么优势,使之取得如此辉煌的成绩呢?本文分为两大部分:Linux的优点. ...

  8. 由 12306.cn 谈谈高并发+高负载网站性能技术

    12306.cn 网站挂了,被全国人民骂了.我这两天也在思考这个事,我想以这个事来粗略地和大家讨论一下网站性能的问题.因为仓促,而且完全基于本人有限的经验和了解, 所以,如果有什么问题还请大家一起讨论 ...

  9. 第八章openwrt 703N使用HUB（集线器）插U盘等设备

    在这里就要吐槽一下了,在网上一搜索竟然没有一篇详细的关于703N使用hub后挂载u盘的文章,想了很久问了别人还弄了一天晚上终于弄好了.好吧下面开始言归正传: 1.其实一般质量可以的集线器例如SSK这类 ...

  10. Java 反照机制中 getMethod()和getDeclaredField()区别

    Java 反射机制中 getMethod()和getDeclaredField()区别 今天在程序中用到java反射机制时,遇到的问题记录一下:我当时遇到的问题是,我用反射getMethod()调用类 ...