共计 7010 个字符,预计需要花费 18 分钟才能阅读完成。
如需要跟多资料请点击下方图片⬇(扫码加好友→备注 66)
Jquery Dom 操作
jQuery 也提供了对 HTML 节点的操作,而且在原生 js 的基础之上进行了优化,使用起来更加方便。
常用的从几个方面来操作,查找元素(选择器已经实现);创建节点对象;访问和设置节点对象的值,以及属性;添加节点;删除节点;删除、添加、修改、设定节点的 CSS 样式等。<font color=”red”> 注意:以下的操作方式只适用于 jQuery 对象。</font>
操作元素的属性
获取属性
方法 | 说明 | 举例 |
---|---|---|
attr(属性名称) | 获取指定的属性值,操作 checkbox 时, 选中返回 checked,没有选中返回 undefined。 |
attr(‘checked’) attr(‘name’) |
prop(属性名称) | 获取具有 true 和 false 两个属性的属性值 | prop(‘checked’) |
<form action=""id="myform">
<input type="checkbox" name="ch" checked="checked"/> aa
<input type="checkbox" name="ch" /> bb
</form>
<script type="text/javascript">
var ch = $("input[type='checkbox']")
console.log(ch)
ch.each(function(idx, em){console.log(idx + "-" + $(em) + "=" + this)
console.log($(em).attr('checked') + "==" + $(em).prop('checked'))
console.log('--------------')
})
</script>
设置属性
方法 | 说明 | 举例 |
---|---|---|
attr(属性名称,属性值) | 设置指定的属性值, 操作 checkbox 时, 选中返回 checked, 没有选中返回 undefined。 |
attr(‘checked’,’checked’) attr(‘name’,’zs’) |
prop(属性名称,属性值) | 设置具有 true 和 false 的属性值 | prop(‘checked’,’true’) |
移除属性
方法 | 说明 | 举例 |
---|---|---|
removeAttr(属性名) | 移除指定的属性 | removeAttr(‘checked’) |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 属性操作 </title>
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
</head>
<body>
<pre>
<h5>1.attr()</h5>
设置或者返回元素的属性 ;
<h5>2.prop()</h5>
设置 具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled。</pre>
<hr />
<a href="http://www.baidu.com" id="a1"> 百度 </a>
<a href="http://www.sina.com" id="a2"> 新浪 </a>
<input type="checkbox" name="all" checked="checked"/> 全选
</body>
<script type="text/javascript">
// 获取属性值:attr
console.log($('#a1').attr('href'));
console.log($(':checkbox').attr('name'));
// 若未选中显示 undefined,选中显示 checked
console.log($(':checkbox').attr('checked'));
// 获取属性值:prop
// 若未选中显示 false,选中显示 true
console.log($(":checkbox").prop('checked'));
console.log($('#a2').prop('href'))
// 设置属性值
$('#a1').attr('href','https://jquery.com');
$(":checkbox").prop("checked",false);
// 移除属性
$('#a2').removeAttr('href');
</script>
</html>
操作元素的样式
对于元素的样式,也是一种属性,由于样式用得特别多,所以对于样式除了当做属性处理外还可以有专门的方法进行处理。
方法 | 说明 |
---|---|
attr(“class”) | 获取 class 属性的值,即样式名称 |
attr(“class”,”样式名”) | 修改 class 属性的值,修改样式 |
addClass(“样式名”) | 添加样式名称 |
css() | 添加具体的样式 |
removeClass(class) | 移除样式名称 |
增加元素的具体样式,格式:
1)css({‘样式名’:’样式值’,’样式名 2’:’样式值 2’})
例:css({"background-color":"red","color":"#fff"});
2)css(“样式名”,”样式值”)
例:css('color','white')
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 设置元素样式 </title>
<script src="jquery-3.4.1.js" type="text/javascript" ></script>
<style type="text/css">
div{
padding: 8px;
width: 180px;
}
.blue{background: blue;}
.larger{font-size: 30px;}
.green {background : green;}
</style>
</head>
<body>
<h3>css() 方法设置元素样式 </h3>
<div id="conBlue" class="blue larger"> 天蓝色 </div>
<div id="conRed"> 大红色 </div>
<div id="remove" class="blue larger"> 天蓝色 </div>
</body>
<script type="text/javascript">
// 获取样式名称
console.log($("#remove").attr("class"));
// 修改样式,那么 id 为 remove 的元素样式 class 只有 green
// $('#remove').attr("class","green")
// 添加样式名称,class 名称 -- 叠加
// $('#conBlue').addClass("blue larger");
// 添加元素具体样式
// {"":"" , "":""} 名: 值 对
$('#conRed').css({"background-color":"red","color":"#fff"});
$('#remove').css('color','red');
// 移除样式
// $("#remove").removeClass("blue larger");
</script>
</html>
操作元素的内容
对于元素还可以操作其中的内容,例如文本,值,甚至是 html。
方法 | 说明 |
---|---|
html() | 获取元素的 html 内容 |
html(“html, 内容 ”) | 设定元素的 html 内容 |
text() | 获取元素的文本内容,不包含 html |
text(“text 内容 ”) | 设置元素的文本内容,不包含 html |
val() | 获取元素 value 值 |
val(‘值’) | 设定元素的 value 值 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 操作内容 </title>
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
</head>
<body>
<h3><span>html() 和 text() 方法设置元素内容 </span></h3>
<div id="html"></div>
<div id="text"></div>
<input type="text" name="uname" value="oop" />
</body>
<script type="text/javascript">
// 获取 HTML 内容,包括 HTML 标签
console.log($('h3').html());
// 获取文本内容,不包括 HTML 标签
console.log($('h3').text());
// 获取 value 值
console.log($('[name=uname]').val());
// 设置
$('#html').html("<p> 使用 html 设置, 看不到标签 </p>");
$('#text').text("<p> 使用 text 设置, 能看到标签 </p>");
$('[name=uname]').val("哈哈哈");
// console.info("abc");
// console.log("abc");
// console.warn("abc")
// console.error("abc");
</script>
</html>
创建元素
在 jQuery 中创建元素很简单,直接使用核心函数即可
$(‘元素内容’);
$('<p>this is a paragraph!!!</p>');
添加元素
方法 | 说明 |
---|---|
prepend(content) | 在被选元素内部的开头插入元素或内容,被追加的 content 参数,可以是字符、HTML 元素标记。 |
$(content).prependTo(selector) | 把 content 元素或内容加入 selector 元素开头 |
append(content) | 在被选元素内部的结尾插入元素或内容,被追加的 content 参数,可以是字符、HTML 元素标记。 |
$(content).appendTo(selector) | 把 content 元素或内容插入 selector 元素内,默认是在尾部 |
before() | 在元素前插入指定的元素或内容:$(selector).before(content) |
after() | 在元素后插入指定的元素或内容:$(selector).after(content) |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 追加 </title>
<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
div {margin: 10px 0px;}
span{
color: white;
padding: 8px
}
.red{background-color: red;}
.blue{background-color: blue;}
.green{background-color: green;}
</style>
</head>
<body>
<h3>prepend() 方法前追加内容 </h3>
<h3>prependTo() 方法前追加内容 </h3>
<h3>append() 方法后追加内容 </h3>
<h3>appendTo() 方法后追加内容 </h3>
<span class="red"> 男神 </span>
<span class="blue"> 偶像 </span>
<div class="green">
<span > 小鲜肉 </span>
</div>
</body>
</html>
<script type="text/javascript">
var str ="<span id='mydiv'style='padding: 8px;width: 180px;background-color:#ADFF2F;'> 动态创建 span</span>";
// 1、使用 prepend 前加内容
$("body").prepend(str);
// 2、使用 prependTo 前加内容
$("<b> 开头 </b>").prependTo('body');
// 3、使用 append 后加内容
$("body").append(str);
// $("div").append($('.red')); // 当把已存在的元素添加到另一处的时候相当于移动
// 4、使用 appendTo 后追加内容
$(str).appendTo('body');
// $('.blue').appendTo("div");
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 插入元素 </title>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
span{
color: white;
padding: 8px
}
.red{background-color: red;}
.blue{background-color: blue;}
.green{background-color: green;}
</style>
</head>
<body>
<h3>before() 和 after() 方法在元素之前后插入内容 </h3>
<span class="green"> 财大气粗 </span>
</body>
</html>
<script type="text/javascript">
var str1 = "<span class='red'> 土豪 </span>";
var str2 = "<span class='blue'> 暴发户 </span>";
$(".green").before(str1); // 前置元素
$(".green").after(str2); // 后存元素
</script>
删除元素
方法 | 说明 |
---|---|
remove() | 删除所选元素或指定的子元素,包括整个标签和内容一起删。 |
empty() | 清空所选元素的内容 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 删除元素 </title>
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
<style type="text/css">
span{
color: white;
padding: 8px;
margin: 5px;
float: left;
}
.green{background-color: green;}
.blue{background-color: blue;}
</style>
</head>
<body>
<h3> 删除元素 </h3>
<span class="green">jquery<a> 删除 </a></span>
<span class="blue">javase</span>
<span class="green">http 协议 </span>
<span class="blue">servlet</span>
</body>
</html>
<script type="text/javascript">
// 删除所选元素 或指定的子元素
// $("span").remove();
// 删除样式为 blue 的 span
// $("span.blue").remove();
// 清空元素
// $("span").empty();
// $(".green").empty();
</script>
遍历元素
each()
$(selector).each(function(index,element)) : 遍历元素
参数 function 为遍历时的回调函数,
index 为遍历元素的序列号,从 0 开始。
element 是当前的元素,此时是 dom 元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 遍历元素 </title>
<style type="text/css">
span{
color: white;
padding: 8px;
margin: 5px;
float: left;
}
.green{background-color: green;}
.blue{background-color: blue;}
</style>
<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h3> 遍历元素 each()</h3>
<span class="green">jquery</span>
<span class="green">javase</span>
<span class="green">http 协议 </span>
<span class="green">servlet</span>
</body>
<script type="text/javascript">
$('span').each(function (idx , e) {console.log(idx + "--->" + $(e).text());
})
</script>
</html>
正文完