[置顶] Jquery中DOM操作（详细）
Jquery中的DOM操作
为了能全面的讲解DOM操作，首先需要构建一个网页。
HTML代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> </head> <body>
<p title="选择你最喜欢的水果。">你最喜欢的水果是？</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</body>
</html>
n 节点操作：
一、查找节点
1、查找元素节点
获取元素节点并打印它的文本内容，jQery代码如下：
var li_txt=$("ul li:eq(1)").text();//获取<ul>里第二个<li>节点的文本内容
alert(li_txt);//结果为橘子
2、查找属性节点
利用jQuery选择器查找到需要的元素之后，就可以使用attr()方法来获取它的各种属性的值，attr()方法的参数可以是一个，也可以是两个，当参数是一个时，则是要查询属性的名字，例如：
获取属性节点并打印它的文本内容：
var p_txt=$("p").attr("title");//获取<p>元素节点属性title
alert(p_txt);//结果为 选择你最喜欢吃的水果
二、创建节点
在DOM操作中，常常需要动态创建HTML内容，使文档在浏览器里的呈现效果发生变化，并且达到各种各样的人机交互目的
1、创建元素节点
如果要创建两个<li>元素节点，并要把他们作为<ul>元素节点的子节点添加到DOM节点树上。则需要：
（1）创建<li>新元素
（2）将新元素插入到文档中
首先创建<li>元素：
var $li_1=$("<li></li>");//创建<li>元素
然后使用jQuery中的append等方法将新元素插入文档中
$("ul").append($li_1);//添加到<ul>节点中，使之能在网页中显示
注意：
1、动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他方法将其插入文档中
2、当创建单个元素时，要注意闭合标签和使用标准的XHTML格式。
2、创建文本节点
创建文本节点就是在创建元素节点时直接把文本内容写出来，然后使用append()等方法将它们添加到文档中就可以。
var $li_1=$("<li>香蕉</li>");//创建一个<li>元素，"香蕉"就是创建的文本节点
$("ul").append($li_1);//添加到<ul>节点中，使之能在网页中显示
注意：无论$(html)中的HTML代码多么复杂，都要使用相同的方式来创建。
例如：$(“<li><em>这是</em><b>一个</b><a href=”#”>复杂的组合</a></li>”)
3、创建属性节点
创建属性节点与创建文本节点类似：
var $li_1=$("<li title='香蕉'>香蕉</li>");//创建一个<li>元素，title="香蕉"就是创建的title="香蕉属性节点
$("ul").append($li_1);//添加到<ul>节点中，使之能在网页中显示
三、插入节点
append()
向每个匹配的元素内部追加内容：
HTML代码：
<p>我想说：</p>
jQuery代码：
$("p").append("<b>你好</b>");
结果：
<p>我想说：<b>你好</b></p>
appendTo()
将所有匹配的元素追加到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是将B追加到A中，而是将A追加到B中：
HTML代码：
<p>我想说：</p>
jQuer代码：
$("<b>你好</b>").appendTo("p");
结果：
<p>我想说：<b>你好</b></p>
prepend()
向每个匹配的元素内部前置内容：
HTML代码：
<p>我想说：</p>
jQuer代码：
$("p").prepend<"<b>你好</b>");
结果：
<p><b>你好</b>我想说：</p>
prependTo()
将所有匹配的元素前置到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).prepend(B)的操作，即不是将B前置到A中，而是将A前置到B中：
HTML代码：
<p>我想说：</p>
jQuer代码：
$("<b>你好</b>").prependTo("p");
结果：
<p><b>你好</b>我想说：</p>
after()
在每个匹配的元索之后插入内容：
HTML代码：
<p>我想说：</p>
jQuer代码：
$("p").after("<b>你好</b>");
结果：
<p>我想说：</p><b>你好</b>
insertAfler()
将所有匹配的元素插入到指定元素的后面。实际上，使用该方法是颠倒了常规的$(A).after(B)的操作，即不是将B插入到A后面，而是将A插入到B后面：
HTML代码：
<p>我想说：</p>
jQuer代码：
$("<b>你好</b>").insertAfter("p");
结果：
<p>我想说：</p><b>你好</b>
before()
在每个匹配的元素之前插入内容：
HTML代码：
<p>我想说：</p>
jQuer代码：
$("p").before("<b>你好</b>");
结果：
<b>你好</b><p>我想说：</p>
insertBefore()
将所有匹配的元素捅入到指定的元素的前面。实际上，使用该方法是颠倒了常规的$(A).before(B)的操作，即不是将B插入到A前面，而是将A插入到B前面：
HTML代码：
<p>我想说：</p>
jQuer代码：
$("<b>你好</b>").insertBefore("p");
结果：
<b>你好</b><p>我想说：</p>
这些插入节点的方法不仅能将新创建的DOM元素插入到文档中，也能对原有的DOM元素进行移动。例如利用它们创建新元素并对其进行插入操作：
$(function(){
var $li_1 = $("<li title='新增节点：数据结构'>新增节点：数据结构</li>"); // 创建第一个<li>元素
var $li_2 = $("<li title='新增节点：设计模式'>新增节点：设计模式</li>"); // 创建第二个<li>元素
var $li_3 = $("<li title='新增节点：计算机算法'>新增节点：计算机算法</li>"); // 创建第三个<li>元素
var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点
var $two_li = $(".nm_ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点
$("#btn_1").click(function(){
$parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
});
$("#btn_2").click(function(){
// 可以采取链式写法：$parent.append($li_1).append($li_2);
$parent.append($li_2);
});
$("#btn_3").click(function(){
// insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后
$li_3.insertAfter($two_li);
});
});
也利用它们对原有的DOM元素进行移动：
$(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、Remove
$("ul li:eq(1)").remove();//获取第2个<li>元素节点后，将它从网页中删除
这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。
$("ul li").remove("li[title!=菠萝]");
2、Empty
严格来讲，empty()方法并不是删除元素，而是清空节点，它能清空元素中所有的后代节点。
$("ul li:eq(1)").empty();//获取第2个<li>元素节点后清空此元素里的内容，注意是元素里
五、复制节点
复制实现了节点重用，而不用另外新建，复制的时候可以一并复制节点上面的行为(也就是绑在它上面的事件),也可以只复制节点，分别使用clone(true)和clone()
例如：
$("ul li").click(function(){
$(this).clone().appendTo("ul")//复制当前的li单击节点，并将其最加到ul元素下
})
六、替换节点
替换是将已经存在的节点替换成其他的，使用的方法有replaceWith()，replaceAll()
replaceWith():XX用XXX替换掉
replaceAll()：那XXX替换所有的XX
七、包裹节点
包裹节点的意思就是将某个或者是符合条件的一组节点用其他的标记包裹起来，在jquery中使用wrap()
例如：
$("strong").wrap("<b></b>");//使用b标签把strong元素包裹起来
包裹的方法还有wrapAll(),wrapInner()
wrapAll：将所有匹配的元素用一个元素来包裹<与wrap的不同是，wrap对每个符和条件的元素都进行包裹，而wrapAll不是>
wrapInner：将每个匹配的元素的子内容进行包裹
$("strong").wrapInner("<b></b>");//strong元素的子元素被b标签包
n 属性操作：
1、.获取和设置属性
var $var_1=$("p");//这句话是获取节点P
var $p_1=$var_1.attr("title");//获取节点P的title属性
var $p_2=$var_1.attr("title","你好");//设置节点P的title属性为"你好"
2、.删除属性
$("p").removeAttr("title");//删除节点P的Title属性
n 样式操作：
1.获取和设置样式
var $var_class=$("p").attr("class");//获取节点P的class属性
$("p").attr("class","class1");设置节点P的class属性为样式表类class1
2.追加样式
addClass() 添加样式到A
例子：$("p").addClass("another");添加样式表类another类到P
3.移除样式
removeClass() 移除类
4.切换样式
toggleClass() 切换clss属性类为新的类
5.判断某个样式是否存在
hasClass()
n 内容操作：
html() 该方法获取html元素的内容，如：var var1=$("p").html();//获取P元素内的内容
text() 获取或设置某个html元素的内容
val() 获取元素的Value值
children() 获取html元素的所有子节点
next() 获取html元素后紧邻的同辈节点
prev() 获取html元素前紧邻的同辈节点
siblings() 获取html元素前后紧邻的同辈节点
n CSS-DOM技术：
$("p").css("color");//获取颜色属性
$("p").css("color","red");//设置颜色
$("p").css({"fontSize"："30px"，”backgroundColor“：”#888888“});//同时设置多个样式。
有两个注意点：
(1)如果值是数字，将会被自动转化为像素值。
(2)在css()方法中，如果属性中带有”-“符号，例如font-size和background-color属性，用驼峰式写法。
hight().width();
offset() .left .top 获取元素在当前视窗的偏移量，返回值对象包含两个属性left和top。
position() .left .top 获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的偏移量。
scrollTop() 、scrollLeft()方法。分别获取元素的滚动条距顶端的距离和距左侧的距离。也可以设置值。scrollTop(300)
[置顶] Jquery中DOM操作（详细）的更多相关文章
- jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...
- jQuery中DOM操作
1 定义:jquery中对DOM的操作就是对DOM元素进行增删查改操作 2 分类: 1)DOM Core(核心):用途广泛 支持多种编程语言 2)HTML DOM:代码简短 只用于处理web ...
- JQuery中DOM操作(一)
节点操作 1.插入节点,在JQuery中插入的节点方法很多,可以满足各种不同的节点插入的情况,根据不同的插入方式分为:增加环绕节点.节点内部插入和外部插入三种方式 今天我们要讲的是增加环绕节点,它有三 ...
- jQuery笔记（二）jQuery中DOM操作
前言 本篇主要介绍DOM操作,在说DOM操作之前,首先我们应该熟悉DOM树,以一个例子为例来说明DOM树.首先看这段HTML代码.(本文后面的代码如果没有特别指出,都是针对下述HTML代码进行操作) ...
- 第75天：jQuery中DOM操作
一.基础操作 1.html() 使用html()方法读取或者设置元素的innerHTML. 就是相当于javascript里头的innerHTML. 2.text() 使用text()方法读取或者设置 ...
- 转载 Jquery中AJAX参数详细介绍
Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ...
- Jquery中AJAX参数详细(1)-转
http://www.cnblogs.com/qiufuwu618/archive/2012/12/20/2826190.html Jquery中AJAX参数详细列表: 参数名 类型 描述 url S ...
- Jquery中AJAX参数详细介绍
Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ...
- jQuery的DOM操作详解
DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...
随机推荐
- Akka的Actor模型及使用实例
本文的绝大部分内容转载自rerun.me这一blog,老外写的东西就是好啊. ACTORS介绍 Anyone who has done multithreading in the past won't ...
- Liunx系统学习一，liunx系统的目录结构及含义
LIUNX系统目录结构: “/” ===>这是linux文件系统的入口,也是整个linux文件系统的根目录,linux不同于windows,没有所谓的C,D,E盘,整个liunx只有一个根分区 ...
- IO的阻塞、非阻塞、同步、异步
- ios实现类似魔兽小地图功能 在
写了一个类似魔兽小地图功能的控件. 比如你有一个可以放大缩小的scrollView.会在里面进行一些放大缩小,点击里面的按钮呀,等操作. 这个小地图控件.就会和你的大scrollView同步.并有缩略 ...
- NPlot开源画图类
一.net下的图表控件NPlot的基本用法 NPlot的基本用法 图表控件一直是很难找的,特别是免费又强大的.NPlot是一款非常难得的.Net平台下的图表控件,能做各种曲线图,柱状图,饼图,散 ...
- UI篇--Android中TableLayout中的布局
表格布局是按照行列来组织子视图的布局.表格布局包含一系列的Tablerow对象,用于定义行(也可以使用其它子对象).表格布局不为它的行.列和单元格显示表格线.每个行可以包含个以上(包括)的单元 ...
- E asy Boo t 6.51 启动易 制作启动光盘的软件（附注册码）
内建ISO文件生成器,可直接生成可启动ISO文件,并支持N合1优化. -------中文版注册码------- 用户名:中华人民共和国 注册码:2898-5448-5603-BB2D -------英 ...
- 将VLC库封装为duilib的万能视频播放控件
转载请说明出处,谢谢~~ 昨天封装好了基于webkit的浏览器控件,修复了duilib的浏览器功能的不足,而我的仿酷狗播放器项目中不光需要浏览器,同时也需要视频播放功能,也就是完成MV的功能.所以我打 ...
- STM32查看系统时钟
调用库函数RCC_GetClocksFreq,该函数可以返回片上的各种时钟的频率 函数原形 void RCC_GetClocksFreq(RCC_ClocksTypeDef* RCC_Clock ...
- MFC字体与文本输出
字体 成员函数 1.CFont( ); 构造一个CFont对象.此对象在使用之前应该先使用CreateFont.CreateFontIndirect.CreatePointFont或CreatePoi ...