Summary of basic Dom operations in jQuery

2020-03-30 01:26:18
OfStack

Basic operations of each node in jquery


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<head>
    <title>jquery In the Dom operation </title>
    <script src="../jquery/jquery-1.4.2.min.js" type="text/javascript"></script>

</head>
<body>
  <p title=" Choose your favorite fruit "> What's your favorite fruit? </p>
  <ul>
    <li title=" apple "> apple </li>
    <li title=" banana "> banana </li>
    <li title=" watermelon "> watermelon </li>
  </ul>

  <strong> What's your favorite fruit? </strong> 
  <strong> What's your favorite fruit? </strong><br />

  <input type="button" value=" Find nodes " id="btnFind" />
  <input type="button" value=" Create a node " id="btnCreate" />
  <input type="button" value=" Remove nodes " id="btnDelete" />
  <input type="button" value=" Copy the node " id="btnCopy" />
  <input type="button" value=" Replace the node " id="btnReplace" />
  <input type="button" value=" The parcel node " id="btnWrap" />

   <script type="text/javascript">
   $(function(){
      $("#btnFind").click(function(){
           //Find element nodes
          var getValue= $("ul li:eq(1)").text();//Gets the value of the second element
          alert(getValue);

          //The argument to the find attribute node attr() method can be one or two, with one argument being the name of the property to be queried and two arguments being assignments
          var para=$("p");
          var p_text=para.attr("title");//Access <P> The title of the element node attribute
          alert(p_text);
          alert(para.attr("title"," Change your favorite fruit ").attr("title"));//First change the value of the title, then take the value of the title
      });

      //Create the nodes append(),prepend() to load the inside of the element for the parent-child relationship, after(),before() before and after the element for the sibling light series
      $("#btnCreate").click(function(){
          var html=$("<li title= ' peach '> peach </li><li title= ' pineapple '>  pineapple </li>");
         // $("ul").append(html);// The default will be added ul The back 
         // var li2=$("ul li:eq(1)").after(html);// Add to the second li behind 
          var li2=$("ul li:eq(1)").before(html);//Add it to the second li
      });

      $("#btnDelete").click(function(){
        // var li2=$("ul li:eq(1)").remove();// Delete the second li The element 
         //$("ul").append(li2);// Adds the node you just deleted to ul Elements in the 

          var li2=$("ul li:eq(1)").empty();//Clear the second node
      });

      $("#btnCopy").click(function(){
         $("p").clone().appendTo("ul");
      });

      $("#btnReplace").click(function(){
         $("p").replaceWith("<strong> What's your least favorite fruit? Ha ha </strong>");
      });

      $("#btnWrap").click(function(){
       // $("strong").wrap("<b></b>");// with <b> The label <strong> Elements wrapped , All elements are individually wrapped 
       // $("strong").wrapAll("<b></b>");//wrapAll() All the elements are wrapped together and can be passed firebug To view 
         $("strong").wrapInner("<b></b>");//Is to use the content of strong (including text nodes) with <B> On the parcel
      });

   })

      
    </script>
</body>
</html>

Basic operations on attributes and styles in jquery


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<head>
    <title> Attribute operation </title>
    <script src="../jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
    <style type="text/css">
     .height{ font-weight:bold;color:red;}
     .another{ font-style:italic;color:blue;}
    </style>
</head>
<body>
<p title=" Choose your favorite fruit "> What's your favorite fruit? </p>
  <ul>
    <li title=" apple " class="height"> apple </li>
    <li title=" banana "> banana </li>
    <li title=" watermelon "> watermelon </li>
  </ul>

  <input type="button" value=" Gets or sets a property " id="btnSetOrGetAttr" />
  <input type="button" value=" Delete the properties " id="btnDeleteAttr" />
  <input type="button" value=" Gets or sets the style " id="btnSetOrGetStyle" />
  <input type="button" value=" Remove the style " id="btnRemoveStyle" />

  <script type="text/javascript" language="javascript">
    $(function(){
      $("#btnSetOrGetAttr").click(function(){
        var p =  $("p").attr("title");//Retrieve attributes
        alert(p);
        var pSet=$("p").attr("title"," This is what I reset title Properties, ");
        alert(pSet.attr("title"));//Gets the reset title
      });

      $("#btnDeleteAttr").click(function(){
         var p=$("p").removeAttr("title");
         alert(p.attr("title"));
      });

      $("#btnSetOrGetStyle").click(function(){
         var p=$("p").attr("class");//Gets the class of the p element
         alert(p);
         var pSet=$("p").attr("class","height");//Set class to height;
         alert(pSet.attr("class"));//Gets the set class
      });

      $("ul li").click(function(){
         $(this).addClass("another");//Chase another class to li, where the first li has two class values, merges styles, and for the same style attribute, the latter overrides the former
      });

      $("#btnRemoveStyle").click(function(){
        // $("ul li").removeClass("height");// Means to remove a style 
       //  $("ul li").removeClass("height another");// Represents removing two styles 
           $("ul li").removeClass();//Represents the removal of all classes from li

           //Determines if a style is present, returns true if so, or false
          var flag = $("p").hasClass("another");//Is equivalent to $(" p "). The is (" another ");
          alert(flag);
      });
    })
  </script>
</body>
</html>