jQuery practice dom

<!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) ") the append ($ (the this));. 
            });
            // search text box
            $ ( "div: EQ (2) #txt_search") Focus (function () {. 
                IF ($ (the this) .val () == "Enter search keywords") { 
                    $ (the this) .val ( "" ); 
                } 
            }); 
            $ ( "div: EQ (2) #txt_search") Blur (function () {. 
                IF ($ (the this) .val () == "") { 
                    $ (the this) .val ( " enter search keywords "); 
                } 
            }); 
            // textbox focus 
            $ (" div: EQ (3) the iNPUT: text. ") focus (function () { 
                ! IF ($ (the this) .hasClass (" li_bg ")) { 
                    $ (the this) .addClass (" li_bg ");  
                } the else {
                    $ (the this) .removeClass (" li_bg ") SIBLINGS ()..addClass("li_bg");
                }
            }); 
            // No Comments refresh 
            $: {( "div Last the Button") the Click (function (.) 
                IF ($ ( "# userName") Val () == "" || $ ( "# Comments"). .val () == "") { 
                    Alert ( "user name or comment can not be empty"); 
                } the else { 
                    var the userName = $ ( "# the userName") Val ();. 
                    var comments = $ ( "# comments" ) .val (); 
                    . $ ( "Table") the append ( "<TR> <TD>" + the userName + "</ TD> <TD>" + + Comments "</ TD> </ TR>"); 
                } 

            }); 

        }) 
    </ Script> 
</head>

<body>
    <-! highlight display control ->
    <div>
        <input type="button" value="按钮一">
        <input type="button" value="按钮二">
        <INPUT type = "text"> 
        <INPUT type = "text"> 
        <INPUT type = "CheckBox"> checkbox 
        <input type = "radio" name = "rad1"> radio. 1 
        <INPUT type = "Radio" name = "rad1"> radio 2 
    </ div> 
    <-! select team -> 
    <div> 
        <ul> 
            <li title = "Cang rain god"> Tsang rain god </ li> 
            <li title = "Shou Ying evil heart"> fluorescent keep evil heart </ li> 
            <li title = "sword son immortal trace"> sword son immortal trace </ li> 
            <li title = "Buddha sword Takahashi"> Buddha sword Takahashi </ Li> 
        </ UL> 
        <UL> </ UL> 
    </ div>
    <! - text search box -> 
    <div> 
        <the INPUT of the type = "text"> 
        <the INPUT of the type = "text"> 
        Please enter search keywords: <input type = "text" id = "txt_search" value = " Please enter your search keywords "> <button> Search </ button>
    </ div> 
    <-! textbox Focus -> 
    <div> 
        <INPUT type = "text"> 
        <INPUT type = "text"> 
        <INPUT type = "text"> 
    </ div> 
    <-! No refresh comments -> 
    <div> 
        <the Table> 
            <TR> 
                <td> nickname </ td> 
                <td> comments </ td> 
            </ TR> 
        </ the Table> 
        nickname: <input type = "text" id = " the userName "> 
        a comment: <INPUT type =" text "ID =" comments "> 
        <Button> comments </ Button> 
    </ div>
</body>

</html>
Guess you like
