JQuery sets up and gets simple instances of HTML text and values

  • 2020-03-30 02:05:55
  • OfStack


<script type="text/javascript">
 //<![CDATA[
  $(function(){
      //Access <P> HTML code for the element
      $("input:eq(0)").click(function(){
            alert(  $("p").html() );
      });
      //Access <P> Element text
      $("input:eq(1)").click(function(){
            alert(  $("p").text() );
      });
      //Set up <P> HTML code for the element
      $("input:eq(2)").click(function(){
             $("p").html("<strong> Your favorite fruit is ?</strong>");
      });    
       //Set up <P> Element text
      $("input:eq(3)").click(function(){
             $("p").text(" Your favorite fruit is ?");
      });  
      //Set up <P> Element text
      $("input:eq(4)").click(function(){
             $("p").text("<strong> Your favorite fruit is ?</strong>");
      });  
      //Gets the value of the button
      $("input:eq(5)").click(function(){
             alert( $(this).val() );
      });   
      //Sets the value of the button
      $("input:eq(6)").click(function(){
            $(this).val(" I got clicked !");
      });  
  });
  //]]>
  </script>


<script type="text/javascript">
 //<![CDATA[
  $(function(){
      $("#address").focus(function(){         //The address box gets the mouse focus
            var txt_value =  $(this).val();   //Gets the value of the current text box
            if(txt_value==" Please enter your email address "){  
                $(this).val("");              //If the condition is met, empty the text box contents
            } 
      });
      $("#address").blur(function(){          //Address box loses mouse focus
              var txt_value =  $(this).val();   //Gets the value of the current text box
            if(txt_value==""){
                $(this).val(" Please enter your email address ");//If the condition is met, the content is set
            } 
      })
      $("#password").focus(function(){
            var txt_value =  $(this).val();
            if(txt_value==" Please enter your email password "){
                $(this).val("");
            } 
      });
      $("#password").blur(function(){
              var txt_value =  $(this).val();
            if(txt_value==""){
                $(this).val(" Please enter your email password ");
            } 
      })
  });
  //]]>
  </script>


<script type="text/javascript">
 //<![CDATA[
  $(function(){
      $("#address").focus(function(){         //The address box gets the mouse focus
            var txt_value =  $(this).val();   //Gets the value of the current text box
            if(txt_value==this.defaultValue){  
                $(this).val("");              //If the condition is met, empty the text box contents
            } 
      });
      $("#address").blur(function(){          //Address box loses mouse focus
              var txt_value =  $(this).val();   //Gets the value of the current text box
            if(txt_value==""){
                $(this).val(this.defaultValue);//If the condition is met, the content is set
            } 
      })
      $("#password").focus(function(){
            var txt_value =  $(this).val();
            if(txt_value==this.defaultValue){
                $(this).val("");
            } 
      });
      $("#password").blur(function(){
              var txt_value =  $(this).val();
            if(txt_value==""){
                $(this).val(this.defaultValue);
            } 
      })
  });
  //]]>
  </script>


<script type="text/javascript">
 //<![CDATA[
  $(function(){
      //Set the radio drop-down box to select
      $("input:eq(0)").click(function(){
            $("#single").val("2");
      });
      //Set the multi-select drop-down box to select
      $("input:eq(1)").click(function(){
            $("#multiple").val([" choose 2 No. ", " choose 3 No. "]);
      });
      //Set the selection of single and multiple checkboxes
      $("input:eq(2)").click(function(){
             $(":checkbox").val(["check2","check3"]);
            $(":radio").val(["radio2"]);
      });    
  });
  //]]>
  </script>


<script type="text/javascript">
 //<![CDATA[
  $(function(){
      //Set the radio drop-down box to select
      $("input:eq(0)").click(function(){
            $("#single option").removeAttr("selected");  //Remove the property selected
            $("#single option:eq(1)").attr("selected",true); //Set the property selected
      });
      //Set the multi-select drop-down box to select
      $("input:eq(1)").click(function(){
            $("#multiple option").removeAttr("selected");  //Remove the property selected
            $("#multiple option:eq(2)").attr("selected",true);//Set the property selected
            $("#multiple option:eq(3)").attr("selected",true);//Set the property selected
      });
      //Set the selection of single and multiple checkboxes
      $("input:eq(2)").click(function(){
            $(":checkbox").removeAttr("checked"); //Remove property checked
            $(":radio").removeAttr("checked"); //Remove property checked
            $(":checkbox[value=check2]").attr("checked",true);//Set the property checked
            $("[value=check3]:checkbox").attr("checked",true);//Set the property checked
            $("[value=radio2]:radio").attr("checked",true);//Set the property checked
      });   
  });
  //]]>
  </script>

: a checkbox indicates a property called a checkbox


Related articles: