JQ-- selector (selector base)

1, JQ function:

<script>
            $(function(){
                $("#b1").click(function(){
                    $("#111").css("background-color","red");
                });
                
                $("#b2").click(function(){
                    $(".mini").css("background-color","red");
                });
                
                $("#b3").click(function(){
                    $("div").css("background-color","red");
                });
                
                $("#b4").click(function(){
                    $("*").css("background-color","red");
                });
                
                $("#b5").click(function(){
                    $("#two,.mini").css("background-color","red");
                });
            });
        </script>

Function of the function is to obtain the value of a specific element, and add color.

There are four basic selectors:

$ ( "#Id" ) // ID selector $ ( "div" ) // element selector $ ( ".className" ) // class selector $ ( ".className, .classname1, # id1" ) // combination selector

< Body > 
        < INPUT type = "Button" ID = "B1" value = "selection number for the element 111" /> 
        < INPUT type = "Button" ID = "B2" value = "select a style for the element the mini" / > < br > 
        < INPUT type = "Button" ID = "B3" value = "select all div element" /> 
        < INPUT type = "Button" ID = "B4" value = "select all elements" /> <br>
        <input type="button" id= "B5" value = "select id of the element pattern and two of the mini" /> 
        < HR />
        
        <div id="111">
            <div class="mini">
                111
            </div>
        </div>
        
        <div id="222">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>
        
        <div id="333">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>
        
        <span id="444">
            
        </span>
    </body>

CSS layout and add keys to select a specific area.

Show results:

2, complete code:

CSS：

div,span {
    width:140px;
    height:140px;
    margin:5px;
    background:#aaa;
    border:#000 1px solid;
    float:left;
    font-size:17px;
    font-family:Verdana;
  }
  div.mini { 
    width:55px;
    height:55px;
    background-color: #aaa;
    font-size:12px;
  }
  div.hide { 
    display:none;
  }

index.html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>基本选择器</title>
        <link rel="stylesheet" href="../css/style.css" />
        <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                $("#b1").click(function(){
                    $("#one").css("background-color","red");
                });
                
                $("#b2").click(function(){
                    $(".mini").css("background-color","red");
                });
                
                $("#b3").click(function(){
                    $("div").css("background-color","red");
                });
                
                $("#b4").click(function(){
                    $("*").css("background-color","red");
                });
                
                $("#b5").click(function(){
                    $("#two,.mini").css("background-color","red");
                });
            });
        </script>
            
    </ Head > 
    < body > 
        < INPUT type = "Button" ID = "B1" value = "selected as one element" /> 
        < INPUT type = "Button" ID = "B2" value = "select a style of the mini element " /> 
        < INPUT type =" Button " ID =" B3 " value =" select all div element " /> 
        < INPUT type =" Button " ID =" B4 " value =" select all elements " />
        <input type="button" id="b5"value = "select id of the element pattern and two of the mini" /> 
        < HR />
        
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>
        
        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>
        
        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>
        
        <span id="four">
            
        </span>
    </body>
</html>

JQ-- selector (selector base)

Guess you like