Corresponding to HTML dom, learn common jQuery operations

Create node

Example: Create a div tag node
Var $div = $('<div id = div">I am div </div>');

Insertion node

1. Insert peer nodes
after() inserts content after all matching elements, for example:

HTML Code:
                    <p> I want to say:</p>
                    jQuery code:
                    After ("<b> Hello </b>");
                    Result:
                    <p> I want to say: </p><b> Hello</b>

insertAfter() is the opposite of after grammar, $("<b> Hello </b>"). insertAfter ("p");

before() inserts content before all matching elements, for example:

HTML Code:
                    <p> I want to say:</p>
                    jQuery code:
                    Before ("<b> Hello </b>");
                    Result:
                    <b> Hello </b><p> I want to say:</p>

insertBefore() is the opposite of before(), for example:

    $("<b>Hello</b>").insertBefore("p");

2. Insert child elements

Appnd () adds content to the interior of all matched elements, for example:

HTML Code:
                    <p> I want to say:</p>
                    jQuery code:
                    Appnd ("<b> Hello </b>");
                    Result:
                    <p> I want to say: <b> Hello</b></p>

AppndTo () is the opposite of append, for example:

$("<b>Hello </b>").appendTo("p");

prepend() prepends the contents of all matched elements, for example:

HTML Code:
                    <p> I want to say:</p>
                    jQuery code:
                    $("p"). prepend ("<b> Hello </b>");
                    Result:
                    <p><b> Hello </b> I want to say:</p>

prependTo() is the opposite of prepend To (), for example:

$("<b>Hello </b>").prependTo("p");

Remove node

1.remove() delete
2.empty() empty

//Remove the p tag
                $("#btn1").click(function () {
//                  $("p").remove();
                    $("p").empty();
                });

Node replacement

1.replaceWith()
2. ReplceAll () is the opposite of replaceWith().

Example: Replace div4 with a text box

ReplaceWith ("<input type='text'name='pname' value='product name'> <br/>");

Code in body
 <p> I am a paragraph</p>               
<input type="button" name=""id=""value="replacement node" onclick="test();"/>

2.$("<input type='text' name='pname' value='Product name'><br/>").replaceAll($("#div4"));

Demo: File Upload Add Delete File Domain

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../../jsJava library/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
             $(function(){
                $("#btn1").click(function(){

                    var file = $("<input type='file'/>");
                    var button = $("<input type='button' value='remove'/>");
                    var br = $("<br/>");

                    button.click(function(){
                        file.remove();
                        button.remove();
                        br.remove();

                    });

//                  $("#div1").append(file);
//                  $("#div1").append(button);
//                  $("#div1").append(br);

                    $("#div1").append(file).append(button).append(br);
                });
             });
        </script>
    </head>
    <body>
         <input type="button" value="more..." id="btn1" /><br/>

        <input type="file" />
        <div id="div1"></div> 
    </body>
</html>

Node mobility

Demo: Move the books, audio and video to the front of the notebook

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Function 1 of the presentation form: Use tables to display table data</title>


    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script src="../../js/jquery/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
* {
    margin: 0px;
}

a {
    border: 1px solid #e4393c;
    display: block;
    width: 150px;
    background: #e4393c;
    height: 26px;
    line-height: 26px;
    color: #fff;
    font-size: 15px;
    font-family: 'Microsoft YaHei';
    text-align:center;
    text-decoration:none;

    white-space:pre;
}

ul {
    list-style-type:none;
    padding:0px;/*New browsers firefox safari are all new ie that use inner margin to control indentation*/
    margin:0px;/*Old ie uses outer margin indentation, so setting padding:0px old id will not remove the index in order to be compatible with old IE*/

}
li a:hover {
    background-color:#F7F7F7;
    color:#e4393c;
    border-right:#F7F7F7;
}
</style>
<script src="../../jsJava library/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
    //$("ul li:eq(2)").insertAfter("ul li:eq(0)"); node movement
     $(function(){
            $("ul li:eq(2)").insertAfter("ul li:eq(0)");   
    });
</script>


  </head>

  <body>
    <ul>
        <li><a href="">hand    machine</a></li>
        <li><a href="">Notebook</a></li>
        <li><a href="">Books, Audio & Video Products</a></li>
        <li><a href="">Clothing and shoes</a></li>
    </ul>
  </body>
</html>

Clone node

jQuery object. clone(); // returns the cloned object, which is equivalent to. clone(false);
jQuery object. clone(true); // Cloned object contains events

Demo: Click on any li, copy the Li and attach it to ul

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Demonstrating Clone Node</title>


    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script src="../../jsJava library/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
* {
    margin: 0px;
}

li {
    width: 152px;
}

a {
    border: 1px solid #e4393c;
    display: block;
    width: 150px;
    background: #e4393c;
    height: 26px;
    line-height: 26px;
    color: #fff;
    font-size: 15px;
    font-family: 'Microsoft YaHei';
    text-align:center;
    text-decoration:none;

    white-space:pre;
}

ul {
    list-style-type:none;
    padding:0px;/*New browsers firefox safari are all new ie that use inner margin to control indentation*/
    margin:0px;/*Old ie uses outer margin indentation, so setting padding:0px old id will not remove the index in order to be compatible with old IE*/

}
li a:hover {
    background-color:#F7F7F7;
    color:#e4393c;
    border-right:#F7F7F7;
}
</style>


<script type="text/javascript">
     $(function(){
            //Requirement: Click on any li, copy the Li and attach it to ul

            //Click events for all li bindings

         $("ul>li").click(function(){

            var $obj = $(this).clone(true);

            $("ul").append($obj);
         });




    });
</script>


  </head>

  <body>
    <ul>
        <li><a href="#">hand    machine</a></li>
        <li><a href="#">Notebook</a></li>
        <li><a href="#">Books, Audio & Video Products</a></li>
        <li><a href="#">Clothing and shoes</a></li>
    </ul>
  </body>
</html>

Packaging of Nodes

jQuery object. wrap("html code"); wraps each node that matches.
jQuery object. wrapAll("html code"); wrap all.
jQuery object. wrapInner("html code"); wraps internal elements

<script type="text/javascript">
            $(function () {
                //Become Italic
//              $("strong").wrap("<i></i>");
//$("strong").wrapAll("<b></b>");
$("strong").wrapInner("<b></b>");
            });
        </script>
html Code:
<strong>Your favorite fruit is?</strong><br/>
        <strong>Your favorite fruit is?</strong>

Traversing subelements and sibling elements

1. Traversal subelements

<script type="text/javascript">
            $(function(){
                //Traversing the child elements of body
                //Get body first
                var $body = $("body");
                var childArr = $body.children();
                console.info(childArr.length);//3
            });
        </script>
html Code:
<div>
                <p>I am div Medium p Label</p>
            </div>
            <p>I am p Label</p>
            <h1>I am h1</h1>

2. Traversing Brotherhood Elements

<script type="text/javascript">
            $(function(){
                //Traversing the child elements of body
                //Get body first
                var $body = $("body");
                var childArr = $body.children();
                console.info(childArr.length);//3

//              Access the following element object. next();
//              Access an element object above. prev();
//              Access all siblings();
            });
        </script>
html Code:
<div>
                <p>I am div Medium p Label</p>
            </div>
            <p>I am p Label</p>
            <h1>I am h1</h1>

3. Traversing through parent elements
(1) parent() direct parent element (2) parents() all parent elements

<script type="text/javascript">
            $(function() {
                var $parents = $("p").parent();
                console.dir($parents);

            });
        </script>
html Code:
<div>
            <p>Hello</p>
            <p>Hello</p>
        </div>

<script type="text/javascript">
            $(function() {
                var $parents = $("span").parents();
                console.dir($parents);

            });
        </script>
html Code:
<div>
            <p>
                <span>Hello</span>
            </p>

            <span>Hello Again</span>
        </div>

Supplement:

find(), search under a node, jQuery object. find() improves query efficiency, faster than dom.

Keywords: JQuery Javascript IE Firefox

Added by playa4real on Fri, 24 May 2019 01:27:21 +0300

Programming VIP