jQuery中的DOM操作（部分方法）

来源：互联网发布：数控铣床编程100例编辑：程序博客网时间：2024/06/06 03:25

<html>
<head>
    //下载jquery并将它放在html通一个目录下，引入同目录下的jquery-1.7.2.js
   <script type="text/javascript" src="jquery-1.7.2.js"></script>
   <script type="text/javascript">

//1.Method : append() and appendTo()

/*
   $(function(){

   $("ul").append("<li title='a'>hello</li>")
           .append("<li title='b'>world</li>");

   $("<li title='c'>welcome</li>").appendTo($("ul"));

   });
*/

//2.Method : append(),prepend(),after()
/*
   $(function(){

   var li1 = "<li title='a'>hello</li>";
   var li2 = "<li title='b'>world</li>";
   var li3 = "<li title='c'>welcome</li>";

   $("ul").append(li1);
   $("ul").prepend(li2);
   $("ul li:eq(3)").after(li3);

   })
*/

//3.Method : insertAfter()

/*
   $(function(){

       $("ul li:eq(2)").insertAfter("ul li:eq(4)");
   })
*/

//4.Method : remove(),empty()
/*
   $(function(){

      //remove方法会返回被移除的节点的jQuery对象
   //   var removeLi = $("ul li:eq(3)").remove();
   //   $("ul").append(removeLi);

   //   $("ul li").remove("li[title!=2]");

       $("ul li:eq(3)").empty(); //清空元素中的内容

   });
*/

//5.Method : clone()
/*
   $(function(){

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

       $(this).clone(true).appendTo("ul");

   });

   });
*/

//6.Method : replaceWith(),replaceAll()
/*
   $(function(){

   //   $("p").replaceWith("<a href='http://www.baidu.com'>Baidu</a>");

       $("<a href='http://www.baidu.com'>Baidu</a>").replaceAll("p");

   });
*/

//7.Method : wrap(),wrapInner()
/*
   $(function(){

       //wrap()括号里的包裹前面的
   //   $("p").wrap("<a href='http://wwww.google.com'>google.com</a>");

       //wrapInner()前面包裹括号里的
       $("p").wrapInner("<a href='http://wwww.google.com'>google.com</a>");
   });
*/

//8.Method : attr(),removeAttr()
/*
$(function()
{
   $("input:eq(0)").click(function()
   {

       //给p设置两个属性title,hello值分别为welcome,world
       $("p").attr({"title":"welcome", "hello": "world"});
   });

   $("input:eq(1)").click(function()
   {
       alert($('p').attr("hello")); //弹出p的属性hello的值
   });

   $("input:eq(2)").click(function()
   {
       //删除p的属性title
       $('p').removeAttr("title");
   });
});
*/

   </script>
</head>
<body>

<input type="button" value="button1">
<input type="button" value="button2">
<input type="button" value="button3"><br>

   <p title="apple">你认为java怎么样？</p>
   <ul>
      <li title="1">不好</li>
      <li title="2">很烂</li>
      <li title="3">一般</li>
      <li title="4">还好</li>
      <li title="5">不错</li>
      <li title="6">非常好</li>
   </ul>

</body>
</html>