JQuery操作与遍历元素并设置其属性、样式和内容
作者：農碼一生
本文详细讲解了JQuery操作与遍历元素并设置其属性、样式和内容的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
一、操作属性
属性分类
固有属性
href、src.....
共有属性
id,class,name......
自定义属性
abc= '1234'
操作属性的方法
区别
1.prop不能操作自定义属性
2.prop获取Boolean类型的属性是 true/false
获取属性值
attr(属性名称) 操作 checkbox 时， 获取指定的属性值,选中返回 checked，没有选中返回 undefined
op(属性名称) 获取具有true和false两个属性的属性值
设置属性值
attr(属性名称,属性值);
prop(属性名称,属性值);
移除属性
removeAttr("属性")
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form action="" id="myform">
<input type="checkbox" id="ch1" name="ch1" abc='123' checked="checked"/> aa
<input type="checkbox" id="ch2" name="ch2" abc='456'/> bb
</form>
<script type="text/javascript">
var ch1 = $("#ch1");
var ch2 = $("#ch2");
//获取固有属性
console.log(ch1.attr('type'));
console.log(ch1.prop('type'));
//获取共有属性
console.log(ch1.attr('name'));
console.log(ch2.prop('name'));
//获取自定义属性 prop不能操作自定义属性
console.log(ch1.attr('abc'));
console.log(ch2.prop('abc'));//undefined
//获取boolean类型的属性
console.log(ch1.attr('checked'));//checked
console.log(ch1.prop('checked'));//true
//设置boolean类型属性
ch1.attr("checked",0);
ch2.attr("checked","checked");
//效果相同
ch1.prop("checked",false);
ch2.prop("checked",true);
//设置自定义属性
ch1.attr("abc",'999');
//prop不能操作自定义属性
ch2.prop("abc",'999'); //---设置无效
//设置共有属性
ch1.attr("name",'ab1');
ch2.prop("name",'ab1');
//移除属性
ch1.removeAttr("checked");//boolen类型
ch1.removeAttr("abc");//自定义属性
ch1.removeAttr("name");//共有属性
ch1.removeAttr("type");//独有属性
</script>
</body>
</html>二、操作样式
- attr(“class”) 获取class属性的值，即样式名称
- attr(“class”,”样式名”) 修改class属性的值，修改样式
- addClass(“样式名”) 添加样式名称
- css() 添加具体的样式 相当于直接设置行内style
- removeClass(class) 移除样式名称
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></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>
<script type="text/javascript">
//获取class属性的值，即样式名称
var clas = $("#conBlue").attr("class");
console.log(clas);
//修改class属性的值，修改样式
$("#conBlue").attr("class","green");//把字体的大小样式和颜色均覆盖
//addClass(“样式名”) 添加样式名称
$("#conRed").addClass("larger");
//css()
$("#conRed").css("color","red");
//removeClass(class) 移除样式名称
$("#remove").removeClass("larger");
</script>
</body>
</html>三、操作元素内容
html()
获取或设置元素的内容，包含html内容 可以识别纯文本内容
取值：html()
赋值：html("html,内容")
text()
获取或设置元素的内容，不包含html内容 只能识别纯文本内容
取值：text()
赋值：text("html,内容")
val()
获取或设置元素的值
取值:val()
赋值:val(‘值’)
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h3><span>html()和text()方法设置元素内容</span></h3>
<div id="html"></div>
<div id="text"></div>
<input type="text" name="uname" value="oop" />
<script type="text/javascript">
//获取元素的内容
var ht = $("h3").html();
var te = $("h3").text();
console.log(ht);
console.log(te);
//设置元素内容
$("#html").html("<b>加粗效果</b>");
$("#text").text("<b>text加粗效果</b>");
//val() 获取元素值
var input = $('[type="text"]').val();
console.log(input);
//val() 设置元素值
$('[type="text"]').val("jquery");
</script>
</body>
</html>四、创建和添加元素
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)
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.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>
<span class="red">男神</span>
<span class="blue">偶像</span>
<div class="green">
<span >小鲜肉</span>
</div>
<script type="text/javascript">
//创建元素
var newP = $("<span>段落标签</span>");
console.log(newP);
//添加元素 prepend(content) 内部前追加
//获取参考位置的元素
var str = "<span>PDD</span>";
$('.green').prepend(newP);
$('.green').prepend(str);
//prependTo(); 被内部前追加
var str2 = "<span>麻辣香锅</span>";
$(str2).prependTo($(".green"));
//append() 内部后追加
$('.green').append("<span >周杰伦</span>");
//appendTo(); 被内部后追加
$("<span >林俊杰</span>").appendTo($('.green'));
//before 同级前追加
$(".red").before("<span style='color:black'>薛之谦</span>");
//after 同级后追加
$(".blue").after("<span style='color:black'>李荣浩</span>");
</script>
</body>
</html>五、删除元素
remove()
删除所选元素或指定的子元素，包括整个标签和内容一起删
empty()
清空所选元素的内容
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></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>
<script type="text/javascript">
//删除
//$(".green").remove();
//清空
$(".green").empty();
</script>
</body>
</html>六、遍历元素
格式：
$("值").each(function(index,element){
});
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style type="text/css">
span{
color: white;
padding: 8px;
margin: 5px;
float: left;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
</style>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<h3>遍历元素 each()</h3>
<span class="green">jquery</span>
<span class="green">javase</span>
<span class="green">http协议</span>
<span class="green">servlet</span>
<script type="text/javascript">
$(".green").each(function(index,ele){
//当前元素的索引位置
console.log(index);
//获取当前 dom 对象
console.log(ele);
console.log(this);
//统一设置样式需要用jquery对象
$(ele).attr("class","blue");
});
</script>
</body>
</html>到此这篇关于JQuery操作和遍历元素的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。