<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        div {

            border-bottom: 1px solid coral;

            padding-bottom: 10px;

        }

        .input_light {

            background-color: yellow;

        }

        .li_bg {

            background-color: red;

        }

        table,

        tr,

        td {

            border: 1px solid;

        }

    </style>

    <script src="js/jquery-1.11.3.js"></script>

    <script>

        $(function() {

            //控件的高亮显示

            $("div:first input").focus(function() {

                $(this).addClass("input_light").siblings().removeClass("input_light");

            });

            //球队选择

            $("div:eq(1) ul:first li").mouseover(function() {

                $(this).addClass("li_bg").siblings().removeClass("li_bg");

            });

            $("div:eq(1) ul:first li").click(function() {

                $(this).remove("li").removeClass("li_bg");

                $("div:eq(1) ul:eq(1)").append($(this));

            });

            //搜索文本框

            $("div:eq(2) #txt_search").focus(function() {

                if ($(this).val() == "请输入搜索关键词") {

                    $(this).val("");

                }

            });

            $("div:eq(2) #txt_search").blur(function() {

                if ($(this).val() == "") {

                    $(this).val("请输入搜索关键词");

                }

            });

            //文本框焦点

            $("div:eq(3) input:text").focus(function() {

                if (!$(this).hasClass("li_bg")) {

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

                } else {

                    $(this).removeClass("li_bg").siblings().addClass("li_bg");

                }

            });

            //无刷新评论

            $("div:last button").click(function() {

                if ($("#userName").val() == "" || $("#comments").val() == "") {

                    alert("用户名或评论不能为空");

                } else {

                    var userName = $("#userName").val();

                    var comments = $("#comments").val();

                    $("table").append("<tr><td>" + userName + "</td><td>" + comments + "</td></tr>");

                }

            });

        })

    </script>

</head>

<body>

    <!-- 控件的高亮显示 -->

    <div>

        <input type="button" value="按钮一">

        <input type="button" value="按钮二">

        <input type="text">

        <input type="text">

        <input type="checkbox">选择框

        <input type="radio" name="rad1">单选1

        <input type="radio" name="rad1">单选2

    </div>

    <!-- 球队选择 -->

    <div>

        <ul>

            <li title="夜雨沧神">夜雨沧神</li>

            <li title="荧祸守心">荧祸守心</li>

            <li title="剑子仙迹">剑子仙迹</li>

            <li title="佛剑分说">佛剑分说</li>

        </ul>

        <ul></ul>

    </div>

    <!-- 搜索文本框 -->

    <div>

        请输入搜索关键词：<input type="text" id="txt_search" value="请输入搜索关键词"><button>搜索</button>

    </div>

    <!-- 文本框焦点 -->

    <div>

        <input type="text">

        <input type="text">

        <input type="text">

        <input type="text">

        <input type="text">

    </div>

    <!-- 无刷新评论 -->

    <div>

        <table>

            <tr>

                <td>昵称</td>

                <td>评论</td>

            </tr>

        </table>

        昵称：<input type="text" id="userName">

        <br/> 评论: <input type="text" id="comments">

        <button>评论</button>

    </div>

</body>

</html>

　　

jQuery 练习 dom的更多相关文章

  1. 抛弃jQuery：DOM API之操作元素

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

  2. 抛弃jQuery：DOM API之选择元素

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

  3. jQuery的DOM操作详解

    DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...

  4. 解密jQuery内核 DOM操作

    jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...

  5. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  6. jQuery介绍 DOM对象和jQuery对象的转换与区别

    jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍      jQuery: http://jquery.com/      write less, do more.   j ...

  7. jquery和dom之间的转换

    刚开始学习jquery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换. 什么是jQuery对 ...

  8. jQuery操作Dom、jQuery事件机制、jQuery补充部分

    jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...

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

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

  10. 第3章 jQuery的DOM操作

    一.  DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...

随机推荐

  1. nginx的四个基本功能

    Nginx能做什么 1.反向代理2.负载均衡3.HTTP服务器(包含动静分离)4.正向代理 以上就是做网站小编了解到的Nginx在不依赖第三方模块能处理的事情,下面详细说明每种功能怎么做 1.反向代理 ...

  2. 建筑设计类软件整理ACDSee,PS,CAD,Ecotect,SketchUp,Phoenics,Revit,Rhino,

    关于建筑设计类软件整理 1 建筑设计类专业最常用软件如下,包括SU,CAD, REVIT,PS等. 2 sketch up 简称SU,中文名草图大师,在推敲方案,拉推体块时有着不可或缺的作用,而且随着 ...

  3. JAVA获取磁盘空间

    需要把磁盘空间显示在页面上,这样就不用去服务器查看了,方便 两个办法 File file = new File("D:"); long totalSpace = file.getT ...

  4. 在Linux系统下进入MySql数据库进行操作

    例:   ---- 1.进入mysql数据库 root@test:/home# mysql -uroot -proot   <uroot是用户名,proot是密码> 2.查询所有的库 my ...

  5. top进程命令

    top命令用来显示系统当前的进程状况. 格式:top [选项] 主要选项如下. d:指定更新的间隔,以秒计算. q:没有任何延迟的更新.如果使用者有超级用户,则top命令将会以最高的优先序执行. c: ...

  6. Linux监听的网络服务$ netstat -ntlp$ netstat -nulp$ netstat -nxlp

    我一般都分开运行这三个命令,不想一下子看到列出一大堆所有的服务.netstat -nalp倒也可以.不过我绝不会用 numeric 选项 (鄙人一点浅薄的看法:IP 地址看起来更方便). 找到所有正在 ...

  7. leetcode 21-30 easy

    21. Merge Two Sorted Lists Merge two sorted linked lists and return it as a new list. The new list s ...

  8. HR招聘_(六)_招聘方法论（面试环节·面试方法）

    面试方法:常用行为面试和压力面试 行为面试法 定义: 通过要求面试对象描述其过去某项工作或者生活经历的具体情况来了解面试对象各方面素质特征的方法.行为面试法的基本假设是:一个人过去的行为可以预测这个人 ...

  9. Hdu 1498　二分匹配

    50 years, 50 colors Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  10. linux 下批量在多文件中替换字符串

    sed -i "s/原字符串/新字符串/g" `grep 原字符串 -rl 所在目录` 注意:`` 符号在shell里面正式的名称叫做backquote , 一般叫做命令替换其作用 ...