`

操作节点

jQueryHTML 
阅读更多
初始化： 
   你最喜欢的水果是?
    [list]
      <li title='苹果'>苹果</li>
      <li title='橘子'>橘子</li>
      <li title='菠萝'>菠萝</li>
    [/list]


查找节点： 
$(function(){
      var $para = $("p");            // 获取<p>节点
      var $li = $("ul li:eq(1)");   // 获取第二个<li>元素节点

      var p_txt = $para.attr("title"); // 输出<p>元素节点属性title
      var ul_txt =  $li.attr("title");    // 获取<ul>里的第二个<li>元素节点的属性title
      var li_txt =  $li.text();       // 输出第二个<li>元素节点的text

      alert(ul_txt);
      alert(li_txt);
      alert(p_txt);
  });


创建节点： 
$(function(){
    var $li_1 = $("<li title='香蕉'>香蕉</li>");    //创建一个<li>元素
                                                                            //包括元素节点,文本节点和属性节点
                                                                            //其中title='香蕉' 就是创建的属性节点
    var $li_2 = $("<li title='雪梨'>雪梨</li>");     //创建一个<li>元素
                                                                            //包括元素节点,文本节点和属性节点
                                                                            //其中title='雪梨' 就是创建的属性节点 
     var $parent = $("ul");        // 获取<ul>节点。<li>的父节点
     $parent.append($li_1);        // 添加到<ul>节点中，使之能在网页中显示
     $parent.append($li_2);        // 等价于：$parent.append($li_1).append($li_2);
  });


插入节点： 
$(function(){
    var $li_1 = $("<li title='香蕉'>香蕉</li>");    //  创建第一个<li>元素
    var $li_2 = $("<li title='雪梨'>雪梨</li>");    //  创建第二个<li>元素
    var $li_3 = $("<li title='其它'>其它</li>");    //  创建第三个<li>元素


    var $parent = $("ul");                             // 获取<ul>节点，即<li>的父节点
    var $two_li = $("ul li:eq(1)");             //  获取<ul>节点中第二个<li>元素节点
  
    $parent.append($li_1);                 //  append方法将创建的第一个<li>元素添加到父元素的最后面
    $parent.prepend($li_2);                 //  prepend方法将创建的第二个<li>元素添加到父元素里的最前面
    $li_3.insertAfter($two_li);               //  insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后
  });


移动节点： 
$(function(){
    var $one_li = $("ul li:eq(1)");             //  获取<ul>节点中第二个<li>元素节点
    var $two_li = $("ul li:eq(2)");             //  获取<ul>节点中第三个<li>元素节点
    $two_li.insertBefore($one_li);    //移动节点
  });


删除节点： 
1、$(function(){
     $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除。
  });


2、$(function(){
     var $li = $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除。
     $li.appendTo("ul");                        // 把刚才删除的又重新添加到<ul>元素里
     //所以，删除只是从网页中删除，在jQuery对象中，这个元素还是存在的，我们可以重新获取它
  });


3、 $(function(){
      $("ul li").remove("li[title!=菠萝]");  //把<li>元素中属性title不等于"菠萝"的<li>元素删除
  });


4、$(function(){
     $("ul li:eq(1)").empty(); // 找到第二个<li>元素节点后，清空此元素里的内容
  });


复制节点： 
1、$(function(){
     $("ul li").click(function(){
         $(this).clone().appendTo("ul"); // 复制当前点击的节点，并将它追加到<ul>元素
     })  
  });


2、$(function(){
     $("ul li").click(function(){
         $(this).clone(true).appendTo("ul"); // 注意参数true
         //可以复制自己，并且他的副本也有同样功能。
     })  
  });


替换节点： 
$(function(){
     $("p").replaceWith("[b]你最不喜欢的水果是?[/b]");
     // 同样的实现： $("[b]你最不喜欢的水果是?[/b]").replaceAll("p");
  });


包裹节点： 
 $(function(){

      $("strong").wrap ("<b></b>");//用<b>元素把[b]元素包裹起来

      $("strong").wrapAll ("<b></b>");

      $("strong").wrapInner ("<b></b>");
  });

<strong title="选择你最喜欢的水果." >你最喜欢的水果是?[/b]


属性操作： 
  $(function(){
      //设置<p>元素的属性'title'
      $("input:eq(0)").click(function(){
            $("p").attr("title","选择你最喜欢的水果.");
      });
      //获取<p>元素的属性'title'
      $("input:eq(1)").click(function(){
            alert( $("p").attr("title") );
      });
      //删除<p>元素的属性'title'
      $("input:eq(2)").click(function(){
            $("p").removeAttr("title");
      });  
  });


样式操作： 
<style type="text/css">
.high{
 font-weight:bold;   /* 粗体字 */
 color : red;        /* 字体颜色设置红色*/
}
.another{
 font-style:italic;
 color:blue;
}
</style>

$(function(){
      //获取样式
      $("input:eq(0)").click(function(){
            alert( $("p").attr("class") );
      });
      //设置样式
      $("input:eq(1)").click(function(){
            $("p").attr("class","high");
      });
      //追加样式
      $("input:eq(2)").click(function(){
            $("p").addClass("another");
      });   
      //删除全部样式
      $("input:eq(3)").click(function(){
            $("p").removeClass();
      }); 
       //删除指定样式
      $("input:eq(4)").click(function(){
            $("p").removeClass("high");
      });  
      //重复切换样式
      $("input:eq(5)").click(function(){
            $("p").toggleClass("another");
      }); 
      //判断元素是否含有某样式
      $("input:eq(6)").click(function(){
            alert( $("p").hasClass("another") )
            alert( $("p").is(".another") )
      }); 
  });


设置和获取HTML,文本和值： 
1、 <style type="text/css">
.test{
 font-weight:bold;
 color : red;
}
.add{
 font-style:italic;
}
</style>


$(function(){
      //获取<p>元素的HTML代码
      $("input:eq(0)").click(function(){
            alert(  $("p").html() );
      });
      //获取<p>元素的文本
      $("input:eq(1)").click(function(){
            alert(  $("p").text() );
      });
      //设置<p>元素的HTML代码
      $("input:eq(2)").click(function(){
             $("p").html("[b]你最喜欢的水果是?[/b]");
      });   
       //设置<p>元素的文本
      $("input:eq(3)").click(function(){
             $("p").text("你最喜欢的水果是?");
      }); 
      //设置<p>元素的文本
      $("input:eq(4)").click(function(){
             $("p").text("[b]你最喜欢的水果是?[/b]");
      }); 
      //获取按钮的value值
      $("input:eq(5)").click(function(){
             alert( $(this).val() );
      });  
      //设置按钮的value值
      $("input:eq(6)").click(function(){
            $(this).val("我被点击了!");
      }); 
  });


2、 $(function(){
      $("#address").focus(function(){         // 地址框获得鼠标焦点
            var txt_value =  $(this).val();   // 得到当前文本框的值
            if(txtvalue=="请输入邮箱地址"){ 
                $(this).val("");              // 如果符合条件，则清空文本框内容
            }
      });
      $("#address").blur(function(){          // 地址框失去鼠标焦点
              var txt_value =  $(this).val();   // 得到当前文本框的值
            if(txtvalue==""){
                $(this).val("请输入邮箱地址");// 如果符合条件，则设置内容
            }
      })

      $("#password").focus(function(){
            var txt_value =  $(this).val();
            if(txtvalue=="请输入邮箱密码"){
                $(this).val("");
            }
      });
      $("#password").blur(function(){
              var txt_value =  $(this).val();
            if(txtvalue==""){
                $(this).val("请输入邮箱密码");
            }
      })
  });


3、 $(function(){
      $("#address").focus(function(){         // 地址框获得鼠标焦点
            var txt_value =  $(this).val();   // 得到当前文本框的值
            if(txtvalue==this.defaultValue){ 
                $(this).val("");              // 如果符合条件，则清空文本框内容
            }
      });
      $("#address").blur(function(){          // 地址框失去鼠标焦点
              var txt_value =  $(this).val();   // 得到当前文本框的值
            if(txtvalue==""){
                $(this).val(this.defaultValue);// 如果符合条件，则设置内容
            }
      })

      $("#password").focus(function(){
            var txt_value =  $(this).val();
            if(txtvalue==this.defaultValue){
                $(this).val("");
            }
      });
      $("#password").blur(function(){
              var txt_value =  $(this).val();
            if(txtvalue==""){
                $(this).val(this.defaultValue);
            }
      })
  });


4、 <style type="text/css">
.test{
 font-weight:bold;
 color : red;
}
.add{
 font-style:italic;
}


$(function(){
      //设置单选下拉框选中
      $("input:eq(0)").click(function(){
            $("#single").val("选择2号");
      });
      //设置多选下拉框选中
      $("input:eq(1)").click(function(){
            $("#multiple").val(["选择2号", "选择3号"]);
      });
      //设置单选框和多选框选中
      $("input:eq(2)").click(function(){
             $(":checkbox").val(["check2","check3"]);
            $(":radio").val(["radio2"]);
      });   
  });


<input type="button" value="设置单选下拉框选中"/>
    <input type="button" value="设置多选下拉框选中"/>
    <input type="button" value="设置单选框和多选框选中"/>
<br/><br/>
<select id="single">
  <option>选择1号</option>
  <option>选择2号</option>
  <option>选择3号</option>
</select>
<select id="multiple" multiple="multiple" style="height:120px;">
  <option selected="selected">选择1号</option>
  <option>选择2号</option>
  <option>选择3号</option>
  <option>选择4号</option>
  <option selected="selected">选择5号</option>
</select>
<br/><br/>
<input type="checkbox" value="check1"/> 多选1
<input type="checkbox" value="check2"/> 多选2
<input type="checkbox" value="check3"/> 多选3
<input type="checkbox" value="check4"/> 多选4
<br/>
<input type="radio" value="radio1"/> 单选1
<input type="radio" value="radio2"/> 单选2
<input type="radio" value="radio3"/> 单选3


5、   $(function(){
      //设置单选下拉框选中
      $("input:eq(0)").click(function(){
            $("#single option").removeAttr("selected");  //移除属性selected
            $("#single option:eq(1)").attr("selected",true); //设置属性selected
      });
      //设置多选下拉框选中
      $("input:eq(1)").click(function(){
            $("#multiple option").removeAttr("selected");  //移除属性selected
            $("#multiple option:eq(2)").attr("selected",true);//设置属性selected
            $("#multiple option:eq(3)").attr("selected",true);//设置属性selected
      });
      //设置单选框和多选框选中
      $("input:eq(2)").click(function(){
            $(":checkbox").removeAttr("checked"); //移除属性checked
            $(":radio").removeAttr("checked"); //移除属性checked
            $("[value=check2]:checkbox").attr("checked",true);//设置属性checked
            $("[value=check3]:checkbox").attr("checked",true);//设置属性checked
            $("[value=radio2]:radio").attr("checked",true);//设置属性checked
      });  
  });


遍历节点树： 
$(function(){
     var $body = $("body").children();
     var $p = $("p").children();
     var $ul = $("ul").children();
     alert( $body.length );  // <body>元素下有2个子元素
     alert( $p.length );     // <p>元素下有0个子元素
     alert( $ul.length );    // <p>元素下有3个子元素
     for(var i=0;i< $ul.length;i++){
         alert( $ul[i].innerHTML );
     }
  });
分享到：
| 基础入门
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS_操作节点.doc

    在"JS_操作节点.doc"中提到的是一些关键的节点属性和方法，它们构成了DOM操作的基础。 1. **Attributes**：这是一个只读属性，它存储了节点的所有属性，如HTML元素的`id`、`class`等。可以通过`element.attributes`...

    02_操作节点内容.html

    02_操作节点内容

    计算机后端-Java-PHP视频教程javascript02-16 暴力操作节点.wmv

    计算机后端-Java-PHP视频教程javascript02-16 暴力操作节点.wmv

    Web前端开发技术-节点和节点的操作.pptx

    3. **操作节点**： - **添加节点**：可以使用`appendChild`、`insertBefore`或`replaceChild`方法来添加、插入或替换节点。 - **删除节点**：`removeChild`方法用于移除指定的子节点。 - **复制节点**：`...

    javascript节点属性和方法

    在 DOM 中，每个节点都有其自己的属性和方法，通过这些属性和方法，可以控制和操作节点的结构和内容。同时，DOM 还提供了一些方法来操作节点之间的关系，如 appendChild、insertBefore、removeChild 等。 要掌握 ...

    增加节点操作.html

    增加节点操作 html 初学者可以背一下 我都是背的

    LabVIEW的布尔型数据操作节点

    在程序框图中，布尔型数据操作节点位于函数子选板“编程→布尔”中，如图1所示。 　图1布尔子选板 　布尔子选板中的布尔对象操作节点名称和功能如表1所示。其中所有函数的操作数应为布尔数据或数值型数据；如果...

    第06章 DOM节点操作（下）

    三、操作节点 1. `appendChild()`: 在节点的子节点末尾添加新节点。 2. `insertBefore()`: 在指定子节点前插入新节点。 3. `removeChild()`: 删除指定子节点。 4. `replaceChild()`: 替换指定子节点。 四、属性操作...

    数据结构中的节点

    4. **操作节点**：在数据结构中，对节点的操作主要包括添加、删除、修改和查找。添加新节点涉及在适当位置插入节点；删除节点可能涉及重新连接指针；修改节点数据涉及直接改变数据元素；查找节点则涉及到遍历数据...

    TreeView添加、删除、修改节点的实现

    在实际应用中，我们可能需要在用户交互时动态操作节点，如点击节点时添加、删除或修改。为此，我们需要监听TreeView的`AfterSelect`、`BeforeRemove`或`BeforeLabelEdit`等事件： ```csharp treeView1.AfterSelect ...

    易语言节点基本操作

    本篇将详细讲解易语言中的节点基本操作以及如何读入XML数据。 1. 节点的基本操作： 在易语言中，处理XML文档通常涉及对XML节点的操作。节点是XML文档的基本构建块，包括元素节点、属性节点、文本节点等。在易语言...

    EDA/PLD中的LabVIEW的布尔型数据操作节点

    在程序框图中，布尔型数据操作节点位于函数子选板“编程→布尔”中，如图1所示。 　图1布尔子选板 　布尔子选板中的布尔对象操作节点名称和功能如表1所示。其中所有函数的操作数应为布尔数据或数值型数据；如果...

    节点树生成

    2. **Dtree**：Dtree可能是指决策树（Decision Tree）的简称，但在这个上下文中，它更可能是一个特定的实现或库，用于构建和操作节点树。这个库可能提供了节点的创建、删除、编辑等功能，并可能支持自定义节点属性和...

    ArcGIS Engine 节点编辑

    3. **选择和操作节点**：`IGeometryEditor`接口提供了一系列方法，如`EditVertices`，用于选择和编辑地图要素的几何形状。用户可以选择特定的节点，并使用这些方法进行移动或调整。 4. **添加和删除节点**：`...

    VB TreeView中节点拖动、增加、删除等功能源码参考

    - 操作节点时，需要确保在多线程环境下正确地同步对TreeView的访问，以防止数据竞争和UI更新问题。 - 考虑到用户体验，应该提供足够的反馈，如拖动时的视觉指示，以及在不允许操作时的错误提示。 通过理解和应用...

    C#TreeView窗体版点击右键弹出菜单+直接修改名称+新建节点

    `TreeView`提供了添加、删除、移动和操作节点的方法。 二、右键菜单实现 1. 首先，需要在`TreeView`控件上添加鼠标右键点击事件监听器。在C#中，这可以通过以下代码实现： ```csharp private void treeView1_...

    zookeeper之节点基本操作（一）.doc

    ### ZooKeeper节点基本操作详解 #### 一、创建节点 在ZooKeeper中，节点（也称为znode）是用于存储数据的基本单元。通过`create`命令可以创建节点，并且可以指定不同的节点类型。 1. **普通节点**： - 普通节点...

    关于数据结构双向链表中插入节点的核心步骤探讨.pdf

    在实际编程实践中，双线链表的节点插入需要精确地操作节点中的指针变量，以避免如指针丢失、内存泄漏、访问越界等常见错误。 指针变化顺序排列的实验结果和分析，旨在通过不同的排列组合测试，验证每一种可能的指针...

    浅谈JavaScript语言中文档节点访问技术.pdf

    在对象模型中，每个节点都有其自己的属性和方法，可以通过这些属性和方法来访问和操作节点。 例如，在HTML文档中，有一个 `&lt;p&gt;` 元素，可以通过对象模型来访问该元素： ``` var p = document.getElementById("p"); ...

    C# xml多个同名节点操作

    方便对xml中任意节（多个同名节点）点属性进行获取、设置。 /// /// 设置指定节点的属性 /// /// &lt;param name="xmlContent"&gt;xml结构 /// 父节点 /// 父节点所处同名节点的位置 为0表明只有一个该节点 /// ...

Magicbox
Global site tag (gtag.js) - Google Analytics