<!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. angular4 动态创建组件 vs 动态创建模板

    实现  模拟场景:页面上"帮助"按钮的点击触发帮助文档的弹出框,且每个页面的帮助文档不一样 因此弹出框里的帮助文档是一个动态模板而不是动态组件 以下comp均代表Type类型的动态 ...

  2. 用两个栈实现队列功能【剑指offer】

    题目描述: 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 程序代码: [方法一] class Solution { public: void push(int ...

  3. ubuntu上源码编译安装mysql5.7.27

    一.查看操作系统环境和目录结构,并创建mysql用户和组,以及规划安装mysql所需要的目录. #cat /etc/issue 查看发行版本信息: #cat  /proc/version 查看正在运行 ...

  4. 洛谷3128 [USACO15DEC]最大流Max Flow——树上差分

    题目:https://www.luogu.org/problemnew/show/P3128 树上差分.用离线lca,邻接表存好方便. #include<iostream> #includ ...

  5. 洛谷 1083 (NOIp2012) 借教室——标记永久化线段树 / 差分+二分

    题目:https://www.luogu.org/problemnew/show/P1083 听说线段树不标记永久化会T一个点. 注意mn记录的是本层以下.带上标记的min! #include< ...

  6. cf round 482D Kuro and GCD and XOR and SUM

    题意: 开始有个空集合,现在有两种操作: $(1,x)$:给集合加一个数$x$,$x \leq 10^5$; $(2,x,k,s)$:在集合中找一个$a$,满足$a \leq s-x$,而且$k|gc ...

  7. poj 2406 Power Strings（KMP入门，next函数理解）

    Power Strings Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 37685   Accepted: 15590 D ...

  8. LintCode刷题笔记-- LongestCommonSquence

    标签:动态规划 题目描述: Given two strings, find the longest common subsequence (LCS). Your code should return ...

  9. 阿里云ecs环境配置

    在阿里云 CentOS 服务器(ECS)上搭建 nginx + mysql + php-fpm 环境 https://ninghao.net/blog/1368 阿里云ecs从购买到环境搭建和建站!! ...

  10. linux C 编译时手动链接遇到的问题（未解决）

    写多线程的时候,编译的时候遇到了问题,开始的时候是这样的: 编译器不认识pthread_create和pthread_join这两个函数. 搜了一下原因是没有链接相应的库,下面是我看到一个博友写的: ...