<!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. PhpExcel参考网址

    参考网址: http://www.cnblogs.com/yuwensong/p/3771787.html

  2. Delphi 设计模式：《HeadFirst设计模式》Delphi7代码---策略模式之MiniDuckSimulator[转]

     1  2{<HeadFirst设计模式>之策略模式 }  3{ 本单元中的类为策略类           }  4{ 编译工具: Delphi7.0           }  5{ E- ...

  3. Linux 下用Win共享

    让win能访问到 linux 的smb 共享: linux 安装 samba: apt-get install samba #然后 vim /etc/samba/smb.conf #找到securit ...

  4. oracle 监听配置文件路径

    app\Administrator\product\11.2.0\dbhome_1\NETWORK\ADMIN listener.ora tnsnames.ora 配置监听直接在 tnsnames.o ...

  5. java-File类-字节流

    一 File 1.1 递归子目录 获取所有子目录中的内容 import java.io.File; public class GetAllFiles { /** * @param args */ pu ...

  6. POJ 2031 Building a Space Station (prim裸题)

    Description You are a member of the space station engineering team, and are assigned a task in the c ...

  7. 微服务开源生态报告 No.8

    「微服务开源生态报告」,汇集各个开源项目近期的社区动态,帮助开发者们更高效的了解到各开源项目的最新进展. 社区动态包括,但不限于:版本发布.人员动态.项目动态和规划.培训和活动. 非常欢迎国内其他微服 ...

  8. LintCode刷题笔记-- BackpackIII

    标签:动态规划 问题描述: Given n items with size Ai and value Vi, and a backpack with size m. What's the maximu ...

  9. TypeScript高级类型

    交叉类型 将多个类型合并成一个类型,去两个类型的并集.与继承的区别是,继承可以有自己的属性,而交叉没有. interface DogInterface { run():void } interface ...

  10. 文件下载工具类 DownLoadUtil 实战

    package com.cloud.mina.util; import java.io.File; import java.io.FileInputStream; import java.io.IOE ...