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 ...
随机推荐
- Java 解决约瑟夫问题
约瑟夫问题(有时也称为约瑟夫斯置换,是一个出现在计算机科学和数学中的问题.在计算机编程的算法中,类似问题又称为约瑟夫环.又称“丢手绢问题”.) 有这样一个故事,15个教徒和15个非教徒在深海遇险必须讲 ...
- 监视 Windows 剪切板
一.先看代码 import win32con,win32gui import win32clipboard as cb class MyWindow(): def __init__(self): #注 ...
- doT.js
最近用到的数据模板引擎有很多,今天讲的doT.js也是其中一种. doT.js的特点是体积小,速度快,并且不依赖其他插件. 官网下载:http://olado.github.io 下面是用法: 模板引 ...
- JS学习：第二周——NO.1回调函数
[回调函数] 定义:把一个函数的定义阶段,作为参数,传给另一个函数: 回调函数调用次数,取决于条件: 回调函数可以传参: 回调函数可以给变this指向,默认是window: 回调函数没有返回值,for ...
- bzoj4025 二分图
支持加边和删边的二分图判定,分治并查集水之(表示我的LCT还很不熟--仅仅停留在极其简单的模板水平). 由于是带权并查集,并且不能路径压缩,所以对权值(到父亲距离的奇偶性)的维护要注意一下. 有一个小 ...
- java性能调优及问题追踪--Btrace的使用
在生产环境中经常遇到格式各样的问题,如OOM或者莫名其妙的进程死掉.一般情况下是通过修改程序,添加打印日志:然后重新发布程序来完成.然而,这不仅麻烦,而且带来很多不可控的因素.有没有一种方式,在不修改 ...
- Unity3D访问Android系统目录
file:///sdcard/Movies/3D/互动.mp4file:///storage/emulated/0/Movies/3D/互动.mp4/storage/emulated/0/Movies ...
- 简化MSI在WIN10的安装
这里给大家分享一个简化MSI安装的工具 InstallByDrag: 在win10系统中,通过双击方式打开 MSI 安装文件,可能被提示由于dll加载问题无法安装,这是由于没有使用管理员权限运行.而M ...
- 适配各种Windows分辨率，为DPI添加感知，当在高DPI时，禁用WINFORM缩放等。
因为现在高分屏越来越多,很多windows设备必须设置高DPI,这样很容易导致WINFORM整体错位,因此我们需要自己适配.禁止缩放 在程序配置清单 mainfest中添加如下. <assemb ...
- box-shadow、drop-shadow 和 text-shadow
1. box-shadow 合阴影, 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色} box-shadow属性的参数设置取值: 阴影类型 ...