<!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. 前言-使用Eclipse创建SpringBoot项目

    1.首先我们需要安装STS插件:Help--> Eclipse Marketplace 2. 然后 File-->New--->Spring Starter  Project 3.下 ...

  2. Android中Activity的android:windowSoftInputMode属性

    转载 https://blog.csdn.net/qiutiandepaomo/article/details/84028558 windowSoftInputMode属性主要是用来设置窗口软键盘的交 ...

  3. python模拟浏览器文件上传，csrf放行

    服务器端视图函数 from django.shortcuts import render,HttpResponse from django.views.decorators.csrf import c ...

  4. java的boolean和Boolean

    boolean是基本数据类型Boolean是它的封装类,和其他类一样,有属性有方法,可以new,例如: Boolean bl= new Boolean("true"); // bo ...

  5. 洛谷P1979 [NOIP2013提高组Day2T3]华容道

    P1979 华容道 题目描述 [问题描述] 小 B 最近迷上了华容道,可是他总是要花很长的时间才能完成一次.于是,他想到用编程来完成华容道:给定一种局面, 华容道是否根本就无法完成,如果能完成, 最少 ...

  6. BZOJ1452 [JSOI2009]Count [2017年4月计划 树状数组02]

    1452: [JSOI2009]Count Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 2419  Solved: 1403[Submit][Stat ...

  7. 使用Cmder 安装 Composer 出现 "attempt to call a nil value"

    原因: 不是这个原因,也不是那个原因,而是采用了中文路径, 把comder 整个搬到其他目录就行了

  8. Liferay 7：portlet name

    总结自: https://web.liferay.com/zh/web/user.26526/blog/-/blogs/proper-portlet-name-for-your-portlet-com ...

  9. Wndows下Apache+php+Mysql环境的搭建及其涉及的知识

    一.安装Apache 1. 在网上搜索以下3个文件,以及找一个地方新建一个文件夹 好吧,这里有下载链接:http://pan.baidu.com/s/1hr9IdSS 文件夹内有:apache,mys ...

  10. ACdream 1099求第k大

    题目链接 瑶瑶的第K大 Time Limit: 10000/5000MS (Java/Others)Memory Limit: 512000/256000KB (Java/Others) Submit ...