Demonstration and comparison of JQuery filter selector and property modification

Text matching

Enter the value in the form input item, click the judgment button according to the input value, and make the corresponding check box selected

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
</head>
<body>
//Please enter city:<input type="text" id="id"/> 
<br/><br/>
//City check box:
<div style="width:200px;background:red;">
    <input type="checkbox" name="love" value="Beijing"/>Beijing
    <input type="checkbox" name="love" value="Nanjing"/>Nanjing
    <input type="checkbox" name="love" value="Shanghai"/>Shanghai
</div>
    
    <br/><br/>
    <input type="button" value="judge" onclick="checkCity()"/>
<!--    Train of thought-->
    <script type="text/javascript">
        function checkCity(){
            var city= $("#id").val();
            alert(city);
            $("input[name=love]").each(function(index,element){
                if(element.value==city){
                    alert("just it");
//                    All four methods are OK
//                    $(element).prop("checked",true);
                    $(element).attr("checked",true);
//                    $(element).prop("checked","checked");
//                    $(element).attr("checked","checked");
                }
            })
        }
    </script>
<!--    Train of thought two-->
    <script type="text/javascript">
        function checkCity(){
            $("input[name=love").prop("checked",false);
            var city= $("#id").val();
            $("input[value="+city+"]").prop("checked",true);
            
        }
    </script>
</body>

</html>

 

Get check box status

Click the button to get the number of selected check boxes and pop up the results on the page

The basic page effect is as follows:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
        
    </head>

      <body>
        <input type="checkbox" name="ck"   />
          <input type="checkbox" name="ck" />
          <input type="checkbox" name="ck"  />
          <input type="button" value="Submission"/>

    </body>
    <script type="text/javascript">
//        Method 1
//        $(function(){
//            var i=0;
//            $("input[type=button]").click(function(){
//                $("input[type=checkbox]").each(function(index,element){
//                    //You can't use attr here
//                    alert($(element).prop("checked"));
//                    if($(element).prop("checked")==true){
//                        i++;
//                    }
//                });
//                alert(i);
//            });
//        });
//        Method two
//        $(function(){
//            var i=0;
//            $("input[type=button]").click(function(){
//                $("input[type=checkbox]:checked").each(function(index,element){
//                        i++;
//                });
//                alert(i);
//            });
//        });
//        Method three
        $(function(){
            var i=0;
            $("input[type=button]").click(function(){
                alert($("input[type=checkbox]:checked").length);
            });
        });
    </script>
</html>

 

 

Attribute change

When the check box is selected, the text color corresponding to the check box is red;

When the check box is not selected, the text color corresponding to the check box is black;

The basic page effect is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
        
    </head>

    <body>
        <table border="1">
            <tr>
                <td><input type="checkbox" class="ck" /> <font >Data1</font></td>
                
            </tr>
            <tr>
                <td><input type="checkbox" class="ck" /><font >Data2</font></td>
            
            </tr>
            <tr>
                <td><input type="checkbox" class="ck" /><font >Data3</font></td>
                
            </tr>
        </table>
        <script type="text/javascript">
            $(function(){
                for(var i=0;i<$(".ck").length;i++){
//                    Notice here that after taking array elements, it is not JQuery Object,You have to wear a vest to use it click()belong to JQuery Method
                    $($(".ck")[i]).click(function(){
                        alert();
                    if($(this).prop("checked")==true){
                        $(this).next().css("color","red");
                    }else{
                        $(this).next().css("color","black");
                    }
                });
                }
                
//                for(var i = 0; i < ck.length; i++) {
//                        $(ck[i]).click(function() {
//                            
//                            //Get the selected status of the check box
//                            var cked = $(this).prop("checked");
//                        
//                            //If selected
//                            if(cked == true) {
//
//                                //Turn the text font in the second cell red
//                                $(this).next().prop("color", "red");
//                            } else {
//                                //Change the font in the second cell to black
//                                $(this).next().prop("color", "black")
//                            }
//                        })
//                $("input[type=checkbox]:eq(2)").click(function(){
//                    if($("input[type=checkbox]:eq(2)").prop("checked")==true){
//                        $("font:eq(2)").css("color","red");
//                    }else{
//                        $("font:eq(2)").css("color","black");
//                    }
//                });
            })
        </script>
        
    </body>
    

</html>

 

 

 

 

div show & hide

Get all the hidden divs, let the hidden divs display, and change the background color. Click the close button, and all the divs will return to their original state

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<style type="text/css">
    .diveven { background:#bbffaa;}
</style>
</head>
<body>
<div style="width:100px;height:100px;border:1px solid;display:none">Long live China</div>
<div style="width:100px;height:100px;border:1px solid;display:none">Long live the world</div>
<div style="width:100px;height:100px;border:1px solid;">Long live the universe</div>
    
    <input type="button" value="Show and color" onclick="showContent();"/>
    <input type="button" value="Close" onclick="closeContent();"/>
    
    <script type="text/javascript">
//        Method 1
//        function showContent(){
//            $("div[style*=none]").each(function(index,element){
//                $(element).css("display","block").css("background-color","red");
//            });
//        }
//        function closeContent(){
//                $("div[style*=disp]").each(function(index,element){
//                $(element).css("display","none");
//            });
//        }
//        Method two
        function showContent(){
            $("div:hidden").show(2000).addClass("diveven");
        }
        function closeContent(){
                $("div:lt(2)").hide().removeClass("diveven");
        }
    </script>
</body>
</html>

Tags: Java Javascript JQuery Attribute

Posted on Thu, 02 Apr 2020 16:17:08 -0700 by Seas.Comander