【jQuery】(3)---Jquery操作Dom

时间:2022-03-30 15:21:44

              1 内部插入节点

 <body>
<ul id="city">
<li id="bj" name="beijing" >北京</li>
<li id="tj" name="tianjin"> 天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul> <ul id="love">
<li id="fk" name="fankong" >反恐</li>
<li id="xj" name="xingji">星际</li>
</ul> <script type="text/javascript">
// $("#city").append($("#fk")); //将防恐标签位置移到了重庆下面 append向每个匹配的元素的内部的结尾处追加内容
// $("#fk").appendTo($("#city")); //效果和上面一样 appendTo将每个匹配的元素追加到指定的元素中的内部结尾处
// $("#city").prepend($("#fk")); //将将防恐标签位置移到了北京上面 prepend向每个匹配的元素的内部的开始处插入内容
// $("#fk").prependTo($("#city")); //效果和上面一样 prependTo将每个匹配的元素插入到指定的元素内部的开始处
</script>
</body>

2.创建节点和删除节点

    <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<body>
<ul id="city">
<li id="bj" name="beijing" >北京</li>
<li id="tj" name="tianjin"> 天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul> <script type="text/javascript">
var $hz=$("<li></li>"); //创建<li></li> $("<li></li>")代表创建元素
$hz.attr("id","hz"); //添加属性<li id="hz" name="hangzhou"></li> attr代表添加元素
$hz.attr("name","hangzhou");
$hz.text("杭州"); //添加文本 text代表添加文本
$("#city").append($hz); //把节点挂载到父节点下即可 //移除节点信息
var $cq=$("#cq").remove(); //可以获得移除节点 的元素 remove()代表删除节点
//移除属性信息
alert($cq.attr("name")); //移除属性信息 attr("name"),如果只有一个属性就代表通过name值得到属性名,这里得到chongqing
$("#city").empty(); ////清空节点
</script>
</body>

    3.复制节点

  <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<body>
<button>保存</button>
<p>段落</p>
<script type="text/javascript">
$("button").click(function(){
alert("点击按钮");
});
//克隆节点,不克隆事件
$("button").clone().appendTo($("p")); //相当于把第三行的button按钮复制到了p标签的后面
//克隆节点,克隆事件
$("button").clone(true).appendTo($("p")); //clone(true)里面添加true代表也克隆事件,因为上面有两个button按钮,所以两个都会被复制
</script>
</body>

 4.替换节点 

   <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<body>
<p>段落</p>
<button>登陆</button>
<script type="text/javascript">
//replaceWith和replaceAll的功能完全相反,
// $("p").replaceWith("<button>登陆</button>"); //把p标签换成button按钮
// $("p").replaceAll("<button>登陆</button>"); //按照道理是把button标签变成p标签,但没有实现功能
</script>
</body>