您的位置：首页 > Web前端 > JQuery
jquery dom 节点操作

2016-03-09 00:00 633 查看
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>dom</title>
<script type="text/javascript" src="/TestJquery/jq/jquery-1.3.2.js"></script>
<script type="text/javascript" src="/TestJquery/js/dom.js"></script>
</head>
<body>
<p title="选择你最喜欢的水果">选择你最喜欢的水果？</p>
<p title="选择你最喜欢的水果">选择你最喜欢的水果？</p>
<ul>
<li title="苹果">苹果</li>
<li title="橘子">橘子</li>
<li title="菠萝">菠萝</li>
</ul>
</body>
<script type="text/javascript">
$(document).ready(function(){
//获取标签的文本内容
//var $li = $('ul li:eq(1)');//获取<ul>里的第二个<li>节点
//var li_txt = $li.text();//获取第二个<li>元素节点的文本内容
//alert(li_txt);
//获取标签的属性
//var $p = $('p');//获得<p>节点
//var p = $p.attr('title');//获得<p>元素节点属性title
//alert(p);
//创建标签
var $li_1 = $('<li title="香蕉">香蕉</li>');
var $li_2 = $('<li title="葡萄">葡萄</li>');
//$('ul').append($li_1).append($li_2);
/*
* append()向每个匹配的元素内部追加内容
* appendTo()将所有匹配的元素追加到制定的元素中。实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是讲B追加到A中，而是将A追加到B中。
* prepend()向每个匹配的原色内部前置内容（填到匹配内容的前面，这个事最前面和before有区别）
* prependTo()将所有匹配的元素前置到制定的元素中。实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是讲B追加到A中，而是将A追加到B中。
* after()在每个匹配的元素之后插入内容
* insertAfter()将所有匹配的元素插入到指定元素的后面。实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是讲B追加到A中，而是将A追加到B中。
* before()在每个匹配的元素之前插入内容(不一定是最前面，没有制定的效果)
* insertBefore()将书�有匹配的元素插入到指定元素的前面。实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是讲B追加到A中，而是将A追加到B中。
* */
var $parent = $('ul');//获得<ul>节点，即<li>的父节点
var $two_li = $('ul li:eq(1)');//
$parent.append($li_1);
$parent.prepend($li_2);
var $li_3 = $('<li title="其他">其他</li>');
$li_3.insertAfter($two_li);
//删除节点
//第一种
$('ul li:eq(1)').remove();//获取第二个<li>
$('ul li').remove("li[title='香蕉']");//remove()方法可以通过传递参数来实现删除效果
//第二种
$('ul li:eq(2)').empty();//清空而不是删除
//复制节点
$('ul li').click(function(){
$(this).clone().appendTo('ul');//复制当前单击的节点，并将它追加到<ul>元素中
//复制节点后，被复制的新元素并不具备任何行为。如果需要新元素也具有复制功能(本例中是单击事件)，可以使用如下jquery
$(this).clone(true).appendTo("body");//注意参数是true，它的含义就是复制元素的同时复制元素中所绑定的时间
});
//替换节点
//第一种
//$('p').replaceWith('<strong>你最不喜欢的水果是什么呢？</strong>');//replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素
//第二种
$('<strong>颠倒顺序</strong>').replaceAll('p');//与replaceWith()的作用相同，只不过是颠倒了替换顺序
//包裹节点
//$('strong').wrap("<b></b>");//用<b>标签把<strong>元素包裹起来 效果：<b><strong></strong</b>  <b><strong></strong</b>
//$('strong').wrapAll("<b></b>");//改方法是把所有匹配的元素都用一个元素来包裹，wrap()方法是将所有的元素进行单独的包裹。<b><strong></strong <strong></strong </b>
$('strong').wrapInner('<b></b>');//改方法是将每个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来。  效果 <strong><b>把里面的内容包裹起来了</b></strong>
});
</script>
</html>
本文出自 “小浩” 博客，请务必保留此出处http://zhangchi.blog.51cto.com/5214280/1215359
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： jquery 节点
相关文章推荐
新的分享
章节导航