replaceWith() replaceAll() Method jQuery

In this blog, you are going to learn replaceWith() replaceAll() Method And Checked Selector in jQuery. These are very important concepts regarding jQuery developers.

jQuery replaceWith() Method

The replaceWith() method replaces selected elements with new content.

jQuery replaceAll() Method

  • Replace each target element with the set of matched elements.
  • The .replaceAll() method is similar to .replaceWith(), but with the source and target reversed.

Source Code replaceWith() replaceAll() Method jQuery

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
    
<!--
    <p id="p1">This is a new Paragraph 1</p>
    <p id="p2">This is a new Paragraph 2</p>
    <p id="p3">This is a new Paragraph 3</p>
-->
    
    <div style="height: 200px; width:200px; border:10px black ridge; background-color: aqua;">
    
    <p id="p1">This is a new Paragraph 1</p>
    <p id="p2">This is a new Paragraph 2</p>
    <p id="p3">This is a new Paragraph 3</p>
        
    </div>
    
    <br>
    
    <div style="height: 200px; width:200px; border:10px black ridge; background-color: aqua;">
    
    <p id="p4">This is a new Paragraph 1</p>
    <p id="p5">This is a new Paragraph 2</p>
    <p id="p6">This is a new Paragraph 3</p>
        
    </div>
    
    <input type="button" value="Replace" id="btn">
    
    
<script src="jquery.js"></script>
    <script>
    
    $(document).ready(function(){
        $("#btn").click(function(){
            
//    $("<h1>Welcome</h1>").replaceAll("p:last");

            
//            var a = prompt("Enter Your Name");
//            $("#p1").replaceWith("<h1>Welcome To JQuery</h1>");
//            $("#p1").replaceWith("<h1>"+ a +"</h1>");
//            $("p:first").replaceWith("<h1>"+ a +"</h1>");
//            $("p:last").replaceWith("<h1>"+ a +"</h1>");
//            $("p:eq(1)").replaceWith("<h1>"+ a +"</h1>");
            
//        $("<h1>Welcome</h1>").replaceAll("p:first-child");
            
        });
        
    });
    
    </script>
    
    
</body>
</html>

:Checked Selector jQuery

In jQuery, the :checked selector selects all checked checkboxes or radio buttons in the document.

Source Code Of :checked selector

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
    
<!--
    <form>
    
        <label>Gender:  </label>
        
        <label>Male</label>
        <input type="radio" name="gender" value="Male">
        
        <label>Female</label>
        <input type="radio" name="gender" value="Female">
        
        <br><br>
        <input type="button" value="Click" id="btn">
    
    </form>
-->
    
    <form>
    
    <label>Select Your Hobbies: </label>
    <label>Reading </label>
    <input type="checkbox" name="hobbies" value="Reading">
    <label>Swimming </label>
    <input type="checkbox" name="hobbies" value="Swimming">
    <label>Sleeping </label>
    <input type="checkbox" name="hobbies" value="Sleeping">
    <br><br>
    <input type="button" value="Submit" id="btn">
        
    </form>
    
    <br>
    <div id="OutputDiv">
    
    
    </div>
    
    
    
<script src="jquery.js"></script>
    <script>
    
        $(document).ready(function(){
            
            $("#btn").click(function(){
                
var option=$("input[type='checkbox']:checked");
var string = option.length + " CheckBox Checked <br>";
                if(option.length > 0)
                {
                   
                    $(option).each(function(){
                        
                string += $(this).val() + "<br>";
                $("#OutputDiv").html(string);
                        
                    });
                    
                }
                else
                {
                   $("#OutputDiv").html("No CheckBox Checked.."); 
                }
                
            });
            
//            $("#btn").click(function(){
//                
//var option = $("input[type='radio']:checked");
//                
//                if(option.length > 0)
//                {
//$("#OutputDiv").html(option.val() + " is checked.");
//
//                }
//                else
//                {
//    $("#OutputDiv").html("No Radio Button Checked.");
//
//                }
//                
//            });
            
        });
    
    </script>
    
</body>
</html>

Click Below Link to Download Notes & Source Code Of This Blog

https://www.mediafire.com/file/4og8ekynbiyw3o8/replace+replaceWith+checked+JQUERY.rar/file

No responses yet

Leave a Reply

Your email address will not be published. Required fields are marked *