jQuery的DOM操作详解
DOM(Document Object Model—文档对象模型)：一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件
DOM操作的分类
核心-DOM: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM 的程序设计语言都可以使用它. 它的用途并非仅限于处理网页, 也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML
HTML-DOM：使用 JavaScript 和 DOM 为 HTML 文件编写脚本时, 有许多专属于 HTML-DOM 的属性，例如：divElement.innerHTML=“哈哈”
CSS-DOM：针对于 CSS 操作, 在 JavaScript 中, CSS-DOM 主要用于获取和设置 style 对象的各种属性，例如imgElement.style.visibiliby=“hidden”
jQuery提供DOM操作的API
each()：是jQuery中专用于迭代数组的方法，参数为一个处理函数，this表示当前需要迭代的js对象
<script type="text/javascript">
//用JS语法创建一个一维数组，存入string类型的姓名，再迭代（迭代方式一）
var nameArray = new Array("哈哈", "呵呵", "嘻嘻");
for ( var i = 0; i < nameArray.length; i++) {
document.write(nameArray[i] + "<br/>");
}
//用JSON语法创建一个一维数组，存入string类型的姓名，再迭代（迭代方式二）
var nameArray = [ "哈哈", "呵呵", "嘻嘻", "都都" ];//js对象
var $nameArray = $(nameArray);//jquery对象
$nameArray.each(function() {
//this表示数组中每一个元素，this属性js对象，this代表string类型
alert(this);
});
//用JSON语法创建一个一维数组，存入object类型的姓名和薪水，再迭代
var nameArray = [ {
name : "哈哈",
sal : 6000
}, {
name : "嘿嘿",
sal : 7000
}, {
name : "笨笨",
sal : 8000
} ];
var $nameArray = $(nameArray);
$nameArray.each(function() {
//this代表object类型
alert(this.name + ":" + this.sal);
});
</script>
append(content) :向每个匹配的元素的内部的结尾处追加内容
prepend(content):向每个匹配的元素的内部的开始处插入内容（父子关系）
after(content) ：在每个匹配的元素之后插入内容，例如A.after(B)，即B在后
before(content)：在每个匹配的元素之前插入内容 ，例如A.before(B)，即B在前（兄弟关系）
<body>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<div>这是子元素，要插入到父元素内</div>
<script type="text/javascript">
//DIV标签插入到(<li>第三项</li>)标签之后
$("ul").append($("div"));
//DIV标签插入到(<li>第一项</li>)标签之前
$("ul").prepend($("div"));
//DIV标签插入到UL标签之后
$("ul").after($("div"));
//DIV标签插入到UL标签之前
$("ul").before($("div"));
</script>
</body>
attr(name)：获取属性值
attr(name,value)：给符合条件的标签添加key-value属性对
<body>
<form>
<table>
<tr>
<td><input type="text" name="username" value="张三" /></td>
<td><input type="password" name="password" value="123456" /></td>
</tr>
</table>
</form>
<script type="text/javascript">
//取得form里第一个input元素的type属性
alert($("form input:first").attr("type"));
//设置form里最后个input元素的为只读文本框
//$(":password").attr("readonly","readonly")也可以
$("form input:last").attr("readonly", "readonly")
</script>
</body>
$("<div id='xxID'>HTML代码</div>")：创建元素，属性，文本
remove()：删除自已及其后代节点
<body>
<ul id="a">
<li>第一项</li>
<li id="secondID">第二项</li>
<li>第三项</li>
</ul>
<script type="text/javascript">
//创建div元素，添加"哈哈"文本，ID属性，并添加到文档中,即<body><div id="2015">哈哈</div></body>
//js方式
var divElement = document.createElement("div");
divElement.innerHTML = "哈哈哈";
divElement.setAttribute("id", "2015");
divElement.id = "2015";
document.body.appendChild(divElement);
//jquery方式
var $div = $("<div id='2015'>哈哈哈哈哈</div>");
//$(document.body).append( $div );
$("body").append($div);
//删除ID为secondID的LI元素
$("#secondID").remove();
//删除所有LI元素
$("#a li").remove();
//删除UL元素及其子元素
$("#a").remove();
</script>
</body>
val()：获取value属性的值
val("")：设置value属性值，""为空串，相当于清空
text()：获取HTML或XML标签之间的值
text("")：设置HTML或XML标签之间的值为""空串
<body>
<select id="city">
<option value="帝都">北京</option>
</select>
<script type="text/javascript">
//取得<option value="帝都">北京</option>中的内容
alert( $("#city").text() );//北京
alert( $("#city option").text() );//北京
alert( $("#city").html() );//<option value="帝都">北京</option>
alert( $("#city option").val() );//帝都
//修改text和value
$("#city option").text("上海");
$("#city option").val("魔都");
alert( $("#city option").text() );//上海
alert( $("#city option").val() );//魔都
</script>
</body>
clone()：只复制样式，不复制行为
clone(true)：既复制样式，又复制行为
replaceWith()：替代原来的节点
removeAttr()：删除已存在的属性
<body>
<input type="button" value="原按钮" />
<div style="width:500px;height:23px" align="right">双击会被替换成文本框,单击改变位置</div>
<script type="text/javascript">
//为原input元素动态添加单击事件，且复制原input元素，
var $old = $(":button");
$old.click(function() {
$("body").append($("<div id='2015'>哈哈哈哈哈</div>"));
});
//复制原input元素，添加到原input元素后，与其同级
var $old = $(":button");
var $new = $(":button").clone();//无点击事件
$new.val("新按钮1");
$old.after($new);
//添加到原input元素后，与其同级，且和原按钮有一样的行为
var $new = $old.clone(true);//有点击事件
$new.val("新按钮2");
$old.after($new);
//双击<div>中的文本，用文本框替换文本
$("div").dblclick(
function() {
var $text = $("<input type='text' style='width:165px;height:23px'/>");
//文本框替代div标签
$(this).replaceWith($text);
});
//单击改变<div>中的文本
$("div").click(
function() {
$(this).removeAttr("align");
});
</script>
</body>
addClass()：增加已存在的样式
removeClass()：删除已存在的样式
hasClass()：判断标签是否有指定的样式，true表示有样式，false表示无样式
toggleClass()：如果标签有样式就删除，否则增加样式
<style type="text/css">
.myClass {
font-size: 30px;
color: red
}
</style>
<body>
<div>无样式</div>
<div class="myClass">有样式</div>
<script type="text/javascript">
//为无样式的DIV添加样式
$("div:first").addClass("myClass");
//为有样式的DIV删除样式
$("div:last").removeClass("myClass");
//切换样式，即有样式的变成无样式，无样式的变成有样式
$("div").toggleClass("myClass");
//最后一个DIV是否有样式
var flag = $("div:last").hasClass("myClass");
alert(flag ? "有样式" : "无样式");
</script>
</body>
offset()：获取对象的left和top坐标
offset({top:100,left:200})：将对象直接定位到指定的left和top坐标
width()：获取对象的宽
width(300)：设置对象的宽
height()：获取对象的高
height(500)：设置对象的高
<body>
<img src="../images/zgl.jpg" />
<script type="text/javascript">
//获取图片的坐标
var offset = $("img").offset();
var x = offset.left;
var y = offset.top;
alert(x+":"+y);
//设置图片的坐标
$("img").offset({
top:100,
left:200
});
//获取图片的宽高
var w = $("img").width();
var h = $("img").height();
alert(w+":"+h);
//设置图片的宽高
$("img").width(500);
$("img").height(600);
</script>
</body>
children()：只查询子节点，不含后代节点（多个）
next()：下一个兄弟节点（一个）
prev()：上一个兄弟节点（一个）
siblings()：上下兄弟节点（多个）
<body>
<span>Span</span>
<p>p1</p>
<p>Hello</p>
<div>
<span> Hello Again <b> Bold </b> </span>
</div>
<p>And Again</p>
<span>And Span</span>
<script type="text/javascript">
//取得div元素的直接子元素内容，不含后代元素
alert($("div").children().size());//1
//取得div元素的下一个同级的兄弟元素内容
var $p = $("div").next();
alert($p.text());//And Again
//取得div元素的上一个同级的兄弟元素内容
alert($("div").prev().size());//1
//依次取得div元素的上下一个同级的所有兄弟元素的内容
var $all = $("div").siblings("p");
$all.each(function() {
alert($(this).html());//p1 Hello And Again
});
</script>
</body>
show()：显示对象
hide()：隐藏对象
fadeIn()：淡入显示对象
fadeOut()：淡出隐藏对象
<body>
<p>
<img src="../images/zgl.jpg" />
</p>
<script type="text/javascript">
//图片隐蔽
$("img").hide(5000);
$("img").show(5000);
//淡出隐蔽图片
$("img").fadeOut(3000);
//淡入显示图片
$("img").fadeIn(3000);
</script>
</body>
slideUp()：向上滑动
slideDown()：向下滑动
slideToggle()：上下切换滑动，速度快点
<body>
<div id="div1">
111111<br /> 111111<br /> 111111<br />
</div>
<input id="but1" type="button" value="上移动" />
<input id="but2" type="button" value="下移动" />
<input id="but3" type="button" value="上下移动" />
<script type="text/javascript">
//向上下滑动
$("#but1").click(function() {
//div标标上移动
$("#div1").slideUp(100);
});
//向上下滑动
$("#but2").click(function() {
//div标标下移动
$("#div1").slideDown(100);
});
//向上下滑动
$("#but3").click(function() {
//div标标上下移动
$("#div1").slideToggle(100);
});
</script>
</body>
jQuery的DOM操作详解的更多相关文章
- JavaScript 的DOM操作详解
内容概要 DOM之查找标签 基本查找 间接查找 节点操作 获取值操作 class操作 样式操作 事件 内置参数this 事件练习 内容详细 DOM操作 DOM(Document Object Mode ...
- Jqurey DOM 操作详解
一.获取 1.获取内容----.text() .html() .value() text() - 设置或返回所选元素的文本内容 格式:$(选择器) ...
- js学习--DOM操作详解大全一（浏览器对象）
一.客户端中的window对象 window对象表示当前浏览器的窗口,它是一个顶级对象,我们创建的所有对象.函数.变量都是window对象的成员. window对象自带了一些非常有用的方法.属性. w ...
- JavaScript基础：DOM操作详解
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ...
- javascript dom 操作详解 js加强
js加强操作实现代码. 1 .文档里的每个节点都有属性 nodeName . nodeValue . nodeType nodeName 文本节点的的节点名是 #text , nodeName 是只读 ...
- js学习--DOM操作详解大全 前奏（认识DOM）
一 . 节点属性 DOM 是树型结构,相应的,可以通过一些节点属性来遍历节点树: 方法 说明 nodeName 节点名称,相当于tagName.属性节点返回属性名,文本节点返回#text.nodeNa ...
- js学习--DOM操作详解大全二（window对象）
一.window - 计时器 1､setTimeout()可以用来在指定的时间之后单次调用函数.setTimeount(f,1000);//一秒后调用函数fclearTimeout();取消函数的执行 ...
- 触碰jQuery：AJAX异步详解
触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...
- jQuery调用AJAX异步详解[转]
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
随机推荐
- cross_domain
要传参数的页面 引用cross_domain.js 这个是另外一个工程(m)的地址 <script type="text/javascript" src="htt ...
- hibernate学习四（关系映射一对一与组件映射）
一.关系映射简介 在数据库中,表与表的关系,仅有外键.但使用hibernate后,为面向对象的编程,对象与对象的关系多样化:如 一对一,一对多,多对多,并具有单向和双向之分. 开始练习前,复制上一次项 ...
- Jquery 插件\Js 插件收集
1.linq.js 使得js 的数组像c#的linq操作一下样 http://linqjs.codeplex.com/ 2.分页插件 https://github.com/mricle/Mricode ...
- c语言经典算法——查找一个整数数组中第二大数
题目: 实现一个函数,查找一个整数数组中第二大数. 算法思想: 设置两个变量max1和max2,用来保存最大数和第二大数,然后将数组剩余的数依次与这两个数比较,如果这个数a比max1大,则先将max1 ...
- Ubuntu下安装QQ22013
近期闲来无事,把退役的笔记本系统换成了Ubuntu. 系统安装异常的顺利,神速的安装完成.玩弄一会发现总是缺少了点什么,呆了半天发现缺少了企鹅. 由于对Ubuntu系统不了解,安装QQ着实让我头疼了半 ...
- angularJS 服务-$provide里factory、service方法
当你初试 Angular 时,很自然地就会往 controller 和 scope 里堆满不必要的逻辑.一定要早点意识到,controller 这一层应该很薄:也就是说,应用里大部分的业务逻辑和持久化 ...
- java中HttpServletRequest常用获取url、资源名等方法总结
HttpServletRequest客户端获取请求,客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中.所以我们能够从对象中获取相应信息 端口 request.get ...
- Redis-Cluster实战--5.使用redis-cli安装
Redis-Cluster实战--.使用redis-cli安装 博客分类: redis 缓存 redis-cluster redisCluster指派槽cluster-infomeetslots 转载 ...
- ACM/ICPC 之 靠墙走-DFS+BFS(POJ3083)
//POJ3083 //DFS求靠左墙(右墙)走的路径长+BFS求最短路 //Time:0Ms Memory:716K #include<iostream> #include<cst ...
- 在WPF中使用变通方法实现枚举类型的XAML绑定
问题缘起 WPF的分层结构为编程带来了极大便利,XAML绑定是其最主要的特征.在使用绑定的过程中,大家都普遍的发现枚举成员的绑定是个问题.一般来说,枚举绑定多出现于与ComboBox配合的情况,此时我 ...