jQuery 中的 DOM 操作
内部插入节点
- append(content) :向每个匹配的元素的内部的结尾处追加内容
- appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处
- prepend(content):向每个匹配的元素的内部的开始处插入内容
- prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处
<html>
<head>
<title>dddtitle>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js">script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
style>
head>
<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>
<div id="foo1">Hello1div>
body>
<script language="JavaScript">
//* append(content) :向每个匹配的元素的内部的结尾处追加内容
//append后面的元素插入到append前面的元素的后面
// $("#bj").append($("#fk"));
//* appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处
//appendTo前面的元素插入到appendTo后面的元素的后面
// $("#bj").appendTo($("#fk"));
//* prepend(content):向每个匹配的元素的内部的开始处插入内容
//prepend后面的元素插入到prepend前面的元素的前面
$("#bj").prepend($("#fk"));
//* prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处
//prependTo前面的元素插入到prependTo后面的元素的前面
// $("#bj").prependTo($("#fk"));
script>
html>
外部插入节点
- after(content) :在每个匹配的元素之后插入内容
- before(content):在每个匹配的元素之前插入内容
- insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面
- insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面
以上方法不但能将新创建的 DOM 元素插入到文档中, 也能对原有的 DOM 元素进行移动.
<html>
<head>
<title>dddtitle>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js">script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
style>
head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京li>
<li id="tj" name="tianjin">天津li>
<li id="cq" name="chongqing">重庆li>
ul>
<p id="p3">I would like to say: p3p>
<p id="p2">I would like to say: p2p>
<p id="p1">I would like to say: p1p>
body>
<script language="JavaScript">
//* after(content) :在每个匹配的元素之后插入内容
//after后面的元素插入到after前面的元素的后面
// $("#bj").after($("#p2"));
//* before(content):在每个匹配的元素之前插入内容
//before后面的元素插入到before前面的元素的前面
$("#bj").before($("#p2"));
//* insertAfter(content):把所有匹配的元素插入到另一个、指定的元素集合的后面
//insertAfter前面的元素插入到insertAfter后面的元素的后面
// $("#bj").insertAfter($("#p2"));
//* insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面
//insertBefore前面的元素插入到insertBefore后面的元素的前面
// $("#bj").insertBefore($("#p2"));
script>
html>
查找节点
查找属性节点: 通过 jQuery 选择器完成.
查找属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值
<html>
<head>
<title>dddtitle>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js">script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
style>
head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=" 每个class为one的div父元素下的第2个子元素" id="b1"/>
<input type="button" value=" 每个class为one的div父元素下的第一个子元素" id="b2"/>
<input type="button" value=" 每个class为one的div父元素下的最后一个子元素" id="b3"/>
<input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素" id="b4"/>
<input type="hidden" value="hidden_1">
<input type="hidden" value="hidden_2">
<input type="hidden" value="hidden_3">
<input type="hidden" value="hidden_4">
<h1>天气冷了h1>
<h2>天气又冷了h2>
<div id="one">
id为one div
div>
<ul>
<li id="bj" name="beijing">北京li>
<li id="tj" name="tianjin">天津li>
ul>
body>
<script language="JavaScript">
//获取"北京"
var $bjElement = $("#bj");
alert($bjElement.attr("name")); //在这里相当于DOM操作里的getAttribute()
/*
* jquery中的attr()方法相当于DOM操作里的getAttribute和setAttribute
* * 对应DOM操作里getAttribute是attr(name)
* * name：属性名称
* * 对应DOM操作里setAttribute是attr(name,value)
* * name：属性名称
* * value：属性的值
*/
script>
html>
创建节点
- 创建节点: 使用 jQuery 的工厂函数 (): (html); 会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回.
注意: - 动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中;
- 当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个
元素, 可以使用$(“”)或$(“”),但不能使用$(“或”)
$(“”)或$(“p”) - 创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建
<html>
<head>
<title>dddtitle>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js">script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
style>
head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京li>
ul>
body>
<script language="JavaScript">
///在city下增加天津 节点
//1 创建天津
/*
* 1 创建
*
* * 标签的闭合
* * 开始标签和截止标签：
* *
*
* * 以下几种方式是不正确的：
* *
* * $("li")获取对应标签
*/
var $li = $(""); //document.createElement("li");
//2 设置属性
$li.attr("id","tj");
$li.attr("name","tianjin");
//3 创建文本节点
//4 插入
/*
* text()：同时也具备get和set两种属性
* * 如果是get的话，text()无参数形式
* * 如果是set的话，text(name)传入文本内容
*/
$li.text("天津");
//2 获取city标签
var $city = $("#city");
//3 插入
$city.append($li);
script>
html>
删除节点
- remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用.
- empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点).
<html>
<head>
<title>dddtitle>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js">script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
style>
head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京li>
<li id="tj" name="tianjin">天津li>
<li id="cq" name="chongqing">重庆li>
ul>
<p class="hello">Hellop> how are <p>you?p>
body>
<script language="JavaScript">
//删除北京
$("#bj").remove();
//删除所有的子节点 清空元素中的所有后代节点(不包含属性节点).
$("#tj").empty();
alert($("#tj").attr("name"));
script>
html>
复制节点
- clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.
- clone(true): 复制元素的同时也复制元素中的的事件
<html>
<head>
<title>dddtitle>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js">script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
style>
head>
<body>
<button>保存button>
<br> <br> <br>
<p>段落p>
body>
<script language="JavaScript">
//button增加事件
$("button").click(function(){
alert("yyy");
});
//克隆button 追加到p上 ,但事件不克隆
//clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为
// $("button").clone().appendTo($("p"));
//克隆button 追加到p上 ,但事件也克隆
//clone(true): 复制元素的同时也复制元素中的的事件
$("button").clone(true).appendTo($("p"));
script>
html>
替换节点
- replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素
- replaceAll(): 颠倒了的 replaceWith() 方法.
- 注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失
<html>
<head>
<title>dddtitle>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js">script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
style>
head>
<body>
<p>段落p>
<p>段落p>
<p>段落p>
body>
<script language="JavaScript">
//$("button")用 tttttttt
替换
//replaceWith前面的元素是被替换的，replaceWith后面的元素是替换后的
$("button").replaceWith($("tttttttt
"));
// p 用 替换
//replaceAll前面的元素是替换后的，replaceAll后面的元素是要被替换的
$("").replaceAll($("p"));
//replaceWith与replaceAll，效果刚好相反
script>
html>
属性操作
- attr(): 获取属性和设置属性
当为该方法传递一个参数时, 即为某元素的获取指定属性
当为该方法传递两个参数时, 即为某元素设置指定属性的值 - jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(), height(), width(), css() 等.
- removeAttr(“属性名”): 删除指定元素的指定属性
样式操作
- 获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成.
- 追加样式: addClass()
- 移除样式: removeClass() — 从匹配的元素中删除全部或指定的 class
- 切换样式: toggleClass() — 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它.
- 判断是否含有某个样式: hasClass() — 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false
<html>
<head>
<title>dddtitle>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js">script>
<style type="text/css">
.one{
width: 200px;
height: 140px;
margin: 40px;
background: red;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
style>
head>
<body>
<input type="button" value="采用属性增加样式" id="b1"/>
<input type="button" value=" addClass" id="b2"/>
<input type="button" value="removeClass" id="b3"/>
<input type="button" value=" 切换样式" id="b4"/>
<input type="button" value=" hasClass" id="b5"/>
<h1>天气冷了h1>
<h2>天气又冷了h2>
<br>
<div id="mover">
动画
div>
<br>
<span class="spanone"> span
span>
body>
<script language="JavaScript">
//
$("#b1").click(function(){
$("#mover").attr("class","one");
});
//
$("#b2").click(function(){
$("#mover").addClass("mini");
});
//
$("#b3").click(function(){
/*
* removeClass()
* * 删除样式
* * 如果不带任何参数，removeClass()可以删除任何样式
* * 如果带参数的话，removeClass()只能删除指定样式
*/
$("#mover").removeClass("one");
});
//
$("#b4").click(function(){
/*
* toggleClass();
* * 切换样式
* * 该方法只能接受一个参数
* * 所谓的切换样式，是在指定样式和没有样式(只是把指定样式删除)之间切换
*/
$("#mover").toggleClass("mini");
});
//
$("#b5").click(function(){
/*
* hasClass()
* * 判断是否含有某个样式，并不是判断是否含有样式
* * 该方法要指定样式名称
* * 如果有多个样式存在，hasClass()方法依然只判断是否含有该方法指定的样式
*/
alert($("#mover").hasClass("one"));
});
script>
html>
设置和获取 HTML, 文本和值
- 读取和设置某个元素中的 HTML 内容:
html(“”). 该方法可以用于 XHTML, 但不能用于 XML 文档 - 读取和设置某个元素中的文本内容: text(). 该方法既可以用于 XHTML 也可以用于 XML 文档.
- 读取和设置某个元素中的值: val() — 该方法类似 JavaScript 中的 value 属性. 对于文本框, 下拉列表框, 单选框该方法可返回元素的值(多选框只能返回第一个值).如果为多选下拉列表框, 则返回一个包含所有选择值的数组