<!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. []==![] 为什么等于true?

    最近碰到这样一个问题: []==![]  为什么等于true? 首先分析  !的优先级较==高,先运算==两侧的操作数: typeof []; //"object" typeof ...

  2. excel2013做数据透视表

    excel2013做数据透视表     Excel最新版更新到2013,相比2003.2007和2010,2013的excel界面方面有一定变化,在操作方面也有一定的便捷性.那么如何使用excel20 ...

  3. 怎么比较两个list中相同的值个数！

    怎么比较两个list中相同的值个数!int count=0;for(int i=0;i<list1.size();i++){ for(int j=0;j<list2.size();j++) ...

  4. Java review-basic6

    1. Weak references: In computer programming, a weak reference is a reference that does not protect t ...

  5. GIT → 02：Git和Svn比较

    2.1 SVN介绍 2.1.1 SVN简介 SVN 属于集中式版本管理控制系统,服务器中保存了所有文件的不同版本,而协同工作人员通过连接svn服务器,提取出最新的文件,获取提交更新.Subversio ...

  6. Oracle删除当前用户下所有的表的方法1

    1.如果有plsql客户端,则可以使用该用户登录,选中所有表 右键Drop即可. 2.如果有删除用户的权限,则可以: ? 1 drop user user_name cascade; 加了cascad ...

  7. NOIP模拟 6.26

    T1 子矩阵 题目描述 小A有一个N×M的矩阵,矩阵中1~N*M这(N*M)个整数均出现过一次.现在小A在这个矩阵内选择一个子矩阵,其权值等于这个子矩阵中的所有数的最小值.小A想知道,如果他选择的子矩 ...

  8. javascript最大公约数与最小公倍数

    var a = 5 ; var b = 15 ; var min = Math.min(a,b); var max = Math.max(a,b); // for循环求最大公约数 for(var i ...

  9. Django项目：CRM(客户关系管理系统)--07--03PerfectCRM创建基本数据02

    from django.conf.urls import url from DBadd import auth_views from DBadd import crm_views urlpattern ...

  10. 微信小程序制作下来菜单

    wxml: <view class="phone_one" bindtap="clickPerson"> <view class=" ...