前言：
前面学习了JQuery的选择器，今天开始学习新的知识，JQuery操作DOM元素。
元素属性的访问与设置
attr(name) 获取元素属性
attr(name,value) 单个属性设置
attr({key:value,key1:value1,...}) 多个属性设置
attr(name,function(index))通过函数返回的值修改属性
removeAttr(name) 删除单个属性值
元素内容的访问与设置
html() 获取元素的html内容
html(val) 修改元素的html内容
text() 获取元素的文本内容
text(val) 设置元素的文本内容
val()获取元素的值
val(value)设置元素的值
元素样式操作
css(name,value) 修改单个css样式值
addClass(class1) 增加css样式类别
toggleClass(class1)类别切换
removeClass(class1)删除类别
上面几个写个小例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style type="text/css">
#searchText {
height: 40px;
width: 200px;
}
.searchBtnNormal {
width: 100px;
height: 45px;
margin: 5px;
background-color: deepskyblue;
color: white;
font-size: 16px;
font-family: 宋体;
border: 0;
}
.searchBtnClick {
width: 100px;
height: 45px;
margin: 5px;
background-color: blue;
color: white;
font-size: 16px;
font-family: 宋体;
border: 0;
}
</style>
<script type="text/javascript">
$(function () {
$("#searchBtn").click(function () {
//获取元素属性值
alert($("#logo_icon").attr("src"));
//修改元素单个属性值
$("#logo_icon").attr("width", "135px");
//修改元素多个属性值
$("#logo_icon").attr({"width": "135px", "height": "80px"});
//通过function修改元素属性值
$("#logo_icon").attr("src", function () {
return 'http://www.hao123.com/redian/images/logo_new.gif';
});
//删除某个元素的属性值
$("#logo_icon").removeAttr("width");
//获取元素的html值
var html = $("#bottomDiv").html();
alert(html);
//修改html元素的值
// $("#bottomDiv").html(html + "<p>输入你要搜索的内容</p>");
alert($("#bottomDiv>h3").text());
$("#bottomDiv>h3").text('百度搜索天下无敌');
alert($("#searchText").val());
$("#searchText").val("");
$("#searchBtn").toggleClass("searchBtnClick");
});
});
</script>
</head>
<body>
<div>
<div align="center">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"
width="270px" height="179px" id="logo_icon">
</div>
<div align="center" id="bottomDiv">
<h3>百度搜索</h3>
<input type="text" name="search" value="" id="searchText" align="center">
<input type="button" name="search_btn" value="百度一下" id="searchBtn" class="searchBtnNormal">
</div>
</div>
</body>
</html>节点元素操作
创建节点元素
插入节点
复制节点
删除节点
替换节点
包裹节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style type="text/css">
.bandDiv {
float: left;
font-size: 15px;
}
</style>
<script type="text/javascript">
$(function () {
$("h5").click(function () {
var $jdDiv = "<div class='bandDiv' id='jd'><img src='https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/icon/95541.png' alt='品牌'>京东</div>";
//向所选择的元素中插入元素
$("#contentDiv").append($jdDiv);
//将选中元素中插入到目标元素
// $($jdDiv).appendTo("#contentDiv");
var $tbDiv = "<div class='bandDiv' id='tb'><img src='https://ss2.bdstatic.com/lfoZeXSm1A5BphGlnYG/icon/10062.png' alt='品牌'>淘宝</div>";
//向所选择的元素中最前面插入元素
$("#contentDiv").prepend($tbDiv);
//将选中元素中插入到目标元素最前面
// $($tbDiv).prependTo("#contentDiv");
var $nmDiv = "<div class='bandDiv' id='nm'><img src='https://ss3.bdstatic.com/lPoZeXSm1A5BphGlnYG/icon/9483.png' alt='品牌'>糯米</div>";
//向所选择的元素外部后面插入元素
$("#tb").after($nmDiv);
var $ddDiv = "<div class='bandDiv' id='dd'><img src='https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/icon/95517.png' alt='品牌'>当当</div>";
//向所选择的元素外部前面插入元素
$("#tb").before($ddDiv);
//每个被选元素后面插入一个已有元素
$("#tb").insertBefore($("#jd"));
// 每个被选元素前面插入一个已有元素
$("#nm").insertAfter($("#tb"));
//复制节点
var $vp = $("#tb").clone(true).attr({"id": "vp"});
$("#nm").before($vp);
$("#vp >img").attr("src", "https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/icon/95693.png");
//替换节点
$("#vp").replaceWith("<div class='bandDiv' id='vp'><img src='https://ss1.bdstatic.com/lvoZeXSm1A5BphGlnYG/icon/95517.png' alt='品牌'>唯品会</div>");
//所有选择的元素用加粗包裹起来
$("#contentDiv >div").wrap("<b></b>");
//遍历元素
$("#vp").each(function () {
$("#vp >img").attr("src", "https://ss1.bdstatic.com/kvoZeXSm1A5BphGlnYG/icon/93289.png");
});
//删除节点
$("#nm").remove();
});
});
</script>
</head>
<body>
<div>
<h5>动态添加元素</h5>
<div id="contentDiv">
</div>
</div>
</body>
</html>总结：
今天简单学习使用了一下JQuery操作DOM元素的一些语法。
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦