全新web前端开发教程之Jquery Dom操作
jQuery也提供了对HTML节点的操作，而且在原生js的基础之上进行了优化，使用起来更加方便。
常用的从几个方面来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的CSS样式等。注意：以下的操作方式只适用于jQuery对象。
一、操作元素的属性
1、获取属性
<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>2、设置属性
3、移除属性
<!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>二、操作元素的样式
对于元素的样式，也是一种属性，由于样式用得特别多，所以对于样式除了当做属性处理外还可以有专门的方法进行处理。
增加元素的具体样式，格式：
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。
<!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>1、创建元素
在jQuery中创建元素很简单，直接使用核心函数即可
$(‘元素内容’);$('<p>this is a paragraph!!!</p>');2、添加元素
<!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>3、删除元素
<!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>4、遍历元素
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>本文是全套java入门到架构师教程之前端开发部分-jQuery的教学文档，如需全套java入门道架构师教程请留言或私信
请先 后发表评论～