您的位置：首页 > Web前端 > JQuery

讲给后台程序员看的前端系列教程(59)——jQuery DOM操作

2019-10-21 21:53 411 查看

C语言自学完备手册(33篇)

Android多分辨率适配框架

JavaWeb核心技术系列教程

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)

版权声明

  • 本文原创作者：谷哥的小弟
  • 作者博客地址：http://blog.csdn.net/lfdfhl

在本节教程中，我们重点关注jQuery中的DOM操作。

获取和设置元素内容

常用方法及其作用如下:

html( )
获取和设置元素的标签体内容并保留原格式。

text( )
获取和设置元素的标签体纯文本内容。

val( )
获取和设置元素的value属性值。

示 例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>获取和设置元素内容</title>
<!--引入jquery文件 -->
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
//获取input元素value属性的值
var value=$("#inputid").val();
console.log("value="+value);
//设置input标签value属性的值
$("#inputid").val("tom");
value=$("#inputid").val();
console.log("value="+value);

//获取div元素内容
var htmlContext=$("#divid").html();
console.log("htmlContext="+htmlContext);
//设置div元素内容
$("#divid").html("<p>hello jQuery</p>");
htmlContext=$("#divid").html();
console.log("htmlContext="+htmlContext);

//获取div元素纯文本
var textContext=$("#divid").text();
console.log("textContext="+textContext);
//设置div元素纯文本
$("#divid").text("bye JavaScript");
textContext=$("#divid").text();
console.log("textContext="+textContext);
});
</script>
</head>
<body>
<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
<h2 id="blog" style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
<input id="inputid" type="text" name="username" value="lucy" /><br />
<div id="divid"><p><a href="#">内容</a></p></div>
</body>
</html>

操作元素属性

关于操作元素属性，我们分为两部分讲解：先学习对于通用属性的操作再学习对于class属性的操作

操作元素通用属性

常用方法及其作用如下：

attr( )
获取和设置元素的属性

removeAttr( )
删除元素属性

prop( )
获取和设置元素的属性

removeProp( )
删除元素属性

attr( )和removeAttr( )与prop( )和removeProp( )的区别

  • 操作元素的HTML原始自带属性时建议使用prop( )和removeProp( )
  • 操作元素的自定义属性时建议使用attr( )和removeAttr( )

示 例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>操作元素通用属性</title>
<!--引入jquery文件 -->
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
//获取bj节点的cityname属性的值
var citynameValue = $("#bj").attr("cityname");
console.log("citynameValue=" + citynameValue);
//设置bj节点的cityname属性的值
$("#bj").attr("cityname", "capital");
citynameValue = $("#bj").attr("cityname");
console.log("citynameValue=" + citynameValue);
//为bj节点新增discription属性,属性值是beautiful city
$("#bj").attr("discription", "beautiful city");
var discriptionValue = $("#bj").attr("discription");
console.log("discriptionValue=" + discriptionValue);
//删除bj节点的discription属性
$("#bj").removeAttr("discription");

//获得agree节点的HTML自带属性checked
var isChecked = $("#agree").prop("checked");
console.log("isChecked=" + isChecked);
//设置agree节点的HTML自带属性checked
$("#agree").prop("checked", "true");
isChecked = $("#agree").prop("checked");
console.log("isChecked=" + isChecked);
});
</script>
</head>
<body>
<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
<h2 id="blog" style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
<ul>
<li id="bj" cityname="beijing">北京</li>
<li id="cd" cityname="chengdu">成都</li>
</ul>
<input id="agree" type="checkbox" /> Yes , I agree

</body>
</html>

操作元素class属性

常用方法及其作用如下：

addClass( )
为元素添加class属性

removeClass( )
删除元素的class属性值

toggleClass( )
切换元素的class属性。调用该方法后如果元素本身存在class属性则将其移出，如果元素本身不存在class属性则添加。

示 例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>操作元素class属性</title>
<!--引入jquery文件 -->
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div{
width: 200px;
height: 200px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}

.divstyle{
width: 300px;
height: 300px;
margin: 20px;
background: yellow;
border: pink 3px dotted;
float:left;
font-size: 22px;
font-family:Roman;
}
</style>

<script type="text/javascript">
$(function() {
$("#firstButton").click(function () {
$("#one").prop("class","divstyle");
});
$("#secondButton").click(function () {
$("#one").addClass("divstyle");
});
$("#thirdButton").click(function () {
$("#one").removeClass("divstyle");
});
$("#fourthButton").click(function () {
$("#one").toggleClass("divstyle");
});
$("#fifthButton").click(function () {
var backgroundColorValue = $("#one").css("backgroundColor");
alert("backgroundColorValue="+backgroundColorValue);
});
$("#sixthButton").click(function () {
$("#one").css("backgroundColor","red");
});

});
</script>
</head>
<body>
<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
<h2 id="blog" style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
<input type="button" value="通过prop()添加属性为id为one的元素增加样式" id="firstButton" />
<br />
<input type="button" value="通过addClass()添加属性为id为one的元素增加样式" id="secondButton" />
<br />
<input type="button" value="通过removeClass()移出id为one的元素的样式" id="thirdButton" />
<br />
<input type="button" value="通过toggleClass()切换id为one的元素的样式" id="fourthButton" />
<br />
<input type="button" value="通过css()获得id为one背景颜色" id="fifthButton" />
<br />
<input type="button" value="通过css()设置id为one背景颜色为红色" id="sixthButton" />
<br /><br />
<div id="one" title="title1">
id为one的div
</div>
</body>
</html>

DOM常见操作

常用方法及其作用如下：

append( )
父元素将子元素追加至自身末尾。

例如：A.append(B)

<A>
....
<B></B>
<A>

prepend( )
父元素将子元素追加至自身开头

例如：A.prepend(B)

<A>
<B></B>
....
<A>

appendTo( )
父元素将子元素追加至自身末尾。

例如：A.appendTo(B)

<B>
....
<A></A>
<B>

prependTo( )
父元素将子元素追加至自身开头。

例如：A.prependTo(B)

<B>
<A></A>
....
<B>

after( )
添加元素到自身后面

例如：A.after(B)

<A></A>
<B></B>

before( )
添加元素到自身前面

例如：A.before(B)

<B></B>
<A></A>

insertAfter( )
添加元素到自身后面

例如：A.insertAfter(B)

<B></B>
<A></A>

insertBefore( )
添加元素到自身前面

例如：A.insertBefore(B)

<A></A>
<B></B>

remove( )
移除元素

empty( )
清空元素的所有后代元素，但保留当前对象及其属性节点

示 例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DOM常用操作</title>
<!--引入jquery文件 -->
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$("#firstButton").click(function() {
//$("#city").append($("#ql"));
$("#ql").appendTo($("#city"));
});
$("#secondButton").click(function() {
//$("#city").prepend($("#ql"));
$("#ql").prependTo("#city");
});
$("#thirdButton").click(function() {
//$("#cd").after($("#ql"));
$("#ql").insertAfter($("#cd"));
});
$("#fourthButton").click(function() {
//$("#cd").before($("#ql"));
$("#ql").insertBefore($("#cd"));
});
$("#fifthButton").click(function() {
$("#bj").remove();
});
$("#sixthButton").click(function() {
var sy=$("<li id='bj' name='sanya'>三亚</li>");
sy.appendTo($("#city"));
});$("#seventhButton").click(function() {
$("#city").empty();
});
});
</script>
</head>
<body>
<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
<h2 id="blog" style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
<input type="button" value="将晴朗放置到city最后面" id="firstButton" />
<input type="button" value="将晴朗放置到city最前面" id="secondButton" />
<input type="button" value="将晴朗插入到成都后面" id="thirdButton" />
<input type="button" value="将晴朗插入到成都前面" id="fourthButton" />
<input type="button" value="删除北京节点" id="fifthButton" />
<input type="button" value="增加三亚节点" id="sixthButton" />
<input type="button" value="删除城市的子节点" id="seventhButton" />

<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="cd" name="chengdu">成都</li>
<li id="bd" name="baoding">保定</li>
</ul>

<ul id="weather">
<li id="ql" name="sunny">晴朗</li>
<li id="xy" name="sprinkle">小雨</li>
<li id="dy" name="cloudy">多云</li>
</ul>

</body>
</html>

在本示例中，在增加三亚节点的操作过程中：

$("#sixthButton").click(function() {
var sy=$("<li id='bj' name='sanya'>三亚</li>");
sy.appendTo($("#city"));
});

请注意单引号与双引号的嵌套，一般说：单引号中嵌套双引号或者双引号中嵌套单引号。

谷哥的小弟 博客专家 原创文章 1028获赞 2010访问量 243万+ 关注 他的留言板
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航