1.实现鼠标移入则添加背景色，鼠标移出则删除背景色

<!DOCTYPE html>

<html>

  <head>

    <title>test1.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>

    <style type="text/css">

     .abc{

         background:red;

     }

    </style>

    <script type="text/javascript">

        $(function(){

            $("li").mouseover(function(){

                $(this).addClass("abc");

            });

            $("li").mouseout(function(){

                $(this).removeClass("abc");

            });

        });

    </script>

  </head>

  <body>

     <ul>

       <li>apple</li>

       <li>banana</li>

       <li>pear</li>

       <li>oragle</li>

     </ul>

  </body>

</html>

2.实现QQ登录功能，默认是用户名点击则为空等待用户输入

第一种：click

<!DOCTYPE html>

<html>

  <head>

    <title>test2.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>

    <script type="text/javascript">

        $(function(){

           $("input").click(function(){

                   $(this).val("");

           });

        });

    </script>

  </head>

  <body>

    <form action="">

        <table>

            <tr>

                <td>用户名：</td>

                <td><input type="text" id="username" value="用户名"><br></td>

            </tr>

            <tr>

                <td>密码  ：</td>

                <td><input type="password" id="password" value="密码"><br></td>

            </tr>

        </table>

    </form>

  </body>

</html>

第二种：（**）

<!DOCTYPE html>

<html>

  <head>

    <title>test2.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>

    <style type="text/css">

     .a{

         opacity:0.5;

     }

    </style>

    <script type="text/javascript">

        $(function(){

            $("input").on("focus",function(){//获得焦点

                $(this).removeClass("a");

                if($(this)[0].value==null||$(this)[0].value==""||$(this)[0].value=="please input password"){

                    $(this).val("");

                }else{

                    $(this).select();

                }

            })

            .on("blur",function(){

                if($(this)[0].value==null||$(this)[0].value==""||$(this)[0].value=="please input password"){

                    $(this).val("please input password");

                    $(this).addClass("a");

                }else{

                    $(this).removeClass();

                }

            });

        });

    </script>

  </head>

  <body>

    <form action="">

        <table>

            <tr>

                <td>password：</td>

                <td><input type="text" id="username" class="a" value="please input password"><br></td>

            </tr>

        </table>

    </form>

  </body>

</html>

使用jQuery操作dom（追加和删除样式-鼠标移入移出）练习的更多相关文章

  1. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  2. jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

    一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...

  3. 第四章 使用jQuery操作DOM

    第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...

  4. jQuery权威指南（第2版） 学习一 jQuery操作DOM

    jQuery操作DOM 获取元素的属性 attr(name) 获取元素属性的语法格式如下: attr(name) 其中,参数 name 表示属性的名称. 例子: <img alt="& ...

  5. *jquery操作DOM总结 (原创：最全、最系统、实例展示)

    jquery操作DOM包括八个方面: 一:jquery对DOM节点的基本操作:二:jquery对DOM节点的CSS样式操作:三:jquery遍历DOM节点:四:jquery创建DOM节点:五:jque ...

  6. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  7. jQuery入门（2）使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  8. Hybrid App开发之jQuery操作DOM

    前言: 前面学习了JQuery的选择器,今天开始学习新的知识,JQuery操作DOM元素. 元素属性的访问与设置 attr(name) 获取元素属性 attr(name,value) 单个属性设置 a ...

  9. Unit01： jQuery概述 、 jQuery选择器 、 jQuery操作DOM

    Unit01: jQuery概述 . jQuery选择器 . jQuery操作DOM 使用jQuery放大字体: <!DOCTYPE html> <html> <head ...

随机推荐

  1. python异常之with

    1.基本语法 with expression [as target]: with_body 参数说明: expression:是一个需要执行的表达式: target:是一个变量或者元组,存储的是exp ...

  2. java获取mysql数据库表、字段、字段类型、字段注释

    最近想要写一个根据数据库表结构生成实体.mapper接口.mapping映射文件.service类的简单代码生成工具,所以查阅了一些资料,怎样获取数据库的表.表中字段.字段类型.字段注释等信息. 最后 ...

  3. SQL性能分析

    MySQL常见瓶颈: CPU:CPU在饱和的时候一般发生在数据装入内存或从磁盘上读取数据的时候. IO:磁盘I/O瓶颈发生在装入数据远大于内存容量的时候. 服务器硬件的性能瓶颈:top.free.io ...

  4. 1211笔记关于//modal//更改窗口的根控制器//数据存取//Plist属性列表//-“沙盒机制”//plis属性列表//偏好设置//归档普通对象//联系人数据存储//协议与回调函数

    一.利用Modal形式展示控制器 1.如何展示// vc就是要展示的新控制器[self presentViewController:vc animated:YES completion:^{    N ...

  5. 小白科普之JavaScript的DOM模型

    微信公众号“前端大全”推送了一篇名为“通俗易懂的来讲讲DOM”的文章,把javascript原生DOM相关内容讲解的很详细.仔细读了一遍,觉得整理总结的不错,对自己也很使用,所以把内容整理过来,并根据 ...

  6. Django【进阶】FBV 和 CBV

    django中请求处理方式有2种:FBV 和 CBV 一.FBV FBV(function base views) 就是在视图里使用函数处理请求. 看代码: urls.py 1 2 3 4 5 6 7 ...

  7. python常用模块补充hashlib configparser logging，subprocess模块

    一.hashlib模板 Python的hashlib提供了常见的摘要算法,如MD5,SHA1等等. 什么是摘要算法呢?摘要算法又称哈希算法.散列算法.它通过一个函数,把任意长度的数据转换为一个长度固定 ...

  8. KVM的ept机制

    转载:http://ytliu.info/blog/2014/11/24/shi-shang-zui-xiang-xi-de-kvm-mmu-pagejie-gou-he-yong-fa-jie-xi ...

  9. python数据类型-----字符串

    今天来总结下python3.4版本字符串的一些操作方法,对这些方法先作一个简单的分类,按照分类来进行总结. Sequence Typessequence类型有六种:strings, byte sequ ...

  10. Android局域网访问webservice以及其中的一些问题

    应老师的要求,要做个安卓app,实现备份app上的数据到服务器上的mongodb上,网上搜了下相关的实现方式.利用webservice技术,具体来说就是客户端直接调用服务器端的接口.之前从来没接触这玩 ...