jQuery第二天， jQuery操作DOM小结（初级）
2015-11-03 19:44
771 查看
jQuery中的DOM操作
基础操作
1.html():类似于原生DOM的innerTHML属性,读取或修改节点的HTML内容。
//获取<p>元素的html代码
$("p").html()
//设置<p>元素的html代码
$("p").html("<strong>你喜欢的水果是?</strong>");
2.val():类似于原生dom的value属性,读取或修改节点的value属性值。
//获取按钮的value值
$("input:eq(5)").val();
//设置按钮的value值
$("input:eq(6)").val("我被点击了");
3.text():类似于原生DOM的textContent属性,读取或修改节点的文本内容。
//获取<p>元素的文本
$("p").text();
//设置<p>元素的文本
$("p").text("你最喜欢换的水果是？");
4.attr():读取或者修改节点的属性
removeAttr():删除节点的属性
//获取id="bj"的标签
var $bj=$("#bj");
//获取北京节点的name属性值，attr(attrName) - 类似于getAttribute()
$bj.attr("name");
//删除北京节点的name属性值，类似于removeAttribute()
$bj.removeAttr("name");
//设置背景节点的name属性值，attr(attrName,attrValue) - 类似于setAttribute()
$bj.attr("name","beijing");
样式操作 - css
1.attr("class",classValue)
2.addClass() - 追加样式
3.removeClass() - 删除样式
4.toggleClass() - 切换样式
5.hasClass() - 判断样式
6.css() - 操作样式
设置
css(name,value)
css(options)
options - 选项
{
name : value,
name : value,
...
}
获取 - css(name)
例子：
<!DOCTYPE html>
<html>
<head>
<title>jQuery中的DOM操作-样式操作</title>
<meta charset="utf-8" />
<script src="jquery-1.11.3.js"></script>
<style>
div {
width : 100px;
height : 100px;
border : solid 1px black;
background : pink;
float : left;
margin-right : 10px;
}
.one {
width : 50px;
height : 50px;
border : solid 1px black;
background : yellow;
float : left;
margin-right : 10px;
}
.two {
width : 150px;
height : 150px;
border : solid 1px black;
background : green;
float : left;
margin-right : 10px;
}
</style>
</head>
<body>
<button id="btn1">attr()</button>
<button id="btn2">addClass()</button>
<button id="btn3">removeClass()</button>
<button id="btn4">toggleClass()</button>
<button id="btn5">hasClass()</button>
<button id="btn6">css()</button>
<br></br>
<div id="d1"></div>
<div id="d2"></div>
<script>
// attr("class",className) - 设置
$("#btn1").click(function(){
$("#d1").attr("class","one");
});
// addClass(className) - 追加|叠加
$("#btn2").click(function(){
$("#d1").addClass("two");
});
/*
* removeClass()
* * 不传参 - 删除所有样式
* * 传参 - 删除指定样式
*/
$("#btn3").click(function(){
$("#d1").removeClass();
});
/*
* toggleClass(className)
* * 是在没有样式与指定样式之间切换
* * addClass()+removeClass()
*/
$("#btn4").click(function(){
$("#d1").toggleClass("one");
});
/*
* hasClass(className)
* * 判断指定元素是否含有指定样式
*/
$("#btn5").click(function(){
console.log($("#d1").hasClass("one"));
});
// css()方法的设置功能
$("#btn6").click(function(){
// 链式操作
//$("#d2").css("background","red").css("width","50").css("height","50");
$("#d2").css({
"background" : "red",
"width" : 50,
"height" : 50
});
});
</script>
</body>
</html>遍历节点
parent() - 获取指定节点的父节点
children() - 获取指定节点的所有子节点
next() - 获取指定节点的下一个兄弟节点
prev() - 获取指定节点的上一个兄弟节点
siblings() - 获取指定节点的所有兄弟节点
find(expr) - 在指定节点中查找指定内容
注意 - 查找指定节点的后代节点
例子：
<!DOCTYPE html>
<html>
<head>
<title>jQuery中的DOM-遍历节点</title>
<meta charset="utf-8" />
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京
<ul>
<li>海淀区</li>
<li>朝阳区</li>
<li>大兴区</li>
</ul>
</li>
<li id="tj" name="tianjin">天津</li>
<li id="nj" name="nanjing">南京</li>
<li id="sh" name="shanghai">上海</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<script>
// 1. 获取北京节点的父节点
//console.log($("#bj").parent().attr("id"));
// 2. 获取id为city节点的所有子节点的个数
console.log($("#city").children().length);
// 3. 获取南京节点的上一个兄弟节点和下一个兄弟节点
//console.log($("#nj").prev().attr("name"));
//console.log($("#nj").next().attr("name"));
// 4. 获取南京节点的所有兄弟节点的个数
//console.log($("#nj").siblings().length);
//console.log($("#nj~li").length);
// 5. 获取id为city节点下所有li元素的个数(后代节点)
console.log($("#city").find("li").length);
</script>
</body>
</html>创建节点
元素节点 - $(HTML代码)
文本节点 - text()
属性节点 - attr()
jQuery - $(HTML代码)
例子：
* remove() - 删除自身及后代节点
* empty() - (清空)删除后代节点,但保留自身节点
例子：
<!DOCTYPE html>
<html>
<head>
<title>jQuery中的DOM-删除节点</title>
<meta charset="utf-8" />
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津
<ul>
<li>塘沽</li>
</ul>
</li>
<li id="nj" name="nanjing">南京</li>
<li id="sh" name="shanghai">上海</li>
</ul>
<script>
// 1. 删除北京节点
$("#bj").remove();
// 2. 删除天津节点
$("#tj").empty();
</script>
</body>
</html>* 插入节点
* 内部插入
* append
* prepend
* appendTo
* prependTo
* 外部插入
* before
* after
* insertBefore
* insertAfter
列子1：
基础操作
1.html():类似于原生DOM的innerTHML属性,读取或修改节点的HTML内容。
//获取<p>元素的html代码
$("p").html()
//设置<p>元素的html代码
$("p").html("<strong>你喜欢的水果是?</strong>");
2.val():类似于原生dom的value属性,读取或修改节点的value属性值。
//获取按钮的value值
$("input:eq(5)").val();
//设置按钮的value值
$("input:eq(6)").val("我被点击了");
3.text():类似于原生DOM的textContent属性,读取或修改节点的文本内容。
//获取<p>元素的文本
$("p").text();
//设置<p>元素的文本
$("p").text("你最喜欢换的水果是？");
4.attr():读取或者修改节点的属性
removeAttr():删除节点的属性
//获取id="bj"的标签
var $bj=$("#bj");
//获取北京节点的name属性值，attr(attrName) - 类似于getAttribute()
$bj.attr("name");
//删除北京节点的name属性值，类似于removeAttribute()
$bj.removeAttr("name");
//设置背景节点的name属性值，attr(attrName,attrValue) - 类似于setAttribute()
$bj.attr("name","beijing");
样式操作 - css
1.attr("class",classValue)
2.addClass() - 追加样式
3.removeClass() - 删除样式
4.toggleClass() - 切换样式
5.hasClass() - 判断样式
6.css() - 操作样式
设置
css(name,value)
css(options)
options - 选项
{
name : value,
name : value,
...
}
获取 - css(name)
例子：
<!DOCTYPE html>
<html>
<head>
<title>jQuery中的DOM操作-样式操作</title>
<meta charset="utf-8" />
<script src="jquery-1.11.3.js"></script>
<style>
div {
width : 100px;
height : 100px;
border : solid 1px black;
background : pink;
float : left;
margin-right : 10px;
}
.one {
width : 50px;
height : 50px;
border : solid 1px black;
background : yellow;
float : left;
margin-right : 10px;
}
.two {
width : 150px;
height : 150px;
border : solid 1px black;
background : green;
float : left;
margin-right : 10px;
}
</style>
</head>
<body>
<button id="btn1">attr()</button>
<button id="btn2">addClass()</button>
<button id="btn3">removeClass()</button>
<button id="btn4">toggleClass()</button>
<button id="btn5">hasClass()</button>
<button id="btn6">css()</button>
<br></br>
<div id="d1"></div>
<div id="d2"></div>
<script>
// attr("class",className) - 设置
$("#btn1").click(function(){
$("#d1").attr("class","one");
});
// addClass(className) - 追加|叠加
$("#btn2").click(function(){
$("#d1").addClass("two");
});
/*
* removeClass()
* * 不传参 - 删除所有样式
* * 传参 - 删除指定样式
*/
$("#btn3").click(function(){
$("#d1").removeClass();
});
/*
* toggleClass(className)
* * 是在没有样式与指定样式之间切换
* * addClass()+removeClass()
*/
$("#btn4").click(function(){
$("#d1").toggleClass("one");
});
/*
* hasClass(className)
* * 判断指定元素是否含有指定样式
*/
$("#btn5").click(function(){
console.log($("#d1").hasClass("one"));
});
// css()方法的设置功能
$("#btn6").click(function(){
// 链式操作
//$("#d2").css("background","red").css("width","50").css("height","50");
$("#d2").css({
"background" : "red",
"width" : 50,
"height" : 50
});
});
</script>
</body>
</html>遍历节点
parent() - 获取指定节点的父节点
children() - 获取指定节点的所有子节点
next() - 获取指定节点的下一个兄弟节点
prev() - 获取指定节点的上一个兄弟节点
siblings() - 获取指定节点的所有兄弟节点
find(expr) - 在指定节点中查找指定内容
注意 - 查找指定节点的后代节点
例子：
<!DOCTYPE html>
<html>
<head>
<title>jQuery中的DOM-遍历节点</title>
<meta charset="utf-8" />
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京
<ul>
<li>海淀区</li>
<li>朝阳区</li>
<li>大兴区</li>
</ul>
</li>
<li id="tj" name="tianjin">天津</li>
<li id="nj" name="nanjing">南京</li>
<li id="sh" name="shanghai">上海</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<script>
// 1. 获取北京节点的父节点
//console.log($("#bj").parent().attr("id"));
// 2. 获取id为city节点的所有子节点的个数
console.log($("#city").children().length);
// 3. 获取南京节点的上一个兄弟节点和下一个兄弟节点
//console.log($("#nj").prev().attr("name"));
//console.log($("#nj").next().attr("name"));
// 4. 获取南京节点的所有兄弟节点的个数
//console.log($("#nj").siblings().length);
//console.log($("#nj~li").length);
// 5. 获取id为city节点下所有li元素的个数(后代节点)
console.log($("#city").find("li").length);
</script>
</body>
</html>创建节点
元素节点 - $(HTML代码)
文本节点 - text()
属性节点 - attr()
jQuery - $(HTML代码)
例子：
<!DOCTYPE html>
<html>
<head>
<title>jQuery中的DOM-创建节点</title>
<meta charset="utf-8" />
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="nj" name="nanjing">南京</li>
<li id="sh" name="shanghai">上海</li>
</ul>
<script>
// 为id为city节点增加<li id="cq" name="chongqing">重庆</li>
// 1. 创建<li id="cq" name="chongqing">重庆</li>
// a. 创建<li></li>
//var $li = $("<li></li>");
// b. 设置属性
//$li.attr("id","cq").attr("name","chongqing");
// c. 创建文本节点
// d. 添加文本节点
//$li.text("重庆");
//var $li = $("<li id='cq' name='chongqing'>重庆</li>");
// 2. 获取id为city节点
//var $city = $("#city");
// 3. 添加append - appendChild
//$city.append($li);
$("#city").append($("<li id='cq' name='chongqing'>重庆</li>"));
</script>
</body>
</html>删除节点* remove() - 删除自身及后代节点
* empty() - (清空)删除后代节点,但保留自身节点
例子：
<!DOCTYPE html>
<html>
<head>
<title>jQuery中的DOM-删除节点</title>
<meta charset="utf-8" />
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津
<ul>
<li>塘沽</li>
</ul>
</li>
<li id="nj" name="nanjing">南京</li>
<li id="sh" name="shanghai">上海</li>
</ul>
<script>
// 1. 删除北京节点
$("#bj").remove();
// 2. 删除天津节点
$("#tj").empty();
</script>
</body>
</html>* 插入节点
* 内部插入
* append
* prepend
* appendTo
* prependTo
* 外部插入
* before
* after
* insertBefore
* insertAfter
列子1：
<!DOCTYPE html>
<html>
<head>
<title>jQuery中的DOM-外部插入</title>
<meta charset="utf-8" />
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li id="tj">天津</li>
<li>南京</li>
</ul>
<ul id="game">
<li>反恐</li>
<li id="ms">魔兽</li>
<li>星际</li>
</ul>
<script>
// 操作天津节点和魔兽节点
// before - before后面的节点被添加到before前面的节点的前面
//$("#tj").before($("#ms"));
// after - after后面的节点被添加到after前面的节点的后面
//$("#tj").after($("#ms"));
// insertBefore
//$("#tj").insertBefore($("#ms"));
// insertAfter
//$("#tj").insertAfter($("#ms"));
</script>
</body>
</html>例子2：<!DOCTYPE html>
<html>
<head>
<title>jQuery中的DOM-内部插入</title>
<meta charset="utf-8" />
<script src="jquery-1.11.3.js"></script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li id="tj">天津</li>
<li>南京</li>
</ul>
<ul id="game">
<li>反恐</li>
<li id="ms">魔兽</li>
<li>星际</li>
</ul>
<script>
// 操作天津节点和魔兽节点
// append - append后面的节点被添加到append前面的节点的后面
//$("#tj").append($("#ms"));
// prepend - prepend后面的节点被添加到prepend前面的节点的前面
$("#tj").prepend($("#ms"));
// appendTo - appendTo前面的节点被添加到appendTo后面的节点的后面
//$("#tj").appendTo($("#ms"));
// prependTo - prependTo前面的节点被添加到prependTo后面的节点的前面
//$("#tj").prependTo($("#ms"));
</script>
</body>
</html>例子3：<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<style type="text/css">
<!--
BODY
{
font-family:"Courier";
font-size: 12px;
margin:0px 0px 0px 0px;
overflow-x:no;
overflow-y:no;
background-color: #B8D3F4;
}
td
{
font-size:12px;
}
.default_input
{
border:1px solid #666666;
height:18px;
font-size:12px;
}
.default_input2
{
border:1px solid #666666;
height:18px;
font-size:12px;
}
.nowrite_input
{
border:1px solid #849EB5;
height:18px;
font-size:12px;
background-color:#EBEAE7;
color: #9E9A9E;
}
.default_list
{
font-size:12px;
border:1px solid #849EB5;
}
.default_textarea
{
font-size:12px;
border:1px solid #849EB5;
}
.nowrite_textarea
{
border:1px solid #849EB5;
font-size:12px;
background-color:#EBEAE7;
color: #9E9A9E;
}
.wordtd5 {
font-size: 12px;
text-align: center;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #b8c4f4;
}
.wordtd {
font-size: 12px;
text-align: left;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #b8c4f4;
}
.wordtd_1 {
font-size: 12px;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #516CD6;
color:#fff;
}
.wordtd_2{
font-size: 12px;
text-align: right;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #64BDF9;
}
.wordtd_3{
font-size: 12px;
text-align: right;
vertical-align:top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #F1DD34;
}
.inputtd
{
font-size:12px;
vertical-align:top;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
.inputtd2
{
text-align: center;
font-size:12px;
vertical-align:top;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
.tablebg
{
font-size:12px;
}
.tb{
border-collapse: collapse;
border: 1px outset #999999;
background-color: #FFFFFF;
}
.td2{line-height:22px; text-align:center; background-color:#F6F6F6;}
.td3{background-color:#B8D3F4; text-align:center; line-height:20px;}
.td4{background-color:#F6F6F6;line-height:20px;}
.td5{border:#000000 solid;
border-right-width:0px;
border-left-width:0px;
border-top-width:0px;
border-bottom-width:1px;}
.tb td{
font-size: 12px;
border: 2px groove #ffffff;
}
.noborder {
border: none;
}
.button {
border: 1px ridge #ffffff;
line-height:18px;
height: 20px;
width: 45px;
padding-top: 0px;
background:#CBDAF7;
color:#000000;
font-size: 9pt;
font-family:"Courier";
}
.textarea {
font-family: Arial, Helvetica, sans-serif, "??";
font-size: 9pt;
color: #000000;
border-bottom-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #000000;
background-color:transparent;
text-align: left
}
-->
</style></head>
<body>
<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
<tr>
<td width="126">
<!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度-->
<select name="first" multiple="multiple" size=10 class="td3" id="first">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
</select>
</td>
<td width="69" valign="middle">
<input name="add" id="add" type="button" class="button" value="-->" />
<input name="add_all" id="add_all" type="button" class="button" value="==>" />
<input name="remove" id="remove" type="button" class="button" value="<--" />
<input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
</td>
<td width="127" align="left">
<select name="second" size="10" multiple="multiple" class="td3" id="second">
<option value="选项9">选项9</option>
</select>
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
// 1. 选中左边选项,移到右边去
$("#add").click(function(){
$("#first>option:selected").appendTo($("#second"));
});
// 2. 将左边所有选项,移到右边去
$("#add_all").click(function(){
$("#first>option").appendTo($("#second"));
});
$("#remove").click(function(){
$("#second>option:selected").appendTo($("#first"));
});
$("#remove_all").click(function(){
$("#second>option").appendTo($("#first"));
});
// 双击事件 - 所有事件全部绑定在select标签
$("#first").dblclick(function(){
$("#first>option:selected").appendTo($("#second"));
});
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 形似神不似，360种草App“轻选”学不来小红书
- 内容航母 YouTube 的崛起之路
- 4年积累3870万用户，得到APP做对了什么？
- JQuery1——基础（$对象，选择器，对象转换）
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- QQ商业化，如何实现从0到1的破局？
- jQuery Ajax 跨域调用
- 移动端的长按事件
- 一场改变之旅：从“自我”学习到“引路人”
- jquery教程靠边站，一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- 竞品分析 | 学堂在线 VS 中国大学MOOC，MOOC的艰难之路